@import "./tokens.css";

html, body { margin: 0; padding: 0; background: var(--color-bg); color: var(--color-fg); }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; line-height: 1.45; }

.button, .ea-btn { appearance: none; border: 1px solid transparent; border-radius: var(--radius-md); padding: 10px 14px; font-weight: 700; cursor: pointer; }
.button--primary, .ea-btn--primary { background: var(--color-primary); color: var(--color-primary-ink); }
.button--ghost, .ea-btn--ghost { background: #f1f5f9; color: var(--color-fg); }
.button[disabled], .ea-btn[disabled] { opacity: .55; cursor: not-allowed; }

.card, .ea-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.input, .ea-input, .ea-select { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 8px 10px; background: #fff; }

.small, .ea-small { font-size: 11px; }
.muted, .ea-muted { color: var(--color-fg-muted); }

.progress, .ea-progress { height: 8px; width: 100%; background: #e2e8f0; border-radius: var(--radius-pill); overflow: hidden; }
.progress__bar, .ea-progress__bar { height: 100%; width: 0%; background: var(--color-primary); transition: width .25s ease; }

.ea-disclaimer { margin-top: 12px; }

.modal-backdrop, .ea-modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.55); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.modal, .ea-modal { width: 100%; max-width: 560px; background: #fff; border-radius: 16px; box-shadow: var(--shadow-lg); border: 1px solid var(--color-border); }

/* Shared contact modal structure (used by EA and PA) */
.ea-modal header { padding: 16px 20px; border-bottom: 1px solid var(--color-border); font-weight: 800; }
.ea-modal .ea-body { padding: 16px 20px; }
.ea-modal .ea-row { display: flex; gap: 12px; }
.ea-modal .ea-col { flex: 1; }
.ea-field { margin-bottom: 12px; }
.ea-field label { display: block; font-weight: 700; margin-bottom: 6px; }
.ea-input, .ea-checkbox { width: 100%; height: 40px; border: 1px solid var(--color-border); border-radius: 10px; padding: 8px 10px; }
.ea-checkbox { width: auto; height: auto; }
.ea-err { color: #b91c1c; font-size: 12px; margin-top: 4px; }
.ea-modal footer { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--color-border); }
.ea-btn-sec { background: #f1f5f9; border: 1px solid var(--color-border); color: var(--color-fg); padding: 8px 12px; border-radius: 10px; font-weight: 700; cursor: pointer; }
.ea-btn-pri { background: var(--color-primary); border: 0; color: var(--color-primary-ink); padding: 8px 12px; border-radius: 10px; font-weight: 800; cursor: pointer; }
.ea-btn-pri[disabled] { opacity: .5; cursor: not-allowed; }

/* Prevent label wraps for compact options like "Sì — pianificato", "A volte", "Non recente" */
.ea-option label, .ea-choice label, .ea-radio label {
  white-space: nowrap;
}

/* Ensure each option is on its own line in stacked layouts */
.ea-options { display: grid; grid-auto-rows: auto; row-gap: 10px; }
.ea-options .ea-option { display: flex; align-items: center; }