/**
 * eFORMS Mobile-Native UI Override
 * Drop this file into eforms/assets/css/mobile-override.css
 * and enqueue it after app.css in eforms.php
 *
 * Add to enqueue_frontend_assets():
 *   wp_enqueue_style('eforms-mobile', EFORMS_PLUGIN_URL . 'assets/css/mobile-override.css', ['eforms-app'], EFORMS_VERSION);
 */

:root {
  --ef-green: #16a34a;
  --ef-green-light: #22c55e;
  --ef-green-bg: #dcfce7;
  --ef-bg: #f2f2f7;
  --ef-card: #ffffff;
  --ef-text: #1a1a1a;
  --ef-sub: #636366;
  --ef-muted: #8e8e93;
  --ef-border: rgba(0, 0, 0, 0.08);
  --ef-radius: 16px;
  --ef-radius-sm: 12px;
  --safe-bottom: env(safe-area-inset-bottom, 16px);
}

/* ── Global ── */
body {
  background: var(--ef-bg) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* ── Page wrapper ── */
.eforms-responses-page,
.eforms-submissions-wrapper {
  background: var(--ef-bg);
  min-height: 100dvh;
}

/* ── Header ── */
.eforms-responses-header,
.eforms-page-header {
  background: var(--ef-card);
  padding: 12px 20px 16px;
  border-bottom: 1px solid var(--ef-border);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.eforms-back-btn {
  color: var(--ef-green) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 6px !important;
}

.eforms-page-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  color: var(--ef-text) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.eforms-page-subtitle {
  font-size: 13px !important;
  color: var(--ef-muted) !important;
  margin: 3px 0 0 !important;
}

/* ── Filter chips ── */
.eforms-filter-bar {
  background: var(--ef-card);
  border-bottom: 1px solid var(--ef-border);
}

.eforms-filters,
.eforms-status-tabs {
  display: flex !important;
  gap: 8px !important;
  padding: 12px 20px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.eforms-filters::-webkit-scrollbar,
.eforms-status-tabs::-webkit-scrollbar {
  display: none !important;
}

/* Individual filter pill */
.eforms-filter-chip,
.eforms-tab-btn,
.ef-tab {
  flex-shrink: 0 !important;
  padding: 7px 14px !important;
  border-radius: 20px !important;
  border: none !important;
  background: rgba(118, 118, 128, 0.12) !important;
  color: var(--ef-sub) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  white-space: nowrap !important;
}

.eforms-filter-chip.active,
.eforms-tab-btn.active,
.ef-tab.active,
.eforms-filter-chip:focus,
.eforms-tab-btn[aria-selected="true"] {
  background: var(--ef-green) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

.eforms-filter-count,
.ef-tab-count {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 1px 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  margin-left: 4px !important;
}

.eforms-filter-chip:not(.active) .eforms-filter-count,
.ef-tab:not(.active) .ef-tab-count {
  background: #d1d1d6 !important;
  color: #636366 !important;
}

/* ── Search bar ── */
.eforms-search-wrap {
  background: var(--ef-bg) !important;
  padding: 10px 16px !important;
}

.eforms-search-input,
input[type="search"].eforms-search {
  width: 100% !important;
  background: rgba(118, 118, 128, 0.12) !important;
  border: none !important;
  border-radius: var(--ef-radius-sm) !important;
  padding: 9px 12px 9px 36px !important;
  font-size: 15px !important;
  color: var(--ef-text) !important;
  outline: none !important;
  box-sizing: border-box !important;
}

/* ── Submission list ── */
.eforms-submission-list,
.ef-responses-list {
  padding: 0 16px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

/* ── Submission card ── */
.eforms-submission-card,
.ef-response-card {
  background: var(--ef-card) !important;
  border-radius: 4px !important;
  padding: 14px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border: none !important;
  box-shadow: none !important;
  position: relative !important;
  cursor: pointer !important;
  transition: background 0.1s !important;
}

.eforms-submission-card:first-child,
.ef-response-card:first-child {
  border-radius: var(--ef-radius) var(--ef-radius) 4px 4px !important;
}

.eforms-submission-card:last-child,
.ef-response-card:last-child {
  border-radius: 4px 4px var(--ef-radius) var(--ef-radius) !important;
}

.eforms-submission-card:only-child,
.ef-response-card:only-child {
  border-radius: var(--ef-radius) !important;
}

.eforms-submission-card:active,
.ef-response-card:active {
  background: #f9f9f9 !important;
}

/* Avatar circle */
.ef-avatar,
.eforms-submission-avatar {
  width: 46px !important;
  height: 46px !important;
  border-radius: 23px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #fff !important;
  flex-shrink: 0 !important;
  letter-spacing: -0.3px !important;
}

/* Submission name */
.ef-submission-name,
.eforms-submission-name {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--ef-text) !important;
  letter-spacing: -0.3px !important;
}

.ef-submission-unread .ef-submission-name,
.eforms-submission-card.unread .eforms-submission-name {
  font-weight: 700 !important;
}

.ef-submission-phone,
.eforms-submission-phone {
  font-size: 13px !important;
  color: var(--ef-sub) !important;
}

.ef-submission-date,
.eforms-submission-date {
  font-size: 12px !important;
  color: var(--ef-muted) !important;
}

/* Status badge */
.ef-status-badge,
.eforms-status-badge {
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
}

.ef-status-badge.unread  { background: #fef2f2 !important; color: #dc2626 !important; }
.ef-status-badge.read    { background: #f0fdf4 !important; color: #16a34a !important; }
.ef-status-badge.handled { background: #eef2ff !important; color: #4f46e5 !important; }

/* Unread dot */
.ef-unread-indicator {
  position: absolute !important;
  left: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--ef-green-light) !important;
}

/* ── Section header ── */
.ef-section-header,
.eforms-list-header {
  padding: 16px 20px 8px !important;
  font-size: 12px !important;
  color: var(--ef-muted) !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
}

/* ── Bottom nav ── */
.eforms-bottom-nav,
.ef-bottom-tab-bar {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid var(--ef-border) !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding-bottom: calc(8px + var(--safe-bottom)) !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  z-index: 200 !important;
}

.ef-tab-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 10px 0 !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 10px !important;
  color: var(--ef-muted) !important;
  font-weight: 400 !important;
}

.ef-tab-item.active {
  color: var(--ef-green) !important;
  font-weight: 600 !important;
}

/* FAB-style centre button */
.ef-tab-item.new-form-btn {
  margin-top: -18px !important;
}

.ef-tab-fab {
  width: 52px !important;
  height: 52px !important;
  background: linear-gradient(135deg, var(--ef-green), var(--ef-green-light)) !important;
  border-radius: 26px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 20px rgba(22, 163, 74, 0.4) !important;
}

/* ── Empty state ── */
.ef-empty-state {
  text-align: center !important;
  padding: 40px 20px !important;
  color: var(--ef-muted) !important;
}

.ef-empty-state h3 {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--ef-sub) !important;
  margin: 12px 0 6px !important;
}

.ef-empty-state p {
  font-size: 14px !important;
  margin: 0 !important;
}

/* ── WhatsApp export card ── */
.ef-whatsapp-export-card {
  margin: 0 16px 20px !important;
  background: linear-gradient(135deg, #dcfce7, #bbf7d0) !important;
  border-radius: var(--ef-radius) !important;
  padding: 14px 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* ── Responsive: small screens ── */
@media (max-width: 390px) {
  .eforms-page-title { font-size: 20px !important; }
  .ef-avatar { width: 40px !important; height: 40px !important; border-radius: 20px !important; }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE FORM FIELDS — public display view (≤ 768px)
   Touches:
   • Labels — readable weight, correct size
   • Text / tel / email inputs — full-width, 16px (no iOS zoom)
   • Textarea — comfortable min-height
   • Select — native arrow visible, full-width
   • Radio + Checkbox options — large tap targets (≥ 48px)
   • Rating stars — bigger, easier to tap
   • Yes / No buttons — equal-width, full-row
   • File upload zone — generous drop area
   • Field error message — clear position
   • Form card wrapper — side margins, shadow
════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ─── Form wrapper / card ─────────────────────────────────── */
  .eforms-display-form,
  .eforms-public-form,
  .eforms-form-body,
  .ef-public-form-wrap {
    padding: 16px 14px calc(32px + env(safe-area-inset-bottom, 16px)) !important;
    max-width: 100% !important;
  }

  /* ─── Field group spacing ─────────────────────────────────── */
  .eforms-field-group,
  .ef-field-wrap,
  .eforms-field-wrapper {
    margin-bottom: 18px !important;
  }

  /* ─── Labels ──────────────────────────────────────────────── */
  .eforms-label,
  label.eforms-label,
  .ef-field-label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin-bottom: 8px !important;
    display: block !important;
    line-height: 1.3 !important;
  }

  /* Required asterisk */
  .eforms-label .required,
  .ef-field-label .required,
  .eforms-label-required {
    color: #ef4444 !important;
    margin-left: 3px !important;
  }

  /* ─── Text / email / tel / number inputs ──────────────────── */
  .eforms-input,
  input.eforms-input,
  .eforms-display-form input[type="text"],
  .eforms-display-form input[type="email"],
  .eforms-display-form input[type="tel"],
  .eforms-display-form input[type="number"],
  .eforms-display-form input[type="date"],
  .eforms-display-form input[type="url"] {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;          /* prevents iOS auto-zoom */
    min-height: 50px !important;
    padding: 13px 14px !important;
    border-radius: 14px !important;
    border: 1.5px solid #e5e7eb !important;
    background: #f9fafb !important;
    color: #111827 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s !important;
  }

  .eforms-input:focus,
  .eforms-display-form input:focus {
    border-color: var(--ef-green, #16a34a) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(22,163,74,0.12) !important;
    outline: none !important;
  }

  .eforms-input::placeholder {
    color: #9ca3af !important;
    font-size: 15px !important;
  }

  /* ─── Textarea ────────────────────────────────────────────── */
  .eforms-input.eforms-textarea,
  .eforms-display-form textarea {
    min-height: 110px !important;
    resize: vertical !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    padding: 13px 14px !important;
    border-radius: 14px !important;
  }

  /* ─── Select ──────────────────────────────────────────────── */
  .eforms-display-form select,
  select.eforms-input {
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
    min-height: 50px !important;
    padding: 13px 40px 13px 14px !important;
    border-radius: 14px !important;
    border: 1.5px solid #e5e7eb !important;
    background: #f9fafb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239ca3af' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    color: #111827 !important;
  }

  select.eforms-input:focus {
    border-color: var(--ef-green, #16a34a) !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 3px rgba(22,163,74,0.12) !important;
    outline: none !important;
  }

  /* ─── Radio options ───────────────────────────────────────── */
  .eforms-display-form div[style*="flexDirection: column"] > label[style*="radio"],
  .eforms-display-form label:has(input[type="radio"]) {
    min-height: 48px !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    gap: 12px !important;
  }

  .eforms-display-form input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
  }

  /* ─── Checkbox options ────────────────────────────────────── */
  .eforms-display-form label:has(input[type="checkbox"]) {
    min-height: 48px !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    gap: 12px !important;
  }

  .eforms-display-form input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    border-radius: 6px !important;
  }

  /* ─── Rating stars ────────────────────────────────────────── */
  .eforms-display-form div[style*="gap: 8px"] > button[style*="32px"] {
    font-size: 38px !important;
    padding: 4px 2px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* ─── Yes / No buttons ────────────────────────────────────── */
  .eforms-display-form div[style*="gap: 12px"] > button[style*="Yes"],
  .eforms-display-form div[style*="gap: 12px"] > button[style*="No"],
  .eforms-display-form div[style*="gap: 12px"] > button {
    flex: 1 1 0 !important;
    min-height: 50px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
  }

  /* ─── File upload zone ────────────────────────────────────── */
  .eforms-display-form label[style*="dashed"] {
    padding: 18px 16px !important;
    border-radius: 14px !important;
    gap: 12px !important;
  }

  .eforms-display-form label[style*="dashed"] > span:first-child {
    font-size: 28px !important;
  }

  /* ─── Field error text ────────────────────────────────────── */
  .eforms-field-error {
    font-size: 12.5px !important;
    margin-top: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: #ef4444 !important;
  }

  /* ─── Submit button ───────────────────────────────────────── */
  .eforms-display-form .eforms-submit-btn,
  .eforms-display-form button[type="submit"],
  .eforms-display-form .ef-submit-btn {
    width: 100% !important;
    min-height: 52px !important;
    font-size: 16px !important;
    border-radius: 14px !important;
    font-weight: 700 !important;
    margin-top: 8px !important;
    letter-spacing: 0.01em !important;
  }

  /* ─── Multi-step progress bar ─────────────────────────────── */
  .eforms-steps-bar {
    padding: 10px 16px !important;
    gap: 6px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  .eforms-steps-bar::-webkit-scrollbar { display: none !important; }

  .eforms-step-pill {
    flex-shrink: 0 !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    min-height: 34px !important;
  }

}

/* ─── Extra-small screens (≤ 390px) ────────────────────────── */
@media (max-width: 390px) {
  .eforms-label,
  .ef-field-label          { font-size: 13.5px !important; }
  .eforms-input            { font-size: 16px !important; min-height: 48px !important; }
  select.eforms-input      { font-size: 16px !important; }
  .eforms-input::placeholder { font-size: 14px !important; }
}

/* ── Scrollbar hide ── */
.eforms-submission-list::-webkit-scrollbar,
.eforms-filters::-webkit-scrollbar {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   SHARE MODAL — centered, fully visible, all content showing
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Override the bottom-sheet rule specifically for share modal */
  .ef-share-overlay,
  .eforms-modal-overlay:has(.ef-share-modal) {
    align-items: center !important;
    justify-content: center !important;
    padding: 20px 16px !important;
    overflow: auto !important;
  }

  .ef-share-modal {
    position: relative !important;
    border-radius: 20px !important;
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 40px) !important;
    overflow-y: auto !important;
    padding: 20px 18px 24px !important;
    margin: auto !important;

    /* Explicitly reset all bottom-sheet positioning */
    bottom: unset !important;
    top: unset !important;
    left: unset !important;
    right: unset !important;
    transform: none !important;
    align-self: center !important;

    animation: efSharePop 0.28s cubic-bezier(0.22, 1, 0.36, 1) both !important;
    box-shadow:
      0 24px 80px rgba(0,0,0,0.28),
      0 4px 20px rgba(0,0,0,0.12) !important;
    background: #ffffff !important;
  }

  /* Hide drag handle on share modal */
  .ef-share-modal::before {
    display: none !important;
  }

  /* ── Make QR code fully visible ── */
  .eforms-qr-code,
  .ef-share-modal canvas,
  .ef-share-modal .qr-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto 10px !important;
  }

  .eforms-qr-code canvas,
  .ef-share-modal canvas {
    max-width: 200px !important;
    max-height: 200px !important;
    width: 200px !important;
    height: 200px !important;
    border-radius: 12px !important;
  }

  /* ── Tab bar ── */
  .ef-share-modal .eforms-share-tab-bar,
  .ef-share-modal [style*="display: flex"][style*="gap: 4px"] {
    margin-bottom: 14px !important;
  }

  /* ── Hint text below QR ── */
  .ef-share-modal p,
  .ef-share-modal .qr-hint {
    font-size: 12.5px !important;
    text-align: center !important;
    color: #8e8e93 !important;
    margin: 8px 0 0 !important;
  }

  /* ── Download button ── */
  .ef-share-modal .ef-download-btn,
  .ef-share-modal button[class*="download"],
  .ef-share-modal button[style*="download"] {
    width: 100% !important;
    margin-top: 12px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }
}

@keyframes efSharePop {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Remove dark backdrop from share modal - all screen sizes */
.ef-share-overlay,
.eforms-modal-overlay.ef-share-overlay,
.eforms-modal-overlay:has(.ef-share-modal) {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}