/* ==========================================================================
   mikebon.store Design System
   Single source of truth for tokens, base styles, shared components, and
   Bootstrap 5 overrides used across login, customer order, and admin surfaces.
   Full usage guide: docs/design-system.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --brand-primary: #1A824A;
  --brand-primary-hover: #136236;
  --brand-primary-soft: rgba(26, 130, 74, 0.08);
  --brand-primary-ring: rgba(26, 130, 74, 0.22);

  /* Surfaces */
  --bg-page: #EDF0E8;
  --bg-surface: #FFFFFF;
  --bg-surface-muted: #F6F5F2;
  --bg-surface-hover: #F9FAFB;

  /* Borders */
  --border-default: rgba(105, 95, 89, 0.18);
  --border-strong: rgba(105, 95, 89, 0.55);
  --border-subtle: #E5E7EB;

  /* Text */
  --text-primary: #1F1B17;
  --text-secondary: #695F59;
  --text-muted: rgba(105, 95, 89, 0.75);
  --text-on-brand: #FFFFFF;

  /* Status */
  --status-danger: #D64545;
  --status-danger-soft: rgba(214, 69, 69, 0.12);
  --status-warning: #E2A43A;
  --status-warning-soft: rgba(226, 164, 58, 0.15);
  --status-success: #1A824A;
  --status-success-soft: rgba(26, 130, 74, 0.15);
  --status-info: #3B7AA6;
  --status-info-soft: rgba(59, 122, 166, 0.12);

  /* Legacy accent */
  --accent-kids: #EC4899;
  --accent-organize: #8B5A2B;

  /* Overlays */
  --overlay-scrim: rgba(31, 27, 23, 0.55);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', 'Menlo', monospace;

  --font-size-xs: 0.7rem;
  --font-size-sm: 0.8125rem;
  --font-size-base: 0.9375rem;
  --font-size-md: 1.0625rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;

  --tracking-wide: 0.05em;
  --tracking-tight: -0.02em;
  --leading-body: 1.5;
  --leading-tight: 1.3;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(31, 27, 23, 0.05);
  --shadow-md: 0 6px 18px rgba(31, 27, 23, 0.08);
  --shadow-lg: 0 12px 32px rgba(31, 27, 23, 0.12);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease-out;
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   3. Base resets & typography
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--text-primary);
  line-height: var(--leading-tight);
}

a {
  color: var(--brand-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--brand-primary-hover);
}

::selection {
  background: var(--brand-primary-soft);
  color: var(--text-primary);
}

/* Global scrollbar (WebKit) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(105, 95, 89, 0.25);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(105, 95, 89, 0.45);
}

/* --------------------------------------------------------------------------
   4. Utilities
   -------------------------------------------------------------------------- */
.font-mono { font-family: var(--font-mono); }
.font-sans { font-family: var(--font-sans); }

.label-upper {
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.text-primary-strong { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted-token { color: var(--text-muted); }
.text-brand { color: var(--brand-primary); }
.text-danger-token { color: var(--status-danger); }

.surface { background: var(--bg-surface); }
.surface-muted { background: var(--bg-surface-muted); }

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

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   5. Buttons (shared + Bootstrap override)
   -------------------------------------------------------------------------- */
.btn,
button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast),
              box-shadow var(--transition-fast),
              transform var(--transition-fast);
  box-shadow: none;
  text-decoration: none;
  white-space: nowrap;
}

.btn:focus,
.btn:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  box-shadow: none;
}

.btn:disabled,
.btn.is-disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-sm {
  padding: 6px 12px;
  font-size: var(--font-size-xs);
}

.btn-lg {
  padding: 14px 22px;
  font-size: var(--font-size-base);
}

/* Primary */
.btn-primary,
.btn.btn-primary {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--text-on-brand);
}

.btn-primary:hover,
.btn.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:focus {
  background-color: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
  color: var(--text-on-brand);
}

.btn-primary:active,
.btn.btn-primary:active {
  background-color: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
  color: var(--text-on-brand);
  transform: translateY(1px);
}

