.r4it-table{--gap:12px}
.r4it-table .table-toolbar{display:flex;justify-content:space-between;gap:var(--gap);flex-wrap:wrap;margin:16px 0}
.r4it-table .filters label{display:flex;align-items:center;gap:8px;margin-right:12px}
.r4it-table .filters input,.r4it-table .filters select{padding:6px 8px;border:1px solid #ddd;border-radius:6px}
.r4it-table details{border:1px solid #eee;border-radius:6px;padding:6px 8px}
.r4it-table details summary{cursor:pointer}
.r4it-table input[type="text"], .r4it-table select{padding:6px 8px;border:1px solid var(--border,rgba(255,255,255,.18));border-radius:8px;background:rgba(0,0,0,.25);color:var(--text,#e6eef7)}
.r4it-table input[type="text"]::placeholder{color:var(--muted,#a7b3c6)}
.r4it-table .table-wrap{overflow:auto;border:1px solid var(--border,rgba(255,255,255,.12));border-radius:14px;background:var(--card,rgba(255,255,255,.04))}
.r4it-table table{width:100%;border-collapse:separate;border-spacing:0}
.r4it-table th,.r4it-table td{padding:10px 12px;border-bottom:1px solid var(--border,rgba(255,255,255,.12));white-space:nowrap;color:var(--text,#e6eef7)}
.r4it-table thead th{position:sticky;top:0;background:rgba(255,255,255,.06);z-index:1;color:var(--text,#e6eef7);border-bottom:1px solid var(--border,rgba(255,255,255,.12))}
.r4it-table thead .filter-row th{background:rgba(255,255,255,.04)}
.r4it-table .th{all:unset;cursor:pointer;font-weight:700;color:var(--text,#e6eef7)}
.r4it-table .th:hover{text-decoration:underline}
.r4it-table .th-wrap{display:flex;align-items:center;gap:8px;justify-content:space-between}
.r4it-table .icon-eye{all:unset;cursor:pointer;color:rgba(16,185,129,.85);padding:2px;border-radius:6px}
.r4it-table .icon-eye:hover{background:rgba(16,185,129,.12)}
/* Slashed eye indicates the action "hide" (when the item is currently visible) */
.r4it-table .icon-eye.is-slash{position:relative}
.r4it-table .icon-eye.is-slash::after{content:""; position:absolute; left:2px; right:2px; top:50%; height:1px; background:rgba(16,185,129,.7); transform:rotate(-25deg)}
.r4it-table .cell-wrap{display:flex;align-items:center;gap:8px;justify-content:space-between}
.r4it-table .cell-val{display:inline-block;}
.r4it-table tr[hidden]{display:none}
/* Security warnings */
.r4it-table .table-warning{display:none;margin:.5rem 0;padding:.5rem .75rem;border:1px solid #f59e0b;background:rgba(245,158,11,.15);color:#fbbf24;border-radius:8px;font-size:.875rem}
.r4it-table input.is-warning{outline:2px solid #f59e0b; background:rgba(245,158,11,.12)}
.r4it-table tr.is-user-hidden{opacity:.7}

/* Optional light mode tuning using system preference.
   These rules only apply when a page doesn't provide CSS variables
   and the OS/browser prefers a light color scheme. */
@media (prefers-color-scheme: light) {
  .r4it-table input[type="text"], .r4it-table select {
    border-color: var(--border, rgba(0,0,0,.18));
    background: var(--card, rgba(255,255,255,.98));
    color: var(--text, #0f172a);
  }
  .r4it-table input[type="text"]::placeholder { color: var(--muted, #6b7280); }
  .r4it-table .table-wrap {
    border-color: var(--border, rgba(0,0,0,.12));
    background: var(--card, rgba(255,255,255,.92));
  }
  .r4it-table th, .r4it-table td {
    border-bottom-color: var(--border, rgba(0,0,0,.12));
    color: var(--text, #0f172a);
  }
  .r4it-table thead th {
    background: rgba(0,0,0,.03);
    color: var(--text, #0f172a);
    border-bottom-color: var(--border, rgba(0,0,0,.12));
  }
  .r4it-table thead .filter-row th { background: rgba(0,0,0,.02); }
  .r4it-table .th { color: var(--text, #0f172a); }
  .r4it-table .table-warning {
    border-color: #b45309;
    background: rgba(245,158,11,.12);
    color: #92400e;
  }
  .r4it-table input.is-warning {
    outline-color: #b45309;
    background: rgba(245,158,11,.12);
  }
}