/*!
 * DOMN Components — buttons, inputs, cards, badges, alerts, modals, tables, toast.
 */

/* ============== Buttons ============== */
.domn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--domn-space-2);
  padding: 0.6rem 1.1rem;
  font-family: inherit;
  font-size: var(--domn-fs-base);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--domn-radius);
  border: 1px solid transparent;
  background: var(--domn-primary);
  color: var(--domn-primary-fore);
  cursor: pointer;
  transition: background var(--domn-transition), transform var(--domn-transition);
  text-decoration: none;
}
.domn-btn:hover { background: var(--domn-primary-hover); text-decoration: none; }
.domn-btn:active { transform: translateY(1px); }
.domn-btn[disabled], .domn-btn.is-loading { opacity: 0.55; cursor: not-allowed; }

.domn-btn-secondary {
  background: var(--domn-surface);
  color: var(--domn-text);
  border-color: var(--domn-border-strong);
}
.domn-btn-secondary:hover { background: var(--domn-surface-alt); }

.domn-btn-ghost {
  background: transparent;
  color: var(--domn-primary);
  border-color: transparent;
}
.domn-btn-ghost:hover { background: var(--domn-primary-soft); }

.domn-btn-danger { background: var(--domn-danger); }
.domn-btn-danger:hover { background: #b91c1c; }

.domn-btn-sm { padding: 0.4rem 0.75rem; font-size: var(--domn-fs-sm); }
.domn-btn-lg { padding: 0.85rem 1.4rem; font-size: var(--domn-fs-lg); }
.domn-btn-block { display: flex; width: 100%; }

/* ============== Inputs ============== */
.domn-field { display: block; margin-bottom: var(--domn-space-4); }
.domn-label {
  display: block;
  font-weight: 600;
  font-size: var(--domn-fs-sm);
  margin-bottom: var(--domn-space-2);
  color: var(--domn-text);
}
.domn-input,
.domn-select,
.domn-textarea {
  display: block;
  width: 100%;
  padding: 0.65rem 0.9rem;
  font-family: inherit;
  font-size: var(--domn-fs-base);
  line-height: var(--domn-lh-snug);
  background: var(--domn-surface);
  color: var(--domn-text);
  border: 1px solid var(--domn-border-strong);
  border-radius: var(--domn-radius);
  transition: border-color var(--domn-transition), box-shadow var(--domn-transition);
}
.domn-textarea { resize: vertical; min-height: 6rem; }
.domn-input:focus,
.domn-select:focus,
.domn-textarea:focus {
  border-color: var(--domn-primary);
  box-shadow: 0 0 0 3px var(--domn-primary-soft);
  outline: none;
}
.domn-input[aria-invalid="true"],
.domn-select[aria-invalid="true"],
.domn-textarea[aria-invalid="true"] {
  border-color: var(--domn-danger);
}
.domn-hint  { font-size: var(--domn-fs-xs); color: var(--domn-text-muted); margin-top: var(--domn-space-1); }
.domn-error { font-size: var(--domn-fs-xs); color: var(--domn-danger);     margin-top: var(--domn-space-1); }

/* ============== Cards ============== */
.domn-card {
  background: var(--domn-surface);
  border: 1px solid var(--domn-border);
  border-radius: var(--domn-radius-lg);
  box-shadow: var(--domn-shadow-sm);
  padding: var(--domn-space-6);
}
.domn-card-sm { padding: var(--domn-space-4); }
.domn-card-title {
  font-size: var(--domn-fs-lg);
  font-weight: 700;
  margin: 0 0 var(--domn-space-3);
}
.domn-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--domn-space-4);
  margin-bottom: var(--domn-space-4);
  flex-wrap: wrap;
}

/* ============== Badges & status pills ============== */
.domn-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  font-size: var(--domn-fs-xs);
  font-weight: 600;
  border-radius: var(--domn-radius-pill);
  background: var(--domn-surface-alt);
  color: var(--domn-text-muted);
}
.domn-badge-primary    { background: var(--domn-primary-soft);  color: var(--domn-primary); }
.domn-badge-success    { background: var(--domn-success-soft);  color: var(--domn-success); }
.domn-badge-warning    { background: var(--domn-warning-soft);  color: var(--domn-warning); }
.domn-badge-danger     { background: var(--domn-danger-soft);   color: var(--domn-danger); }
.domn-badge-info       { background: var(--domn-info-soft);     color: var(--domn-info); }

