/* =========================================================
   RoH — Global Styles (Dark Fantasy UI)
   ========================================================= */

/* -------- CSS Variables -------- */
:root {
  --bg: #0b1220;
  --bg-elev: #111a2e;
  --glass: rgba(18,26,44,.65);
  --text: #e6edf3;
  --muted: #8ea2b7;
  --border: rgba(255,255,255,.10);
  --accent: #64d3ff;       /* general accent / hover outline */
  --ok: #90ee90;
  --danger: #ff6b6b;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 12px;
  --radius-lg: 16px;
  --pad: 16px;
  --pad-lg: 20px;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
}

/* -------- Base -------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { color-scheme: dark; }
body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
}

/* -------- Background Aether (subtle animated gradient) -------- */
.bg-aether {
  position: fixed; inset: -10% -10% auto -10%;
  height: 60vh; z-index: -1;
  background: radial-gradient(1200px 600px at 20% 10%, rgba(100,211,255,.10), transparent 65%),
              radial-gradient(900px 500px at 80% 0%, rgba(192,132,252,.10), transparent 65%);
  filter: blur(0.2px);
  pointer-events: none;
}

/* -------- Layout Containers -------- */
.wrap {
  max-width: 1100px;
  padding: 20px;
  margin: 0 auto 60px;
}
.site-header {
  padding: 26px 20px 8px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(18,26,44,.65), rgba(18,26,44,0));
}
.site-footer {
  opacity: .7; font-size: 13px; text-align: center;
  padding: 20px; border-top: 1px solid var(--border);
}

/* -------- Brand / Titles -------- */
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo { width: 48px; height: 48px; object-fit: contain; }
.titles h1 { margin: 0; font-size: 22px; }
.titles .sub { color: var(--muted); font-size: 13px; }

/* -------- Cards / Panels -------- */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin: 16px 0;
}
.card.glass { background: var(--glass); backdrop-filter: blur(8px); }
.card-title { margin: 0; padding: var(--pad-lg); font-size: 18px; border-bottom: 1px solid var(--border); }
.card > p.muted { margin: 8px 20px 0; }

