/* ======================= */
/*  General Global Styles  */
/* ======================= */

body {
  font-family: Arial, sans-serif;
  background-color: #121212;
  color: #f0f0f0;
  margin: 0;
  padding: 0;
}

header {
  background-color: #121212;
  padding: 20px;
  text-align: center;
  position: relative;
}

.wiki-top-button {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 10px 16px;
  font-size: 18px;
  font-weight: bold;
  background-color: #4a90e2;
  border: 1px solid #357ABD;
  border-radius: 6px;
  color: white;
  text-decoration: none;
  z-index: 100;
}

.wiki-top-button:hover {
  background-color: #357ABD;
}

.leaderboard-top-button {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 10px 16px;
  font-size: 18px;
  font-weight: bold;
  background-color: #fe1a1a; /* red */
  border-color:     #ff5757; /* darker red */
  border-radius: 6px;
  color: white;
  text-decoration: none;
  z-index: 100;
}

.leaderboard-top-button:hover {
  background-color: #8d0000;
}

/* ======================== */
/*  Server & Leaderboards   */
/* ======================== */

.server {
  margin-bottom: 40px;
  background-color: #282828;
}

.server h1 {
  background-color: #282828;
  padding: 10px;
  cursor: pointer;
  position: sticky;
  top: 0;
  z-index: 9;
}

.server-header-container {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #282828;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.server-header {
  font-size: 30px;
  font-weight: bold;
  margin-right: auto; /* Push the refresh button and search bar to the right */
}

.refresh-button {
  margin-left: 10px; /* Add space between refresh button and search bar */
  padding: 5px 8px;
  font-size: 14px;
  cursor: pointer;
  background-color: #9c9c9c;
  border: 1px solid #b0b0b0;
  border-radius: 4px;
}

.refresh-button:hover {
  background-color: #626161;
}

.server-search {
  padding: 5px;
  font-size: 14px;
  width: 200px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-left: auto; /* Push the search bar and refresh button to the right */
  display: flex; /* Ensure buttons align correctly */
}

.server-header-container h1 {
  margin: 0;
  line-height: 1;
}

.server-header-container input[type="text"] {
  height: 28px;
  padding: 4px 8px;
  font-size: 14px;
  box-sizing: border-box;
}

.leaderboard h2 {
  position: sticky;
  top: 40px; /* Adjust for header height (server name) */
  z-index: 9;
  background-color: #282828;
  margin: 0;
  padding: 10px;
  text-align: left;
  color: #ffffff;
  cursor: pointer;
}

.leaderboard h2.minimized {
  background-color: #121212;
  color: #aaaaaa;
  text-decoration: underline;
}

table {
  margin-top: 10px; /* Adjust spacing below the leaderboard tab */
  width: 100%;
  border-collapse: collapse;
}

thead th {
  position: sticky;
  top: 80px; /* Adjust for header (40px) + leaderboard (40px) */
  z-index: 1; /* Lower than tabs */
  background-color: rgb(184, 0, 0);
  padding: 10px;
  color: #ffffff;
  border: 1px solid #ffffff;
  text-align: center;
}

table, th, td {
  border: 1px solid #ffffff;
}

th, td {
  padding: 10px;
  text-align: center;
}

th {
  background-color: rgb(184, 0, 0);
}

tbody tr:nth-child(even) {
  background-color: #333;
}

tbody tr:nth-child(odd) {
  background-color: #282828;
}

.section {
  margin-bottom: 20px;
}

.hidden {
  display: none;
}

/* ======================= */
/*  Two‐column Layout      */
/* ======================= */

#wiki-container {
  display: flex;
  height: 700px; /* adjust as needed */
  overflow: hidden;
  background: #111;
  color: #eee;
}

#sidebar {
  width: 465px;         /* initial sidebar width */
  overflow-y: auto;
  border-right: 1px solid #333;
  padding: 0.5em;
  max-height: 700px;
  border: 5px solid #444;
  box-sizing: border-box; /* include that border in the width */
  border-radius: 4px 0 0 4px;
}

#main-content {
  flex: 1;
  border: 5px solid #444;
  border-left: none;    /* prevent double border */
  box-sizing: border-box;
  border-radius: 0 4px 4px 0;
  padding: 1em;
  overflow-y: auto;
}

/* Style the collapsible tree in sidebar */
#sidebar details {
  margin-left: 1.5em;
}

#sidebar summary {
  cursor: pointer;
  font-weight: bold;
  list-style: none;
}

#sidebar ul {
  margin: 0.3em 0 0.3em 1em;
  padding: 0;
}

#sidebar li {
  margin: 0.2em 0;
}

#sidebar a {
  text-decoration: none;
  color: #6cf;
}

#sidebar a:hover {
  text-decoration: underline;
}

/* infobox—floats right inside main content */
.infobox {
  float: right;
  margin: 0 0 1em 1em;
  border: 1px solid #555;
  background: #222;
  color: #eee;
  font-size: 0.9em;
  border-collapse: collapse;
}

.infobox th, .infobox td {
  padding: 4px 8px;
  border: 1px solid #444;
}

.infobox th {
  background: #333;
  text-align: left;
  white-space: nowrap;
}

/* ============= */
/*  Sticky Rules  */
/* ============= */

