/* =============================================
   MÁRÊ — Components v1.0
   ============================================= */

/* ---- Numeric display font (DM Sans) ---- */
.stat-value,
.order-total,
.table-grand-value,
.client-total,
.order-item-price,
.badge,
.orders-count-badge {
  font-family: 'DM Sans', sans-serif !important;
}

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

/* ---- Prevent iOS auto-zoom on input focus ---- */
input:not([type="hidden"]),
select,
textarea {
  font-size: 16px !important;
}

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---- Buttons ---- */
.btn {
  font-family: var(--font-display);
  font-weight: 700;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-md);
  min-height: 48px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity .15s, transform .1s;
  text-decoration: none;
  white-space: nowrap;
  font-size: 15px;
}
.btn:active { opacity: .8; transform: scale(0.98); }
.btn-primary  { background: var(--primary-500); color: #fff; }
.btn-accent   { background: var(--accent-500);  color: #fff; }
.btn-dark     { background: var(--primary-900); color: #fff; }
.btn-outline  { background: transparent; color: var(--primary-500); border: 1.5px solid var(--primary-500); }
.btn-ghost    { background: var(--primary-50);  color: var(--primary-700); }
.btn-danger   { background: var(--danger);      color: #fff; }
.btn-full     { width: 100%; }
.btn-sm       { min-height: 38px; font-size: 13px; padding: 0 16px; border-radius: var(--radius-sm); }
.btn-lg       { min-height: 56px; font-size: 16px; padding: 0 28px; border-radius: var(--radius-lg); }

/* ---- Cards ---- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.card-dark {
  background: var(--primary-900);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}
.card-filled {
  background: var(--neutral-100);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

/* ---- Inputs ---- */
.input, .select, .textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  min-height: 52px;
  padding: 0 16px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(5,130,202,.12);
}
.input-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--neutral-700);
  margin-bottom: 6px;
  display: block;
}
.input-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ---- Badges ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.badge-success { background: var(--success-bg); color: #15803d; }
.badge-warning { background: var(--warning-bg); color: #b45309; }
.badge-danger  { background: var(--danger-bg);  color: #b91c1c; }
.badge-primary { background: var(--primary-50); color: var(--primary-700); }
.badge-accent  { background: var(--accent-50);  color: var(--accent-700); }