:root {
  --bg:#111;
  --fg:#eee;
  --muted:#aaa;
  --ok:#1b5e20;
  --bad:#b71c1c;
  --card:#0d0d0d;
  --accent:#8bc34a;
  --tab:#1a1a1a;
  --tab-active:#222;
}

* {
  box-sizing:border-box;
}

html {
  scrollbar-gutter: stable;
}

html,
body {
  height:100%;
}

/* Base + fallback BG color */
body {
  font-family:system-ui, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--fg);
  margin:0;
  line-height:1.5;
  display:flex;
  flex-direction:column;
}

/* Full-bleed background image with soft darkening */
body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.45)),
    url('/img/2025-10-11_17-53-03.webp') center / cover no-repeat fixed;
  filter:saturate(1.05) contrast(1.02);
}

main {
  padding:1.25rem;
  flex:1 0 auto;
}

a {
  color:var(--accent);
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
}

header {
  padding:1rem 1.25rem;
  border-bottom:1px solid #222;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  align-items:flex-start;
  background:rgba(17,17,17,.60);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

@media (min-width:700px) {
  header {
    flex-direction:row;
    align-items:center;
  }
}

h1 {
  margin:0;
  font-size:1.25rem;
  color:#cfd8dc;
}

.status {
  margin-left:0;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  align-items:center;
}

.badge {
  display:inline-block;
  padding:.25rem .6rem;
  border-radius:.5rem;
  font-weight:700;
}
.ok   { background:var(--ok); }
.bad  { background:var(--bad); }
.warn { background:#fbc02d; color:#111; }

.meta {
  color:var(--muted);
  font-size:.95rem;
}

nav.tabs {
  display:flex;
  gap:.25rem;
  background:rgba(18,18,18,.60);
  border-bottom:1px solid #222;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
nav.tabs button {
  appearance:none;
  border:0;
  background:var(--tab);
  color:var(--fg);
  padding:.75rem 1rem;
  cursor:pointer;
}
nav.tabs button.active {
  background:rgba(34,34,34,.85);
  font-weight:700;
}

.card {
  background:rgba(13,13,13,.78);
  border:1px solid rgba(255,255,255,.06);
  border-radius:.5rem;
  padding:1rem;
  margin:0 0 1rem 0;
  box-shadow:0 6px 24px rgba(0,0,0,.35);
}

pre {
  background:rgba(11,11,11,.85);
  padding:1rem;
  border-radius:.5rem;
  white-space:pre-wrap;
  overflow:auto;
  margin:0;
}

.warning {
  background:rgba(183,28,28,.20);
  border-left:4px solid var(--bad);
  padding:.5rem 1rem;
  border-radius:.25rem;
}

.notice {
  background:rgba(27,94,32,.20);
  border-left:4px solid var(--ok);
  padding:.5rem 1rem;
  border-radius:.25rem;
}

/* Dedicated styles for the live status notice card */
.status-card {
  margin-bottom:1rem;
}
.status-card.status-online {
  background:rgba(27,94,32,.20);
  border-left:4px solid var(--ok);
}
.status-card.status-restarting {
  background:rgba(251,192,45,.20);
  border-left:4px solid #fbc02d;
  color:#111; /* dark text on yellow for better contrast */
}
.status-card.status-offline {
  background:rgba(183,28,28,.20);
  border-left:4px solid var(--bad);
}

.overview-main {
  display:flex;
  flex-direction:column;
  gap:1rem;
  margin-bottom:1rem;
}

@media (min-width:900px) {
  .overview-main {
    display:grid;
    grid-template-columns: 1.2fr 1fr;
    align-items:stretch;
  }
  .overview-main > .card {
    height:100%;
    display:flex;
    flex-direction:column;
  }
}

.grid {
  display:grid;
  gap:1rem;
}
@media (min-width:900px) {
  .grid {
    grid-template-columns:1fr 1fr 1fr 1fr;
  }
}

.muted { color:var(--muted); }
.small { font-size:.9rem; }
.hide  { display:none; }

footer {
  padding:1rem 1.25rem;
  border-top:1px solid #222;
  color:var(--muted);
  font-size:.9rem;
  background:rgba(17,17,17,.60);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

code,
kbd {
  background:#1b1b1b;
  padding:.1rem .35rem;
  border-radius:.25rem;
}

/* Language switcher container */
.lang-switch {
  margin-top:.5rem;
  display:flex;
  align-items:center;
  gap:.35rem;
}

/* On wide screens, keep it on the far right of the header */
@media (min-width:700px) {
  .lang-switch {
    margin-left:auto; /* keeps it pinned on the same side regardless of LTR/RTL */
  }
}

/* Label that holds the globe + hidden text */
.lang-label {
  display:inline-flex;
  align-items:center;
}

/* The globe icon itself */
.lang-icon {
  font-size:1.1rem;
  line-height:1;
}

/* Standard visually-hidden / sr-only helper */
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

/* Tidy up the <select> look a bit */
.lang-switch select {
  background-color:#1e1e1e;
  color:var(--fg);
  border:1px solid #333;
  border-radius:.3rem;
  padding:.2rem .5rem;
  font-size:.9rem;
}

/* RTL override so the selector stays consistently laid out */
html[dir="rtl"] header {
  direction:ltr; /* keep header layout LTR even when page is RTL */
}
html[dir="rtl"] header .lang-switch {
  direction:ltr; /* keep the language selector left-to-right */
}

/* Highlight keyboard focus clearly */
:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* If JS is completely disabled, hide the empty status notice container.
   (The <html> tag starts with class="no-js" which JS removes on load.) */
.no-js #status-notice-container {
  display:none;
}

/* Motion/transition safety for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior:auto !important;
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
}

.skip-link {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-200%); /* move it off-screen vertically */
  padding: 0.5rem 1rem;
  background: #000;
  color: #fff;
  z-index: 9999;
  border-radius: 0.25rem;
}

/* When focused via keyboard, slide it into view */
.skip-link:focus {
  transform: translateY(0);
}

/* Utility helper: hide element visually (for initial JS-controlled state) */
.is-hidden {
  display:none !important;
}

/* Player table + controls
   ------------------------------------------------------------------ */

/* Sort controls */
.player-sort-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.player-sort-controls .sort-btn {
  border: 1px solid #444;
  background: #111;
  color: #eee;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.85rem;
  cursor: pointer;
}

.player-sort-controls .sort-btn.active {
  background: #2a6ad6;
  border-color: #2a6ad6;
}

/* Player table layout */
/* Scrollable wrapper so the table doesn't explode on small screens */
.player-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* smoother scroll on iOS */
}

/* Base table styling (you already have most of this; just keep it tidy) */
.player-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.75rem;
}