/* 1) Pin the search box to the top of the sidebar */
#sidebar #item-search {
  position: sticky;
  top: -13px;       /* adjust to the actual height of header above it */
  z-index: 30;
  width: 400px !important;
  background: #fdf9f9; /* match your sidebar bg if white, else adjust */
  padding: 6px;
  margin-bottom: 0px;
  border: 12px solid #111;   /* black border */
  border-radius: 4px; 
  /* fade the very top and bottom ~10% of the container */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 10%,
    rgba(0,0,0,1) 90%,
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 10%,
    rgba(0,0,0,1) 90%,
    rgba(0,0,0,0) 100%
  );
}

/* 2) Pin the server summary just under the search box */
#sidebar summary.server-summary,
#sidebar summary.category-summary {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: #111; /* same as sidebar background */
  margin: 0;
  padding: 4px 8px;
  /* fade the very top and bottom ~10% of the container */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 10%,
    rgba(0,0,0,1) 90%,
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 10%,
    rgba(0,0,0,1) 90%,
    rgba(0,0,0,0) 100%
  );
}

/* 3) Pin each “Terje Settings → Config” summary below the category header */
#sidebar summary.terje-cfg {
  position: sticky;
  top: 70px;              /* below search (–10px), server (20px), category (40px) */
  z-index: 8;             /* lower than category (10) but above section */
  width: 400px;
  background: #111;       /* match sidebar background */
  margin: 0;
  padding: 4px 8px;
  box-sizing: border-box;
  /* fade the very top and bottom ~10% of the container */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 10%,
    rgba(0,0,0,1) 90%,
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 10%,
    rgba(0,0,0,1) 90%,
    rgba(0,0,0,0) 100%
  );
}

/* 4) Pin each “Terje Settings → Section” summary below the config‐level header */
#sidebar summary.terje-section {
  position: sticky;
  top: 90px;              /* 20px below the .terje-cfg (60px) */
  width: 320px;
  z-index: 6;             /* below .terje-cfg but above default list items */
  background: #111;
  margin: 0;
  padding: 4px 16px;      /* indent so it lines up under its parent */
  box-sizing: border-box;
  /* fade the very top and bottom ~10% of the container */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 10%,
    rgba(0,0,0,1) 90%,
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,1) 10%,
    rgba(0,0,0,1) 90%,
    rgba(0,0,0,0) 100%
  );
}

/* existing sticky rules still apply */
#sidebar summary.server-summary {
  position: sticky;
  top: 29px;  /* adjust to match search‐bar’s height */
  width: 400px;
  z-index: 20;
}

#sidebar summary.category-summary {
  position: sticky;
  top: 50px;  /* search + server header */
  width: 400px;
  z-index: 10;
}

/* ================================ */
/*  Draggable Resizer (NEW RULES)   */
/* ================================ */

#resizer {
  width: 5px;           /* thickness of the draggable bar */
  background: #444;     /* visible color */
  cursor: col-resize;   /* left-right resize icon */
  user-select: none;    /* prevent text‐selection while dragging */
}

#resizer:hover {
  background: #666;     /* slightly lighter on hover */
}

#resizer.active {
  background: #888;     /* darkest while actively dragging */
}

/* Show desktop table by default, hide mobile */
.overall-mobile-container {
  display: none;
}

/* At max-width 767px, hide desktop and show mobile */
@media (max-width: 767px) {
  /* make the summary line display nicely on one row */
  .overall-mobile-container .player-item summary {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    background: #333;
    margin-bottom: 2px;
    cursor: pointer;
  }
  .overall-mobile-container .player-item summary .mobile-name {
    flex: 1;
    margin: 0 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* stats revealed when expanded */
  .overall-mobile-container .player-item .mobile-stats {
    padding: 8px;
    background: #222;
    border-left: 2px solid #555;
    border-right: 2px solid #555;
    border-bottom: 2px solid #555;
  }
  .overall-desktop {
    display: none;
  }
  .overall-mobile-container {
    display: block;
  }
  .wiki-top-button {
    padding:    8px 10px;    /* less padding */
    top: 165px; /* push it down only on mobile */
    font-size:  12px;        /* smaller text */
  }
  .leaderboard-top-button {
    padding:    10px 10px;    /* less padding */
    top: 162px; /* push it down only on mobile */
    font-size:  12px;        /* smaller text */
  }
  header .under-construction {
  position: absolute;
  top: 175px;    /* tweak as needed to sit below your other header text */
  left: 20px;   /* distance from left edge */
  margin: 0;
  color: #f39c12; /* optional: make it stand out */
  font-weight: bold;
}
  /* 1) Change container from row to column */
  #wiki-container {
    flex-direction: column;
    height: auto;        /* allow height to grow */
  }

  /* 2) Sidebar should fill full width and have a default height */
  #sidebar {
    width: 100% !important;       /* ignore the old fixed 465px */
    height: 40vh;                 /* for example, 40% of viewport height */
    max-height: none;             /* remove the old max-height */
    border-right: none;           /* no right border in stacked layout */
    border-bottom: 1px solid #333;/* if you want a divider */
  }

  /* 3) Main content fills remaining space by default */
  #main-content {
    flex: 1 1 auto;
    width: 100%;
    height: calc(60vh - 5px);     /* 60% of viewport minus resizer height */
  }

  /* 4) Make #resizer a horizontal bar instead of vertical */
  #resizer {
    width: 100%;      /* span full width */
    height: 5px;      /* thickness of the horizontal bar */
    cursor: row-resize;
    background: #444;
    user-select: none;
  }
  #resizer:hover {
    background: #666;
  }
  #resizer.active {
    background: #888;
  }
}