/* Emrion web interface: additions to wiki.css (menus, forms, messages, admin wiki) */
.brand-icon { image-rendering: pixelated; }

/* ---- Menus in the top bar ---- */
.topbar .nav { flex: 1; }
.dropdown { position: relative; }
.dropdown-toggle { background: none; cursor: pointer; font-family: var(--pixel); }
button.nav-link { border: 2px solid transparent; }
.dropdown-menu {
  position: absolute; left: 0; top: calc(100% + 6px); min-width: 220px; padding: 4px; z-index: 60;
  display: none; flex-direction: column;
}
.dropdown.right .dropdown-menu { left: auto; right: 0; }
.dropdown.open .dropdown-menu { display: flex; }
.dropdown-item { padding: 0.45rem 0.7rem; color: var(--text); font-family: var(--pixel); font-size: 0.85rem; }
.dropdown-item:hover, .dropdown-item.active { background: var(--panel-hi); text-decoration: none; }
.dropdown-item.sub { padding-left: 1.6rem; color: var(--muted); }
.account { margin-left: auto; }

/* ---- Messages ---- */
.alert { padding: 0.8rem 1rem; margin: 0 0 1.2rem; border-left: 6px solid var(--link); }
.alert.ok { border-left-color: var(--accent); }
.alert.error { border-left-color: #e05050; }
.alert.warning { border-left-color: var(--accent-2); }

/* ---- Forms ---- */
.form { padding: 1.2rem 1.4rem; max-width: 520px; }
.form.wide { max-width: none; }
.field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; }
.field > span { color: var(--muted); font-size: 0.9rem; }
.field input[type=text], .field input[type=password], .field input[type=search], .field input[type=datetime-local], .input {
  appearance: none;
  font: 0.95rem var(--pixel); color: var(--text); background: #000;
  border: 2px solid #a0a0a0; outline: none; padding: 0.55rem 0.7rem; width: 100%;
}
.field input:focus, .input:focus { border-color: #fff; }
button.btn { cursor: pointer; font-family: var(--pixel); }
.buttons { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.4rem 1rem; margin-bottom: 1.2rem; }
.check { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.6rem; background: var(--slot); border: 2px solid #000; }
.check input { width: 18px; height: 18px; accent-color: #4c8a2f; }
.check.locked { opacity: 0.55; }
.hint { color: var(--muted); font-size: 0.9rem; }

/* ---- Tables ---- */
.panel .table { margin: 0; }
.table tr:hover td { background: #ffffff06; }
.groups span + span::before { content: ", "; color: var(--muted); }

/* ---- Admin wiki ---- */
.wiki-layout { display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; align-items: start; }
.sidebar { padding: 0.8rem; position: sticky; top: 5rem; }
.sidebar h3 { font-size: 0.9rem; margin: 0.6rem 0.4rem 0.4rem; }
.sidebar a { display: block; padding: 0.3rem 0.5rem; color: var(--text); font-size: 0.9rem; }
.sidebar a:hover, .sidebar a.active { background: var(--panel-hi); text-decoration: none; }
.sidebar a.active { box-shadow: inset 3px 0 0 var(--accent); }
.md { padding: 1.4rem 1.8rem; min-width: 0; }
.md h1 { margin-top: 0; }
.md h2 { margin-top: 1.8rem; }
.md table { width: 100%; border-collapse: collapse; margin: 1rem 0; display: block; overflow-x: auto; }
.md th, .md td { text-align: left; padding: 0.5rem 0.8rem; border-bottom: 1px solid #2c2c33; vertical-align: top; }
.md th { font-family: var(--pixel); font-weight: normal; color: var(--accent); }
.md pre { background: var(--panel-lo); border: 2px solid #000; padding: 0.8rem 1rem; overflow-x: auto; }
.md pre code { background: none; border: 0; padding: 0; }
.md blockquote { margin: 1rem 0; padding: 0.4rem 1rem; border-left: 4px solid var(--accent-2); color: var(--muted); }

@media (max-width: 900px) {
  .wiki-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .account { margin-left: 0; }
}

/* ---- Rights page: filter and player search with suggestions ---- */
.toolbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem 1.5rem; margin-bottom: 1rem; }
.toolbar .field { margin: 0; }
.toolbar input { appearance: none; font: 0.95rem var(--pixel); color: var(--text); background: #000; border: 2px solid #a0a0a0; outline: none; padding: 0.55rem 0.7rem; width: 100%; }
.toolbar input:focus { border-color: #fff; }
.player-search { position: relative; }
.suggestions { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; padding: 4px; z-index: 40; display: none; flex-direction: column; }
.suggestions.open { display: flex; }
.suggestions a { padding: 0.4rem 0.6rem; color: var(--text); font-family: var(--pixel); font-size: 0.9rem; }
.suggestions a:hover, .suggestions a.sel { background: var(--panel-hi); text-decoration: none; }

/* ---- Search forms and result tables with a map ---- */
.search-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 1.5rem; padding: 1.2rem 1.4rem; margin-bottom: 1.5rem; }
.search-form .full { grid-column: 1 / -1; }
.search-form select, .field select { font: 0.95rem var(--pixel); color: var(--text); background: #000; border: 2px solid #a0a0a0; padding: 0.5rem; width: 100%; }
.radios { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.radios label { display: flex; align-items: center; gap: 0.4rem; }
.map-frame { width: 100%; height: 480px; border: 2px solid #000; background: #000; margin-bottom: 1rem; display: block; }
tr[data-map] { cursor: pointer; }
tr.sel td { background: #6fcf4a22 !important; }
.table.small th, .table.small td { padding: 0.35rem 0.6rem; font-size: 0.9rem; }
.pager { display: flex; gap: 0.5rem; align-items: center; margin: 1rem 0; }
.stat-big { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-big .stat b { font-size: 2.4rem; }
.tag { display: inline-block; padding: 1px 8px; border: 1px solid #000; font-family: var(--pixel); font-size: 0.8rem; color: #000; }
.deleted { opacity: 0.5; text-decoration: line-through; }
.mc-chat { font-family: var(--pixel); background: #000; padding: 0.4rem 0.6rem; text-shadow: 2px 2px 0 #3f3f3f; }
.map-frame.big { height: calc(100vh - 14rem); min-height: 420px; }

/* ---- Date and time fields: dark picker, opens on click; quick ranges ---- */
:root { color-scheme: dark; }
input[type=datetime-local] { cursor: pointer; }
input[type=datetime-local]::-webkit-calendar-picker-indicator { filter: invert(0.85); cursor: pointer; }
.quick-range { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.quick-range button { font: 0.75rem var(--pixel); color: var(--text); background: var(--slot); border: 2px solid #000; padding: 0.25rem 0.55rem; cursor: pointer; }
.quick-range button:hover { background: var(--panel-hi); }

/* ---- Expandable rows (loot tables per type) ---- */
button.expand { font: inherit; color: var(--link); background: none; border: 0; padding: 0; cursor: pointer; }
button.expand:hover { text-decoration: underline; }
tr.sub-row td { background: #ffffff05; color: var(--muted); font-size: 0.85rem; }
tr.sub-row td:nth-child(3) { padding-left: 1.6rem; font-family: var(--pixel); }

/* ---- Start page (emrion.de) ---- */
.server-address { display: inline-flex; flex-direction: column; padding: 0.7rem 1.1rem; margin: 0.4rem 0 0.6rem; cursor: pointer; }
.server-address b { font-family: var(--pixel); font-size: 1.4rem; color: var(--accent-2); text-shadow: 2px 2px 0 #000; }
.server-address small { color: var(--muted); font-size: 0.8rem; }
.server-address .copied-hint { display: none; color: var(--accent); }
.server-address.copied .copied-hint { display: block; }
.announcements { display: grid; gap: 1rem; margin-bottom: 2rem; }
.announcement h1 { font-size: 1.3rem; margin: 0.6rem 0 0.4rem; }
.footer a { color: var(--muted); margin: 0 0.5rem; }
.dropdown-head { padding: 0.5rem 0.7rem 0.2rem; font-family: var(--pixel); font-size: 0.7rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; }
.dropdown-head:not(:first-child) { margin-top: 0.3rem; border-top: 1px solid #2c2c33; }