/* ==========================================================================
   IT-Solutions Wiki Theme (wiki.it-villach.at)
   Wird per Apache mod_substitute in jede Seite eingehaengt (inkl. Login/Admin).
   Dateien: /var/www/wiki-static/itv/  -  Stil angelehnt an CRM + Vaultwarden.
   ========================================================================== */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(inter.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(inter-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(mono.woff2) format("woff2"); }

:root {
  --itv-green: #8dc53f;
  --itv-green-2: #74ad2f;
  --itv-green-ink: #4f8220;
  --itv-green-soft: rgba(141, 197, 63, .12);
  --itv-ink: #0d1218;
  --itv-ink-2: #131a22;
  --itv-ink-3: #1b242e;
  --itv-ink-line: #26313d;
  --itv-bg: #f6f7f4;
  --itv-card: #ffffff;
  --itv-line: #e3e7de;
  --itv-text: #1f2933;
  --itv-muted: #5f6b75;
  --itv-radius: 12px;
  --itv-shadow: 0 1px 2px rgba(16, 24, 32, .04), 0 6px 20px rgba(16, 24, 32, .06);
  --itv-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --itv-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}

/* ---------- Basis ---------- */
.v-application, .v-application .body-1, .v-application .body-2, .v-application .subtitle-1,
.v-application .subtitle-2, .v-application .caption, .v-application .overline,
.v-application .headline, .v-application .title, .v-application [class*="text-"] {
  font-family: var(--itv-font) !important;
}
.v-application { color: var(--itv-text); }
.v-application.theme--light { background: var(--itv-bg) !important; }
.v-application .primary--text { color: var(--itv-green-ink) !important; caret-color: var(--itv-green-ink) !important; }
.v-application .blue--text, .v-application .blue--text.text--darken-2 { color: var(--itv-green-ink) !important; }
::selection { background: rgba(141, 197, 63, .35); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(95, 107, 117, .35); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- Kopfleiste (wie CRM: dunkel, durchgehend) ---------- */
.nav-header, .nav-header .nav-header-inner, .nav-header.v-toolbar, .nav-header .v-toolbar {
  background: var(--itv-ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.nav-header { border-bottom: 1px solid var(--itv-ink-line) !important; }
.nav-header::after { /* gruene Akzentlinie wie im CRM */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--itv-green) 0%, rgba(141,197,63,.35) 40%, transparent 75%);
  pointer-events: none;
}
/* Logo: volles Logo statt 34x34-Quadrat */
.nav-header .v-avatar { width: 150px !important; min-width: 150px !important; height: 34px !important; border-radius: 0 !important; }
.nav-header .v-avatar .org-logo { width: 150px !important; height: 34px !important; max-width: none !important; }
.nav-header .v-avatar .org-logo .v-image__image {
  background-image: url(logo-white.png) !important;
  background-size: contain !important; background-position: left center !important;
}
.nav-header .v-toolbar__title .subheading { display: none; }
.nav-header .v-toolbar__title::after {
  content: "WIKI"; display: inline-block; margin-left: 2px;
  font: 600 11px/1 var(--itv-mono); letter-spacing: .18em; color: var(--itv-green);
  border: 1px solid rgba(141,197,63,.45); border-radius: 6px; padding: 5px 7px 4px;
}
/* Suche */
.nav-header .v-text-field.v-text-field--solo .v-input__slot,
.nav-header .v-text-field .v-input__slot {
  background: var(--itv-ink-3) !important; border: 1px solid var(--itv-ink-line) !important;
  border-radius: 10px !important; box-shadow: none !important; min-height: 42px !important;
}
.nav-header .v-input--is-focused .v-input__slot { border-color: var(--itv-green) !important; box-shadow: 0 0 0 3px rgba(141,197,63,.18) !important; }
.nav-header .v-text-field input { color: #e8edf2 !important; font-size: 14px !important; }
.nav-header .v-text-field input::placeholder { color: #8a96a3 !important; }
.nav-header .v-text-field .v-icon { color: #8a96a3 !important; }
.nav-header .v-btn .v-icon { color: #c9d2db !important; }
.nav-header .v-btn:hover .v-icon { color: var(--itv-green) !important; }
.nav-header .v-divider--vertical { border-color: var(--itv-ink-line) !important; }
.nav-header .v-btn { border-radius: 10px !important; }

/* ---------- Seitenleiste (Navigation) ---------- */
.v-navigation-drawer.primary,
.v-application .v-navigation-drawer.primary {
  background: var(--itv-ink-2) !important;
  border-right: 1px solid var(--itv-ink-line) !important;
  border-radius: 0 !important; box-shadow: none !important;
}
.v-navigation-drawer.primary .v-navigation-drawer__border { display: none; }
.v-navigation-drawer.primary .v-list { background: transparent !important; padding: 10px 8px !important; }
.v-navigation-drawer.primary .v-list-item {
  min-height: 38px !important; border-radius: 8px !important; margin: 1px 0;
  color: #c3ccd5 !important; padding: 0 10px !important;
}
.v-navigation-drawer.primary .v-list-item::before { border-radius: 8px !important; }
.v-navigation-drawer.primary .v-list-item__icon, .v-navigation-drawer.primary .v-list-item__avatar {
  margin: 0 12px 0 0 !important; min-width: 22px !important; align-self: center !important;
}
.v-navigation-drawer.primary .v-icon { color: #7f8b97 !important; font-size: 20px !important; }
.v-navigation-drawer.primary .v-list-item__title {
  color: #d4dbe2 !important; font-size: 13.5px !important; font-weight: 500 !important; line-height: 1.3 !important;
  white-space: normal !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.v-navigation-drawer.primary .v-list-item:hover { background: rgba(255,255,255,.05) !important; }
.v-navigation-drawer.primary .v-list-item:hover .v-icon { color: var(--itv-green) !important; }
.v-navigation-drawer.primary .v-list-item--active,
.v-navigation-drawer.primary .v-list-item.v-list-item--active {
  background: var(--itv-green-soft) !important; box-shadow: inset 3px 0 0 var(--itv-green) !important;
}
.v-navigation-drawer.primary .v-list-item--active .v-list-item__title { color: #fff !important; font-weight: 600 !important; }
.v-navigation-drawer.primary .v-list-item--active .v-icon { color: var(--itv-green) !important; }
.v-navigation-drawer.primary .v-subheader { color: var(--itv-green) !important; font: 600 11px var(--itv-mono) !important; letter-spacing: .12em; text-transform: uppercase; }
.v-navigation-drawer.primary .v-divider { border-color: var(--itv-ink-line) !important; }
.v-navigation-drawer.primary .v-btn-toggle, .v-navigation-drawer.primary .v-btn-toggle .v-btn {
  background: var(--itv-ink-3) !important; border-color: var(--itv-ink-line) !important; border-radius: 8px;
}
.v-navigation-drawer.primary .v-btn-toggle .v-btn--active .v-icon { color: var(--itv-green) !important; }

/* ---------- Inhaltsbereich ---------- */
.v-main .v-main__wrap { background: var(--itv-bg) !important; }
.page-header-section { background: var(--itv-card) !important; }
.v-main__wrap > .container.grey.lighten-4 { background: var(--itv-card) !important; border-bottom: 1px solid var(--itv-line); }
.v-main__wrap > .v-divider { display: none; }
.page-header-section .headline { font-weight: 700 !important; font-size: 26px !important; letter-spacing: -.01em !important; color: var(--itv-text) !important; }
.page-header-section .caption { color: var(--itv-muted) !important; font-size: 13px !important; }

/* Seitenspalte (Inhaltsverzeichnis, Autor, Teilen) - Karten sauber, ohne Ueberlappung */
.page-col-sd .v-card {
  background: var(--itv-card) !important; border: 1px solid var(--itv-line) !important;
  border-radius: var(--itv-radius) !important; box-shadow: var(--itv-shadow) !important; overflow: hidden;
}
.page-col-sd .v-card .v-card, .page-col-sd .v-card .v-sheet, .page-col-sd .v-card .v-list {
  border: 0 !important; box-shadow: none !important; border-radius: 0 !important; background: transparent !important;
}
.v-application .page-col-sd .overline, .v-application .page-col-sd .overline.blue--text { color: var(--itv-green-ink) !important; font: 700 11px var(--itv-font) !important; letter-spacing: .12em !important; }
.page-col-sd .v-list-item { min-height: 32px !important; border-radius: 6px; }
.page-col-sd .v-list-item__title { font-size: 13.5px !important; color: var(--itv-text) !important; white-space: normal !important; }
.page-col-sd .v-list-item:hover { background: var(--itv-green-soft); }
.page-col-sd .v-list-item .v-icon { color: #9aa5ae !important; }
.page-col-sd .v-toolbar, .page-col-sd .v-card.grey, .page-col-sd .v-card.darken-3 {
  background: var(--itv-card) !important;
}
.page-col-sd .v-btn .v-icon { color: var(--itv-muted) !important; }
.page-col-sd .v-btn:hover .v-icon { color: var(--itv-green-ink) !important; }
.page-col-sd .v-chip { background: var(--itv-green-soft) !important; color: var(--itv-green-ink) !important; border: 0 !important; }

/* Bearbeiten-Schnellbuttons oben rechts */
.page-edit-shortcuts { border-radius: 10px !important; overflow: hidden; border: 1px solid var(--itv-line) !important; box-shadow: none !important; background: var(--itv-card) !important; }
.page-edit-shortcuts .v-btn { text-transform: none !important; letter-spacing: 0 !important; font-weight: 600 !important; color: var(--itv-text) !important; }
.page-edit-shortcuts .v-btn .v-icon { color: var(--itv-green-ink) !important; }

/* FAB / Primaer-Buttons (gruen wie CRM) */
.v-application .v-btn.primary, .v-application .v-btn.green, .v-application .v-btn--fab.primary,
.v-application .v-speed-dial .v-btn--fab {
  background: linear-gradient(180deg, #96cc4a 0%, #74ad2f 100%) !important;
  border-color: var(--itv-green-2) !important; color: #fff !important;
  box-shadow: 0 6px 18px rgba(116,173,47,.35) !important;
}
.v-application .v-btn { letter-spacing: .01em; }

/* ---------- Typografie im Seiteninhalt ---------- */
.v-main .contents { font-family: var(--itv-font) !important; color: var(--itv-text); font-size: 15px; line-height: 1.7; }
.v-main .contents h1, .v-main .contents h2, .v-main .contents h3, .v-main .contents h4 {
  font-family: var(--itv-font) !important; color: var(--itv-text) !important; letter-spacing: -.01em;
}
.v-main .contents h1 {
  font-size: 30px !important; font-weight: 800 !important; padding: 0 0 10px !important; margin-bottom: 18px !important;
  border-bottom: 1px solid var(--itv-line) !important; position: relative; background: none !important;
}
.v-main .contents h1::before {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 64px; height: 3px; border-radius: 3px;
  background: var(--itv-green);
}
.v-main .contents h1::after { display: none !important; }
.v-main .contents h2 {
  font-size: 21px !important; font-weight: 700 !important; padding: 0 0 6px !important; margin-top: 30px !important;
  border-bottom: 1px solid var(--itv-line) !important; background: none !important;
}
.v-main .contents h2::after, .v-main .contents h3::after { display: none !important; }
.v-main .contents h3 { font-size: 17px !important; font-weight: 700 !important; }
.v-main .contents h4 { font-size: 15px !important; font-weight: 700 !important; color: var(--itv-muted) !important; }
.v-main .contents a, .v-main .contents a.is-internal-link.is-valid-page {
  color: var(--itv-green-ink) !important; text-decoration: none !important;
  border-bottom: 1px solid rgba(79,130,32,.25); transition: border-color .15s, background .15s;
}
.v-main .contents a:hover { border-bottom-color: var(--itv-green-ink); background: var(--itv-green-soft); }
.v-main .contents a.is-invalid-page { color: #c0392b !important; }
.v-main .contents ul > li::before { color: var(--itv-green) !important; }
.v-main .contents ul > li { padding-left: 2px; }

/* Code */
.v-main .contents code, .v-main .contents kbd {
  font-family: var(--itv-mono) !important; font-size: .88em !important;
  background: #eef2e8 !important; color: #2f4a16 !important; border-radius: 5px !important; padding: 1px 6px !important;
  box-shadow: none !important;
}
.v-main .contents pre {
  background: var(--itv-ink) !important; border: 1px solid var(--itv-ink-line) !important;
  border-radius: 10px !important; box-shadow: none !important;
}
.v-main .contents pre > code, .v-main .contents pre code {
  background: transparent !important; color: #dce4ec !important; padding: 0 !important; font-size: 13px !important;
}

/* Tabellen */
.v-main .contents table {
  border-collapse: separate !important; border-spacing: 0 !important; width: auto; max-width: 100%;
  border: 1px solid var(--itv-line) !important; border-radius: 10px !important; overflow: hidden; background: var(--itv-card);
  font-size: 14px;
}
.v-main .contents table th {
  background: #f1f4ec !important; color: var(--itv-text) !important; font-weight: 600 !important;
  border: 0 !important; border-bottom: 1px solid var(--itv-line) !important; text-align: left; padding: 9px 12px !important;
}
.v-main .contents table td { border: 0 !important; border-bottom: 1px solid #eef1ea !important; padding: 8px 12px !important; }
.v-main .contents table tr:last-child td { border-bottom: 0 !important; }
.v-main .contents table tr:nth-child(2n) td { background: #fafbf8 !important; }

/* Hinweisboxen (blockquote is-info/is-warning/...) */
.v-main .contents blockquote {
  border-radius: 10px !important; box-shadow: none !important; border: 1px solid var(--itv-line) !important;
  border-left: 4px solid var(--itv-green) !important; background: #f4f8ee !important; color: var(--itv-text) !important;
}
.v-main .contents blockquote.is-info { border-left-color: #3b82c4 !important; background: #f0f6fc !important; }
.v-main .contents blockquote.is-warning { border-left-color: #e0a106 !important; background: #fdf8ea !important; }
.v-main .contents blockquote.is-danger { border-left-color: #d0443a !important; background: #fdf1f0 !important; }
.v-main .contents blockquote.is-success { border-left-color: var(--itv-green) !important; background: #f2f8ea !important; }

/* ---------- Footer (schlanke Zeile wie im CRM) ---------- */
.v-footer.v-footer--inset, .v-application .v-footer.grey {
  background: var(--itv-card) !important; border-top: 1px solid var(--itv-line) !important; min-height: 44px;
}
.v-footer .caption { font-size: 0 !important; }
.v-footer .caption * { display: none !important; }
.v-footer .caption::before {
  content: "\25CF  wiki.it-villach.at  \00B7  IT-Villach  |  IT-Solutions by Stefan Regenfelder";
  white-space: pre; font: 400 12px var(--itv-mono); color: var(--itv-muted);
}
.itv-footer { display: none !important; } /* altes Footer-Widget */

/* Footer wie CRM (theme.js baut .itv-foot; die ::before/::after-Zeilen sind nur Fallback ohne JS) */
.itv-foot { font: 400 11px/1.6 var(--itv-mono); color: #64748b; text-align: center; letter-spacing: .01em; }
.itv-foot { width: 100%; }
.itv-foot .itv-row { display: block; }
.itv-foot .itv-row + .itv-row { margin-top: 6px; }
.itv-foot .sep { margin: 0 8px; color: #94a3b8; }
.itv-foot .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: middle;
  background: #8CC63F; box-shadow: 0 0 6px #8CC63F; position: relative; top: -1px; }
.itv-foot a { color: #4f8220 !important; font-weight: 600; text-decoration: none !important; border: 0 !important; }
.itv-foot a:hover { filter: brightness(1.2); text-decoration: underline !important; }
.v-footer.itv-has-foot { padding: 14px 16px !important; justify-content: center !important; }
.v-footer.itv-has-foot > .caption { display: none !important; }
.login.itv-has-foot::after { display: none !important; }
.login .itv-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,.08); background: rgba(10,15,20,.55); backdrop-filter: blur(4px); }
.login .itv-foot .sep { color: #334155; }
.login .itv-foot a { color: #8CC63F !important; }
@media (max-width: 700px) { .itv-foot .hide-sm { display: none; } }

/* ---------- Suche / Menues / Dialoge ---------- */
.v-menu__content, .v-dialog > .v-card { border-radius: var(--itv-radius) !important; }
.search-results { border-radius: 0 0 var(--itv-radius) var(--itv-radius) !important; }

/* ==========================================================================
   LOGIN (wie CRM: dunkel, Netzwerk-Hintergrund, zentrierte Karte)
   ========================================================================== */
.login {
  display: flex !important; align-items: center !important; justify-content: center !important;
  min-height: 100vh; padding: 32px 16px 72px !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(141,197,63,.10), transparent 55%),
    url(bg-network.svg) center / cover no-repeat,
    linear-gradient(180deg, #0d1218 0%, #0a0f14 100%) !important;
}
.login::after {
  content: "\25CF  wiki.it-villach.at  \00B7  IT-Villach  |  IT-Solutions by Stefan Regenfelder";
  white-space: pre; position: fixed; left: 0; right: 0; bottom: 0; padding: 16px; text-align: center;
  font: 400 12px var(--itv-mono); color: #6f7c88; border-top: 1px solid rgba(255,255,255,.06);
}
.login .login-sd {
  position: relative !important; left: auto !important; top: auto !important; margin: 0 !important;
  width: 100% !important; max-width: 400px !important; height: auto !important; min-height: 0 !important;
  padding: 0 !important; background: transparent !important; box-shadow: none !important; border: 0 !important;
  overflow: visible !important;
}
/* Animierter Netzwerk-Hintergrund (theme.js) - ersetzt das statische SVG, wenn JS laeuft */
.login.itv-anim {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(141,197,63,.10), transparent 55%),
    linear-gradient(180deg, #0d1218 0%, #0a0f14 100%) !important;
}
.login canvas.itv-net { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.login .login-sd { z-index: 1; }
/* Logo-Zeile -> grosses weisses Logo + Pulslinie */
.login .login-sd > .d-flex:first-child {
  display: block !important; height: 112px !important; margin: 0 0 22px !important;
  background: url(logo-white.png) center 4px / 200px auto no-repeat, url(pulse.svg) center 82px / 190px 24px no-repeat !important;
}
.login .login-sd > .d-flex:first-child > * { display: none !important; }
/* Karte */
.login .login-subtitle, .login .login-form, .login .login-sd > div:not(:first-child) {
  background: rgba(19,26,34,.92) !important; border-left: 1px solid rgba(255,255,255,.08) !important; border-right: 1px solid rgba(255,255,255,.08) !important;
}
.login .login-subtitle {
  border-top: 1px solid rgba(255,255,255,.08) !important; border-radius: 16px 16px 0 0 !important;
  padding: 28px 28px 4px !important; height: auto !important; min-height: 0 !important; text-align: left !important;
  box-shadow: none !important; border-bottom: 0 !important; background-image: none !important;
}
.login .login-subtitle::before, .login .login-subtitle::after { display: none !important; }
.login .login-subtitle .text-subtitle-1 {
  color: transparent !important; font-size: 0 !important; line-height: 0 !important; text-shadow: none !important; padding: 0 !important; text-align: left !important;
}
.login .login-subtitle .text-subtitle-1::before { content: "Anmelden"; display: block; color: #fff; font: 700 22px/1.3 var(--itv-font); }
.login .login-subtitle .text-subtitle-1::after {
  content: "Zugang zum IT-Solutions Wiki."; display: block; margin-top: 6px;
  font: 400 14px var(--itv-font); color: #9aa6b2;
}
.login .login-form {
  border-top: 0 !important; margin-top: 0 !important;
  padding: 18px 28px 26px !important; border-bottom: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 0 0 16px 16px !important; box-shadow: 0 30px 80px rgba(0,0,0,.45) !important;
}
.login .login-form .v-input__slot {
  background: #0f151c !important; border: 1px solid #2a3542 !important; border-radius: 10px !important;
  box-shadow: none !important; min-height: 46px !important;
}
.login .login-form .v-input--is-focused .v-input__slot { border-color: var(--itv-green) !important; box-shadow: 0 0 0 3px rgba(141,197,63,.18) !important; }
.login .login-form input { color: #e8edf2 !important; font-family: var(--itv-font) !important; }
.login .login-form .v-label, .login .login-form input::placeholder { color: #6f7c88 !important; }
.login .login-form .v-icon { color: #6f7c88 !important; }
.login .login-form .v-input--is-focused .v-icon { color: var(--itv-green) !important; }
.login .login-form > .v-btn {
  height: 46px !important; border-radius: 10px !important; margin-top: 14px !important;
  background: linear-gradient(180deg, #96cc4a 0%, #74ad2f 100%) !important; color: #fff !important;
  font: 700 15px var(--itv-font) !important; letter-spacing: .01em !important; text-transform: none !important;
  box-shadow: 0 10px 26px rgba(116,173,47,.30) !important;
}
.login .login-form > .v-btn:hover { filter: brightness(1.06); }
.login .login-form .text-center .v-btn { background: transparent !important; box-shadow: none !important; color: #9aa6b2 !important; text-transform: none !important; letter-spacing: 0 !important; font: 500 13px var(--itv-font) !important; }
.login .login-form .text-center .v-btn:hover { color: var(--itv-green) !important; }
.login .login-form .text-center, .login .login-form .text-center a, .login .login-form .caption {
  color: #9aa6b2 !important; font-family: var(--itv-font) !important;
}
.login .login-form a:hover { color: var(--itv-green) !important; }
/* Anbieter-Auswahl / 2FA etc. */
.login .login-providers, .login .v-list { background: transparent !important; }
.login .v-list-item__title { color: #d4dbe2 !important; }

@media (max-width: 600px) {
  .login .login-subtitle, .login .login-form { padding-left: 20px !important; padding-right: 20px !important; }
  .nav-header .v-avatar, .nav-header .v-avatar .org-logo { width: 110px !important; min-width: 110px !important; }
  .nav-header .v-toolbar__title::after { display: none; }
}