/*
 * VoIPmonitor Documentation - Professional Technical Manual Style
 * Inspired by classic technical books and O'Reilly manuals
 */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=Source+Sans+3:wght@400;500;600;700&family=Source+Code+Pro:wght@400;500;600&display=swap');

:root {
    /* Colors - muted, professional palette */
    --doc-text: #1a1a1a;
    --doc-text-secondary: #4a4a4a;
    --doc-text-muted: #6b6b6b;
    --doc-heading: #0d2137;
    --doc-link: #1a5f8a;
    --doc-link-hover: #0d3a54;
    --doc-bg: #fdfcfb;
    --doc-bg-code: #f6f5f4;
    --doc-border: #e8e6e3;
    --doc-border-light: #f0eeeb;
    --doc-accent: #c9462c;
    --doc-accent-light: #e8d5d0;

    /* Typography */
    --font-serif: 'Source Serif 4', 'Georgia', 'Times New Roman', serif;
    --font-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Source Code Pro', 'SF Mono', 'Monaco', 'Consolas', monospace;

    /* Spacing */
    --content-max-width: 52rem;
    --line-height: 1.55;
    --paragraph-spacing: 1.125rem;
}

/* ============================================
   Base Styles
   ============================================ */

html, body {
    background: var(--doc-bg) !important;
    background-attachment: fixed !important;
}

/* Main content area */
.mw-body,
.vector-body,
#bodyContent {
    font-family: var(--font-serif) !important;
    font-size: 1rem !important;
    line-height: var(--line-height) !important;
    color: var(--doc-text) !important;
    max-width: var(--content-max-width) !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: optimizeLegibility !important;
}

.mw-parser-output {
    font-family: var(--font-serif) !important;
}

/* Paragraphs */
.mw-parser-output p,
.mw-body-content p {
    margin-bottom: var(--paragraph-spacing) !important;
    text-align: justify !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
}

/* First paragraph after heading - no indent, drop cap effect optional */
.mw-parser-output h2 + p,
.mw-parser-output h3 + p,
.mw-parser-output h4 + p {
    text-indent: 0 !important;
}

/* ============================================
   Page Title
   ============================================ */

.mw-page-title-main,
.mw-first-heading,
#firstHeading,
.firstHeading {
    font-family: var(--font-sans) !important;
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    color: var(--doc-heading) !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    border-bottom: none !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

/* Subtitle / tagline under title */
.mw-parser-output > p:first-of-type {
    font-size: 1.0625rem !important;
    color: var(--doc-text-secondary) !important;
    font-style: italic !important;
    border-bottom: 1px solid var(--doc-border) !important;
    padding-bottom: 1.25rem !important;
    margin-bottom: 1.5rem !important;
}

/* ============================================
   Headings - Book-like hierarchy
   ============================================ */

.mw-parser-output h2,
.mw-body-content h2 {
    font-family: var(--font-sans) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: var(--doc-heading) !important;
    margin-top: 2.25rem !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.4rem !important;
    border-bottom: 2px solid var(--doc-border) !important;
    letter-spacing: -0.01em !important;
    line-height: 1.3 !important;
}

.mw-parser-output h3,
.mw-body-content h3 {
    font-family: var(--font-sans) !important;
    font-size: 1.1875rem !important;
    font-weight: 600 !important;
    color: var(--doc-heading) !important;
    margin-top: 1.75rem !important;
    margin-bottom: 0.75rem !important;
    letter-spacing: -0.01em !important;
    line-height: 1.4 !important;
}

.mw-parser-output h4,
.mw-body-content h4 {
    font-family: var(--font-sans) !important;
    font-size: 1.0625rem !important;
    font-weight: 600 !important;
    color: var(--doc-heading) !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.5rem !important;
}

.mw-parser-output h5,
.mw-body-content h5 {
    font-family: var(--font-sans) !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--doc-text-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-top: 1.75rem !important;
    margin-bottom: 0.5rem !important;
}

/* ============================================
   Links
   ============================================ */

.mw-parser-output a,
.mw-body-content a,
#mw-content-text a {
    color: var(--doc-link) !important;
    text-decoration: none !important;
    border-bottom: 1px solid transparent !important;
    transition: border-color 0.15s ease !important;
}

