/* ═══════════════════════════════════════════════════════════════════
   Window Navigation (.wn-*) — generic left sidebar inside app windows.

   Visual reference: pages/email-inbox.php (the .email-mbx-sidebar).
   Markup is rendered by includes/WindowNav.php → WindowNav::render().
   The wrapper layout (.wn-page-flex) is injected by index.php in
   embedded mode when WindowNav::hasNavForPage($page) is true.
   ═══════════════════════════════════════════════════════════════════ */

/* Layout wrapper: sidebar + main content side-by-side, full window height. */
.wn-page-flex {
    display: flex !important;
    flex-direction: row !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 100vh !important;
    min-height: 100vh;
    max-height: 100vh;
    gap: 0 !important;
    align-items: stretch;
    overflow: hidden;
}
body:has(.wn-page-flex) {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    height: 100vh !important;
}
html:has(.wn-page-flex) {
    overflow: hidden !important;
    height: 100vh !important;
}
body:has(.wn-page-flex) .container-fluid,
body:has(.wn-page-flex) > .container-fluid,
body:has(.wn-page-flex) .row,
body:has(.wn-page-flex) .embedded-page-content,
body:has(.wn-page-flex) main.embedded-page-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 100vh !important;
}
/* `:not(.mage-page)` is critical: `.mage-page.page-content` carries its own
   `padding: 1rem 0 0 0 !important` from mage-page.css for the top-of-page
   breathing room. Without the exclusion this rule wins by load-order and
   the page sticks to the window's top edge. */
body:has(.wn-page-flex) .page-content:not(.mage-page) { padding: 0 !important; margin: 0 !important; }

.wn-main-col {
    flex: 1 1 0;
    min-width: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    /* Restore the horizontal breathing room that bootstrap's .col-12 used to
       provide. .page-controls and .mage-page intentionally omit their own
       side-padding (they were designed to bleed into the parent's 1rem
       padding) — without this, content sits flush against the window edge. */
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
}
/* Pages without their own .page-controls/.mage-page top-padding still get a
   bit of breathing room from the top edge of the main column. */
.wn-main-col > .page-content,
.wn-main-col > .mage-page {
    padding-top: 1rem;
}

/* Sidebar shell. */
.wn-sidebar {
    width: 220px;
    min-width: 220px;
    max-width: 260px;
    background: #f6f6f7;
    border-right: 1px solid #e3e4e6;
    overflow-y: auto;
    padding: 0;
    font-size: 12px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

/* "Alle"-style top block. */
.wn-all {
    padding: 10px 10px 10px;
    border-bottom: 1px solid #e3e4e6;
    margin-bottom: 12px;
}
.wn-all-link {
    font-weight: 600;
}

/* Group block (header + items). */
.wn-group {
    padding: 0 10px;
    margin-bottom: 14px;
}
.wn-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px 8px;
    font-weight: 700;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #555;
    border-bottom: 2px solid var(--wn-acc, #999);
    margin-bottom: 6px;
}
.wn-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--wn-acc, #999);
    flex-shrink: 0;
}
.wn-group-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Flat list (no header). Top breathing room matches the "Alle"-block (.wn-all)
   so flat sub-navs (Ticketing, Monitoring, …) sit identically to Kontakte. */
.wn-flat {
    padding: 10px 10px;
}
/* Sichtbarer Trenner zwischen aufeinanderfolgenden flat-Gruppen (Ticketing-Nav-Sektionen). */
.wn-flat + .wn-flat {
    border-top: 1px solid #e3e4e6;
    padding-top: 12px;
}

/* Item row. */
.wn-folders { padding-left: 4px; }
.wn-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    margin: 1px 0;
    border-radius: 2px;
    color: #444;
    text-decoration: none;
    font-size: 12px;
    transition: background 0.1s, color 0.1s;
    position: relative;
}
.wn-item:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #222;
}
.wn-item.active {
    background: var(--wn-acc, var(--o));
    color: #fff;
}
.wn-item.active i { color: #fff; }
.wn-item i {
    color: #888;
    width: 14px;
    text-align: center;
    flex-shrink: 0;
    font-size: 13px;
}
/* Echte App-Icons (klein) in der Rail — dieselben Bilder wie auf den App-Seiten */
.wn-app-ico {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 2px;
    display: block;
}
/* Farbiges Integrations-Icon (Einstellungen-Rail) — Farbe via inline style.
   Höhere Spezifität als `.wn-item > span { flex:1 }`, sonst streckt sich das
   Icon-Span zur vollbreiten Leiste statt 18px-Quadrat zu bleiben. */
.wn-item > .wn-int-ico {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
}
/* Glyph weiss erzwingen — sonst greift `.wn-item i { color:#888 }` und das
   Icon verschwindet auf der farbigen Box. */
.wn-item > .wn-int-ico i,
.wn-item.active > .wn-int-ico i { color: #fff; }
.wn-item-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #f0f0f0;
}
.wn-item-avatar-fb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #6b7280;
    color: #fff;
    font-size: 8px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.3px;
}
.wn-item > span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wn-item > .wn-count {
    /* Higher specificity than `.wn-item > span { flex: 1 }` above —
       otherwise the count badge inherits flex-grow:1 and stretches to fill. */
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    color: #888;
    background: rgba(0, 0, 0, 0.05);
    padding: 0 5px;
    border-radius: 2px;
    min-width: 14px;
    text-align: center;
}
.wn-item.active .wn-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

/* Footer button (e.g. "Konten" in email). */
.wn-footer {
    margin-top: auto;
    padding: 10px;
    border-top: 1px solid #e3e4e6;
    background: #f0f0f2;
    flex-shrink: 0;
}
.wn-footer-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #d5d6d8;
    border-radius: 2px;
    color: #333;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease,
                color 0.18s ease, box-shadow 0.18s ease, transform 0.1s ease;
}
.wn-footer-btn:hover {
    background: var(--o);
    border-color: var(--o);
    color: #fff;
    box-shadow: 0 2px 8px rgba(235, 82, 2, 0.25);
    text-decoration: none;
}
.wn-footer-btn:active { transform: translateY(1px); }
.wn-footer-btn i { font-size: 14px; transition: transform 0.2s ease; }
.wn-footer-btn:hover i { transform: rotate(15deg); }

/* Compact mode for small viewports. */
@media (max-width: 900px) {
    .wn-sidebar { width: 56px; min-width: 56px; }
    .wn-item span,
    .wn-group-name,
    .wn-count { display: none; }
    .wn-group-head { justify-content: center; }
}