/* =============================================
   DMN Admin Panel - Main Stylesheet
   Pure Black Minimal Design System

   Alle Design-Tokens liegen in dmn-tokens.css (Rampen, Rollen, Typo-Skala,
   Raster, Dichte, Tiefe, Bewegung, Ebenen) und werden von dort importiert.
   Diese Datei enthaelt Reset, Grundlayout und die Sidebar-Navigation.

   @import muss vor jeder Regel stehen.
   ============================================= */
@import url('dmn-tokens.css');
@import url('dmn-base.css');

/* =============================================
   Reset
   ============================================= */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* =============================================
   Scrollbars
   ============================================= */
::-webkit-scrollbar         { width: 5px; height: 5px; }
::-webkit-scrollbar-track   { background: transparent; }
::-webkit-scrollbar-thumb   { background: var(--border-mid); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-hi); }
::-webkit-scrollbar-corner  { background: transparent; }
* { scrollbar-width: thin; scrollbar-color: var(--border-mid) transparent; }

/* =============================================
   Base
   ============================================= */
/* Basis-Hintergrund am Token — sonst wirkt data-theme nicht (der "Dunkel bleibt schwarz"-Bug) */
html {
    background: var(--bg);
    min-height: 100%;
}

body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    font-size: var(--dmn-t-body);
    line-height: var(--dmn-lh-body);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-left: var(--sidebar-width);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =============================================
   Links
   ============================================= */
a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--accent-dim);
}

p a:hover,
li a:hover,
span a:hover,
td a:hover,
.text-link:hover {
    text-decoration: underline;
}

/* =============================================
   Typography
   Die neun Grade stehen in dmn-tokens.css. Hier bekommen nur die nackten
   Ueberschriften-Tags ihren Grad, damit ein <h1> ohne Klasse nicht auf der
   Browser-Vorgabe (2em) landet und die Abstufung zum Fliesstext verliert.
   Jeder Grad wird als Paket gesetzt: Groesse, Zeilenhoehe, Tracking.
   ============================================= */
h1 {
    font-size: var(--dmn-t-h1);
    line-height: var(--dmn-lh-h1);
    letter-spacing: var(--dmn-ls-h1);
}

h2 {
    font-size: var(--dmn-t-h2);
    line-height: var(--dmn-lh-h2);
    letter-spacing: var(--dmn-ls-h2);
}

h3 {
    font-size: var(--dmn-t-h3);
    line-height: var(--dmn-lh-h3);
    letter-spacing: var(--dmn-ls-h3);
}

.logo,
.navbar-brand {
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--text);
}

/* =============================================
   Container
   ============================================= */
.container {
    padding: 32px 2.5%;
    width: 100%;
    box-sizing: border-box;
}

/* =============================================
   Flat Card (replaces glass-card)
   ============================================= */
.glass-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    position: relative;
    overflow: hidden;
}

/* =============================================
   Buttons
   ============================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 28px;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: var(--dmn-t-ui);
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: background 0.15s ease, transform 0.12s ease;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.btn-discord {
    background: #fff;
    color: #000;
    width: 100%;
    border-radius: var(--radius-md);
    font-weight: 600;
}

.btn-discord:hover {
    background: #e5e5e5;
    color: #000;
    transform: translateY(-1px);
    text-decoration: none;
}

.btn-discord:active { transform: translateY(0); }

.btn-discord svg {
    width: 22px;
    height: 22px;
}


/* =============================================
   Dev Environment Indicators
   ============================================= */
.dev-brand-tag {
    color: var(--accent-red);
    font-weight: 700;
    font-size: var(--dmn-t-caps);
    line-height: var(--dmn-lh-caps);
    letter-spacing: var(--dmn-ls-caps);
    vertical-align: middle;
}

