/* ============ MY REPORTS + ADMIN DASHBOARD ============
   Ported from the Angular my-reports/admin-dashboard pages and the shared
   case-edit-modal/tips-panel components. Reuses theme.css/home.css tokens and
   several already-global classes (.field, .chip, .empty-state, .pagination,
   .page-btn, .spinner, .sr-only); rules here are scoped under .modal-overlay
   where they'd otherwise collide with the report-form's field/feature styling. */

/* ---------- My Reports ----------
   Selectors scoped under .reports-list — .report-card is also the report-form wizard's card
   class in home.css, and would otherwise collide (unscoped .report-card here won an unrelated
   `display:flex` onto the wizard's card, squeezing its step-nav buttons off to the side). */
.reports-list{ display:flex; flex-direction:column; gap:18px; }
.reports-list .report-card{
  display:flex; gap:20px; background:var(--surface-800); border:1px solid var(--border-muted);
  border-radius:var(--radius-md); padding:18px; align-items:flex-start;
}
@media(max-width:640px){ .reports-list .report-card{ flex-direction:column; } }
.reports-list .report-photo{ width:120px; height:120px; object-fit:cover; border-radius:10px; flex-shrink:0; background:var(--bg-900); }
.reports-list .report-info{ flex:1; min-width:0; }
.reports-list .report-head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.reports-list .report-head h4{ font-size:17px; }
.reports-list .report-meta{ color:var(--gray-400); font-size:13px; margin:0 0 8px; }
.reports-list .report-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.review-note{ color:#fbbf24; font-size:13px; margin:0 0 10px; }

/* ---------- Shared badges (my-reports + admin) ---------- */
.badges{ display:flex; gap:8px; }
.badge{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:4px 10px;
  border-radius:999px; background:rgba(34,197,94,0.15); color:#4ade80;
}
.badge-found{ background:rgba(148,163,184,0.15); color:#94a3b8; }
.badge-type-found{ background:rgba(229,57,53,0.15); color:var(--red-500); }
.badge-mod.badge-pending{ background:rgba(251,191,36,0.15); color:#fbbf24; }
.badge-mod.badge-approved{ background:rgba(34,197,94,0.15); color:#4ade80; }
.badge-mod.badge-declined{ background:rgba(229,57,53,0.15); color:#ff8a80; }

.row-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.confirm-delete, .decline-inline{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--gray-400); flex-wrap:wrap; }
.decline-inline input{
  height:36px; border-radius:8px; border:1px solid var(--border-muted); background:var(--bg-900);
  color:var(--white-soft); padding:0 10px; font-size:13px; min-width:180px;
}

/* ---------- Admin: tabs + filters ---------- */
.admin-tabs{ display:flex; gap:6px; background:var(--bg-900); padding:6px; border-radius:12px; border:1px solid var(--border-muted); margin-bottom:24px; max-width:320px; }
.admin-tab{ flex:1; padding:10px; font-size:14px; font-weight:600; border-radius:8px; color:var(--gray-400); background:none; border:none; text-align:center; }
.admin-tab.active{ background:var(--red-500); color:#fff; }

.filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px; }
.filter-row .chip{ text-transform:capitalize; }

/* ---------- Admin: case moderation queue ---------- */
.case-list{ display:flex; flex-direction:column; gap:16px; }
.case-row{
  display:flex; gap:18px; background:var(--surface-800); border:1px solid var(--border-muted);
  border-radius:var(--radius-md); padding:16px; align-items:flex-start;
}
@media(max-width:640px){ .case-row{ flex-direction:column; } }
.case-photo{ width:90px; height:90px; object-fit:cover; border-radius:10px; flex-shrink:0; background:var(--bg-900); }
.case-photo.clickable{ cursor:zoom-in; transition:opacity .15s; }
.case-photo.clickable:hover{ opacity:.85; }

.case-info{ flex:1; min-width:0; }
.case-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.case-head h4{ font-size:16px; }
.case-meta{ color:var(--gray-400); font-size:13px; margin:0 0 4px; }
.reporter-line{ color:var(--gray-300); font-size:13px; margin:0 0 8px; }

.tag{ font-size:11px; padding:2px 8px; border-radius:6px; margin-left:6px; }
.tag-warn{ background:rgba(251,191,36,0.15); color:#fbbf24; }
.tag-danger{ background:rgba(229,57,53,0.15); color:#ff8a80; }

/* ---------- Admin: users ---------- */
.search-row{ display:flex; gap:10px; margin-bottom:24px; max-width:420px; }
.search-row input{
  flex:1; height:44px; border-radius:10px; border:1px solid var(--border-muted); background:var(--bg-900);
  color:var(--white-soft); padding:0 14px; font-size:14px;
}

.user-table{ display:flex; flex-direction:column; gap:2px; overflow-x:auto; }
.user-table-head, .user-row{
  display:grid; grid-template-columns:1.2fr 1.6fr .8fr .7fr .7fr .9fr 1fr; gap:12px; align-items:center;
  padding:12px 14px; font-size:13px; min-width:760px;
}
.user-table-head{ color:var(--gray-600); text-transform:uppercase; font-size:11px; letter-spacing:.04em; }
.user-row{ background:var(--surface-800); border:1px solid var(--border-muted); border-radius:10px; color:var(--gray-200); }
.truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- Admin: newsletter composer ---------- */
.newsletter-composer{ max-width:640px; display:flex; flex-direction:column; gap:6px; }
.subscriber-count{ font-size:14px; color:var(--gray-300); margin:0 0 14px; }
.field-label{ font-size:13px; font-weight:600; color:var(--gray-300); margin-top:10px; display:block; }
.subject-input{
  height:44px; width:100%; border-radius:10px; border:1px solid var(--border-muted); background:var(--bg-900);
  color:var(--white-soft); padding:0 14px; font-size:14px; margin-bottom:6px;
}
.rich-text-box{
  min-height:220px; border-radius:10px; border:1px solid var(--border-muted); background:var(--bg-900);
  color:var(--white-soft); padding:14px 16px; font-size:14px; line-height:1.6; overflow-y:auto; margin-bottom:14px;
}
.rich-text-box:empty::before{ content:attr(data-placeholder); color:var(--gray-600); }
.rich-text-box:focus{ outline:none; border-color:var(--red-500); box-shadow:0 0 0 3px rgba(229,57,53,0.15); }
.send-error{ color:#ff8a80; font-size:13px; margin:0 0 12px; }
.send-success{ color:var(--green-500); font-size:13px; margin:0 0 12px; }
.confirm-send{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:14px; color:var(--gray-300); }

.page-info{ font-size:13px; color:var(--gray-400); }

/* ---------- Shared: case-edit modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(6,7,9,0.72); backdrop-filter:blur(4px); z-index:1600;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.modal-overlay.sr-only{ display:none; }
/* display:block overrides Bootstrap's own .modal component class (display:none by default) — this is a
   plain custom overlay panel, not a Bootstrap modal, but the class name collides. */
.modal-overlay .modal{
  display:block; background:var(--surface-800); border:1px solid var(--border-muted); border-radius:var(--radius-lg);
  max-width:560px; width:100%; max-height:90vh; overflow-y:auto; position:relative;
}
.modal-close{
  position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:10px; border:1px solid var(--border-muted);
  background:transparent; color:var(--gray-400); display:flex; align-items:center; justify-content:center;
}
.modal-close:hover{ border-color:var(--red-500); color:var(--red-500); }
.modal-body{ padding:36px 32px 28px; }
.modal-body h3{ font-size:20px; margin:2px 0 18px; }
.modal-overlay .form-error{
  background:rgba(229,57,53,0.1); border:1px solid rgba(229,57,53,0.35); border-radius:10px;
  padding:12px 14px; color:#ff8a80; font-size:13px; margin-bottom:18px;
}

.modal-overlay .field-grid{ gap:16px; margin-bottom:16px; }
.modal-overlay .field{ margin-bottom:16px; gap:6px; }
.modal-overlay .field input, .modal-overlay .field select, .modal-overlay .field textarea{
  height:44px; border-radius:10px; font-size:14px;
}
.modal-overlay .field textarea{
  height:auto; min-height:90px; padding:12px 14px; border-radius:10px; border:1px solid var(--border-muted);
  background:var(--bg-900); color:var(--white-soft); font-family:inherit; resize:vertical; line-height:1.5;
}
.modal-overlay .field textarea:focus{ border-color:var(--red-500); box-shadow:0 0 0 3px rgba(229,57,53,0.15); outline:none; }
.modal-overlay .field input.invalid, .modal-overlay .field textarea.invalid{ border-color:var(--red-500); }

.modal-overlay .upload-box{ padding:16px; }
.modal-overlay .upload-cta{ display:block; padding:12px; }
.modal-overlay .upload-preview{ max-height:200px; margin-bottom:10px; }

.modal-overlay .feature-row{
  display:grid; grid-template-columns:1fr 1fr auto; gap:8px; margin-bottom:8px; align-items:center;
  padding:0; background:none; border-radius:0;
}
.modal-overlay .feature-row input{
  height:40px; border-radius:8px; border:1px solid var(--border-muted); background:var(--bg-900);
  color:var(--white-soft); padding:0 10px; font-size:13px;
}
.modal-overlay .remove-feature{
  width:32px; height:32px; border-radius:8px; border:1px solid var(--border-muted); background:transparent;
  color:var(--gray-400); font-size:16px; line-height:1; margin-top:0; display:flex; align-items:center; justify-content:center;
}
.modal-overlay .remove-feature:hover{ border-color:var(--red-500); color:var(--red-500); }

.modal-actions{ display:flex; justify-content:flex-end; gap:12px; margin-top:24px; padding-top:20px; border-top:1px solid var(--border-muted); }

/* ---------- Shared: tips panel ---------- */
.tips-overlay{
  position:fixed; inset:0; background:rgba(6,7,9,0.72); backdrop-filter:blur(4px); z-index:1700;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.tips-overlay.sr-only{ display:none; }
.tips-panel{
  background:var(--surface-800); border:1px solid var(--border-muted); border-radius:var(--radius-lg);
  max-width:520px; width:100%; max-height:80vh; overflow-y:auto; position:relative; padding:32px;
}
.tips-panel h3{ font-size:18px; margin:2px 0 20px; }
.tips-empty{ color:var(--gray-400); font-size:14px; text-align:center; padding:20px 0; }
.tips-list{ display:flex; flex-direction:column; gap:14px; }
.tip-row{ background:var(--bg-900); border:1px solid var(--border-muted); border-radius:10px; padding:14px 16px; }
.tip-message{ font-size:14px; color:var(--gray-200); margin:0 0 8px; line-height:1.5; }
.tip-meta{ font-size:12px; color:var(--gray-600); margin:0; }