/* ═══════════════════════════════════════════════
   ELM Frontend Styles  — public/elm-frontend.css
   ═══════════════════════════════════════════════ */

.elm-fe-wrap { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13px; color: #1d2327; max-width: 100%; box-sizing: border-box; }

/* ── Cards ── */
.elm-fe-card { background: #fff; border: 1px solid #dcdcde; border-radius: 6px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.elm-fe-card-title { font-size: 14px; font-weight: 600; margin-bottom: 10px; border-bottom: 1px solid #f0f0f1; padding-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.elm-fe-badge { background: #2271b1; color: #fff; border-radius: 12px; font-size: 11px; font-weight: 700; padding: 2px 7px; }
.elm-fe-hint { color: #666; margin: 0 0 10px; font-size: 12px; }

/* ── CSV example box ── */
.elm-fe-csv-example { background: #f6f7f7; border: 1px solid #e0e0e0; border-radius: 4px; padding: 8px 12px; margin-bottom: 12px; font-size: 12px; line-height: 1.7; }
.elm-fe-csv-example code { background: none; padding: 0; }

/* ── CSV actions ── */
.elm-fe-csv-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.elm-fe-file-label { display: inline-flex; align-items: center; padding: 5px 10px; background: #f0f0f1; border: 1px solid #c3c4c7; border-radius: 4px; cursor: pointer; font-size: 12px; white-space: nowrap; color: #1d2327; }
.elm-fe-file-input { display: none; }
.elm-fe-file-name { font-size: 12px; color: #555; }

/* ── Buttons ── */
.elm-fe-btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 4px; border: 1px solid transparent; font-size: 12px; cursor: pointer; white-space: nowrap; line-height: 1.4; }
.elm-fe-btn-primary   { background: #2271b1; color: #fff !important; border-color: #2271b1; }
.elm-fe-btn-primary:hover { background: #135e96; color: #fff !important; }
.elm-fe-btn-secondary { background: #fff; color: #2271b1 !important; border-color: #2271b1; }
.elm-fe-btn-secondary:hover { background: #f0f6fc; color: #135e96 !important; }
.elm-fe-btn-ghost     { background: #fff; color: #444 !important; border-color: #c3c4c7; }
.elm-fe-btn-ghost:hover { background: #f0f0f1; color: #1d2327 !important; }
.elm-fe-btn-icon      { padding: 3px 6px; font-size: 12px; }

/* ── Search ── */
.elm-fe-search-wrap { position: relative; margin-bottom: 10px; }
.elm-fe-search-icon { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: #888; font-size: 12px; }
.elm-fe-search { width: 100%; padding: 5px 10px 5px 28px; border: 1px solid #c3c4c7; border-radius: 4px; font-size: 12px; box-sizing: border-box; }

/* ── Filter buttons ── */
.elm-fe-filters { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.elm-fe-filter { padding: 3px 9px; border-radius: 20px; border: 1px solid #c3c4c7; background: #fff; font-size: 11px; cursor: pointer; color: #444; }
.elm-fe-filter.active { background: #2271b1; color: #fff !important; border-color: #2271b1; }
.elm-fe-filter:hover:not(.active) { background: #f0f0f1; color: #1d2327; }

/* ── Bulk action bar ── */
.elm-fe-bulk-wrap { display: flex; gap: 6px; margin-bottom: 10px; align-items: center; }
.elm-fe-bulk-select { padding: 4px 8px; border: 1px solid #c3c4c7; border-radius: 4px; font-size: 12px; color: #1d2327; }

/* ── Table ── */
.elm-fe-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.elm-fe-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.elm-fe-table th { background: #f6f7f7; border-bottom: 2px solid #dcdcde; padding: 6px 8px; text-align: left; font-weight: 600; white-space: nowrap; }
.elm-fe-table td { padding: 5px 8px; border-bottom: 1px solid #f0f0f1; vertical-align: middle; }
.elm-fe-table tr:last-child td { border-bottom: none; }
.elm-fe-table tr:hover td { background: #f9f9f9; }
.elm-fe-check-row { width: 14px; }

/* ── Truncate long email addresses ── */
.elm-fe-table td:nth-child(3) { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Hide Source column always — it's always "Manual" and wastes space ── */
.elm-fe-table th:nth-child(7),
.elm-fe-table td:nth-child(7) { display: none; }

/* ── Responsive — hide Callsign under 500px ── */
@media ( max-width: 500px ) {
    .elm-fe-table th:nth-child(4),
    .elm-fe-table td:nth-child(4) { display: none; }
}

/* ── Status icons ── */
.elm-fe-ok  { color: #00a32a; font-size: 14px; }
.elm-fe-no  { color: #d63638; font-size: 14px; }

/* ── Source badge ── */
.elm-fe-source { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: #555; }

/* ── Action buttons in table ── */
.elm-fe-actions { display: flex; gap: 4px; }

/* ── Messages ── */
.elm-fe-msg { margin-top: 8px; font-size: 12px; min-height: 16px; }
.elm-fe-msg.success { color: #00a32a; }
.elm-fe-msg.error   { color: #d63638; }
.elm-fe-loading { text-align: center; color: #888; padding: 16px; }

/* ── Modal ── */
.elm-fe-modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 99999; display: flex; align-items: center; justify-content: center; }
.elm-fe-modal-box { background: #fff; border-radius: 6px; padding: 20px 24px; width: 380px; max-width: 95vw; box-shadow: 0 4px 20px rgba(0,0,0,.2); }
.elm-fe-modal-title { font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.elm-fe-form-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.elm-fe-form-table th { text-align: left; padding: 5px 10px 5px 0; font-weight: 600; width: 100px; color: #444; font-size: 12px; }
.elm-fe-form-table td { padding: 5px 0; }
.elm-fe-input { width: 100%; padding: 5px 8px; border: 1px solid #c3c4c7; border-radius: 4px; font-size: 12px; box-sizing: border-box; color: #1d2327; }
.elm-fe-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }