/* ---------------------------------------------------------------------------
   Shutter Island fuer phpBB - ueber prosilver und site.css gelegt.

   site.css bringt Tokens (--si-*) und die Kopfleiste. Diese Datei setzt
   prosilver auf dieselben Flaechen und Farben. prosilver rechnet in em auf
   einer 10px-Basis; site.css stellt body auf 16px - das wird hier fuer den
   Forumsbereich zurueckgenommen, die Kopfleiste rechnet in rem und bleibt.
   --------------------------------------------------------------------------- */

:root {
  --si-panel: #1c1c36;
  --si-panel-2: #202040;
  --si-row: rgba(255, 255, 255, 0.025);
  --si-row-alt: rgba(255, 255, 255, 0.045);
  --si-body-text: #c9c9dc;
}

html, body { background-color: var(--si-bg); }

body {
  font-size: 10px;
  line-height: normal;
  color: var(--si-body-text);
  padding: calc(var(--si-nav-h) + 18px) 0 24px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

/* prosilver setzt Schrift je Element nach - dieselbe Familie ueberall. */
body, input, button, select, textarea, .button, h1, h2, h3, h4 {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

.wrap {
  max-width: var(--si-nav-maxw);
  padding: 0 var(--si-nav-pad);
  background: transparent;
  border: 0;
  border-radius: 0;
}

/* Logo, Seitenbeschreibung und Suchfeld von prosilver ersetzt unsere
   Kopfleiste. Die Navigationszeile (Schnellzugriff, FAQ, Brotkruemel) bleibt. */
.headerbar { display: none; }

/* Die Aufklappmenues der Kopfleiste liegen ueber phpBBs Inhalt. */
.sheeps-nav { z-index: 1000; }
.sheeps-drop-panel { z-index: 1001; }
.sheeps-phpbb-avatar { overflow: hidden; display: inline-block; }
.sheeps-phpbb-avatar img { width: 30px; height: 30px; object-fit: cover; border-radius: 50%; display: block; }

/* --- Texte und Links --------------------------------------------------- */

h1, h2, h3, h4 { color: var(--si-text); }
h3 { border-bottom-color: var(--si-border); }
hr { border-color: var(--si-border); border-top-color: var(--si-border); }

a, a:visited { color: var(--si-accent); }
a:hover, a:focus, a:active { color: #5cc9ff; }

.forumtitle, .topictitle, a.forumtitle, a.topictitle,
a.forumtitle:visited, a.topictitle:visited { color: var(--si-text); font-weight: 600; }
a.forumtitle:hover, a.topictitle:hover { color: var(--si-accent); }

.username, .username-coloured { font-weight: 600; }
a.username, a.username:visited { color: var(--si-text); }

.copyright, .author, .responsive-show, ul.topiclist dd,
.stat-block p, dl.details dt, .postprofile, .postprofile strong,
.content .signature, .notice, .explain, dd.lastpost, span.page-sep { color: var(--si-muted); }

/* --- Navigationszeile und Brotkruemel ---------------------------------- */

.navbar {
  background: var(--si-surface);
  border: 1px solid var(--si-border);
  border-radius: 12px;
  padding: 6px 12px;
}
ul.linklist > li.separator, ul.linklist.bulletin > li::before { border-color: var(--si-border); color: var(--si-muted); }
.navbar .linklist a, .breadcrumbs .crumb a { color: var(--si-body-text); }
.navbar .linklist a:hover, .breadcrumbs .crumb a:hover { color: var(--si-accent); }
ul.navlinks { border-top-color: var(--si-border); }

/* --- Forenlisten ------------------------------------------------------- */

.forabg, .forumbg {
  background: var(--si-panel);
  background-image: none;
  border: 1px solid var(--si-border-strong);
  border-radius: 14px;
  padding: 0;
  margin-bottom: 16px;
  overflow: hidden;
}
.forumbg-table { background: var(--si-panel); }

ul.topiclist li.header { background: transparent; }
ul.topiclist li.header dt, ul.topiclist li.header dd {
  color: var(--si-muted);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-left-color: transparent;
}
ul.topiclist li.header a { color: var(--si-text); }
li.header dt, li.header dd { padding: 10px 0 8px; }
ul.topiclist li.header dl.row-item dt .list-inner { padding-left: 14px; }

ul.forums, ul.topics { background: transparent; border-radius: 0; }

li.row {
  background-color: transparent;
  border-top: 1px solid var(--si-border);
  border-bottom: 0;
}
li.row:hover { background-color: var(--si-surface-hover); }
.bg1 { background-color: var(--si-row); }
.bg2 { background-color: var(--si-row-alt); }
.bg3 { background-color: rgba(0, 174, 255, 0.06); }
li.row strong { color: var(--si-text); }
/* Forenbeschreibung und Unterzeilen - prosilver faerbt sie dunkelblaugrau. */
ul.topiclist li.row dt, ul.topiclist li.row dt .list-inner { color: var(--si-muted); }
ul.topiclist dd { border-left-color: var(--si-border); }
ul.topiclist dd.posts, ul.topiclist dd.topics, ul.topiclist dd.views { color: var(--si-body-text); }

/* --- Bereiche, Beitraege, Kasten --------------------------------------- */

.panel, .post, .stat-block, fieldset.polls, .cp-main .panel {
  color: var(--si-body-text);
}
.panel {
  background-color: var(--si-surface);
  border: 1px solid var(--si-border);
  border-radius: 14px;
}
.post.bg1, .post.bg2, .post.bg3 {
  background-color: var(--si-surface);
  border: 1px solid var(--si-border);
  border-radius: 14px;
}
.postprofile { border-left-color: var(--si-border); }
.content, .postbody .content { color: #e6e6f2; }
.content .signature { border-top-color: var(--si-border); }
.stat-block { border-top: 1px solid var(--si-border); }

blockquote {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: var(--si-border-strong);
}
blockquote blockquote { background-color: rgba(255, 255, 255, 0.03); }
.codebox { background-color: #0d0d20; border-color: var(--si-border-strong); }
.codebox code { color: #9fe0ff; }
.codebox p { border-bottom-color: var(--si-border); }

/* --- Knoepfe, Eingabe, Menues ------------------------------------------ */

.button, a.button, .button:visited {
  background: var(--si-panel-2);
  background-image: none;
  border-color: var(--si-border-strong);
  color: var(--si-text);
  box-shadow: none;
  border-radius: 9px;
}
.button:hover, .button:focus, .dropdown-visible .dropdown-trigger.button {
  background: #2a2a52;
  border-color: var(--si-accent-line);
  color: var(--si-text);
}
.button .icon, .button:hover .icon { color: inherit; }
.button-secondary { color: var(--si-body-text); }
input.button1, input.button2, a.button1, a.button2 {
  background: var(--si-panel-2);
  background-image: none;
  border-color: var(--si-border-strong);
  color: var(--si-text);
  border-radius: 9px;
}
input.button1 { background: var(--si-accent); color: var(--si-on-accent); border-color: var(--si-accent); font-weight: 700; }

input.inputbox, textarea.inputbox, select, textarea, input[type="text"], input[type="password"],
input[type="email"], input[type="search"], input[type="number"] {
  background-color: var(--si-bg);
  color: var(--si-text);
  border-color: var(--si-border-strong);
}
/* prosilver setzt .inputbox je nach Zustand und Ort mehrfach hell - hier mit
   hoeherer Genauigkeit, sonst bleiben z. B. die Felder der Schnellanmeldung weiss. */
body .inputbox, body .inputbox:hover, body input.inputbox, body textarea.inputbox,
body fieldset input.inputbox, body .headerspace input.inputbox {
  background-color: var(--si-bg);
  color: var(--si-text);
  border-color: var(--si-border-strong);
}
input.inputbox:focus, textarea:focus, select:focus,
body .inputbox:focus { border-color: var(--si-accent); background-color: #15152f; }
label, fieldset dl dt label { color: var(--si-body-text); }
fieldset dl:hover dt label { color: var(--si-text); }

.dropdown .dropdown-contents {
  background: var(--si-panel);
  border-color: var(--si-border-strong);
  box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.75);
}
.dropdown .pointer { border-color: var(--si-border-strong) transparent; }
.dropdown .pointer-inner { border-color: var(--si-panel) transparent; }
.dropdown-extended .header, .dropdown-extended .footer {
  background: var(--si-panel-2);
  background-image: none;
  border-color: var(--si-border);
  color: var(--si-text);
}
.dropdown li { border-top-color: var(--si-border); }
.dropdown-extended ul li:hover { background-color: var(--si-surface-hover); }
.notification_list p { color: var(--si-body-text); }

.pagination li a, .pagination li span {
  background: var(--si-panel-2);
  background-image: none;
  border-color: var(--si-border-strong);
  color: var(--si-text);
}
.pagination li.active span { background: var(--si-accent); border-color: var(--si-accent); color: var(--si-on-accent); }
.pagination li a:hover { background: #2a2a52; }

.tabs .tab > a, .tabs a {
  background: var(--si-panel-2);
  background-image: none;
  border-color: var(--si-border-strong);
  color: var(--si-body-text);
}
.tabs .activetab > a, .tabs .activetab > a:hover { background: var(--si-surface); color: var(--si-text); border-bottom-color: transparent; }

.cp-menu, .cp-main { color: var(--si-body-text); }
#navigation a { background: var(--si-panel-2); background-image: none; color: var(--si-body-text); }
#navigation #active-subsection a { background: var(--si-surface); color: var(--si-text); }

/* Meldungen und Hinweise */
.phpbb_alert, #darkenwrapper .phpbb_alert { background: var(--si-panel); border-color: var(--si-border-strong); color: var(--si-body-text); }
.error { color: #ff6b6b; }
.successbox, .errorbox, .warningbox {
  background: var(--si-surface);
  border: 1px solid var(--si-border-strong);
  color: var(--si-body-text);
}
.rules { background: rgba(240, 71, 71, 0.08); border-color: rgba(240, 71, 71, 0.35); color: var(--si-body-text); }
.announce, .unreadpost .postbody h3 { color: var(--si-text); }

/* Fusszeile */
.page-footer .navbar, #page-footer .navbar { margin-top: 16px; }
.copyright { padding: 14px 0; }

/* Telefon: prosilver bricht selbst um, nur der Abstand oben passt sich an. */
@media (max-width: 700px) {
  body { padding-top: calc(var(--si-nav-h) + 10px); }
  /* prosilver: .wrap min-width 290px - darunter blieb die ganze Seite stehen. */
  .wrap { padding: 0 8px; min-width: 0; }

  /* Schnellanmeldung: prosilver gibt den Feldern 85 % Breite PLUS 20px Einzug -
     auf dem Telefon ragen sie damit ueber den Rand. Beschriftung darueber,
     Feld volle Breite. */
  /* fieldset hat im Browser eine Mindestbreite (min-content) - ohne min-width: 0
     schrumpft es unter etwa 300px nicht mehr mit. */
  fieldset.quick-login { min-width: 0; max-width: 100%; margin-left: 0; margin-right: 0; }
  fieldset.quick-login label { max-width: 100%; }
  fieldset.quick-login label > span { display: block; min-width: 0; margin-bottom: 4px; }
  fieldset.quick-login input.inputbox { width: 100%; max-width: 100%; margin-left: 0; box-sizing: border-box; }
  fieldset.quick-login label[for="autologin"] { min-width: 0; text-align: left; }
}