/* ===================================================================
   docs.css – Framework Dokumentation | www.nocturnum.de
   Light Design inspiriert von Homer Admin Theme (skin-two)
   =================================================================== */
:root {
    --sidebar-w:    240px;
    --topnav-h:     68px;
    --bg:           #f4f5f7;
    --surface:      #ffffff;
    --border:       #e8eaed;
    --border-light: #f1f3f5;
    --text:         #343a40;
    --text-muted:   #8592a3;
    --text-light:   #b2bec3;
    --brand:        #3498db;
    --brand-light:  #e8f4fc;
    --brand-hover:  #2980b9;
    --success:      #28a745;
    --warning:      #ffc107;
    --danger:       #dc3545;
    --info:         #17a2b8;
    --c-blue:       #3498db;
    --c-indigo:     #6610f2;
    --c-purple:     #7952b3;
    --c-pink:       #e83e8c;
    --c-red:        #dc3545;
    --c-orange:     #fd7e14;
    --c-yellow:     #ffc107;
    --c-green:      #28a745;
    --c-teal:       #20c997;
    --c-cyan:       #17a2b8;
    --radius:       6px;
    --radius-lg:    10px;
    --shadow-xs:    0 1px 2px rgba(0,0,0,.04);
    --shadow-sm:    0 1px 4px rgba(0,0,0,.08);
    --shadow:       0 2px 8px rgba(0,0,0,.1);
    --shadow-md:    0 4px 16px rgba(0,0,0,.1);
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:14px;scroll-behavior:smooth}
body.docs-body{
    font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    background:var(--bg);color:var(--text);line-height:1.6;margin:0;
    padding-top:var(--topnav-h);
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
code,kbd,pre{font-family:'Cascadia Code','Fira Code',Consolas,monospace;font-size:.85em}
h1,h2,h3,h4,h5,h6{font-weight:700;color:var(--text)}

/* ── Topnav ───────────────────────────────────────────── */
.topnav{
    position:fixed;top:0;left:0;right:0;height:var(--topnav-h);
    background:var(--surface);border-bottom:1px solid var(--border);
    z-index:200;box-shadow:var(--shadow-xs);
}
.topnav-inner{
    display:flex;align-items:center;gap:1.5rem;
    height:100%;padding:0 1.75rem;
}
.topnav-brand{
    display:flex;align-items:center;gap:.55rem;
    font-size:1.05rem;font-weight:700;color:var(--text);
    text-decoration:none;flex-shrink:0;
}
.topnav-brand i{color:var(--brand);font-size:1.2rem}
.topnav-brand strong{color:var(--brand)}
.topnav-brand:hover{text-decoration:none;color:var(--text)}
.topnav-menu{display:flex;align-items:center;gap:.25rem;flex:1;margin-left:.5rem}
.topnav-link{
    display:flex;align-items:center;gap:.4rem;
    padding:.6rem 1.2rem;font-size:1.1rem;font-weight:600;
    color:var(--text-muted);border-radius:var(--radius);
    text-decoration:none;transition:color .15s,background .15s;white-space:nowrap;
}
.topnav-link i{font-size:.95rem}
.topnav-link:hover{background:var(--bg);color:var(--text);text-decoration:none}
.topnav-link.is-active{background:var(--brand-light);color:var(--brand)}
.topnav-right{display:flex;gap:.4rem;margin-left:auto;flex-shrink:0}
.topnav-badge{
    font-size:.72rem;font-weight:700;padding:.2rem .6rem;border-radius:20px;
    background:var(--bg);border:1px solid var(--border);color:var(--text-muted);white-space:nowrap;
}
.topnav-toggle{
    display:none;background:none;border:none;font-size:1.1rem;
    color:var(--text-muted);cursor:pointer;padding:.35rem;
    border-radius:var(--radius);margin-left:auto;line-height:1;
}

/* ── Page Wrapper ─────────────────────────────────────── */
.page-wrapper{min-height:calc(100vh - var(--topnav-h))}
.page-content-full{padding:2rem 2.5rem;max-width:100%}
.page-wrapper.with-sidebar{display:flex}

/* ── Sidebar ──────────────────────────────────────────── */
.docs-sidebar{
    width:var(--sidebar-w);flex-shrink:0;
    background:var(--surface);border-right:1px solid var(--border);
    position:sticky;top:var(--topnav-h);align-self:flex-start;
    height:calc(100vh - var(--topnav-h));overflow-y:auto;
    scrollbar-width:thin;scrollbar-color:var(--border) transparent;
}
.docs-sidebar::-webkit-scrollbar{width:4px}
.docs-sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.sidebar-section-title{
    display:flex;align-items:center;gap:.5rem;
    padding:1.1rem 1.25rem .75rem;
    font-size:.72rem;font-weight:800;text-transform:uppercase;
    letter-spacing:.07em;color:var(--text-muted);
    border-bottom:1px solid var(--border-light);
}
.sidebar-section-title i{color:var(--brand)}
.sidebar-nav{padding:.5rem 0}
.sidebar-item{
    display:flex;align-items:center;gap:.6rem;
    padding:.65rem 1.3rem;font-size:1.05rem;font-weight:500;
    color:var(--text-muted);text-decoration:none;position:relative;
    transition:color .12s,background .12s;
}
.sidebar-item i{width:1rem;text-align:center;font-size:.9rem;flex-shrink:0}
.sidebar-item:hover{color:var(--text);background:var(--bg);text-decoration:none}
.sidebar-item.is-active{color:var(--brand);background:var(--brand-light);font-weight:700}
.sidebar-item.is-active::before{
    content:'';position:absolute;left:0;top:0;bottom:0;
    width:3px;background:var(--brand);border-radius:0 2px 2px 0;
}

/* ── Content ──────────────────────────────────────────── */
.page-content{flex:1;padding:2rem 2.5rem;min-width:0}

/* ── Hero ─────────────────────────────────────────────── */
.hero{
    background:linear-gradient(135deg,var(--brand) 0%,#5dade2 100%);
    border-radius:var(--radius-lg);padding:2.5rem 2rem;
    margin-bottom:2rem;color:#fff;
}
.hero h1{font-size:1.9rem;font-weight:800;margin:0 0 .5rem;color:#fff}
.hero p{color:rgba(255,255,255,.82);font-size:.95rem;margin:0 0 1.25rem}
.hero-badges{display:flex;flex-wrap:wrap;gap:.5rem}
.hero-badge{
    background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);
    color:rgba(255,255,255,.95);font-size:.78rem;font-weight:700;
    padding:.28rem .75rem;border-radius:20px;
}

/* ── Section Hero ─────────────────────────────────────── */
.section-hero{
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:1.5rem 1.75rem;
    margin-bottom:1.75rem;display:flex;align-items:center;gap:1.25rem;
}
.section-hero-icon{
    width:52px;height:52px;border-radius:var(--radius-lg);
    background:var(--brand-light);color:var(--brand);
    display:flex;align-items:center;justify-content:center;
    font-size:1.4rem;flex-shrink:0;
}
.section-hero h1{font-size:1.35rem;margin:0 0 .2rem}
.section-hero p{color:var(--text-muted);margin:0;font-size:.875rem}

/* ── TOC Grid ─────────────────────────────────────────── */
.toc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.toc-card{
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius-lg);padding:1.25rem 1.5rem;
    text-decoration:none;color:var(--text);display:block;
    transition:border-color .2s,box-shadow .2s,transform .15s;
    position:relative;overflow:hidden;
}
.toc-card::before{
    content:'';position:absolute;top:0;left:0;right:0;height:3px;
    background:var(--brand);opacity:0;transition:opacity .2s;
}
.toc-card:hover{
    border-color:var(--brand);box-shadow:var(--shadow-md);
    transform:translateY(-2px);color:var(--text);text-decoration:none;
}
.toc-card:hover::before{opacity:1}
.toc-card-icon{
    width:40px;height:40px;border-radius:var(--radius);
    display:flex;align-items:center;justify-content:center;
    font-size:1rem;color:#fff;margin-bottom:.85rem;
}
.ic-blue{background:var(--c-blue)}.ic-indigo{background:var(--c-indigo)}
.ic-purple{background:var(--c-purple)}.ic-pink{background:var(--c-pink)}
.ic-red{background:var(--c-red)}.ic-orange{background:var(--c-orange)}
.ic-green{background:var(--c-green)}.ic-teal{background:var(--c-teal)}
.ic-cyan{background:var(--c-cyan)}
.toc-card h3{font-size:1rem;font-weight:700;margin:0 0 .4rem;color:var(--text)}
.toc-card p{font-size:.9rem;color:var(--text-muted);margin:0;line-height:1.5}

/* ── Page Header ──────────────────────────────────────── */
.page-header{margin-bottom:1.75rem;padding-bottom:1.25rem;border-bottom:1px solid var(--border)}
.breadcrumb-nav{
    display:flex;align-items:center;gap:.4rem;
    font-size:.8rem;color:var(--text-muted);margin-bottom:.65rem;
}
.breadcrumb-nav a{color:var(--brand)}
.breadcrumb-sep{color:var(--text-light)}
.page-header h1{font-size:1.4rem;margin:0 0 .4rem;display:flex;align-items:center;gap:.5rem}
.page-header h1 i{color:var(--brand);font-size:1.15rem}
.page-header>p{color:var(--text-muted);margin:0;font-size:.9rem}
.ns-pill{
    display:inline-flex;align-items:center;gap:.35rem;
    background:var(--brand-light);border:1px solid #aed6f1;
    color:var(--brand);font-family:monospace;font-size:.78rem;font-weight:700;
    padding:.2rem .65rem;border-radius:20px;margin-bottom:.5rem;
}

/* ── Doc Section ──────────────────────────────────────── */
.doc-section{margin-bottom:2.25rem}
.doc-section h2{
    font-size:1rem;font-weight:700;margin:0 0 .75rem;
    padding-bottom:.5rem;border-bottom:2px solid var(--border);
}
.doc-section h3{font-size:.88rem;font-weight:700;margin:1.25rem 0 .5rem}
.doc-section>p{color:var(--text-muted);font-size:.875rem;margin:0 0 1rem}

/* ── Demo Box ─────────────────────────────────────────── */
.demo-box{
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius-lg);overflow:hidden;margin-bottom:1rem;
}
.demo-box-header{
    background:var(--bg);border-bottom:1px solid var(--border);
    padding:.45rem 1rem;font-size:.72rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);
    display:flex;align-items:center;gap:.4rem;
}
.demo-box-header i{color:var(--brand)}
.demo-box-preview{
    padding:1.5rem;display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-start;
}
.demo-box-preview.column{flex-direction:column}