.dev-env-banner {
    padding: 3px 8px;
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 22%, transparent);
    border-radius: var(--radius-sm);
    color: var(--accent-red);
    font-size: var(--dmn-t-caps);
    line-height: var(--dmn-lh-caps);
    letter-spacing: var(--dmn-ls-caps);
    font-weight: 600;
    white-space: nowrap;
    margin-top: 8px;
    display: inline-block;
}

/* =============================================
   Sidebar Navigation
   ============================================= */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: var(--dmn-z-sticky);
    overflow: visible;
}

/* ─── Brand ─── */
.sidebar-brand {
    padding: 18px 14px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    position: relative;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
    transition: opacity 0.15s ease;
}

.navbar-brand:hover {
    opacity: 0.8;
    text-decoration: none;
}

.navbar-logo {
    height: 32px;
    width: auto;
    flex-shrink: 0;
}

.sidebar-brand-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.brand-name {
    font-size: var(--dmn-t-h3);
    line-height: var(--dmn-lh-h3);
    letter-spacing: var(--dmn-ls-h3);
    font-weight: 700;
    color: var(--text);
}

.brand-panel {
    color: var(--accent);
}

/* ─── Nav Menu ─── */
.navbar-menu {
    flex: 1;
    min-height: 0;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Nav Links */
.nav-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: var(--dmn-nav-py) var(--dmn-nav-px);
    border-radius: var(--radius-sm);
    font-size: var(--dmn-t-ui);
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
    background: transparent;
    border: none;
    border-left: 2px solid transparent;
    cursor: pointer;
    font-family: inherit;
    width: 100%;
    text-align: left;
    letter-spacing: -0.01em;
}

.nav-link:hover {
    color: var(--text);
    background: var(--bg-card);
    text-decoration: none;
}

.nav-link.active {
    color: var(--text);
    background: var(--bg-card);
    border-left-color: var(--accent);
}

/* Nav Icon */
.nav-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

.nav-link:hover .nav-icon,
.nav-link.active .nav-icon {
    opacity: 1;
}

/* Dropdown Chevron */
.dropdown-arrow {
    width: 13px;
    height: 13px;
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0.3;
    transition: transform 0.2s ease, opacity 0.15s ease;
}

.nav-link:hover .dropdown-arrow,
.nav-dropdown.open .nav-link .dropdown-arrow {
    opacity: 0.6;
}

.nav-dropdown.open > .nav-link .dropdown-arrow,
.nav-dropdown.open > button.nav-link .dropdown-arrow {
    transform: rotate(180deg);
}

/* ─── Dropdown ─── */
.nav-dropdown {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* BEWUSSTE AUSNAHME von „kein Uebergang auf Layout-Eigenschaften".
   Ein Aufklappmenue muss seine Hoehe aendern — das laesst sich ohne einen
   zusaetzlichen Wrapper im Markup nicht auf transform/opacity abbilden. Der
   Preis ist hier klein und begrenzt: das Menue hat hoechstens sechs Punkte,
   liegt in der Seitenleiste und klappt nur auf Klick auf, nicht laufend.
   Wer hier einen Wrapper ergaenzt, nimmt stattdessen grid-template-rows
   0fr -> 1fr; dann stimmt auch die Dauer, die bei max-height ueber den zu
   grossen Endwert laeuft und das Menue am Ende „nachhaengen" laesst. */
.nav-dropdown-menu {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.22s var(--dmn-ease-out);
    /* Reset old hover-based positioning */
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 2px 0 2px !important;
    min-width: unset !important;
    z-index: auto !important;
}

.nav-dropdown.open .nav-dropdown-menu {
    max-height: 320px;
}

.nav-dropdown-item {
    display: flex;
    align-items: center;
    padding: 6px 10px 6px 34px;
    font-size: var(--dmn-t-body);
    font-weight: 400;
    color: var(--text-dim);
    text-decoration: none;
    border-radius: var(--radius-sm);
    border-bottom: none !important;
    transition: color 0.15s ease, background 0.15s ease;
    letter-spacing: -0.01em;
}

.nav-dropdown-item:hover {
    color: var(--text-sub);
    background: var(--bg-card);
    text-decoration: none;
    padding-left: 34px;
}

.nav-dropdown-item.active {
    color: var(--text-sub);
    background: var(--bg-card);
}

/* ─── Sidebar Docs (Handbuch, fixiert über User) ─── */
.sidebar-docs {
    padding: 6px 6px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

/* ─── Sidebar User Section ─── */
.sidebar-user {
    padding: 11px 14px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
}

.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    border: 1px solid var(--border-mid);
}

.user-name {
    font-size: var(--dmn-t-body);
    font-weight: 500;
    color: var(--text-sub);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.sidebar-logout-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-dim);
    padding: 5px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    transition: color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}

