/* Base + reset */
* { box-sizing: border-box; }
:root{
  --bg:#0b1220;
  --card:#142135;
  --muted:#a9bbce;
  --text:#e8eef6;
  --text-dim:#c6d3e3;
  --accent:#3ea0ff;
  --border:#2b3a4f;
  --nav:#0a111d;

  /* Layout vars (used by sidebar + content) */
  --topbar-h: 75px;
  --sidebar-w: 240px;
}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  margin:0;
}

/* Top nav */
.nav{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;background:var(--nav);color:#fff;
  position:sticky;top:0;z-index:100;border-bottom:1px solid var(--border);
}
.nav a,.nav strong{color:#fff}

/* Buttons */
.btn{
  background:var(--accent);border:none;padding:10px 14px;border-radius:10px;
  color:#fff;font-weight:700;cursor:pointer
}
.btn:hover{filter:brightness(1.06)}

/* Cards */
.card{
  background:var(--card);border-radius:16px;padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);border:1px solid var(--border)
}

/* Inputs */
.input{
  width:100%;padding:10px 12px;border-radius:10px;
  border:1px solid var(--border);background:#0f1a2a;color:var(--text)
}
.input::placeholder{color:#99a8ba}

/* Header dropdown menu — SCOPE IT so it doesn't hide sidebar */
.header-menu{position:relative}
.header-menu .menu{
  position:absolute;right:0;top:40px;background:#0f1a2a;
  border:1px solid var(--border);border-radius:12px;padding:8px;display:none
}
.header-menu.open .menu{display:block}

/* Layout helpers */
.grid{display:grid;gap:16px}

/* Map area */
.map-wrap{
  height:60vh;display:flex;align-items:center;justify-content:center;
  border-top:1px solid var(--border)
}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center; z-index:10000; }
.modal.open{display:flex}
.modal .content{width:360px}

/* Badges */
.badge{
  padding:3px 8px;border-radius:999px;background:#1b2b44;font-size:12px;
  color:var(--text-dim);border:1px solid var(--border)
}
.badge.admin{background:#174f2f;color:#dcffe7}
.badge.banned{background:#4f1a1a;color:#ffd3d3}

/* Links */
a,a:visited{color:#9ecbff}

/* Tables */
table{width:100%;border-collapse:collapse}
th,td{
  text-align:left;padding:10px 10px;border-bottom:1px solid var(--border);
  vertical-align:middle
}
td form{display:inline-flex;gap:8px;align-items:center;margin:4px 0}
td form .input{width:140px}
td form select.input{width:130px}

/* Avatars */
.avatar{display:inline-block;border-radius:50%;object-fit:cover;background:#0f1a2a;border:1px solid var(--border)}
.avatar-sm{width:24px;height:24px}
.avatar-top{width:48px;height:48px}
.avatar-lg{width:64px;height:64px}

/* ---------- Sidebar + Content ---------- */

.app-sidebar{
  position:fixed;
  left:0;
  top:var(--topbar-h);                 /* below top bar */
  height:calc(100% - var(--topbar-h));
  width:var(--sidebar-w);
  background:#1e1e1e;
  border-right:1px solid #2b2b2b;
  padding:8px 0 16px;
  z-index:9000;
  overflow-y:auto;
}

/* Push page content over and clear top bar */
.app-main-content{
  margin-left:var(--sidebar-w);
  padding:20px;
}


/* Sidebar internals */
.app-sidebar .sb-list{ list-style:none; margin:0; padding:0; }
.app-sidebar details{ margin:0; border:0; }

/* Clickable row */
.app-sidebar summary{
  display:flex; align-items:center; gap:8px;
  padding:10px 16px;
  cursor:pointer;
  color:#f0f0f0;
  font-size:16px;
  user-select:none;
  outline:none;
}
.app-sidebar summary:hover{ background:#333; color:#fff; }

/* Hide default triangle (webkit) */
.app-sidebar summary::-webkit-details-marker{ display:none; }

/* Chevron */
.app-sidebar .chev{ display:inline-block; transition:transform .2s ease; }
.app-sidebar .submenu a.active {
  font-weight: 700;
  text-decoration: underline;
}

.app-sidebar details[open] > summary .chev {
  display: inline-block;
  transform: rotate(90deg);
}

/* Submenu */
.app-sidebar .submenu{ background:#252525; display:block; }
.app-sidebar .submenu a{
  display:block; padding:8px 24px;
  color:#bbbbbb; font-size:14px; text-decoration:none;
}
.app-sidebar .submenu a:hover{ background:#3a3a3a; color:#fff; }

/* Safety: make sure header dropdown scoping never hides sidebar */
.app-sidebar .menu,
.app-sidebar .sb-list { display:block !important; }


.tower-topbar {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 10;
  pointer-events: none; /* so clicks pass through except the button */
}

.btn-back {
  pointer-events: auto;           /* re-enable for the button */
  display: inline-block;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

.btn-back:hover { background: rgba(0,0,0,0.7); }

.tower-title {
  pointer-events: none;
  color: #fff;
  font-weight: 700;
  opacity: .9;
}