.player-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #bbbbbb;
  padding: 0.35rem 0.5rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* subtle line */
}

.player-table td {
  padding: 0.25rem 0.5rem;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap; /* prevent ugly wrapping of timestamps */
}

/* Status dot column: tiny and centered */
.player-table th.col-status,
.player-table td.col-status {
  width: 2rem;
  text-align: center;
}

/* Zebra striping */
.player-table tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.02);
}

/* Mobile tweaks */
@media (max-width: 600px) {
  .player-table th,
  .player-table td {
    padding: 0.2rem 0.35rem;
    font-size: 0.78rem;
  }

  .player-table th.col-status,
  .player-table td.col-status {
    width: 1.5rem;
  }
}

/* Ensure rows behave like table rows (not flex) */
.player-row {
  display: table-row;
}

/* Online/offline dot */
.status-dot {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  background: #f44336; /* offline default */
}

.status-dot.online {
  background: #4caf50;
}

.status-dot.offline {
  background: #f44336;
}

/* Make the mod header row flexible */
.mod-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
}

/* Meta line for Mod ID + File */
.mod-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.75rem;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mod-meta code {
  overflow-wrap: anywhere;
  word-break: break-all;
  max-width: 100%;
}

/* Each chunk ("Mod ID: x", "File: y") */
.mod-line {
  white-space: nowrap; /* keep label + value together on wide screens */
}

/* On narrow screens, stack Mod ID and File on separate lines */
@media (max-width: 600px) {
  .mod-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }

  .mod-line {
    white-space: normal; /* allow wrapping on mobile if needed */
  }
}

/* Mobile-friendly, compact stacked tabs */
@media (max-width: 540px) {
  nav.tabs {
    flex-wrap: wrap;
  }

  nav.tabs button {
    flex: 1 1 100%;
    text-align: left;        /* or center, your call */
    white-space: normal;     /* allow long labels to wrap */
    font-size: 0.85rem;      /* a bit smaller */
    line-height: 1.2;        /* tighter lines */
    padding: 0.4rem 0.75rem; /* shorter buttons vertically */
  }
}