.mw-parser-output a:hover,
.mw-body-content a:hover {
    color: var(--doc-link-hover) !important;
    border-bottom-color: var(--doc-link-hover) !important;
}

/* ============================================
   Code - Monospace styling
   ============================================ */

/* Inline code */
.mw-parser-output code,
.mw-body-content code,
#mw-content-text code {
    font-family: var(--font-mono) !important;
    font-size: 0.875em !important;
    font-weight: 500 !important;
    background: var(--doc-bg-code) !important;
    color: var(--doc-accent) !important;
    padding: 0.15em 0.4em !important;
    border-radius: 3px !important;
    border: 1px solid var(--doc-border-light) !important;
    white-space: nowrap !important;
}

/* Code blocks */
.mw-parser-output pre,
.mw-body-content pre,
#mw-content-text pre,
pre.mw-code,
div.mw-code,
.mw-highlight pre {
    font-family: 'Source Code Pro', 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace !important;
    font-size: 0.8125rem !important;
    line-height: 1.55 !important;
    background: var(--doc-bg-code) !important;
    color: var(--doc-text) !important;
    border: 1px solid var(--doc-border) !important;
    border-left: 3px solid var(--doc-text-muted) !important;
    border-radius: 0 !important;
    padding: 1rem 1.25rem !important;
    margin: 1.5rem 0 !important;
    overflow-x: auto !important;
    box-shadow: none !important;
    tab-size: 4 !important;
    -moz-tab-size: 4 !important;
}

/* Code inside pre - reset styles */
.mw-parser-output pre code,
.mw-body-content pre code,
#mw-content-text pre code {
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    border: none !important;
    font-size: inherit !important;
    white-space: pre !important;
}

/* ============================================
   Lists - Clean and readable
   ============================================ */

.mw-parser-output ul,
.mw-parser-output ol {
    margin: 0.875rem 0 !important;
    padding-left: 1.5rem !important;
}

.mw-parser-output li {
    margin-bottom: 0.35rem !important;
    padding-left: 0.125rem !important;
}

.mw-parser-output ul li::marker {
    color: var(--doc-text-muted) !important;
}

.mw-parser-output ol li::marker {
    color: var(--doc-text-secondary) !important;
    font-weight: 600 !important;
}