.sidebar-logout-btn:hover {
    color: var(--accent-red);
    background: color-mix(in srgb, var(--danger) 8%, transparent);
}

.sidebar-logout-btn svg {
    width: 14px;
    height: 14px;
}

/* ─── Sidebar User Dropdown (dropup) ─── */
.sidebar-user-dropdown {
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    position: relative;
}

.sidebar-user-dropdown .sidebar-user {
    border-top: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

.sidebar-user-dropdown .sidebar-user:hover {
    background: var(--bg-card);
}

.sidebar-user-dropdown .nav-dropdown-menu {
    display: none !important;
    position: absolute !important;
    bottom: calc(100% + 4px) !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border-mid) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.4) !important;
    padding: 4px 0 !important;
    z-index: var(--dmn-z-dropdown) !important;
    max-height: none !important;
    overflow: visible !important;
    transition: none !important;
}

.sidebar-user-dropdown.open .nav-dropdown-menu {
    display: block !important;
}

.navbar.collapsed .sidebar-user-dropdown .nav-dropdown-menu {
    display: none !important;
}

.sidebar-user-dropdown .nav-dropdown-item {
    padding: 8px 14px;
    color: var(--text-sub);
}

.sidebar-user-dropdown .nav-dropdown-item:hover {
    background: var(--bg-card-hover);
    color: var(--text);
    padding-left: 14px;
}

.nav-dropdown-logout {
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    color: var(--accent-red);
}

.nav-dropdown-logout:hover {
    background: color-mix(in srgb, var(--danger) 8%, transparent) !important;
    color: var(--accent-red) !important;
}

/* Legacy user-info (simple navbar fragment) */
.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* =============================================
   Sidebar Toggle Button
   ============================================= */
.sidebar-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background: var(--bg-sidebar);
    border: 1px solid var(--border-mid);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-dim);
    font-size: var(--dmn-t-caps);
    z-index: calc(var(--dmn-z-sticky) + 1);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
    line-height: 1;
}

.sidebar-toggle:hover {
    background: var(--bg-card);
    border-color: var(--border-hi);
    color: var(--text);
}

/* BEWUSSTE AUSNAHME, zweite und letzte.
   Die Leiste schiebt den Inhalt, statt ihn zu ueberdecken: `body` haengt an
   `padding-left: var(--sidebar-width)`. Eine Breitenaenderung rechnet damit
   die ganze Seite neu, in jedem Bild der 220 ms. Auf `transform` umzustellen
   hiesse, die Leiste ueber den Inhalt zu legen — eine andere Bedienung, nicht
   dieselbe mit anderer Technik.
   Vertretbar, weil es ein bewusster, seltener Klick ist und nicht etwas, das
   beim Zeigen, Scrollen oder Tippen passiert. Auf Mobil liegt die Leiste
   ohnehin darueber und laeuft dort korrekt ueber `transform` (unten im
   Media-Query). */
.navbar {
    transition: width 0.22s var(--dmn-ease-out);
}

/* ── Nav Label (Text in Links) ── */
.nav-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    /* Nur die Deckkraft. `max-width` mitzuanimieren brachte nichts Sichtbares:
       die Breite der Leiste daneben bestimmt ohnehin schon, wie viel Text
       Platz hat — es war eine Layout-Animation je Bild ohne Gegenwert. */
    transition: opacity 0.18s var(--dmn-ease-out);
    max-width: 200px;
    opacity: 1;
}

