/* ============================================================================
   regulatory-flags-admin.css
   Location: frontend/styles/regulatory-flags-admin.css

   Companion stylesheet for frontend/components/regulatory-flags-admin.js.
   Every rule below corresponds to an rfa__* class emitted by that
   component. Brand tokens are inlined per the convention established by
   regulatory-intelligence.css — no CSS vars.

   Layout is a dense full-width list (not a card grid). The admin
   landing experience is a queue: scan top-down, resolve, repeat.
   ============================================================================ */

/* ── Container + header ─────────────────────────────────────────────────── */
.rfa__container{width:100%;background:#F4F6F8;padding:24px;font-family:'IBM Plex Sans',sans-serif;color:#111827;box-sizing:border-box;min-height:100%;}
.rfa__hidden{display:none;}

.rfa__header{margin-bottom:20px;}
.rfa__heading{margin:0 0 6px;font-size:22px;font-weight:600;color:#015441;}
.rfa__subtitle{margin:0 0 14px;font-size:13px;color:#4B5563;line-height:1.55;max-width:780px;}

.rfa__header-actions{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;}
.rfa__filter-wrap{display:flex;flex-direction:column;gap:4px;}
.rfa__filter-label{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:0.05em;color:#6B7280;}
.rfa__filter-select{font-family:'IBM Plex Sans',sans-serif;font-size:13px;color:#111827;background:#FFFFFF;border:1px solid #D1D5DB;border-radius:6px;padding:7px 10px;min-width:140px;outline:none;transition:border-color .15s ease;}
.rfa__filter-select:focus{border-color:#015441;}
.rfa__refresh-btn{font-family:'IBM Plex Sans',sans-serif;font-size:13px;font-weight:500;background:#FFFFFF;color:#374151;border:1px solid #D1D5DB;border-radius:6px;padding:7px 14px;cursor:pointer;transition:all .15s ease;}
.rfa__refresh-btn:hover{background:#F9FAFB;border-color:#9CA3AF;}

.rfa__counter{font-size:12px;color:#6B7280;margin-bottom:10px;}

/* ── Empty / skeleton / error states ────────────────────────────────────── */
.rfa__skeleton,.rfa__empty,.rfa__error{background:#FFFFFF;border:1px dashed #D1D5DB;border-radius:8px;padding:32px;text-align:center;font-size:14px;color:#6B7280;}
.rfa__error{border-style:solid;border-color:#FCA5A5;background:#FEF2F2;color:#991B1B;}

/* ── List + row ─────────────────────────────────────────────────────────── */
.rfa__list{display:flex;flex-direction:column;gap:10px;}
.rfa__row{background:#FFFFFF;border:1px solid #E5E7EB;border-radius:8px;padding:14px 16px;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;box-shadow:0 1px 2px rgba(15,23,42,0.03);transition:border-color .15s ease;}
.rfa__row:hover{border-color:#9CA3AF;}
.rfa__row--resolved{opacity:0.72;}

/* Source-type badge — slate for EMAIL (matches the hub), neutral for SCRAPE */
.rfa__source-badge{display:inline-flex;align-items:center;font-size:10px;font-weight:700;letter-spacing:0.05em;border-radius:4px;padding:4px 8px;color:#FFFFFF;height:fit-content;}
.rfa__source-badge--email{background:#1E293B;}
.rfa__source-badge--scrape{background:#6B7280;}
.rfa__source-badge--ai_company_summary{background:#7c3aed;}

/* Row meta — title line + attribution + note + summary preview */
.rfa__row-meta{display:flex;flex-direction:column;gap:6px;min-width:0;}
.rfa__row-title-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.rfa__row-title{font-size:14px;font-weight:600;color:#111827;}
.rfa__parent-status{display:inline-flex;align-items:center;font-size:10px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;border-radius:4px;padding:2px 7px;}
.rfa__parent-status--approved{background:#D1FAE5;color:#065F46;border:1px solid #6EE7B7;}
.rfa__parent-status--flagged{background:#FEE2E2;color:#991B1B;border:1px solid #FCA5A5;}
.rfa__parent-status--pending_review{background:#FEF3C7;color:#92400E;border:1px solid #F59E0B;}
.rfa__parent-status--rejected{background:#F3F4F6;color:#4B5563;border:1px solid #D1D5DB;}

.rfa__row-attr{font-size:12px;color:#6B7280;}
.rfa__row-note{font-size:13px;color:#374151;font-style:italic;background:#F9FAFB;border-left:3px solid #015441;padding:6px 10px;border-radius:0 4px 4px 0;}
.rfa__row-summary{font-size:12.5px;color:#4B5563;line-height:1.5;}
.rfa__row-summary-label{font-weight:600;color:#374151;}
.rfa__row-resolved{font-size:12px;color:#6B7280;font-style:italic;grid-column:1/-1;border-top:1px solid #F3F4F6;padding-top:8px;margin-top:4px;}

/* ── Actions column ─────────────────────────────────────────────────────── */
.rfa__row-actions{display:flex;align-items:flex-start;}
.rfa__resolve-btn{font-family:'IBM Plex Sans',sans-serif;font-size:12px;font-weight:500;background:#015441;color:#FFFFFF;border:1px solid #015441;border-radius:6px;padding:6px 14px;cursor:pointer;transition:all .15s ease;}
.rfa__resolve-btn:hover{background:#0F3D24;border-color:#0F3D24;}

/* ── Resolve form (expands inline under the row) ────────────────────────── */
.rfa__resolve-form{grid-column:1/-1;background:#F9FAFB;border:1px solid #E5E7EB;border-radius:6px;padding:14px;margin-top:8px;display:flex;flex-direction:column;gap:8px;}
.rfa__form-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#374151;}
.rfa__form-help{font-size:11.5px;color:#6B7280;line-height:1.45;margin-bottom:4px;}
.rfa__form-textarea{font-family:'IBM Plex Sans',sans-serif;font-size:13px;color:#111827;background:#FFFFFF;border:1px solid #D1D5DB;border-radius:6px;padding:8px 10px;outline:none;resize:vertical;min-height:60px;transition:border-color .15s ease;}
.rfa__form-textarea--summary{min-height:110px;font-family:'IBM Plex Mono','IBM Plex Sans',monospace;font-size:12.5px;}
.rfa__form-textarea:focus{border-color:#015441;}
.rfa__form-error{background:#FEE2E2;color:#991B1B;border:1px solid #FCA5A5;border-radius:6px;padding:8px 10px;font-size:12px;}
.rfa__form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px;}
.rfa__form-submit{font-family:'IBM Plex Sans',sans-serif;font-size:13px;font-weight:500;background:#015441;color:#FFFFFF;border:1px solid #015441;border-radius:6px;padding:7px 16px;cursor:pointer;transition:all .15s ease;}
.rfa__form-submit:hover:not(:disabled){background:#0F3D24;border-color:#0F3D24;}
.rfa__form-submit:disabled{opacity:0.6;cursor:not-allowed;}

/* ── Toast — same shape as the hub's toast for consistency ──────────────── */
.rfa__toast-host{position:fixed;top:20px;right:20px;z-index:60;display:flex;flex-direction:column;gap:8px;pointer-events:none;}
.rfa__toast{background:#FFFFFF;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.12);padding:12px 16px;font-family:'IBM Plex Sans',sans-serif;font-size:13px;color:#111827;min-width:240px;max-width:380px;border-left:4px solid #015441;animation:rfa-toast-in .25s ease;pointer-events:auto;}
.rfa__toast--success{border-left-color:#015441;}
.rfa__toast--error{border-left-color:#991B1B;color:#991B1B;}
.rfa__toast--leaving{opacity:0;transform:translateX(20px);transition:all .4s ease;}
@keyframes rfa-toast-in{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:translateX(0);}}

/* ── Section dividers (22 May 2026 — two-queue layout) ─────────────────── */
/* Admin tab now hosts two queues: 'Pending Approval' (PENDING_REVIEW
   email-ingested items awaiting MLRO sign-off) and 'Open Flags'
   (existing flag queue). Each section is its own block with a
   subtitle-style heading. */
.rfa__section{margin-bottom:32px;}
.rfa__section-heading{margin:0 0 8px;font-size:15px;font-weight:600;color:#015441;letter-spacing:0.01em;border-bottom:1px solid #E5E7EB;padding-bottom:6px;}

/* Pending Approval action column — two buttons side-by-side */
.rfa__row-actions--pending{display:flex;flex-direction:column;gap:6px;}

/* Small-screen: collapse the 3-column grid to a single column */
@media (max-width:720px){
  .rfa__row{grid-template-columns:1fr;gap:8px;}
  .rfa__row-actions{justify-content:flex-start;}
  .rfa__row-actions--pending{flex-direction:row;}
  .rfa__heading{font-size:18px;}
  .rfa__subtitle{font-size:12.5px;}
  .rfa__section-heading{font-size:13.5px;}
}