/* ============================================================
   networksvolvoniacs Wiki – passend zum SMF ProCurve-Theme
   ============================================================ */

:root {
  --bg:           rgb(82, 130, 158);
  --bg-dark:      rgb(47, 84, 110);
  --bg-mid:       rgb(65, 110, 138);
  --box-border:   rgb(35, 65, 90);
  --box-header:   rgb(110, 155, 185);
  --btn-gray:     #d4dde3;
  --btn-border:   #9aadb8;
  --white:        #ffffff;
  --text:         #1a1a1a;
  --link:         #1a5f8a;
  --link-hover:   #0d3f60;
}

* { box-sizing: border-box; }

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  margin: 0;
}

/* -- Persönliche Links oben --------------------------------- */
#p-personal {
  background: var(--bg-dark);
  padding: 5px 12px;
  text-align: right;
  border-bottom: 1px solid var(--box-border);
}
#p-personal ul { margin:0; padding:0; list-style:none; display:flex; justify-content:flex-end; gap:14px; flex-wrap:wrap; }
#p-personal li { display:inline; }
#p-personal a { color: #e0eff7 !important; font-size: 12px; font-weight: bold; text-decoration: none; }
#p-personal a:hover { color: #fff !important; text-decoration: underline; }

/* -- Seitenbase / Hintergrund ------------------------------- */
#mw-page-base { background: var(--bg); height: 0; }
#mw-head-base { background: var(--bg-dark); }

/* -- Sidebar ------------------------------------------------- */
#column-one {
  background: var(--bg);
  padding-top: 4px;
}

/* Portlet-Box */
.portlet {
  background: linear-gradient(160deg, #e8eef2 0%, #d0e4ef 100%);
  border: 2px solid var(--box-border);
  border-radius: 8px;
  margin: 6px 8px 10px 8px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0,0,0,0.25);
}

/* Portlet-Überschrift */
.portlet h3, .portlet h5 {
  background: var(--box-header);
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 6px 10px;
  margin: 0;
  border-bottom: 1px solid var(--box-border);
}

/* Portlet-Links */
.portlet ul { margin:0; padding:0; list-style:none; }
.portlet li { border-bottom: 1px solid rgba(35,65,90,0.12); }
.portlet li:last-child { border-bottom: none; }
.portlet li a {
  display: block;
  padding: 6px 10px 6px 14px;
  color: #0d2b3e !important;
  font-weight: bold;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.15s, padding-left 0.1s;
}
.portlet li a:hover {
  background: rgba(47,84,110,0.18);
  color: #000 !important;
  padding-left: 18px;
}

/* -- Suche --------------------------------------------------- */
#p-search .portlet { }
#searchform input[type="text"], #searchInput {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--btn-border);
  border-radius: 4px;
  background: #fff;
  color: #222;
  font-size: 13px;
  margin-bottom: 4px;
}
#searchform input[type="submit"],
#mw-searchButton,
#searchGoButton {
  width: 48%;
  background: var(--btn-gray);
  color: #333;
  border: 1px solid var(--btn-border);
  border-radius: 4px;
  padding: 5px;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
#searchform input[type="submit"]:hover { background: #bfcdd6; }

/* -- Content-Bereich ---------------------------------------- */
#content {
  background: var(--white);
  border: 2px solid var(--box-border);
  border-radius: 8px;
  padding: 16px 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  margin-right: 8px;
}

/* -- Seitentabs --------------------------------------------- */
#p-cactions ul { display:flex; gap:3px; flex-wrap:wrap; padding:0; list-style:none; margin:0 0 -1px 0; }
#p-cactions li a {
  background: var(--btn-gray);
  color: #333 !important;
  padding: 4px 12px;
  border-radius: 6px 6px 0 0;
  border: 1px solid var(--btn-border);
  border-bottom: none;
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
}
#p-cactions li a:hover,
#ca-nstab-main a,
#ca-nstab-special a {
  background: var(--bg-dark);
  color: #fff !important;
}