/* Nested lists */
.mw-parser-output li ul,
.mw-parser-output li ol {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

/* Definition lists */
.mw-parser-output dl {
    margin: 1.5rem 0 !important;
}

.mw-parser-output dt {
    font-weight: 600 !important;
    color: var(--doc-heading) !important;
    margin-top: 1rem !important;
}

.mw-parser-output dd {
    margin-left: 1.5rem !important;
    margin-bottom: 0.75rem !important;
}

/* ============================================
   Tables - Professional documentation style
   ============================================ */

.mw-parser-output table.wikitable,
table.wikitable {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 2rem 0 !important;
    font-size: 0.9375rem !important;
    border: 1px solid var(--doc-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.mw-parser-output table.wikitable th,
table.wikitable th {
    background: var(--doc-bg-code) !important;
    color: var(--doc-heading) !important;
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 0.75rem 1rem !important;
    border: 1px solid var(--doc-border) !important;
    text-align: left !important;
    vertical-align: bottom !important;
}

.mw-parser-output table.wikitable td,
table.wikitable td {
    padding: 0.75rem 1rem !important;
    border: 1px solid var(--doc-border) !important;
    background: var(--doc-bg) !important;
    vertical-align: top !important;
}

.mw-parser-output table.wikitable tr:nth-child(even) td,
table.wikitable tr:nth-child(even) td {
    background: var(--doc-bg-code) !important;
}

/* ============================================
   Table of Contents - Book index style
   ============================================ */

.toc,
#toc,
.toccolours,
.vector-toc {
    font-family: var(--font-sans) !important;
    background: transparent !important;
    border: none !important;
    border-left: 3px solid var(--doc-border) !important;
    border-radius: 0 !important;
    padding: 0 0 0 1.25rem !important;
    margin: 2rem 0 !important;
    box-shadow: none !important;
}

.toc h2,
.toctitle h2,
.vector-toc h2 {
    font-family: var(--font-sans) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--doc-text-muted) !important;
    border: none !important;
    margin: 0 0 0.75rem 0 !important;
    padding: 0 !important;
}

.toc ul,
.vector-toc ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

.toc ul ul {
    padding-left: 1rem !important;
}

.toc li {
    margin: 0.375rem 0 !important;
    padding: 0 !important;
}

.toc a,
.toctext,
.vector-toc a {
    font-family: var(--font-sans) !important;
    font-size: 0.875rem !important;
    color: var(--doc-text-secondary) !important;
    text-decoration: none !important;
    border: none !important;
}

.toc a:hover,
.vector-toc a:hover {
    color: var(--doc-link) !important;
}

.tocnumber {
    color: var(--doc-text-muted) !important;
    margin-right: 0.5rem !important;
}

/* ============================================
   Blockquotes / Notes
   ============================================ */

.mw-parser-output blockquote {
    font-style: italic !important;
    color: var(--doc-text-secondary) !important;
    border-left: 3px solid var(--doc-border) !important;
    margin: 1.5rem 0 !important;
    padding: 0.75rem 0 0.75rem 1.5rem !important;
    background: transparent !important;
}

/* ============================================
   Images / Figures
   ============================================ */

.mw-parser-output figure,
.mw-parser-output .thumb {
    margin: 2rem 0 !important;
    background: transparent !important;
    border: none !important;
}

.mw-parser-output figcaption,
.mw-parser-output .thumbcaption {
    font-family: var(--font-sans) !important;
    font-size: 0.875rem !important;
    color: var(--doc-text-muted) !important;
    font-style: italic !important;
    text-align: center !important;
    padding: 0.75rem 0 !important;
    border-top: 1px solid var(--doc-border-light) !important;
    margin-top: 0.5rem !important;
}

/* ============================================
   Sidebar - Minimal
   ============================================ */

.vector-toc-landmark,
.vector-column-start {
    font-family: var(--font-sans) !important;
}

/* ============================================
   Hide MediaWiki UI elements for clean look
   ============================================ */

/* Hide main menu (hamburger) for all users */
.vector-main-menu,
#vector-main-menu-dropdown,
.vector-main-menu-dropdown,
.mw-logo,
.vector-header-start {
    display: none !important;
}

/* Hide MediaWiki footer completely */
#footer,
.mw-footer,
footer#footer,
.mw-footer-container {
    display: none !important;
}

/* Hide "last edited" info */
#footer-info,
#footer-info-lastmod,
.footer-info {
    display: none !important;
}

/* Hide categories */
.catlinks,
#catlinks {
    display: none !important;
}

/* Hide edit section links for cleaner reading */
.mw-editsection {
    display: none !important;
}

/* ============================================
   Hide edit tools for anonymous users
   ============================================ */

body:has(.vector-user-menu-logged-out) #p-views,
body:has(.vector-user-menu-logged-out) #p-cactions,
body:has(.vector-user-menu-logged-out) .vector-page-tools,
body:has(.vector-user-menu-logged-out) .mw-portlet-views,
body:has(.vector-user-menu-logged-out) #ca-viewsource,
body:has(.vector-user-menu-logged-out) #ca-history,
body:has(.vector-user-menu-logged-out) #vector-page-tools-dropdown,
body:has(.vector-user-menu-logged-out) #p-tb,
body:has(.vector-user-menu-logged-out) .vector-main-menu,
body:has(.vector-user-menu-logged-out) .mw-logo,
body:has(.vector-user-menu-logged-out) .vector-header-start,
body:has(.vector-user-menu-logged-out) #vector-main-menu-dropdown,
body:has(.vector-user-menu-logged-out) .vector-menu-tabs,
body:has(.vector-user-menu-logged-out) #p-namespaces,
body:has(.vector-user-menu-logged-out) .mw-portlet-namespaces,
body:has(.vector-user-menu-logged-out) .vector-page-toolbar,
body:has(.vector-user-menu-logged-out) .vector-page-toolbar-container {
    display: none !important;
}

/* Remove borders near title for anonymous */
body:has(.vector-user-menu-logged-out) .mw-body-header,
body:has(.vector-user-menu-logged-out) .vector-page-titlebar,
body:has(.vector-user-menu-logged-out) header.mw-body-header,
body:has(.vector-user-menu-logged-out) main#content > header {
    border: none !important;
    box-shadow: none !important;
}

