/* ==========================================================================
   Servers — table, filters, CTA (scoped to servers page)
   ========================================================================== */
:root{ --srv-actions-w: 280px; } 
   
/* ---------- CTA strip ---------- */
.srv-cta{
  display:flex; align-items:center; gap:10px;
  padding: 12px 14px;
  border:1px solid rgba(150,180,210,.24);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--card-bg1), var(--card-bg2));
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  margin: 8px 0 12px;
}
.srv-cta .cta-text{ font-weight:700; color:#cfe4ff; }
.srv-cta .cta-hint{ color:var(--muted); }

/* ---------- Filter chips ---------- */
nav[aria-label="Server categories"]{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
}
nav[aria-label="Server categories"] strong{ margin-right:4px; }
nav[aria-label="Server categories"] a{
  display:inline-block;
  padding:6px 12px;
  border:1px solid rgba(150,180,210,.25);
  border-radius: 999px;
  background: rgba(15,24,39,.66);
  color:#cfe4ff; text-decoration:none;
  box-shadow: 0 6px 16px rgba(0,0,0,.28) inset;
}
nav[aria-label="Server categories"] a:hover{
  border-color: rgba(150,180,210,.38);
}
 /* Fallback “active” styling (PHP sets font-weight:bold inline) */
nav[aria-label="Server categories"] a[style*="font-weight:bold"]{
  background: color-mix(in oklab, var(--neon) 16%, rgba(15,24,39,.85));
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--neon) 40%, transparent) inset;
}

/* ---------- Table wrapper ---------- */
.table-responsive{
  overflow:auto;
  border:1px solid rgba(150,180,210,.24);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--card-bg1), var(--card-bg2));
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

/* ---------- Table ---------- */
.table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ink);
  font-size: 15px;
}

.table thead th{
  position: sticky;           /* optional; comment if you don’t want sticky */
  top: 0;
  background: rgba(10,16,24,.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color:#cfe4ff;
  text-align:left;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(150,180,210,.24);
  white-space: nowrap;
  z-index: 1;
}
.table thead th:first-child{ border-top-left-radius: 14px; }
.table thead th:last-child{  border-top-right-radius: 14px; }

.table tbody td{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(150,180,210,.14);
  vertical-align: middle;
}
.table tbody tr:last-child td{
  border-bottom: 0;
}
.table tbody tr:hover{
  background: rgba(255,255,255,.03);
}

/* Code/IP nowrap */
.nowrap{ white-space: nowrap; }

/* Sort affordances */
.table thead th[data-sort]{ cursor:pointer; user-select:none; position:relative; }
.table thead th[data-sort]::after{
  content: '↕';
  margin-left: 6px; opacity:.5; font-size:.9em;
}
.table thead th[aria-sort="ascending"]::after{ content:'↑'; opacity:.9; color:var(--accent); }
.table thead th[aria-sort="descending"]::after{ content:'↓'; opacity:.9; color:var(--accent); }

/* ---------- Action buttons ---------- */
.btn-copy,
.btn-flag,
table form button{
  appearance:none; border:0; cursor:pointer;
  padding:6px 10px; margin:2px 0;
  border-radius: 10px;
  color:#00141f; background: #8fd7ff;
  text-decoration:none; font-weight:800; letter-spacing:.02em;
}
.btn-flag{ background:#ffd28a; }
table form button{ background:#ff9dbb; }
.btn-copy:hover,
.btn-flag:hover,
table form button:hover{
  filter: brightness(1.05);
}

/* “Permanent delete” can be visually distinct */
table form button:where([type="submit"]){ white-space: nowrap; }

/* ---------- Mobile “stacked” mode ----------
   IMPORTANT: Only enable labels on small screens
   (this is what fixes the desktop overlay) */
.table-stacked td::before{ display:none; }

@media (max-width: 760px){
  .table thead{ display:none; }
  .table tbody tr{
    display:block;
    border-top:1px solid rgba(150,180,210,.22);
    padding: 8px 8px 10px;
  }
  .table tbody td{
    display:flex;
    align-items:baseline;
    gap:10px;
    padding: 8px 4px;
    border:0;
  }
  .table-stacked td::before{
    display:inline-block;
    content: attr(data-label);
    min-width: 96px;
    font-weight:800;
    color:#cfe4ff;
    opacity:.9;
  }
  .c-ep{ align-items:center; }
}

/* ---------- Utilities ---------- */
.c-name a{ color:#cfe4ff; text-decoration:none; }
.c-name a:hover{ text-decoration:underline; }
.c-pop{ white-space: nowrap; }

/* 1) Make table content use our light ink by default */
.table { color: #cfe4ff; }
.table a { color: #cfe4ff; }
.table code { color: #aee5ff; }
.table small { color: #9fb2cc; }

/* 2) Buttons – switch to light ink on colored pills */
.btn-copy,
.btn-flag,
.table-responsive form button{
  color: #e8eef7;                 /* was #00141f (near-black) */
  text-shadow: 0 1px 1px rgba(0,0,0,.35); /* keeps contrast on light pills */
}

/* Optional: darken the pills slightly so the light text pops more */
.btn-copy { background: #4dbdf5; }       /* cyan */
.btn-flag  { background: #ffb85c; }      /* amber */
.table-responsive form button { background: #ff6ea0; }  /* pink */

 /* If you can, add class="c-actions" on the <th> and <td> of the Actions col */
.table thead th.c-actions,
.table tbody td.c-actions{
  width: var(--srv-actions-w);
  white-space: nowrap;                 /* keep pills on one line */
}

/* Fallback when you can’t touch markup (uses the last column) */
.table thead th:last-child,
.table tbody td:last-child{
  width: var(--srv-actions-w);
  white-space: nowrap;
}

/* Make sure the column doesn’t shrink on narrow viewports (desktop only) */
@media (min-width: 761px){
  .table{ table-layout: auto; }       /* normal table sizing */
  .table thead th:last-child,
  .table thead th.c-actions{ min-width: var(--srv-actions-w); }
}

/* Pill consistency (height, baseline, spacing) */
.btn-copy,
.btn-flag,
.table-responsive form button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  line-height: 1;
  padding: 0 12px;
  vertical-align: middle;              /* keeps pills centered in the row */
  white-space: nowrap;                 /* extra guard */
  gap: .25rem;
}

/* Ensure predictable spacing between the three controls */
.table tbody td:last-child > a,
.table tbody td:last-child > form{ margin-right: 8px; }
.table tbody td:last-child > :last-child{ margin-right: 0; }

/* Optional: numeric columns don’t jitter (tabular numerals) */
.table .nowrap,
.table .c-ep{ font-variant-numeric: tabular-nums; }

.fly-toast{
    position:fixed;
    padding:8px 12px;
    border-radius:999px;
    font-size:14px;
    line-height:1;
    background:rgba(20,20,25,.96);
    color:#fff;
    box-shadow:0 8px 24px rgba(0,0,0,.25);
    opacity:0;
    transform:translate(-50%,6px) scale(.98);
    transition:opacity .16s ease-out, transform .16s ease-out;
    z-index:2147483647;
    pointer-events:none;
}
.fly-toast.show{
    opacity:1;
    transform:translate(-50%,-4px) scale(1);
}