/* -- Buttons allgemein -------------------------------------- */
input[type="submit"], input[type="button"], button, .mw-ui-button {
  background: var(--btn-gray) !important;
  color: #333 !important;
  border: 1px solid var(--btn-border) !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
  font-weight: bold !important;
}
input[type="submit"]:hover, button:hover, .mw-ui-button:hover {
  background: #bfcdd6 !important;
}

/* -- Links -------------------------------------------------- */
a { color: var(--link); }
a:hover { color: var(--link-hover); }
a:visited { color: #1a4f7a; }

/* -- Überschriften ------------------------------------------ */
h1, h2, h3, h4 { color: var(--bg-dark); }
h1.firstHeading {
  font-size: 24px;
  border-bottom: 2px solid var(--box-header);
  padding-bottom: 6px;
  margin-bottom: 16px;
}
h2 {
  font-size: 18px;
  border-bottom: 1px solid #c0d4de;
  padding-bottom: 4px;
  margin-top: 24px;
}

/* -- Tabellen ----------------------------------------------- */
table.wikitable {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--box-border);
}
table.wikitable th {
  background: var(--box-header);
  color: #fff;
  padding: 7px 10px;
  border: 1px solid var(--box-border);
  text-align: left;
}
table.wikitable td { padding: 6px 10px; border: 1px solid #c0d4de; }
table.wikitable tr:nth-child(even) td { background: #edf4f8; }
table.wikitable tr:hover td { background: #d8eaf3; }

/* -- Meldungsboxen ------------------------------------------ */
.mw-message-box, .mw-message-box-notice, .warningbox, .errorbox, .successbox {
  border-radius: 6px !important;
  border-left: 4px solid var(--box-header) !important;
  background: linear-gradient(135deg, #edf4f8 0%, #d8eaf3 100%) !important;
  padding: 10px 14px !important;
  margin: 10px 0 !important;
}

/* -- Footer ------------------------------------------------- */
#footer {
  background: var(--bg-dark);
  color: rgba(255,255,255,0.75);
  padding: 10px 16px;
  font-size: 12px;
  border-top: 2px solid var(--box-border);
  margin-top: 16px;
}
#footer a { color: #b8d8ee !important; }
#footer a:hover { color: #fff !important; }

/* -- Logo --------------------------------------------------- */
#p-logo { float: left; margin: 6px 0 0 6px; }
#p-logo a { display: block; width: 60px; height: 60px; }

/* ============================================================
   MOBIL
   ============================================================ */
#mobile-nav-toggle { display: none; }

@media screen and (max-width: 768px) {
  #column-one {
    position: fixed; top: 0; left: -270px; width: 270px;
    height: 100vh; overflow-y: auto; z-index: 1000;
    transition: left 0.3s ease;
    box-shadow: 3px 0 10px rgba(0,0,0,0.4);
  }
  #column-one.open { left: 0; }
  #mobile-nav-toggle {
    display: flex !important;
    position: fixed; top: 10px; left: 10px; z-index: 1100;
    background: var(--bg-dark); color: #fff;
    border: none; border-radius: 5px;
    padding: 8px 13px; font-size: 20px; cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  }
  #mobile-nav-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.5); z-index: 999;
  }
  #mobile-nav-overlay.open { display: block; }
  #column-content { margin-left: 0 !important; padding: 8px; }
  #content { padding: 12px; margin-right: 0; }
  h1.firstHeading { font-size: 18px; }
  #p-personal { padding: 8px 8px 8px 52px; }
  #p-cactions ul { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  table.wikitable { display: block; overflow-x: auto; }
}

/* Logo-Hintergrund */
#p-logo {
  background: rgb(82, 130, 158);
  padding: 4px;
  border-radius: 0 0 6px 0;
}

/* Logo-Hintergrund */
#p-logo {
  background: rgb(82, 130, 158);
  padding: 4px;
  border-radius: 0 0 6px 0;
}

/* Keine Rahmen zwischen Portlets */
.portlet {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}