.domn-status      { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.7rem; border-radius: var(--domn-radius-pill); font-size: var(--domn-fs-xs); font-weight: 600; }
.domn-status::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: currentColor; }
.domn-status-new        { background: rgba(37, 99, 235, 0.12);  color: var(--domn-status-new); }
.domn-status-reviewing  { background: rgba(217, 119, 6, 0.14);  color: var(--domn-status-reviewing); }
.domn-status-progress   { background: rgba(8, 145, 178, 0.14);  color: var(--domn-status-progress); }
.domn-status-completed  { background: rgba(22, 163, 74, 0.14);  color: var(--domn-status-completed); }
.domn-status-cancelled  { background: rgba(100, 116, 139, 0.18); color: var(--domn-status-cancelled); }
.domn-status-rejected   { background: rgba(220, 38, 38, 0.14);  color: var(--domn-status-rejected); }

/* ============== Alerts ============== */
.domn-alert {
  padding: var(--domn-space-4) var(--domn-space-5);
  border-radius: var(--domn-radius);
  border-right: 4px solid var(--domn-primary);
  background: var(--domn-primary-soft);
  color: var(--domn-text);
  margin-bottom: var(--domn-space-4);
}
.domn-alert-success { border-color: var(--domn-success); background: var(--domn-success-soft); }
.domn-alert-warning { border-color: var(--domn-warning); background: var(--domn-warning-soft); }
.domn-alert-danger  { border-color: var(--domn-danger);  background: var(--domn-danger-soft); }

/* ============== Table ============== */
.domn-table-wrap { overflow-x: auto; border-radius: var(--domn-radius); border: 1px solid var(--domn-border); background: var(--domn-surface); }
.domn-table { width: 100%; border-collapse: collapse; font-size: var(--domn-fs-sm); }
.domn-table th, .domn-table td {
  padding: var(--domn-space-3) var(--domn-space-4);
  text-align: right;
  border-bottom: 1px solid var(--domn-border);
  vertical-align: middle;
}
.domn-table th { font-weight: 700; color: var(--domn-text-muted); background: var(--domn-surface-alt); white-space: nowrap; }
.domn-table tbody tr:hover { background: var(--domn-surface-alt); }
.domn-table tbody tr:last-child td { border-bottom: 0; }

/* ============== Modal ============== */
.domn-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: flex; align-items: center; justify-content: center;
  padding: var(--domn-space-4);
  z-index: var(--domn-z-modal);
}
.domn-modal {
  background: var(--domn-surface);
  border-radius: var(--domn-radius-lg);
  width: 100%; max-width: 32rem;
  box-shadow: var(--domn-shadow-lg);
  overflow: hidden;
}
.domn-modal-header { padding: var(--domn-space-5); border-bottom: 1px solid var(--domn-border); display: flex; justify-content: space-between; align-items: center; }
.domn-modal-body   { padding: var(--domn-space-5); }
.domn-modal-footer { padding: var(--domn-space-4) var(--domn-space-5); border-top: 1px solid var(--domn-border); display: flex; gap: var(--domn-space-3); justify-content: flex-start; background: var(--domn-surface-alt); }