.panel { position: relative; margin: 16px 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.panel-accent { height: 4px; background: linear-gradient(90deg, #666, #aaa); }
.term { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.02); }

/* Pills / badges */
.pill {
  display: inline-block; padding: 2px 8px; border: 1px solid var(--border);
  border-radius: 999px; font-size: 12px; color: var(--text);
}

/* -------- Tables -------- */
.table-wrap { width: 100%; overflow: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.table thead th { font-size: 13px; color: var(--muted); background: rgba(255,255,255,.02); }
.table.compact th, .table.compact td { padding: 8px 10px; font-size: 14px; }

/* -------- Buttons -------- */
.btn-primary,
.btn-ghost,
.btn-danger {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
  background: none;
  border: 1px solid var(--border);
}
.btn-primary { background: rgba(100,211,255,.12); border-color: rgba(100,211,255,.35); }
.btn-primary:hover { background: rgba(100,211,255,.18); }
.btn-ghost:hover { outline: 1px solid rgba(100,211,255,.25); background: rgba(100,211,255,.10); }
.btn-danger { border-color: rgba(255,107,107,.5); color: #ffb0b0; }
.btn-danger:hover { background: rgba(255,107,107,.10); }

/* -------- Text helpers -------- */
.muted { color: var(--muted); }

/* =========================================================
   Elections / Admin helpers
   ========================================================= */
.stack { display: grid; gap: 10px; }
.two { display: grid; gap: 10px; }
@media (min-width: 760px) { .two { grid-template-columns: 1fr 1fr; } }
.sched-grid { display: grid; gap: 8px; }
@media (min-width: 780px) { .sched-grid { grid-template-columns: 1fr 1fr; } }

/* Expandable sections */
details.toggle { margin: 8px 0; }
details.toggle > summary { cursor: pointer; list-style: none; user-select: none; }
details.toggle > summary::marker,
details.toggle > summary::-webkit-details-marker { display: none; }
details.toggle > summary .twist { display: inline-block; transition: transform .2s; margin-right: 8px; }
details.toggle[open] > summary .twist { transform: rotate(90deg); }

/* Discord textarea + copy UI */
.copy-wrap { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.copy-btn {
  background: none; border: 1px solid var(--border);
  border-radius: 10px; padding: 6px 10px; color: inherit; cursor: pointer;
}
.copy-btn:hover { outline: 1px solid rgba(100,211,255,.25); background: rgba(100,211,255,.08); }
textarea.discord {
  width: 100%; min-height: 220px;
  border: 1px solid var(--border); border-radius: 10px;
  background: rgba(13,21,38,.55); color: #e6edf3;
  padding: 10px; white-space: pre-wrap;
  font-family: "Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji", var(--font-ui);
}

/* =========================================================
   Division Accent Colors
   ========================================================= */

/* ESO — Royal Amethyst / gold glint */
.division-ESO .panel-accent {
  background: linear-gradient(90deg, #8b5cf6, #f0abfc);
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.55);
}

/* GW2 — Crimson Ember */
.division-GW2 .panel-accent {
  background: linear-gradient(90deg, #ef4444, #f59e0b);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.55);
}

/* WoW — Valor Gold */
.division-WOW .panel-accent {
  background: linear-gradient(90deg, #f59e0b, #facc15);
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.55);
}

/* High Elder — Celestial Silver (Option 1) */
.division-HE .panel-accent {
  background: linear-gradient(90deg, #dfe7ff, #a0b2ff);
  box-shadow: 0 0 15px rgba(160, 178, 255, 0.5);
}
/* Optional subtle glow for titles in HE sections */
.division-HE .card-title,
.division-HE h2 {
  color: #cdd7ff;
  text-shadow: 0 0 6px rgba(160,178,255,0.5);
}

/* =========================================================
   Global Right-side Dropdown Navigation (was in nav.php)
   ========================================================= */

.roh-nav {
  position: fixed;
  top: 12px;
  right: 12px;
  left: auto;
  z-index: 1000;
  font-family: var(--font-ui);
}

/* Menu Button */
.roh-nav__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(13,21,38,.7);
  color: var(--text);
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background .2s, outline .2s;
}
.roh-nav__btn:hover {
  outline: 1px solid rgba(100,211,255,.25);
  background: rgba(100,211,255,.08);
}
.roh-nav__icon { font-size: 16px; line-height: 1; }
.roh-nav__label { font-size: 13px; opacity: .9; }

/* Dropdown Menu (opens leftward under the button) */
.roh-nav__menu {
  position: absolute;
  top: 44px;
  right: 0;
  left: auto;
  transform-origin: top right;
  min-width: 240px;
  padding: 8px;
  border: 1px solid var(--border);
  background: rgba(18,26,44,.95);
  color: var(--text);
  border-radius: 12px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
  animation: navFadeIn .18s ease-out;
}
@keyframes navFadeIn {
  from { opacity: 0; transform: scale(.95) translateY(-5px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Menu sections and items */
.roh-nav__section {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--muted);
  padding: 6px 8px 4px;
}
.roh-nav__item {
  display: block;
  padding: 10px;
  margin: 4px 0;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  font-size: 14px;
  border: 1px solid transparent;
  transition: background .15s, border .15s;
}
.roh-nav__item:hover {
  background: rgba(100,211,255,.08);
  border-color: rgba(100,211,255,.25);
}
.roh-nav__hr {
  height: 1px;
  margin: 6px 4px;
  background: var(--border);
}

/* Small screens */
@media (max-width: 480px){
  .roh-nav { top: 10px; right: 10px; }
}

/* =========================================================
   Forms (generic)
   ========================================================= */
input[type="text"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(13,21,38,.55);
  color: var(--text);
}
label { font-size: 13px; color: var(--muted); display: block; margin: 6px 0; }

/* Links */
a { color: #a9e6ff; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Utility: hide if images fail */
img[onerror] { /* no-op; onerror used inline to hide */ }


.cal-add {
  margin-left: 8px;
  text-decoration: none;
  font-size: 16px;
}
.cal-add:hover { text-decoration: underline; }