/* GÓI 05 (v2): Admin / Logs / Rank - UI improvements (no logic changes)
   - Works even when opened directly (no ?CODE=rank), by targeting structural selectors.
*/

:root{
  --me-surface: #ffffff;
  --me-surface-2: rgba(248,249,251,0.98);
  --me-border: rgba(0,0,0,.10);
  --me-border-2: rgba(0,0,0,.12);
  --me-shadow: 0 6px 18px rgba(0,0,0,.05);
  --me-radius: 12px;
}

/* Generic page title */
.page-header, .me-page-header{
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding-bottom: 10px;
  margin-top: 12px;
}

/* ---------------- Rank tables (scrolly_table) ---------------- */
/* Apply broadly so it works even when rank pages are opened directly (dht/rank.php) */
.scrolly_table{
  border: 1px solid var(--me-border);
  border-radius: var(--me-radius);
  overflow: auto;
  background: var(--me-surface);
  box-shadow: var(--me-shadow);
  -webkit-overflow-scrolling: touch;
}

/* Keep existing inline max-height but allow better viewport usage */
.scrolly_table[style*="max-height"]{
  max-height: min(72vh, 820px) !important;
}

/* Table inside scrolly_table */
.scrolly_table table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

/* Sticky header:
   - Prefer thead if exists
   - Otherwise make the FIRST ROW sticky (rank.php thường không có thead) */
.scrolly_table thead th,
.scrolly_table thead td{
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--me-surface-2);
  border-bottom: 1px solid var(--me-border-2);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.scrolly_table table tr:first-child > th,
.scrolly_table table tr:first-child > td{
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--me-surface-2);
  border-bottom: 1px solid var(--me-border-2);
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

/* Cells */
.scrolly_table td, .scrolly_table th{
  padding: 8px 10px;
  border-right: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
  vertical-align: middle;
}
.scrolly_table tr td:last-child,
.scrolly_table tr th:last-child{ border-right: 0; }
.scrolly_table table tr:last-child td{ border-bottom: 0; }

/* Row hover */
.scrolly_table tbody tr:hover td{
  background: rgba(13,110,253,.04);
}

/* Rank toolbar */
.me-rank-toolbar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--me-border);
  border-radius: var(--me-radius);
  background: var(--me-surface);
  box-shadow: 0 3px 10px rgba(0,0,0,.03);
}
.me-rank-toolbar .me-label{
  font-weight: 600;
  opacity: .9;
}
.me-rank-toolbar .me-input{
  min-width: 220px;
  max-width: 420px;
}
.me-rank-toolbar .me-hint{
  font-size: 12px;
  opacity: .75;
}

/* Highlight filtered-out rows */
.me-row-hidden{ display: none !important; }



/* Standalone dark base: sync with global site dark mode */
body[data-site-theme="dark"],
body.me-log-dark{
  background: #0b1220;
  color: #e5e7eb;
}

/* ---------------- Logs viewer ---------------- */
/* Default: LIGHT (readable). Toggle dark via body.me-log-dark */
.me-log-toolbar{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items:center;
  margin: 10px 0 8px;
}
.me-log-toolbar .me-btn,
.me-log-toolbar .btn{
  appearance:none;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.92);
  color: #111827;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
}
.me-log-toolbar .me-btn:hover,
.me-log-toolbar .btn:hover{
  background: #fff;
}
.me-log-toolbar .me-btn:active,
.me-log-toolbar .btn:active{
  transform: translateY(1px);
}

#log-box, pre.me-log, pre.prettyprint{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.5;
  background: #f7f8fb;
  color: #111827;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: var(--me-radius);
  padding: 12px 14px;
  overflow: auto;
  max-height: min(72vh, 860px);
  box-shadow: var(--me-shadow);
  white-space: pre-wrap;       /* wrap long lines for readability */
  word-break: break-word;
}

body.me-log-dark .me-log-toolbar .me-btn,
body.me-log-dark .me-log-toolbar .btn{
  background: rgba(15,23,42,.88);
  border-color: rgba(148,163,184,.25);
  color: #e5e7eb;
}
body.me-log-dark .me-log-toolbar .me-btn:hover,
body.me-log-dark .me-log-toolbar .btn:hover{
  background: rgba(15,23,42,.98);
}

body.me-log-dark #log-box,
body.me-log-dark pre.me-log,
body.me-log-dark pre.prettyprint{
  background: #0f172a;
  color: #e5e7eb;
  border-color: rgba(148,163,184,.22);
  /* Keep wrap even in dark mode for readability */
  white-space: pre-wrap;
  word-break: break-word;
}

/* Prettify syntax colors in dark mode (readable on dark background) */
body.me-log-dark pre.prettyprint .pln{ color:#e5e7eb; }
body.me-log-dark pre.prettyprint .com{ color:#94a3b8; }
body.me-log-dark pre.prettyprint .kwd{ color:#93c5fd; }
body.me-log-dark pre.prettyprint .str{ color:#34d399; }
body.me-log-dark pre.prettyprint .lit{ color:#fbbf24; }
body.me-log-dark pre.prettyprint .pun{ color:#e2e8f0; }
body.me-log-dark pre.prettyprint .typ{ color:#c4b5fd; }
body.me-log-dark pre.prettyprint .tag{ color:#fca5a5; }
body.me-log-dark pre.prettyprint .atn{ color:#fcd34d; }
body.me-log-dark pre.prettyprint .atv{ color:#34d399; }
body.me-log-dark pre.prettyprint .dec{ color:#fbbf24; }
body.me-log-dark pre.prettyprint a{ color:#93c5fd; }

/* Small improvements for history/admin tables */
.table.me-admin-table,
body[data-code^="admin"] .table,
body[data-code^="config"] .table{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--me-radius);
  overflow: hidden;
}


/* Autorank container (#data-rank) as card */
#data-rank{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: var(--me-radius);
  background: var(--me-surface);
  box-shadow: var(--me-shadow);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
#data-rank table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
#data-rank tr.me-row-hidden{ display:none !important; }
#data-rank thead th,
#data-rank tr:first-child th,
#data-rank tr:first-child td{
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--me-surface-2);
  border-bottom: 1px solid rgba(0,0,0,.10);
}


/* ---------------- Layer (iframe) sizing ----------------
   Khi mở view code/log trong layer (iframe), khung <pre> đang bị giới hạn max-height:72vh
   nên bị "lọt" vào 1 frame nhỏ và cuộn dù layer còn dư. Quy tắc dưới đây chỉ áp dụng
   khi trang nằm trong iframe + là trang viewer (me-codeview/me-logview):
   - Body dùng flex để khung code/log ăn hết phần còn lại
   - Chỉ cuộn khi nội dung vượt quá chiều cao layer
*/
html.me-in-layer, body.me-in-layer{ height: 100%; }

body.me-in-layer.me-codeview,
body.me-in-layer.me-logview{
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body.me-in-layer.me-codeview #log-box,
body.me-in-layer.me-codeview pre.me-log,
body.me-in-layer.me-codeview pre.prettyprint,
body.me-in-layer.me-logview #log-box,
body.me-in-layer.me-logview pre.me-log,
body.me-in-layer.me-logview pre.prettyprint{
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}