/* ============== Toast ============== */
.domn-toast-stack {
  position: fixed; top: var(--domn-space-4); left: var(--domn-space-4);
  z-index: var(--domn-z-toast);
  display: flex; flex-direction: column; gap: var(--domn-space-2);
  max-width: 22rem;
}
.domn-toast {
  background: var(--domn-surface);
  border: 1px solid var(--domn-border);
  border-right: 4px solid var(--domn-primary);
  box-shadow: var(--domn-shadow);
  padding: var(--domn-space-3) var(--domn-space-4);
  border-radius: var(--domn-radius);
  font-size: var(--domn-fs-sm);
  animation: domn-toast-in 180ms ease-out;
}
.domn-toast.is-success { border-right-color: var(--domn-success); }
.domn-toast.is-warning { border-right-color: var(--domn-warning); }
.domn-toast.is-danger  { border-right-color: var(--domn-danger); }
@keyframes domn-toast-in {
  from { transform: translateX(-12px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* ============== Empty state ============== */
.domn-empty {
  text-align: center;
  padding: var(--domn-space-12) var(--domn-space-4);
  color: var(--domn-text-muted);
}
.domn-empty-icon { font-size: 3rem; margin-bottom: var(--domn-space-4); opacity: 0.7; }
.domn-empty-title { font-size: var(--domn-fs-lg); font-weight: 700; color: var(--domn-text); margin-bottom: var(--domn-space-2); }


/* ================== Button contrast safety v2 (defeats theme overrides) ================== */
/* Use html.domn-app-host or body-level prefix to beat theme link styles. */
body .domn-btn,
body a.domn-btn,
body a.domn-btn:link,
body a.domn-btn:visited,
body a.domn-btn:hover,
body a.domn-btn:focus,
body a.domn-btn:active,
body button.domn-btn,
body .domn-btn-brand,
body a.domn-btn-brand,
body a.domn-btn-brand:link,
body a.domn-btn-brand:visited,
body a.domn-btn-brand:hover,
body .domn-btn-danger,
body a.domn-btn-danger,
body button.domn-request-quote-btn,
body a.domn-request-quote-btn,
.woocommerce button.button.alt.domn-request-quote-btn {
  color: #ffffff !important;
  background-color: #C52C35 !important;
  border-color: #C52C35 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  opacity: 1 !important;
}
body .domn-btn:hover,
body a.domn-btn:hover,
body button.domn-btn:hover,
body .domn-btn-brand:hover,
body button.domn-request-quote-btn:hover {
  color: #ffffff !important;
  background-color: #A11F27 !important;
  border-color: #A11F27 !important;
}

/* Secondary buttons: light bg + dark text */
body .domn-btn-secondary,
body a.domn-btn-secondary,
body a.domn-btn-secondary:link,
body a.domn-btn-secondary:visited,
body a.domn-btn-secondary:hover,
body button.domn-btn-secondary {
  color: #0f172a !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  text-decoration: none !important;
}
body .domn-btn-secondary:hover,
body a.domn-btn-secondary:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

/* Ghost buttons: transparent bg + red text */
body .domn-btn-ghost,
body a.domn-btn-ghost,
body a.domn-btn-ghost:link,
body a.domn-btn-ghost:visited,
body a.domn-btn-ghost:hover,
body button.domn-btn-ghost {
  color: #C52C35 !important;
  background-color: transparent !important;
  border-color: transparent !important;
  text-decoration: none !important;
}
body .domn-btn-ghost:hover,
body a.domn-btn-ghost:hover {
  background-color: #FCE5E5 !important;
  color: #A11F27 !important;
}

/* SVG icons follow text color */
body .domn-btn .domn-icon,
body .domn-btn svg,
body button.domn-request-quote-btn svg,
body button.domn-request-quote-btn .domn-icon {
  color: #ffffff !important;
  stroke: #ffffff !important;
  fill: none !important;
}
body .domn-btn-secondary .domn-icon,
body .domn-btn-secondary svg,
body .domn-btn-ghost .domn-icon,
body .domn-btn-ghost svg {
  color: currentColor !important;
  stroke: currentColor !important;
}

/* Pagination */
.domn-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;padding:14px 16px;border-top:1px solid #eef0f2;font-size:13px;direction:rtl}
.domn-pagination-info{color:#6b7280}
.domn-pagination-links{display:flex;gap:4px;flex-wrap:wrap}
.domn-page-btn{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;border:1px solid #e5e7eb;border-radius:9px;background:#fff;color:#1f2937;text-decoration:none;font-weight:600;transition:.15s}
.domn-page-btn:hover{border-color:#C52C35;color:#C52C35}
.domn-page-btn.is-current{background:#C52C35;border-color:#C52C35;color:#fff;cursor:default}
.domn-page-gap{padding:0 4px;color:#9ca3af}