/* =============================================
   Sidebar Collapsed State
   ============================================= */
.navbar.collapsed {
    width: var(--sidebar-collapsed);
    overflow: hidden;
}

.navbar.collapsed .nav-label,
.navbar.collapsed .brand-name,
.navbar.collapsed .brand-sub,
.navbar.collapsed .user-name,
.navbar.collapsed .dropdown-arrow,
.navbar.collapsed .dev-env-banner {
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    pointer-events: none;
}

.navbar.collapsed .sidebar-brand {
    padding: 12px 0 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.navbar.collapsed .navbar-brand {
    justify-content: center;
    gap: 0;
}

.navbar.collapsed .sidebar-brand-text {
    display: none;
}

.navbar.collapsed .navbar-logo {
    margin: 0 auto;
}

.navbar.collapsed .sidebar-toggle {
    position: static;
    transform: none;
}

.navbar.collapsed .nav-link {
    justify-content: center;
    padding: 8px;
    gap: 0;
}

.navbar.collapsed .nav-dropdown-menu {
    max-height: 0 !important;
}

.navbar.collapsed .sidebar-docs {
    padding: 6px 0;
}

.navbar.collapsed .sidebar-user {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    gap: 4px;
}

.navbar.collapsed .sidebar-logout-btn {
    margin: 0;
}

/* Body padding dynamisch */
body.sidebar-collapsed {
    padding-left: var(--sidebar-collapsed);
}

/* ── Tooltips im collapsed State ── */
.navbar.collapsed .nav-link {
    position: relative;
}

.navbar.collapsed .nav-link::after {
    content: attr(data-label);
    position: absolute;
    left: calc(var(--sidebar-collapsed) + 6px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-card);
    border: 1px solid var(--border-mid);
    color: var(--text-sub);
    padding: 5px 10px;
    font-size: var(--dmn-t-body);
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: var(--dmn-z-float);
    letter-spacing: -0.01em;
}

.navbar.collapsed .nav-link:hover::after {
    opacity: 1;
}

/* ── Dropdown-Items im collapsed State ausblenden ── */
.navbar.collapsed .nav-dropdown-item {
    display: none;
}

/* ── Collapsed Flyout ── */
.sidebar-flyout {
    position: fixed;
    background: var(--bg-card);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-md);
    padding: 4px;
    min-width: 155px;
    z-index: var(--dmn-z-float);
    box-shadow: 0 8px 24px rgba(0,0,0,0.45);
    display: none;
    pointer-events: auto;
}

.sidebar-flyout.visible {
    display: block;
}

.sidebar-flyout .nav-dropdown-item {
    display: flex !important;
    padding: 6px 12px !important;
}

/* =============================================
   Messages
   ============================================= */
.message-error {
    background: color-mix(in srgb, var(--danger) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 20%, transparent);
    color: var(--accent-red);
    padding: 12px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    font-size: var(--dmn-t-ui);
}

/* =============================================
   Info Section
   ============================================= */
.info-section {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.info-section p {
    color: var(--text-dim);
    font-size: var(--dmn-t-body);
}

/* =============================================
   Text Utilities
   ============================================= */
.text-muted  { color: var(--text-muted); }
.text-center { text-align: center; }

/* =============================================
   Site Footer
   ============================================= */
.site-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 2.5%;
    margin-top: auto;
    border-top: 1px solid var(--border);
    font-size: var(--dmn-t-meta);
    color: var(--text-dim);
    letter-spacing: 0.01em;
}

.site-footer .footer-version {
    font-family: 'DM Mono', 'Fira Code', 'SF Mono', monospace;
    font-size: var(--dmn-t-caps);
}

/* =============================================
   Mobile Navigation Toggle
   ============================================= */