/* ── Code Block ───────────────────────────────────────── */
.code-block{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:1.25rem}
.code-block-header{
    background:#2d3748;color:rgba(255,255,255,.5);
    padding:.45rem 1rem;font-size:.72rem;font-weight:700;
    text-transform:uppercase;letter-spacing:.06em;
    display:flex;align-items:center;gap:.5rem;
}
.code-block pre{margin:0;padding:1rem 1.25rem;background:#1a202c;overflow-x:auto;position:relative}
.code-block pre code{font-size:.82rem;line-height:1.7;color:#e2e8f0;white-space:pre;display:block}
.code-copy-btn{
    position:absolute;top:.5rem;right:.5rem;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
    color:rgba(255,255,255,.4);border-radius:var(--radius);
    width:28px;height:28px;display:flex;align-items:center;justify-content:center;
    cursor:pointer;font-size:.82rem;transition:background .15s,color .15s;
}
.code-copy-btn:hover{background:rgba(255,255,255,.18);color:#fff}

/* ── Method Table ─────────────────────────────────────── */
.method-table{
    width:100%;border-collapse:collapse;font-size:.875rem;
    margin-bottom:1.25rem;background:var(--surface);
    border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);
}
.method-table thead tr{background:var(--bg)}
.method-table th{
    text-align:left;padding:.7rem 1rem;font-size:.72rem;font-weight:800;
    text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);
    border-bottom:1px solid var(--border);white-space:nowrap;
}
.method-table td{padding:.75rem 1rem;border-bottom:1px solid var(--border-light);vertical-align:top;line-height:1.45}
.method-table tbody tr:last-child td{border-bottom:none}
.method-table tbody tr:hover{background:var(--bg)}
.method-table td:first-child{font-family:monospace;font-size:.82rem;color:var(--brand);white-space:nowrap}
.method-table td code{background:var(--brand-light);color:var(--brand);padding:.1em .35em;border-radius:4px;font-size:.8em}

/* ── Doc Notes ────────────────────────────────────────── */
.doc-note{
    display:flex;gap:.75rem;padding:.9rem 1.1rem;
    border-radius:var(--radius);font-size:.875rem;
    margin-bottom:1rem;border-left:4px solid currentColor;
}
.doc-note>i{flex-shrink:0;margin-top:.1rem}
.doc-note.info{background:#e3f2fd;color:#0d47a1}
.doc-note.success{background:#e8f5e9;color:#1b5e20}
.doc-note.warning{background:#fff8e1;color:#e65100}
.doc-note.danger{background:#ffebee;color:#b71c1c}

/* ── Swatches ─────────────────────────────────────────── */
.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem;margin-bottom:1rem}
.swatch{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}
.swatch-color{height:64px}
.swatch-info{padding:.5rem .65rem;background:var(--surface);font-size:.75rem;line-height:1.4}
.swatch-info strong{display:block;font-size:.8rem;color:var(--text)}
.swatch-info span{color:var(--text-muted);font-family:monospace}

/* ── Responsive ───────────────────────────────────────── */
@media(max-width:768px){
    .topnav-toggle{display:flex}
    .topnav-right{display:none}
    .topnav-menu{
        display:none;position:absolute;top:var(--topnav-h);left:0;right:0;
        background:var(--surface);border-bottom:1px solid var(--border);
        flex-direction:column;padding:.5rem;gap:.2rem;box-shadow:var(--shadow);
    }
    .topnav-menu.is-open{display:flex}
    .topnav-link{width:100%}
    .page-wrapper.with-sidebar{flex-direction:column}
    .docs-sidebar{
        width:100%;height:auto;position:static;
        border-right:none;border-bottom:1px solid var(--border);
    }
    .sidebar-nav{display:flex;flex-wrap:wrap;padding:.5rem}
    .sidebar-item{flex:1;min-width:140px;border-radius:var(--radius);padding:.4rem .75rem}
    .page-content,.page-content-full{padding:1.25rem 1rem}
}
@media(max-width:480px){
    .toc-grid{grid-template-columns:1fr 1fr}
    .hero h1{font-size:1.4rem}
    .hero{padding:1.5rem 1.25rem}
}
@media(max-width:360px){
    .toc-grid{grid-template-columns:1fr}
}