/* ir-forms.css — hand-ported Tailwind design tokens from the standalone
   IR Form Flow app (client/src/index.css + inline utility classes), scoped
   under .irf so it never leaks into the rest of the dashboard. */

.irf { color: #111827; }
.irf * { box-sizing: border-box; }

/* --- Buttons (index.css .btn-primary/.btn-secondary/.btn-danger) --------- */
.irf-btn-primary, .irf-btn-secondary, .irf-btn-danger {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 24px; border-radius: 8px; font-weight: 500; font-size: 14px;
    border: 1px solid transparent; cursor: pointer; transition: background-color .15s, border-color .15s;
    line-height: 1.2;
}
.irf-btn-primary { background: #2563eb; color: #fff; }
.irf-btn-primary:hover { background: #1d4ed8; }
.irf-btn-secondary { background: #fff; color: #374151; border-color: #d1d5db; }
.irf-btn-secondary:hover { background: #f9fafb; }
.irf-btn-danger { background: #dc2626; color: #fff; }
.irf-btn-danger:hover { background: #b91c1c; }
.irf-btn-primary:disabled, .irf-btn-secondary:disabled, .irf-btn-danger:disabled { opacity: .5; cursor: not-allowed; }
.irf-btn-sm { padding: 6px 14px; font-size: 13px; }
.irf-icon-btn { padding: 6px; border-radius: 6px; border: 0; background: transparent; color: #9ca3af; cursor: pointer; display: inline-flex; }
.irf-icon-btn:hover { color: #2563eb; background: #eff6ff; }
.irf-icon-btn.danger:hover { color: #dc2626; background: #fef2f2; }

/* --- Inputs --------------------------------------------------------------- */
.irf-input, .irf-textarea, .irf-select {
    width: 100%; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 8px;
    font-size: 14px; color: #111827; background: #fff; font-family: inherit;
}
.irf-input:focus, .irf-textarea:focus, .irf-select:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px #bfdbfe; }
.irf-textarea { min-height: 72px; resize: vertical; }
.irf-input[disabled], .irf-textarea[disabled], .irf-select[disabled] { background: #f9fafb; color: #9ca3af; }
.irf-label { display: block; font-size: 13px; font-weight: 500; color: #374151; margin-bottom: 6px; }

/* --- Cards ------------------------------------------------------------- */
.irf-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.05); border: 1px solid #e5e7eb; padding: 24px; }
.irf-card + .irf-card { margin-top: 16px; }

/* --- Dashboard: card grid ------------------------------------------------- */
.irf-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.irf-topbar h1 { font-size: 26px; font-weight: 700; color: #111827; margin: 0; }
.irf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.irf-form-card { background: #fff; border-radius: 12px; border: 1px solid #e5e7eb; padding: 20px; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: box-shadow .15s; }
.irf-form-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.irf-form-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.irf-form-card-top h3 { font-weight: 600; color: #111827; margin: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.irf-chip { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.irf-chip.published { background: #dcfce7; color: #15803d; }
.irf-chip.draft { background: #f3f4f6; color: #4b5563; }
.irf-meta-row { display: flex; align-items: center; gap: 14px; font-size: 13px; color: #6b7280; margin-bottom: 14px; }
.irf-form-actions { display: flex; align-items: center; gap: 8px; }
.irf-form-actions > * { flex: 1; text-align: center; }
.irf-empty { text-align: center; padding: 64px 20px; background: #fff; border-radius: 12px; border: 1px solid #e5e7eb; }
.irf-empty .irf-empty-icon { font-size: 56px; margin-bottom: 12px; }
.irf-empty h3 { font-size: 18px; font-weight: 600; color: #374151; margin: 0 0 6px; }
.irf-empty p { color: #6b7280; margin: 0 0 20px; }

/* --- Builder layout ------------------------------------------------------- */
.irf-title-input { font-size: 22px; font-weight: 700; border: none; border-bottom: 2px solid transparent; padding: 6px 0; width: 100%; }
.irf-title-input:focus { outline: none; border-bottom-color: #2563eb; }
.irf-desc-input { border: none; border-bottom: 1px solid #e5e7eb; padding: 6px 0; width: 100%; color: #6b7280; font-size: 14px; }
.irf-desc-input:focus { outline: none; border-bottom-color: #2563eb; }
.irf-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 960px) { .irf-two-col { grid-template-columns: 1fr; } }
.irf-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.irf-section-head h2 { font-size: 16px; font-weight: 600; color: #111827; margin: 0; }
.irf-link-btn { background: none; border: 0; color: #2563eb; font-weight: 500; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.irf-link-btn:hover { color: #1d4ed8; }
.irf-add-q-dashed { width: 100%; padding: 14px; border: 2px dashed #d1d5db; border-radius: 10px; background: none; color: #6b7280; cursor: pointer; font-size: 14px; }
.irf-add-q-dashed:hover { border-color: #60a5fa; color: #2563eb; }

/* --- Question builder card ----------------------------------------------- */
.irf-q { border: 2px solid #e5e7eb; border-radius: 12px; padding: 16px; background: #fff; margin-bottom: 14px; transition: border-color .15s; }
.irf-q:hover { border-color: #93c5fd; }
.irf-q.drag-over { border-color: #60a5fa; background: #eff6ff; }
.irf-q-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 8px; }
.irf-q-head-left { display: flex; align-items: center; gap: 8px; }
.irf-drag-handle { cursor: grab; color: #d1d5db; user-select: none; padding: 0 2px; }
.irf-q-num { width: 28px; height: 28px; border-radius: 999px; background: #dbeafe; color: #1d4ed8; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: none; }
.irf-q-type-select { width: 190px; font-size: 13px; padding: 7px 10px; }
.irf-q-actions { display: flex; align-items: center; gap: 2px; }
.irf-q-options { padding-left: 24px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; }
.irf-q-option-row { display: flex; align-items: center; gap: 8px; }
.irf-q-option-row input { flex: 1; padding: 7px 10px; font-size: 13px; }
.irf-q-sub { padding-left: 24px; margin-bottom: 10px; }
.irf-q-branch { padding-left: 24px; border-top: 1px solid #f3f4f6; padding-top: 12px; margin-bottom: 10px; }
.irf-q-quiz { padding-left: 24px; border-top: 1px solid #f3f4f6; padding-top: 12px; margin-bottom: 10px; }
.irf-q-footer { display: flex; align-items: center; justify-content: flex-end; padding-top: 10px; border-top: 1px solid #f3f4f6; }
.irf-checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #374151; cursor: pointer; }
.irf-checkbox-row input { width: 16px; height: 16px; accent-color: #2563eb; }

/* --- Preview panel --------------------------------------------------------- */
.irf-preview-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.irf-device-toggle { display: flex; border: 1px solid #d1d5db; border-radius: 8px; padding: 3px; background: #fff; }
.irf-device-toggle button { border: 0; background: none; padding: 5px 12px; font-size: 12px; font-weight: 500; border-radius: 6px; color: #4b5563; cursor: pointer; }
.irf-device-toggle button.active { background: #2563eb; color: #fff; }
.irf-preview-card { background: #fff; border-radius: 12px; border: 1px solid #e5e7eb; padding: 24px; max-width: 640px; }
.irf-preview-empty { text-align: center; padding: 48px 20px; color: #9ca3af; border-radius: 12px; border: 1px solid #e5e7eb; background: #fff; }
.irf-preview-mobile-frame { display: flex; justify-content: center; }
.irf-preview-mobile-shell { width: 375px; border: 8px solid #1f2937; border-radius: 2rem; background: #1f2937; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.irf-preview-mobile-inner { border-radius: 1.5rem; background: #fff; overflow: hidden; }
.irf-preview-mobile-notch { height: 24px; display: flex; align-items: center; justify-content: center; }
.irf-preview-mobile-notch i { height: 6px; width: 64px; border-radius: 999px; background: #1f2937; display: block; }
.irf-preview-mobile-scroll { max-height: 560px; overflow-y: auto; padding: 16px; }
.irf-pv-q { border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px; margin-bottom: 12px; }
.irf-pv-q label.pv-title { font-weight: 500; color: #111827; display: block; margin-bottom: 6px; }
.irf-pv-q .pv-desc { font-size: 13px; color: #6b7280; margin: 0 0 10px; }
.irf-pv-option { display: flex; align-items: center; gap: 8px; margin: 6px 0; color: #374151; font-size: 14px; }
.irf-pv-progress-outer { height: 8px; border-radius: 999px; background: #f3f4f6; margin-bottom: 8px; overflow: hidden; }
.irf-pv-progress-inner { height: 100%; border-radius: 999px; transition: width .2s; }

/* --- Settings panel --------------------------------------------------------- */
.irf-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
@media (max-width: 720px) { .irf-settings-grid { grid-template-columns: 1fr; } }
.irf-theme-row { display: flex; gap: 10px; margin-top: 4px; }
.irf-theme-swatch { width: 30px; height: 30px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; }
.irf-theme-swatch.active { border-color: #111827; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111827; }
.irf-fieldset-title { font-size: 14px; font-weight: 600; color: #111827; margin: 18px 0 4px; padding-top: 14px; border-top: 1px solid #f3f4f6; }
.irf-fieldset-title:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.irf-fieldset-hint { font-size: 12px; color: #9ca3af; margin: 0 0 10px; }
.irf-confirm-rule { border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 8px; }
.irf-confirm-rule-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* --- Publish / QR panel ------------------------------------------------------ */
.irf-publish-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.irf-live-badge { background: #dcfce7; color: #15803d; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.irf-qr-btn { border: 2px solid #e5e7eb; border-radius: 12px; background: #fff; padding: 12px; cursor: pointer; display: block; margin: 0 auto 20px; }
.irf-qr-btn:hover { border-color: #60a5fa; }
.irf-copy-row { display: flex; gap: 8px; margin-bottom: 14px; }
.irf-copy-row input { flex: 1; background: #f9fafb; }

/* --- Checklist -------------------------------------------------------------- */
.irf-checklist-row { display: flex; align-items: center; justify-content: space-between; font-size: 14px; padding: 6px 0; }
.irf-checklist-row .ready { color: #15803d; font-weight: 500; }
.irf-checklist-row .missing { color: #9ca3af; }

/* --- Tables (responses) ------------------------------------------------------ */
.irf-table-wrap { overflow-x: auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; }
.irf-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.irf-table th { text-align: left; background: #f9fafb; color: #4b5563; font-weight: 600; padding: 10px 14px; white-space: nowrap; border-bottom: 1px solid #e5e7eb; }
.irf-table td { padding: 10px 14px; border-bottom: 1px solid #f3f4f6; color: #374151; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Analytics --------------------------------------------------------------- */
.irf-analytics-q { margin-bottom: 8px; }
.irf-analytics-q-title { font-weight: 600; color: #111827; font-size: 14px; margin-bottom: 2px; }
.irf-analytics-sub { font-size: 12px; color: #9ca3af; margin-bottom: 10px; }
.irf-bar-row { margin-bottom: 8px; }
.irf-bar-row-top { display: flex; justify-content: space-between; font-size: 13px; color: #475569; margin-bottom: 3px; }
.irf-bar-outer { height: 8px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.irf-bar-inner { height: 100%; border-radius: 999px; background: #2563eb; }
.irf-sample { background: #f9fafb; border-radius: 8px; padding: 8px 12px; font-size: 13px; color: #4b5563; margin-bottom: 6px; }
.irf-quiz-summary { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 20px; }
.irf-quiz-stat { text-align: center; }
.irf-quiz-stat .value { font-size: 24px; font-weight: 700; color: #111827; }
.irf-quiz-stat .label { font-size: 12px; color: #6b7280; }

/* --- Misc ---------------------------------------------------------------- */
.irf-spinner { width: 40px; height: 40px; border-radius: 999px; border: 3px solid #dbeafe; border-bottom-color: #2563eb; animation: irf-spin .7s linear infinite; margin: 60px auto; }
@keyframes irf-spin { to { transform: rotate(360deg); } }
.irf-back-link { color: #2563eb; font-size: 13px; text-decoration: none; margin-bottom: 8px; display: inline-block; cursor: pointer; }
.irf-back-link:hover { text-decoration: underline; }
.irf-hint-note { font-size: 12px; color: #9ca3af; margin-top: 6px; }
.irf-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.irf-overlay-card { background: #fff; border-radius: 16px; padding: 28px; max-width: 340px; text-align: center; box-shadow: 0 20px 40px rgba(0,0,0,.2); }