/* Secondary (outline warm-brown) */
.btn-secondary,
.btn.btn-secondary,
.btn-outline-secondary,
.btn.btn-outline-secondary {
  background-color: transparent;
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.btn-secondary:hover,
.btn.btn-secondary:hover,
.btn-outline-secondary:hover,
.btn.btn-outline-secondary:hover {
  background-color: var(--bg-surface-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

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

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

/* Danger */
.btn-danger,
.btn.btn-danger {
  background-color: transparent;
  border-color: var(--status-danger);
  color: var(--status-danger);
}

.btn-danger:hover,
.btn.btn-danger:hover {
  background-color: var(--status-danger-soft);
  border-color: var(--status-danger);
  color: var(--status-danger);
}

.btn-danger.is-filled {
  background-color: var(--status-danger);
  color: var(--text-on-brand);
}

.btn-danger.is-filled:hover {
  background-color: #B83A3A;
  border-color: #B83A3A;
  color: var(--text-on-brand);
}

/* Bootstrap's .btn-close override (modal close icons) */
.btn-close {
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}

.btn-close:hover,
.btn-close:focus {
  opacity: 1;
  box-shadow: none;
}

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

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

.form-label.label-upper,
label.form-label.label-upper {
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.form-control,
input.form-control,
textarea.form-control,
select.form-control,
select.form-select {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  line-height: 1.4;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              background-color var(--transition-fast);
  box-shadow: none;
}

.form-control::placeholder,
input.form-control::placeholder,
textarea.form-control::placeholder {
  color: var(--text-muted);
}

.form-control:focus,
input.form-control:focus,
textarea.form-control:focus,
select.form-control:focus,
select.form-select:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-ring);
  background: var(--bg-surface);
}

.form-control:disabled,
.form-control[readonly] {
  background: var(--bg-surface-muted);
  opacity: 0.7;
  cursor: not-allowed;
}

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

/* Invalid / validation */
.form-control.is-invalid,
input.form-control.is-invalid {
  border-color: var(--status-danger);
}
.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px var(--status-danger-soft);
}
.invalid-feedback {
  color: var(--status-danger);
  font-size: var(--font-size-xs);
  margin-top: var(--space-1);
}

/* Checkbox / radio accent */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--brand-primary);
}

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-base),
              transform var(--transition-base);
}

.card.is-interactive:hover {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.card.is-muted {
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   8. Chips / pills
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast),
              transform var(--transition-fast);
}

.chip:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-strong);
}

.chip.is-active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--text-on-brand);
}

.chip.is-active:hover {
  background: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
}

/* --------------------------------------------------------------------------
   9. Badges & tags
   -------------------------------------------------------------------------- */
.badge,
span.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: var(--bg-surface-muted);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  font-weight: 700;
  line-height: 1;
}

.badge.is-brand,
span.badge.is-brand {
  background: var(--brand-primary);
  color: var(--text-on-brand);
}

.badge.is-danger {
  background: var(--status-danger-soft);
  color: var(--status-danger);
}

.badge.is-warning {
  background: var(--status-warning-soft);
  color: var(--status-warning);
}

.badge.is-success {
  background: var(--status-success-soft);
  color: var(--status-success);
}

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-surface-muted);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: 1.4;
}

.tag.tag-kids {
  background: var(--accent-kids);
  color: var(--text-on-brand);
}

.tag.tag-danger {
  background: var(--status-danger-soft);
  color: var(--status-danger);
}

.tag.tag-warning {
  background: var(--status-warning-soft);
  color: var(--status-warning);
}

/* --------------------------------------------------------------------------
   10. Bootstrap 5 overrides (used by order.html + admin modals)
   -------------------------------------------------------------------------- */

/* Modal */
.modal-content {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
}

.modal-header {
  border-bottom: 1px solid var(--border-default);
  padding: var(--space-4) var(--space-5);
}

.modal-title {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--text-primary);
}

.modal-footer {
  border-top: 1px solid var(--border-default);
  padding: var(--space-3) var(--space-5);
  gap: var(--space-2);
}

.modal-backdrop,
.modal-backdrop.show {
  background: var(--overlay-scrim);
  opacity: 1 !important;
  backdrop-filter: blur(2px);
}

/* Dropdown */
.dropdown-menu {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}

.dropdown-item {
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  color: var(--text-primary);
  transition: background-color var(--transition-fast);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
}

.dropdown-divider {
  border-top: 1px solid var(--border-default);
  margin: var(--space-1) 0;
}

/* Table (Bootstrap .table, used lightly in customer modals) */
.table {
  width: 100%;
  color: var(--text-primary);
  background: transparent;
  border-color: var(--border-default);
  vertical-align: middle;
}

.table > :not(caption) > * > * {
  border-bottom-color: var(--border-default);
}

.table thead {
  background: var(--bg-surface-muted);
}

.table thead th {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-default);
}

.table-danger,
.table-danger > * {
  background-color: var(--status-danger-soft) !important;
  color: var(--status-danger) !important;
}

/* Bootstrap `.input-group` */
.input-group .btn,
.input-group .form-control {
  box-shadow: none;
}

.input-group .btn-outline-secondary {
  border-color: var(--border-default);
  color: var(--text-secondary);
  background: var(--bg-surface);
}

.input-group .btn-outline-secondary:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

/* Bootstrap `.bg-*` warning badges used by order.js */
.badge.bg-warning,
span.badge.bg-warning {
  background: var(--status-warning) !important;
  color: var(--text-primary);
}

.badge.bg-success {
  background: var(--brand-primary) !important;
  color: var(--text-on-brand);
}

.badge.bg-danger {
  background: var(--status-danger) !important;
  color: var(--text-on-brand);
}

/* --------------------------------------------------------------------------
   11. Toast (shared)
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
  z-index: 2000;
  animation: toastIn 0.3s ease-out;
}

/* Bootstrap toasts are rendered inside a .toast-container that already
   handles fixed positioning (e.g. bottom-center on the customer page).
   Reset the standalone .toast positioning so the container can place it. */
.toast-container .toast {
  position: static;
  right: auto;
  bottom: auto;
}

.toast.success {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.toast.error {
  border-color: var(--status-danger);
  color: var(--status-danger);
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   12. Focus-visible safety net
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  outline: none;
}