/* Hirentra v0.9.0 Build 19 Phase 2.1 — Recycle Bin */
.web19p21-hero {
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:22px; margin-bottom:16px; border:1px solid rgba(248,113,113,.28);
  border-radius:18px; background:linear-gradient(135deg,rgba(127,29,29,.18),rgba(15,23,42,.38));
}
.web19p21-hero p { margin:0 0 5px; font-size:11px; font-weight:900; letter-spacing:.12em; color:#fca5a5; }
.web19p21-hero h2 { margin:0; font-size:24px; }
.web19p21-hero span { display:block; margin-top:6px; color:var(--muted,#94a3b8); font-size:12px; }
.web19p21-hero > b { padding:9px 12px; border-radius:999px; background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.3); color:#fecaca; white-space:nowrap; }
.web19p21-filter-grid { display:grid; grid-template-columns:minmax(190px,1fr) minmax(230px,2fr) auto; gap:10px; align-items:end; }
.web19p21-filter-grid label { display:flex; flex-direction:column; gap:6px; }
.web19p21-filter-grid label > span { font-size:10px; font-weight:900; letter-spacing:.08em; color:var(--muted,#94a3b8); text-transform:uppercase; }
.web19p21-filter-grid select,.web19p21-filter-grid input,.web19p21-delete-panel select,.web19p21-delete-panel textarea {
  width:100%; min-height:42px; padding:9px 11px; border-radius:10px;
  border:1px solid rgba(148,163,184,.22); background:rgba(15,23,42,.38); color:var(--text,#f8fafc); font:inherit;
}
.web19p21-retention-summary { margin-top:12px; padding:10px 12px; border-radius:10px; background:rgba(15,23,42,.26); color:var(--muted,#94a3b8); font-size:11px; }
.web19p21-retention-summary strong { color:var(--text,#f8fafc); }
.web19p21-recycle-list { display:grid; gap:12px; }
.web19p21-recycle-card { padding:17px; border-radius:16px; border:1px solid rgba(148,163,184,.18); background:var(--surface,#111827); }
.web19p21-recycle-card.expired { border-color:rgba(248,113,113,.38); }
.web19p21-recycle-top { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.web19p21-recycle-top span { color:var(--muted,#94a3b8); font-size:10.5px; }
.web19p21-recycle-top h3 { margin:4px 0 2px; font-size:18px; }
.web19p21-recycle-top p { margin:0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; color:var(--muted,#94a3b8); }
.web19p21-recycle-top > b { padding:6px 9px; border-radius:999px; font-size:9px; letter-spacing:.06em; white-space:nowrap; }
.web19p21-recycle-top > b.good { color:#86efac; background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.25); }
.web19p21-recycle-top > b.warn { color:#fde68a; background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.25); }
.web19p21-recycle-top > b.bad { color:#fecaca; background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.3); }
.web19p21-recycle-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:14px; }
.web19p21-recycle-grid > div { padding:10px; border-radius:10px; background:rgba(15,23,42,.3); border:1px solid rgba(148,163,184,.1); min-width:0; }
.web19p21-recycle-grid span { display:block; color:var(--muted,#94a3b8); font-size:9px; text-transform:uppercase; letter-spacing:.06em; }
.web19p21-recycle-grid strong { display:block; margin-top:4px; font-size:11px; overflow-wrap:anywhere; }
.web19p21-description,.web19p21-reason-note { margin:10px 0 0; color:var(--muted,#94a3b8); font-size:11px; line-height:1.45; }
.web19p21-recycle-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.web19p21-purge,.web19p21-danger-action {
  min-height:36px; padding:0 13px; border-radius:10px; border:1px solid rgba(248,113,113,.5);
  background:rgba(127,29,29,.28); color:#fecaca; font:inherit; font-size:10px; font-weight:900; cursor:pointer;
}
.web19p21-purge:hover,.web19p21-danger-action:hover { background:rgba(185,28,28,.34); border-color:rgba(248,113,113,.75); }
.web19p21-purge:disabled,.web19p21-danger-action:disabled { opacity:.55; cursor:not-allowed; }
.web19p21-history-note { display:block; margin-top:9px; color:var(--muted,#94a3b8); font-size:9.5px; line-height:1.4; }
.web19p21-empty { text-align:center; padding:32px; }
.web19p21-empty p { color:var(--muted,#94a3b8); }
.web19p21-delete-panel { margin-top:12px; padding:14px; border:1px solid rgba(248,113,113,.28); border-radius:14px; background:rgba(127,29,29,.10); display:grid; gap:11px; }
.web19p21-delete-panel strong { font-size:13px; }
.web19p21-delete-panel p { margin:4px 0 0; color:var(--muted,#94a3b8); font-size:10.5px; line-height:1.45; }
.web19p21-delete-panel label { display:flex; flex-direction:column; gap:5px; }
.web19p21-delete-panel label > span { color:var(--muted,#94a3b8); font-size:9.5px; font-weight:900; text-transform:uppercase; }
.web19p21-live-warning { color:#fecaca !important; font-weight:800; }
.web19p21-delete-actions { display:flex; gap:8px; flex-wrap:wrap; }

html[data-theme="light"] .web19p21-hero { background:linear-gradient(135deg,#fff7f7,#fff); border-color:#fecaca; }
html[data-theme="light"] .web19p21-hero > b { background:#fff1f2; border-color:#fecdd3; color:#9f1239; }
html[data-theme="light"] .web19p21-filter-grid select,
html[data-theme="light"] .web19p21-filter-grid input,
html[data-theme="light"] .web19p21-delete-panel select,
html[data-theme="light"] .web19p21-delete-panel textarea { background:#fff; color:#0f172a; border-color:#cbd5e1; }
html[data-theme="light"] .web19p21-retention-summary,
html[data-theme="light"] .web19p21-recycle-grid > div { background:#f8fafc; }
html[data-theme="light"] .web19p21-recycle-card { background:#fff; border-color:#e2e8f0; }
html[data-theme="light"] .web19p21-delete-panel { background:#fff7f7; border-color:#fecaca; }
html[data-theme="light"] .web19p21-purge,
html[data-theme="light"] .web19p21-danger-action { background:#fff1f2; color:#9f1239; border-color:#fda4af; }

@media (max-width:900px) {
  .web19p21-recycle-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .web19p21-hero { align-items:flex-start; flex-direction:column; }
  .web19p21-filter-grid { grid-template-columns:1fr; }
  .web19p21-recycle-top { flex-direction:column; }
  .web19p21-recycle-grid { grid-template-columns:1fr; }
  .web19p21-recycle-actions > button,.web19p21-delete-actions > button { width:100%; }
}