/* ╔══════════════════════════════════════════╗
   ║        HK Database – Neon-Night Theme     ║
   ║        © 2024 – mobile-first facelift     ║
   ╚══════════════════════════════════════════╝ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* MAIN PALETTE */
  --clr-primary      : #7c3aed;        /* violet-600   */
  --clr-primary-light: #a855f7;        /* violet-500   */
  --clr-accent       : #22d3ee;        /* cyan-400     */
  --clr-bg           : #0f172a;        /* slate-900    */
  --clr-surface      : #1e293b;        /* slate-800    */
  --clr-surface-glass: rgba(255,255,255,.06);
  --clr-text         : #e2e8f0;        /* slate-200    */
  --clr-text-dim     : #94a3b8;        /* slate-400    */
  --radius           : .8rem;
}

/* GLOBAL */
html,body{
  height:100%;
  font-family:'Inter',sans-serif;
  background:var(--clr-bg);
  color:var(--clr-text);
}

/* NAVBAR */
.navbar{
  background:linear-gradient(135deg,var(--clr-primary) 0%,var(--clr-accent) 100%);
}
.navbar-brand{font-weight:700}
.nav-link.active{font-weight:600}

/* GLASSY CARD */
.card,
.table tr{
  border:none;
  border-radius:var(--radius);
  backdrop-filter:blur(6px);
  background:var(--clr-surface-glass);
  box-shadow:0 2px 10px rgba(0,0,0,.4);
}

/* BUTTONS */
.btn-primary{
  --bs-btn-bg:var(--clr-primary);
  --bs-btn-border-color:var(--clr-primary);
  --bs-btn-hover-bg:var(--clr-primary-light);
  --bs-btn-hover-border-color:var(--clr-primary-light);
}
.btn-outline-light:hover{
  background:rgba(255,255,255,.25);
}

/* TABLE (desktop) */
.table{
  font-size:.85rem;
  color:var(--clr-text);
}
.table thead{
  background:var(--clr-surface);
  color:var(--clr-text);
}
.table-striped>tbody>tr:nth-of-type(odd)>*{
  --bs-table-accent-bg:rgba(255,255,255,.02);
}

/* ────── MOBILE ≤ 768px ──────  */
@media (max-width: 767.98px){
  /* hide thead, convert each row into a grid-card */
  .table{width:100%}
  .table thead{display:none}

  .table tr{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:.25rem .5rem;
    margin-bottom:1.2rem;
    padding:.8rem 1rem;
  }

  .table td{
    border:none !important;
    background:none !important;
    display:flex;
    align-items:center;
    gap:.35rem;
    padding:.25rem 0;
    word-break:break-word;
    color: white;
  }

  .table td::before{
    content:attr(data-label);
    font-weight:600;
    color:var(--clr-text-dim);
  }
}

/* MODAL HEADER */
.modal-header{
  background:var(--clr-primary);
  color:#fff;
  border-top-left-radius:var(--radius);
  border-top-right-radius:var(--radius);
}

label {
    color: black;
}