/* ============================================
   Breadcrumb navigation
   ============================================ */

.vm-breadcrumb {
    position: relative;
    z-index: 100;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.75rem 2rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--doc-text-muted);
    background: var(--doc-bg);
    border-bottom: 1px solid var(--doc-border-light);
    letter-spacing: 0.01em;
}

.vm-breadcrumb a {
    color: var(--doc-link) !important;
    text-decoration: none !important;
    font-weight: 500;
    border: none !important;
}

.vm-breadcrumb a:hover {
    text-decoration: underline !important;
}

/* ============================================
   Print styles
   ============================================ */

@media print {
    body {
        font-size: 11pt !important;
        line-height: 1.5 !important;
    }

    .mw-parser-output pre {
        border: 1px solid #ccc !important;
        page-break-inside: avoid !important;
    }

    .toc, #toc, .vm-breadcrumb {
        display: none !important;
    }
}

/* ============================================
   Selection
   ============================================ */

::selection {
    background: var(--doc-accent-light) !important;
    color: var(--doc-text) !important;
}

/* ============================================
   Smooth scrolling
   ============================================ */

html {
    scroll-behavior: smooth;
}

/* ============================================
   Fix Vector 2022 specific elements
   ============================================ */

.mw-page-title-main::after,
.mw-first-heading::after,
#firstHeading::after {
    display: none !important;
}

.vector-body hr,
.mw-body hr {
    border: none !important;
    border-top: 1px solid var(--doc-border) !important;
    margin: 2rem 0 !important;
}

/* Search box styling */
#searchInput,
.cdx-text-input__input {
    font-family: var(--font-sans) !important;
    border: 1px solid var(--doc-border) !important;
    border-radius: 3px !important;
}

#searchInput:focus,
.cdx-text-input__input:focus {
    border-color: var(--doc-link) !important;
    box-shadow: 0 0 0 2px rgba(26, 95, 138, 0.1) !important;
    outline: none !important;
}

/* ============================================
   Fix content width for logged-in users
   Prevent content from shrinking when tools are visible
   ============================================ */

/* Expand content area */
.mw-page-container {
    max-width: none !important;
}

.mw-content-container {
    max-width: var(--content-max-width) !important;
    margin: 0 !important;
}

/* Allow more space for content when sidebar/tools are present */
.vector-feature-page-tools-enabled .mw-content-container,
.vector-feature-main-menu-pinned-enabled .mw-content-container {
    max-width: var(--content-max-width) !important;
}

/* Ensure body content doesn't shrink */
.vector-body {
    max-width: none !important;
    width: 100% !important;
}

/* Fix page container - center the whole layout */
.mw-page-container {
    max-width: 100% !important;
    padding: 0 2rem !important;
}

.mw-page-container-inner {
    max-width: 1400px !important;
    margin: 0 auto !important;
    display: grid !important;
    /* TOC: 220px fixed, Content: takes available space (min 700px), Tools: auto */
    grid-template-columns: 220px minmax(700px, 1fr) auto !important;
    gap: 0 24px !important;
    justify-content: center !important;
}

/* TOC sidebar - fixed width */
.vector-column-start {
    width: 220px !important;
    max-width: 220px !important;
    min-width: 220px !important;
    flex-shrink: 0 !important;
}

/* Content column - guaranteed width, fills available space */
.mw-content-container,
main.mw-body {
    min-width: 700px !important;
    width: 100% !important;
    max-width: none !important;
}

/* Tools column - only if space available, doesn't compress content */
.vector-column-end {
    flex-shrink: 1 !important;
    max-width: 200px !important;
}

/* Remove any internal gaps */
.vector-body-before-content {
    margin: 0 !important;
}

/* TOC text wraps within constrained width */
.vector-toc,
.vector-toc-contents {
    max-width: 100% !important;
}

.vector-toc .vector-toc-text,
.vector-toc-text {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}