/* ==== apps/modules/web/0000/37_hatalar.php ==== */
#hl-wrap { min-height: 100%; background: #fff; padding-bottom: 2rem; }

/* Toolbar */
#hl-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:.6rem; }
#hl-search-box { position:relative; flex:1; min-width:220px; max-width:320px; }
#hl-search-box i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#9ca3af; font-size:13px; }
#hl-search { width:100%; box-sizing:border-box; padding:8px 12px 8px 34px; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; outline:none; }
#hl-search:focus { border-color:#4f46e5; }
.hl-select { padding:8px 12px; border:1px solid #e5e7eb; border-radius:8px; font-size:12.5px; background:#fff; cursor:pointer; color:#374151; }
.hl-tarih-btn { display:inline-flex; align-items:center; gap:6px; }
.hl-tarih-btn.active { border-color:#4f46e5; color:#4f46e5; background:#eef2ff; }

#hl-tarih-panel { display:flex; gap:14px; align-items:flex-end; background:#f8faff; border:1px solid #e5e7eb; border-radius:8px; padding:.7rem .9rem; margin-bottom:.8rem; }
#hl-tarih-panel label { display:flex; flex-direction:column; gap:4px; font-size:11.5px; color:#6b7280; font-weight:600; }
#hl-tarih-panel input { padding:6px 8px; border:1px solid #e5e7eb; border-radius:6px; font-size:12.5px; }

#hl-count-bar { font-size:12px; color:#9ca3af; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid #f0f0f0; }

.hl-btn { background:none; border:1px solid #e5e7eb; border-radius:6px; padding:.4rem 1rem; font-size:12.5px; color:#374151; cursor:pointer; }
.hl-btn:hover { background:#f9fafb; }
.hl-btn.primary { background:#4f46e5; border-color:#4f46e5; color:#fff; }
.hl-btn.primary:hover { background:#4338ca; }

.hl-loading { padding:2rem; text-align:center; color:#bbb; font-size:13px; }

/* ── Hata tablosu ─────────────────────────────────────────────────── */
.hl-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.hl-table th {
  text-align:left; padding:.5rem .7rem; color:#9ca3af; font-weight:600; font-size:11px;
  text-transform:uppercase; letter-spacing:.3px; border-bottom:1px solid #e5e7eb;
}
.hl-table td { padding:.55rem .7rem; border-bottom:1px solid #f3f4f6; color:#374151; vertical-align:middle; }
.hl-row { cursor:pointer; transition:background .1s; }
.hl-row:hover { background:#f9fafb; }
.hl-td-tarih { white-space:nowrap; color:#6b7280; font-size:11.5px; }
.hl-td-kullanici { white-space:nowrap; max-width:160px; overflow:hidden; text-overflow:ellipsis; }
.hl-td-mesaj { max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; position:relative; }

/* Tablo satırındaki hızlı kopyala düğmesi — satırı açmadan mesajı kopyalar */
.hl-kopyala-btn {
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:22px; height:22px; margin-left:6px; border:none; border-radius:5px;
  background:#f3f4f6; color:#6b7280; cursor:pointer; font-size:11px; vertical-align:middle;
  transition:background .12s, color .12s;
}
.hl-kopyala-btn:hover { background:#e5e7eb; color:#374151; }
.hl-kopyala-btn.hl-kopyalandi { background:#dcfce7; color:#16a34a; }

.hl-badge { display:inline-flex; align-items:center; font-size:10px; font-weight:700; padding:2px 8px; border-radius:20px; white-space:nowrap; text-transform:uppercase; letter-spacing:.3px; }

/* ── Sayfalama ─────────────────────────────────────────────────────── */
#hl-sayfalama { display:flex; justify-content:center; align-items:center; gap:10px; margin-top:1.2rem; }
#hl-sayfalama button { background:#fff; border:1px solid #e5e7eb; border-radius:6px; padding:.35rem .8rem; font-size:12.5px; cursor:pointer; color:#374151; }
#hl-sayfalama button:disabled { opacity:.4; cursor:not-allowed; }
#hl-sayfalama span { font-size:12px; color:#6b7280; }

#hl-empty { text-align:center; padding:3rem 1rem; color:#9ca3af; font-size:14px; }

/* ── Detay Paneli (sağdan kayan) ─────────────────────────────────── */
#hl-panel-overlay {
  display:none; position:fixed; inset:0; background:rgba(15,23,42,.4); z-index:10005;
}
#hl-panel-box {
  position:absolute; top:0; right:0; height:100%; width:min(460px, 94vw); background:#fff;
  box-shadow:-8px 0 40px rgba(0,0,0,.18); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .22s ease;
}
#hl-panel-overlay.open #hl-panel-box { transform:translateX(0); }
#hl-panel-header {
  display:flex; align-items:center; gap:.7rem; padding:1rem 1.1rem; border-bottom:1px solid #e5e7eb; flex-shrink:0;
}
#hl-panel-baslik { flex:1; min-width:0; }
#hl-panel-kaynak { font-size:13px; font-weight:700; color:#111827; }
#hl-panel-zaman { font-size:11.5px; color:#9ca3af; margin-top:2px; }
#hl-panel-kapat { background:none; border:none; font-size:16px; color:#9ca3af; cursor:pointer; padding:6px; }
#hl-panel-kapat:hover { color:#374151; }
#hl-panel-body { flex:1; overflow-y:auto; padding:1rem 1.1rem; }

.hl-detay-blok { margin-bottom:1.1rem; }
.hl-detay-baslik {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:10.5px; font-weight:700; color:#9ca3af; text-transform:uppercase; letter-spacing:.4px; margin-bottom:.4rem;
}
.hl-detay-baslik .hl-kopyala-btn { margin-left:0; }
.hl-detay-satir { display:flex; justify-content:space-between; align-items:center; padding:.3rem 0; font-size:13px; color:#374151; border-bottom:1px solid #f9fafb; }
.hl-detay-satir span:first-child { color:#6b7280; }
.hl-detay-satir span:last-child { font-weight:600; text-align:right; }
.hl-detay-mesaj { font-size:13px; color:#374151; background:#f9fafb; border-radius:8px; padding:.7rem .8rem; white-space:pre-wrap; word-break:break-word; }
.hl-detay-json {
  font-family:'SFMono-Regular',Consolas,monospace; font-size:11.5px; color:#374151; background:#f9fafb;
  border-radius:8px; padding:.7rem .8rem; white-space:pre-wrap; word-break:break-word; margin:0;
}