/* Hamburger-Button — auf Desktop versteckt */
.mobile-nav-toggle {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: var(--dmn-z-modal);
    width: 38px;
    height: 38px;
    background: var(--bg-card);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-md);
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.mobile-nav-toggle:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hi);
}

.mobile-nav-toggle span {
    display: block;
    width: 16px;
    height: 1.5px;
    background: var(--text-sub);
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
    pointer-events: none;
}

/* X-Animation wenn Menü offen */
.mobile-nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.mobile-nav-toggle.open span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Overlay */
.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: var(--dmn-z-scrim);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

@media (max-width: 768px) {
    .mobile-nav-toggle { display: flex; }

    .mobile-overlay { display: block; }
    .mobile-overlay.active { opacity: 1; pointer-events: auto; }

    .navbar {
        transform: translateX(-100%);
        transition: transform 0.28s var(--dmn-ease-out);
        z-index: var(--dmn-z-nav-mobile);
        width: var(--sidebar-width) !important; /* collapsed ignorieren auf Mobile */
    }

    .navbar.open {
        transform: translateX(0);
        box-shadow: 8px 0 32px rgba(0, 0, 0, 0.6);
    }

    /* Collapsed-State auf Mobile: Sidebar läuft normal aus dem Screen */
    .navbar.collapsed.open { width: var(--sidebar-width) !important; }

    body { padding-left: 0 !important; }
    body.nav-open { overflow: hidden; }
    body.sidebar-collapsed { padding-left: 0 !important; }

    .sidebar-toggle { display: none; }
}

/* Verhindert Sidebar-Flicker beim Laden wenn collapsed gespeichert */
html.sidebar-pre-collapsed body {
    padding-left: var(--sidebar-collapsed);
}

/* =============================================
   iframe-Mode (FiveM IC Admin Panel)
   ============================================= */
.iframe-mode body {
    background: #000 !important;
    padding-left: 0 !important;
}

.iframe-mode .navbar {
    display: none !important;
}

.iframe-mode *,
.iframe-mode *::before,
.iframe-mode *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
}

html.iframe-mode {
    background: #000 !important;
}

.iframe-mode ::-webkit-scrollbar-track {
    background: #000 !important;
}

.iframe-mode * {
    scrollbar-color: var(--border-mid) #000 !important;
}

/* =============================================
   Kommando-Palette — Hinweis in der Sidebar
   Sitzt ueber dem Nutzerbereich am Fuss. Sieht aus wie ein Navigationspunkt,
   ist aber ein <button>: die Palette ist kein Ort, zu dem man navigiert.
   ============================================= */
.nav-palette-hint {
    display: flex;
    align-items: center;
    gap: 9px;
    width: calc(100% - 12px);
    margin: 0 6px 6px;
    padding: var(--dmn-nav-py) var(--dmn-nav-px);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-family: inherit;
    font-size: var(--dmn-t-ui);
    text-align: left;
    cursor: pointer;
    transition: color var(--dmn-base) var(--dmn-ease-out),
                background var(--dmn-base) var(--dmn-ease-out),
                border-color var(--dmn-base) var(--dmn-ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .nav-palette-hint:hover {
        color: var(--text);
        background: var(--bg-card);
        border-color: var(--border-hi);
    }
}

.nav-palette-hint .nav-icon { opacity: .55; }
.nav-palette-hint:hover .nav-icon { opacity: 1; }

.nav-palette-keys {
    margin-left: auto;
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.nav-palette-keys kbd {
    font: 500 var(--dmn-t-caps)/1 var(--dmn-mono);
    color: var(--text-muted);
    background: var(--bg-inset);
    border: 1px solid var(--border-mid);
    border-radius: 3px;
    padding: 3px 5px;
}

/* Eingeklappte Sidebar: nur das Lupensymbol bleibt. */
.sidebar-collapsed .nav-palette-hint .nav-label,
.sidebar-collapsed .nav-palette-keys { display: none; }