/*
 * Kropp Mail UI
 * Canonical authenticated UI layer
 *
 * Wichtig:
 * - Login wird hier nicht umgebaut
 * - keine MutationObserver-Abhängigkeit
 * - #layout-sidebar bleibt im Mail-Task im DOM
 * - Custom Sidebar steuert echte Roundcube-Aktionen
 */

html.kropp-ui-v4 {
    --kropp-bg: #14191c;
    --kropp-panel: #171d20;
    --kropp-panel-2: #192125;
    --kropp-hover: #1b2226;
    --kropp-active: #202b30;
    --kropp-active-2: #1d282d;

    --kropp-line: #29343a;
    --kropp-line-soft: #222c31;

    --kropp-text: #d7e0e4;
    --kropp-text-soft: #9ca9af;
    --kropp-text-dim: #718087;

    --kropp-accent: #25b9f4;
    --kropp-accent-hi: #6bd7ff;
    --kropp-accent-soft: rgba(37,185,244,.11);

    --kropp-nav-open: 200px;
    --kropp-nav-closed: 50px;
    --kropp-nav-width: var(--kropp-nav-open);

    --kropp-list-width: 300px;

    --kropp-radius: 8px;
    --kropp-speed: 180ms;
}


/* ----------------------------------------------------------
   LIGHT MODE
   ---------------------------------------------------------- */

html.kropp-ui-v4.kropp-light {
    --kropp-bg: #eef2f4;
    --kropp-panel: #f7f9fa;
    --kropp-panel-2: #ffffff;
    --kropp-hover: #e8eef1;
    --kropp-active: #dfeaf0;
    --kropp-active-2: #e5eef2;

    --kropp-line: #c9d4d9;
    --kropp-line-soft: #dce4e8;

    --kropp-text: #172126;
    --kropp-text-soft: #53656d;
    --kropp-text-dim: #7b8b92;

    --kropp-accent-soft: rgba(37,185,244,.12);
}


/* ----------------------------------------------------------
   SIDEBAR STATE
   ---------------------------------------------------------- */

html.kropp-ui-v4.kropp-sidebar-expanded {
    --kropp-nav-width: var(--kropp-nav-open);
}

html.kropp-ui-v4.kropp-sidebar-collapsed {
    --kropp-nav-width: var(--kropp-nav-closed);
}


/* ----------------------------------------------------------
   GLOBAL AUTHENTICATED UI
   ---------------------------------------------------------- */

html.kropp-ui-v4 body:not(.task-login) {
    background: var(--kropp-bg) !important;
    color: var(--kropp-text) !important;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif !important;

    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


/* ----------------------------------------------------------
   REAL ROUND CUBE LAYOUT
   ---------------------------------------------------------- */

html.kropp-ui-v4 body:not(.task-login) #layout {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;

    width: 100% !important;
    max-width: none !important;

    height: 100vh !important;
    height: 100dvh !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: var(--kropp-bg) !important;
}


/* ----------------------------------------------------------
   LEFT KROPP SIDEBAR CONTAINER
   This changes REAL width / min / max / flex-basis.
   ---------------------------------------------------------- */

html.kropp-ui-v4 body:not(.task-login) #layout-menu {
    position: relative !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;

    display: flex !important;
    flex-direction: column !important;

    flex: 0 0 var(--kropp-nav-width) !important;
    flex-basis: var(--kropp-nav-width) !important;

    width: var(--kropp-nav-width) !important;
    min-width: var(--kropp-nav-width) !important;
    max-width: var(--kropp-nav-width) !important;

    height: 100% !important;
    min-height: 0 !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    border: 0 !important;
    border-right: 1px solid var(--kropp-line) !important;

    background: var(--kropp-bg) !important;

    color: var(--kropp-text) !important;

    z-index: 20 !important;

    transition:
        width var(--kropp-speed) ease,
        min-width var(--kropp-speed) ease,
        max-width var(--kropp-speed) ease,
        flex-basis var(--kropp-speed) ease !important;
}


/*
 * Original Roundcube taskmenu stays in DOM.
 * We use its real anchors as navigation targets.
 */
html.kropp-ui-v4 body:not(.task-login) #layout-menu > .popover-header,
html.kropp-ui-v4 body:not(.task-login) #layout-menu #taskmenu {
    display: none !important;
}


/* ----------------------------------------------------------
   NATIVE MAILBOX SIDEBAR

   Keep it in DOM but visually remove it in Mail task.
   Therefore native mailbox links remain clickable by JS.
   ---------------------------------------------------------- */

html.kropp-ui-v4 body.task-mail #layout-sidebar {
    display: block !important;

    position: absolute !important;

    left: -10000px !important;
    top: 0 !important;

    width: 1px !important;
    min-width: 1px !important;
    max-width: 1px !important;

    height: 1px !important;

    flex: 0 0 1px !important;

    overflow: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;

    border: 0 !important;
}


/* ----------------------------------------------------------
   MESSAGE LIST COLUMN
   ---------------------------------------------------------- */

html.kropp-ui-v4 body.task-mail #layout-list,
html.kropp-ui-v4.layout-phone body.task-mail #layout-list,
html.kropp-ui-v4.layout-small body.task-mail #layout-list {
    position: relative !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;

    display: flex !important;
    flex-direction: column !important;

    flex: 0 0 var(--kropp-list-width) !important;
    flex-basis: var(--kropp-list-width) !important;

    width: var(--kropp-list-width) !important;
    min-width: var(--kropp-list-width) !important;
    max-width: var(--kropp-list-width) !important;

    height: 100% !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    border: 0 !important;
    border-right: 1px solid var(--kropp-line) !important;

    background: var(--kropp-panel) !important;

    color: var(--kropp-text) !important;

    overflow: hidden !important;

    z-index: 10 !important;

    transition:
        width var(--kropp-speed) ease,
        min-width var(--kropp-speed) ease,
        max-width var(--kropp-speed) ease,
        flex-basis var(--kropp-speed) ease,
        border-color var(--kropp-speed) ease,
        opacity 120ms ease !important;
}


/* ----------------------------------------------------------
   COLLAPSIBLE MESSAGE LIST
   Completely hides the center/list column. A small reopen
   control stays in the reading-pane header.
   ---------------------------------------------------------- */

html.kropp-ui-v4.kropp-list-collapsed body.task-mail #layout-list,
html.kropp-ui-v4.kropp-list-collapsed.layout-phone body.task-mail #layout-list,
html.kropp-ui-v4.kropp-list-collapsed.layout-small body.task-mail #layout-list {
    flex: 0 0 0 !important;
    flex-basis: 0 !important;

    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;

    border-right-width: 0 !important;

    opacity: 0 !important;
    pointer-events: none !important;
}


/* ----------------------------------------------------------
   READING PANE
   ---------------------------------------------------------- */

html.kropp-ui-v4 body.task-mail #layout-content,
html.kropp-ui-v4.layout-phone body.task-mail #layout-content,
html.kropp-ui-v4.layout-small body.task-mail #layout-content {
    position: relative !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    transform: none !important;

    flex: 1 1 0 !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: 100% !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    border: 0 !important;

    background: var(--kropp-panel) !important;

    color: var(--kropp-text) !important;

    overflow: hidden !important;

    z-index: 5 !important;
}


/* ----------------------------------------------------------
   CUSTOM NAV
   ---------------------------------------------------------- */

html.kropp-ui-v4 #kropp-nav {
    display: flex !important;
    flex-direction: column !important;

    flex: 1 1 auto !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    background: var(--kropp-bg) !important;
}


/* logo + toggle */

html.kropp-ui-v4 #kropp-nav-header {
    display: flex !important;
    align-items: center !important;

    flex: 0 0 62px !important;

    width: 100% !important;
    height: 62px !important;

    box-sizing: border-box !important;

    padding: 8px 8px 8px 10px !important;

    border-bottom: 1px solid var(--kropp-line-soft) !important;

    overflow: hidden !important;
}


html.kropp-ui-v4 #kropp-nav-logo-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    flex: 1 1 auto !important;

    min-width: 0 !important;

    overflow: hidden !important;
}


html.kropp-ui-v4 #kropp-nav-logo {
    display: block !important;

    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;

    height: 42px !important;
    max-height: 42px !important;

    margin: 0 !important;

    object-fit: contain !important;

    border: 0 !important;

    flex: 0 0 42px !important;
}


html.kropp-ui-v4 #kropp-nav-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 34px !important;

    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;

    padding: 0 !important;
    margin: 0 0 0 4px !important;

    border: 1px solid transparent !important;
    border-radius: 7px !important;

    background: transparent !important;
    color: var(--kropp-text-soft) !important;

    cursor: pointer !important;

    font: inherit !important;
    font-size: 21px !important;
    line-height: 1 !important;

    transition:
        background .14s ease,
        color .14s ease,
        border-color .14s ease !important;
}


html.kropp-ui-v4 #kropp-nav-toggle:hover {
    background: var(--kropp-hover) !important;
    color: var(--kropp-text) !important;
    border-color: var(--kropp-line-soft) !important;
}


/* compact compose action in expanded header */
html.kropp-ui-v4 #kropp-compose-top {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 34px !important;

    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;

    padding: 0 !important;
    margin: 0 0 0 4px !important;

    border: 1px solid transparent !important;
    border-radius: 7px !important;

    background: transparent !important;
    color: var(--kropp-text-soft) !important;

    cursor: pointer !important;
    overflow: hidden !important;
}

html.kropp-ui-v4 #kropp-compose-top:hover {
    background: var(--kropp-hover) !important;
    color: var(--kropp-text) !important;
    border-color: var(--kropp-line-soft) !important;
}

html.kropp-ui-v4 #kropp-compose-top .kropp-icon {
    flex: 0 0 30px !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
}

html.kropp-ui-v4 #kropp-compose-top .kropp-label,
html.kropp-ui-v4 #kropp-compose-top .kropp-badge {
    display: none !important;
}

/* Preserve the Golden collapsed header geometry exactly. */
html.kropp-ui-v4.kropp-sidebar-collapsed #kropp-compose-top {
    display: none !important;
}


/* collapsed header */

html.kropp-ui-v4.kropp-sidebar-collapsed #kropp-nav-header {
    flex-direction: column !important;
    justify-content: center !important;

    flex-basis: 98px !important;
    height: 98px !important;

    padding: 7px 3px !important;
}


html.kropp-ui-v4.kropp-sidebar-collapsed #kropp-nav-logo-wrap {
    flex: 0 0 46px !important;

    width: 100% !important;

    justify-content: center !important;
}


html.kropp-ui-v4.kropp-sidebar-collapsed #kropp-nav-logo {
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;

    height: 38px !important;

    flex-basis: 38px !important;
}


html.kropp-ui-v4.kropp-sidebar-collapsed #kropp-nav-toggle {
    width: 32px !important;
    min-width: 32px !important;
    height: 30px !important;

    flex-basis: 30px !important;

    margin: 2px 0 0 !important;
}


/* ----------------------------------------------------------
   NAV SECTIONS
   ---------------------------------------------------------- */

html.kropp-ui-v4 #kropp-nav-scroll {
    display: flex !important;
    flex-direction: column !important;

    flex: 1 1 auto !important;

    width: 100% !important;

    min-height: 0 !important;

    padding: 8px 6px !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    scrollbar-width: thin;
    scrollbar-color: var(--kropp-line) transparent;
}


html.kropp-ui-v4 #kropp-nav-main,
html.kropp-ui-v4 #kropp-nav-bottom {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;

    min-width: 0 !important;
}


html.kropp-ui-v4 #kropp-nav-bottom {
    margin-top: auto !important;
}


html.kropp-ui-v4 .kropp-divider {
    display: block !important;

    width: calc(100% - 12px) !important;
    height: 1px !important;

    flex: 0 0 1px !important;

    margin: 7px 6px !important;

    background: var(--kropp-line-soft) !important;
}


/* ----------------------------------------------------------
   NAV ITEM
   ---------------------------------------------------------- */

html.kropp-ui-v4 .kropp-item {
    position: relative !important;

    display: flex !important;
    align-items: center !important;

    flex: 0 0 44px !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;

    box-sizing: border-box !important;

    padding: 0 9px !important;
    margin: 1px 0 !important;

    border: 0 !important;
    border-radius: 7px !important;

    outline: 0 !important;

    background: transparent !important;
    color: var(--kropp-text-soft) !important;

    cursor: pointer !important;

    text-align: left !important;
    text-decoration: none !important;

    font: inherit !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: .005em !important;

    overflow: hidden !important;

    transition:
        background .13s ease,
        color .13s ease !important;
}


html.kropp-ui-v4 .kropp-item:hover {
    background: var(--kropp-hover) !important;
    color: var(--kropp-text) !important;
}


html.kropp-ui-v4 .kropp-item.active {
    background: var(--kropp-active) !important;
    color: var(--kropp-text) !important;

    box-shadow: none !important;
}


html.kropp-ui-v4 .kropp-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 34px !important;

    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;

    margin: 0 8px 0 0 !important;

    color: inherit !important;
}


html.kropp-ui-v4 .kropp-icon svg {
    display: block !important;

    width: 20px !important;
    height: 20px !important;

    fill: none !important;
    stroke: currentColor !important;

    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}


html.kropp-ui-v4 .kropp-label {
    display: block !important;

    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: visible !important;

    white-space: nowrap !important;
    text-overflow: clip !important;

    opacity: 1 !important;
    visibility: visible !important;
}


html.kropp-ui-v4 .kropp-badge {
    display: none;

    flex: 0 0 auto;

    min-width: 20px;

    margin-left: 5px;
    padding: 2px 5px;

    border-radius: 10px;

    background: var(--kropp-active);
    color: var(--kropp-text-soft);

    font-size: 11px;
    font-weight: 600;

    text-align: center;
}


html.kropp-ui-v4 .kropp-badge.has-value {
    display: inline-block;
}


/* collapsed = icons ONLY */

html.kropp-ui-v4.kropp-sidebar-collapsed .kropp-item {
    justify-content: center !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}


html.kropp-ui-v4.kropp-sidebar-collapsed .kropp-icon {
    flex-basis: 38px !important;

    width: 38px !important;
    min-width: 38px !important;

    margin: 0 !important;
}


html.kropp-ui-v4.kropp-sidebar-collapsed .kropp-label,
html.kropp-ui-v4.kropp-sidebar-collapsed .kropp-badge {
    display: none !important;
}


/* ----------------------------------------------------------
   MESSAGE LIST HEADER / SEARCH
   ---------------------------------------------------------- */

html.kropp-ui-v4 body.task-mail #layout-list > .header,
html.kropp-ui-v4 body.task-mail #layout-list .header {
    border-color: var(--kropp-line-soft) !important;

    background: var(--kropp-panel) !important;
    color: var(--kropp-text) !important;
}


html.kropp-ui-v4 body.task-mail #layout-list .searchbar,
html.kropp-ui-v4 body.task-mail #layout-list .searchbar form {
    background: var(--kropp-panel) !important;
}


html.kropp-ui-v4 body.task-mail #layout-list input,
html.kropp-ui-v4 body.task-mail #layout-list select {
    border-color: var(--kropp-line) !important;

    background: var(--kropp-bg) !important;
    color: var(--kropp-text) !important;

    box-shadow: none !important;
}


/* ----------------------------------------------------------
   MESSAGE LIST COLLAPSE CONTROLS
   ---------------------------------------------------------- */

html.kropp-ui-v4 body.task-mail #kropp-list-toggle,
html.kropp-ui-v4 body.task-mail #kropp-list-reopen {
    appearance: none !important;
    -webkit-appearance: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 36px !important;

    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;

    background: transparent !important;
    color: var(--kropp-text-soft) !important;

    box-shadow: none !important;
    outline: 0 !important;

    font: inherit !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    cursor: pointer !important;
}

html.kropp-ui-v4 body.task-mail #kropp-list-toggle {
    border-left: 1px solid var(--kropp-line-soft) !important;
}

html.kropp-ui-v4 body.task-mail #kropp-list-reopen {
    display: none !important;

    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;

    margin-right: 4px !important;

    border-right: 1px solid var(--kropp-line-soft) !important;
}

html.kropp-ui-v4 body.task-mail #kropp-list-toggle:hover,
html.kropp-ui-v4 body.task-mail #kropp-list-reopen:hover {
    background: var(--kropp-hover) !important;
    color: var(--kropp-text) !important;
}

html.kropp-ui-v4.kropp-list-collapsed body.task-mail #kropp-list-reopen {
    display: inline-flex !important;
}

html.kropp-ui-v4.kropp-list-expanded body.task-mail #kropp-list-reopen {
    display: none !important;
}


/* ----------------------------------------------------------
   MESSAGE LIST
   ---------------------------------------------------------- */

html.kropp-ui-v4 body.task-mail #messagelist,
html.kropp-ui-v4 body.task-mail #messagelist-content,
html.kropp-ui-v4 body.task-mail .messagelist {
    background: var(--kropp-panel) !important;
    color: var(--kropp-text) !important;
}


html.kropp-ui-v4 body.task-mail #messagelist tr,
html.kropp-ui-v4 body.task-mail #messagelist li,
html.kropp-ui-v4 body.task-mail .messagelist .message {
    border-color: var(--kropp-line-soft) !important;

    background: transparent !important;
    color: var(--kropp-text) !important;

    transition:
        background .11s ease,
        box-shadow .11s ease !important;
}


html.kropp-ui-v4 body.task-mail #messagelist tr:hover,
html.kropp-ui-v4 body.task-mail #messagelist li:hover,
html.kropp-ui-v4 body.task-mail .messagelist .message:hover {
    background: var(--kropp-hover) !important;
}


html.kropp-ui-v4 body.task-mail #messagelist tr.selected,
html.kropp-ui-v4 body.task-mail #messagelist li.selected,
html.kropp-ui-v4 body.task-mail .messagelist .selected,
html.kropp-ui-v4 body.task-mail .messagelist .message.selected {
    background: var(--kropp-active) !important;

    box-shadow:
        inset 3px 0 0 var(--kropp-accent) !important;

    color: var(--kropp-text) !important;
}


html.kropp-ui-v4 body.task-mail #messagelist .subject,
html.kropp-ui-v4 body.task-mail #messagelist .fromto,
html.kropp-ui-v4 body.task-mail #messagelist .sender,
html.kropp-ui-v4 body.task-mail .messagelist .subject,
html.kropp-ui-v4 body.task-mail .messagelist .fromto {
    color: var(--kropp-text) !important;
}


html.kropp-ui-v4 body.task-mail #messagelist .date,
html.kropp-ui-v4 body.task-mail #messagelist .size,
html.kropp-ui-v4 body.task-mail #messagelist .flags,
html.kropp-ui-v4 body.task-mail .messagelist .date {
    color: var(--kropp-text-dim) !important;
}


html.kropp-ui-v4 body.task-mail #messagelist .unread .subject,
html.kropp-ui-v4 body.task-mail #messagelist .unread .fromto {
    color: var(--kropp-text) !important;
    font-weight: 650 !important;
}


/* ----------------------------------------------------------
   READING PANE HEADER / TOOLBAR
   ---------------------------------------------------------- */

html.kropp-ui-v4 body.task-mail #layout-content > .header,
html.kropp-ui-v4 body.task-mail #layout-content .header,
html.kropp-ui-v4 body.task-mail #layout-content .toolbar {
    border-color: var(--kropp-line-soft) !important;

    background: var(--kropp-panel) !important;
    color: var(--kropp-text) !important;
}


html.kropp-ui-v4 body.task-mail #layout-content .toolbar a,
html.kropp-ui-v4 body.task-mail #layout-content .toolbar button {
    color: var(--kropp-text-soft) !important;
}


html.kropp-ui-v4 body.task-mail #layout-content .toolbar a:hover,
html.kropp-ui-v4 body.task-mail #layout-content .toolbar button:hover {
    background: var(--kropp-hover) !important;
    color: var(--kropp-text) !important;
}


/* ----------------------------------------------------------
   MESSAGE HEADERS / PLAIN CONTENT
   ---------------------------------------------------------- */

html.kropp-ui-v4 body.task-mail #message-header,
html.kropp-ui-v4 body.task-mail .message-headers {
    border-color: var(--kropp-line-soft) !important;

    background: var(--kropp-panel) !important;
    color: var(--kropp-text) !important;
}


html.kropp-ui-v4 body.task-mail #message-header .header-title,
html.kropp-ui-v4 body.task-mail #message-header .subject {
    color: var(--kropp-text) !important;
}


html.kropp-ui-v4 body.task-mail #message-header .header,
html.kropp-ui-v4 body.task-mail #message-header .date,
html.kropp-ui-v4 body.task-mail #message-header .adr {
    color: var(--kropp-text-soft) !important;
}


html.kropp-ui-v4 body.task-mail .message-part,
html.kropp-ui-v4 body.task-mail .message-partheaders,
html.kropp-ui-v4 body.task-mail #messagebody {
    border-color: var(--kropp-line-soft) !important;

    background: var(--kropp-panel) !important;
    color: var(--kropp-text) !important;
}


/*
 * HTML mail iframe itself is intentionally NOT forcibly recolored.
 * This prevents destroying sender formatting/readability.
 */
html.kropp-ui-v4 body.task-mail #messagecontframe {
    border: 0 !important;
    background: var(--kropp-panel) !important;
}


/* ----------------------------------------------------------
   EMPTY / WATERMARK
   ---------------------------------------------------------- */

html.kropp-ui-v4 body.task-mail #layout-content.empty,
html.kropp-ui-v4 body.task-mail #layout-content .watermark {
    background-color: var(--kropp-panel) !important;
    color: var(--kropp-text-dim) !important;
}


/* ----------------------------------------------------------
   BUTTONS / FORMS / MENUS
   ---------------------------------------------------------- */

html.kropp-ui-v4 body:not(.task-login) input,
html.kropp-ui-v4 body:not(.task-login) textarea,
html.kropp-ui-v4 body:not(.task-login) select {
    border-color: var(--kropp-line) !important;
    background-color: var(--kropp-panel) !important;
    color: var(--kropp-text) !important;
}


html.kropp-ui-v4 body:not(.task-login) .popover,
html.kropp-ui-v4 body:not(.task-login) .dropdown-menu,
html.kropp-ui-v4 body:not(.task-login) .menu,
html.kropp-ui-v4 body:not(.task-login) .popupmenu {
    border-color: var(--kropp-line) !important;

    background: var(--kropp-panel-2) !important;
    color: var(--kropp-text) !important;

    box-shadow:
        0 8px 30px rgba(0,0,0,.28) !important;
}


html.kropp-ui-v4 body:not(.task-login) .dropdown-menu a,
html.kropp-ui-v4 body:not(.task-login) .menu a,
html.kropp-ui-v4 body:not(.task-login) .popupmenu a {
    color: var(--kropp-text-soft) !important;
}


html.kropp-ui-v4 body:not(.task-login) .dropdown-menu a:hover,
html.kropp-ui-v4 body:not(.task-login) .menu a:hover,
html.kropp-ui-v4 body:not(.task-login) .popupmenu a:hover {
    background: var(--kropp-hover) !important;
    color: var(--kropp-text) !important;
}


/* ----------------------------------------------------------
   SCROLLBARS
   ---------------------------------------------------------- */

html.kropp-ui-v4 body:not(.task-login) * {
    scrollbar-width: thin;
    scrollbar-color: var(--kropp-line) transparent;
}


html.kropp-ui-v4 body:not(.task-login) *::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}


html.kropp-ui-v4 body:not(.task-login) *::-webkit-scrollbar-thumb {
    background: var(--kropp-line);
    border-radius: 8px;
}


html.kropp-ui-v4 body:not(.task-login) *::-webkit-scrollbar-track {
    background: transparent;
}


/* ----------------------------------------------------------
   MOBILE / TABLET
   Target around supplied ~710 px viewport
   ---------------------------------------------------------- */

@media screen and (max-width: 900px) {
    html.kropp-ui-v4 {
        --kropp-nav-open: 176px;
        --kropp-nav-closed: 48px;
        --kropp-list-width: 220px;
    }

    html.kropp-ui-v4 .kropp-item {
        height: 43px !important;
        flex-basis: 43px !important;

        padding-left: 7px !important;
        padding-right: 7px !important;

        font-size: 13.5px !important;
    }

    html.kropp-ui-v4 .kropp-icon {
        width: 32px !important;
        min-width: 32px !important;
        flex-basis: 32px !important;

        margin-right: 6px !important;
    }
}


/* ----------------------------------------------------------
   SMALL MOBILE
   ---------------------------------------------------------- */

@media screen and (max-width: 620px) {
    html.kropp-ui-v4 {
        --kropp-nav-open: 164px;
        --kropp-nav-closed: 46px;
        --kropp-list-width: 205px;
    }

    html.kropp-ui-v4 #kropp-nav-header {
        padding-left: 7px !important;
        padding-right: 6px !important;
    }

    html.kropp-ui-v4 #kropp-nav-logo {
        width: 39px !important;
        min-width: 39px !important;
        max-width: 39px !important;

        height: 39px !important;

        flex-basis: 39px !important;
    }

    html.kropp-ui-v4 .kropp-item {
        padding-left: 5px !important;
        padding-right: 5px !important;

        font-size: 13px !important;
    }

    html.kropp-ui-v4 .kropp-icon {
        margin-right: 4px !important;
    }
}


/* ----------------------------------------------------------
   VERY SMALL MOBILE
   ---------------------------------------------------------- */

@media screen and (max-width: 480px) {
    html.kropp-ui-v4 {
        --kropp-nav-open: 160px;
        --kropp-nav-closed: 44px;
        --kropp-list-width: 190px;
    }

    html.kropp-ui-v4.kropp-sidebar-collapsed #kropp-nav-logo {
        width: 35px !important;
        min-width: 35px !important;
        max-width: 35px !important;

        height: 35px !important;

        flex-basis: 35px !important;
    }

    html.kropp-ui-v4.kropp-sidebar-collapsed .kropp-icon {
        width: 36px !important;
        min-width: 36px !important;
        flex-basis: 36px !important;
    }
}


/* ----------------------------------------------------------
   DESKTOP LARGE
   ---------------------------------------------------------- */

@media screen and (min-width: 1100px) {
    html.kropp-ui-v4 {
        --kropp-nav-open: 200px;
        --kropp-nav-closed: 50px;
        --kropp-list-width: 300px;
    }
}

/* ----------------------------------------------------------
   ADDRESSBOOK / CONTACTS PANES
   Match the custom sidebar gray and use slightly thicker lines.
   ---------------------------------------------------------- */

html.kropp-ui-v4 body.task-addressbook #layout-sidebar,
html.kropp-ui-v4 body.task-addressbook #layout-list,
html.kropp-ui-v4 body.task-addressbook #layout-content {
    background: var(--kropp-panel) !important;
    color: var(--kropp-text) !important;
}

html.kropp-ui-v4 body.task-addressbook #layout-sidebar {
    border-right: 2px solid var(--kropp-line) !important;
}

html.kropp-ui-v4 body.task-addressbook #layout-list {
    border-right: 2px solid var(--kropp-line) !important;
}

html.kropp-ui-v4 body.task-addressbook #layout-sidebar > .header,
html.kropp-ui-v4 body.task-addressbook #layout-sidebar .header,
html.kropp-ui-v4 body.task-addressbook #layout-list > .header,
html.kropp-ui-v4 body.task-addressbook #layout-list .header,
html.kropp-ui-v4 body.task-addressbook #layout-content > .header,
html.kropp-ui-v4 body.task-addressbook #layout-content .header,
html.kropp-ui-v4 body.task-addressbook #layout-content .toolbar {
    background: var(--kropp-panel) !important;
    color: var(--kropp-text) !important;
    border-color: var(--kropp-line) !important;
    border-bottom-width: 2px !important;
}

html.kropp-ui-v4 body.task-addressbook #layout-sidebar .searchbar,
html.kropp-ui-v4 body.task-addressbook #layout-list .searchbar,
html.kropp-ui-v4 body.task-addressbook #layout-sidebar .searchbar form,
html.kropp-ui-v4 body.task-addressbook #layout-list .searchbar form {
    background: var(--kropp-panel) !important;
}

html.kropp-ui-v4 body.task-addressbook #layout-sidebar input,
html.kropp-ui-v4 body.task-addressbook #layout-list input,
html.kropp-ui-v4 body.task-addressbook #layout-content input,
html.kropp-ui-v4 body.task-addressbook #layout-sidebar select,
html.kropp-ui-v4 body.task-addressbook #layout-list select,
html.kropp-ui-v4 body.task-addressbook #layout-content select,
html.kropp-ui-v4 body.task-addressbook #layout-content textarea {
    background: var(--kropp-bg) !important;
    color: var(--kropp-text) !important;
    border-color: var(--kropp-line) !important;
    box-shadow: none !important;
}

html.kropp-ui-v4 body.task-addressbook #directorylist,
html.kropp-ui-v4 body.task-addressbook #contactslist,
html.kropp-ui-v4 body.task-addressbook #contacts-table,
html.kropp-ui-v4 body.task-addressbook .listing,
html.kropp-ui-v4 body.task-addressbook .listbox {
    background: var(--kropp-panel) !important;
    color: var(--kropp-text) !important;
    border-color: var(--kropp-line-soft) !important;
}

html.kropp-ui-v4 body.task-addressbook .listing li,
html.kropp-ui-v4 body.task-addressbook .listing tbody tr,
html.kropp-ui-v4 body.task-addressbook #directorylist li,
html.kropp-ui-v4 body.task-addressbook #contactslist li,
html.kropp-ui-v4 body.task-addressbook #contacts-table tbody tr {
    background: transparent !important;
    color: var(--kropp-text) !important;
    border-color: var(--kropp-line-soft) !important;
}

html.kropp-ui-v4 body.task-addressbook .listing li:hover,
html.kropp-ui-v4 body.task-addressbook .listing tbody tr:hover,
html.kropp-ui-v4 body.task-addressbook #directorylist li:hover,
html.kropp-ui-v4 body.task-addressbook #contactslist li:hover,
html.kropp-ui-v4 body.task-addressbook #contacts-table tbody tr:hover {
    background: var(--kropp-hover) !important;
}

html.kropp-ui-v4 body.task-addressbook .listing li.selected,
html.kropp-ui-v4 body.task-addressbook .listing tbody tr.selected,
html.kropp-ui-v4 body.task-addressbook #directorylist li.selected,
html.kropp-ui-v4 body.task-addressbook #contactslist li.selected,
html.kropp-ui-v4 body.task-addressbook #contacts-table tbody tr.selected,
html.kropp-ui-v4 body.task-addressbook .listing .selected {
    background: var(--kropp-active) !important;
    color: var(--kropp-text) !important;
    box-shadow: inset 3px 0 0 var(--kropp-accent) !important;
}

html.kropp-ui-v4 body.task-addressbook #layout-content .content,
html.kropp-ui-v4 body.task-addressbook #contact-details,
html.kropp-ui-v4 body.task-addressbook .contact-info,
html.kropp-ui-v4 body.task-addressbook .contentbox {
    background: var(--kropp-panel) !important;
    color: var(--kropp-text) !important;
    border-color: var(--kropp-line-soft) !important;
}

html.kropp-ui-v4 body.task-addressbook #layout-content .toolbar a,
html.kropp-ui-v4 body.task-addressbook #layout-content .toolbar button,
html.kropp-ui-v4 body.task-addressbook #layout-sidebar .header a,
html.kropp-ui-v4 body.task-addressbook #layout-list .header a {
    color: var(--kropp-text-soft) !important;
}

html.kropp-ui-v4 body.task-addressbook #layout-content .toolbar a:hover,
html.kropp-ui-v4 body.task-addressbook #layout-content .toolbar button:hover,
html.kropp-ui-v4 body.task-addressbook #layout-sidebar .header a:hover,
html.kropp-ui-v4 body.task-addressbook #layout-list .header a:hover {
    background: var(--kropp-hover) !important;
    color: var(--kropp-text) !important;
}


/* === KROPP SURFACE FINAL V4 BEGIN === */


/*
 * Mail:
 * Navigation, Nachrichtenliste und Leser
 * exakt derselbe Grundton.
 */

html.kropp-ui-v4
body:not(.task-login)
#layout-menu,

html.kropp-ui-v4
body.task-mail
#layout-list,

html.kropp-ui-v4
body.task-mail
#layout-content,

html.kropp-ui-v4
body.task-mail
#layout-list > .header,

html.kropp-ui-v4
body.task-mail
#layout-list .header,

html.kropp-ui-v4
body.task-mail
#layout-list .searchbar,

html.kropp-ui-v4
body.task-mail
#layout-list .searchbar form,

html.kropp-ui-v4
body.task-mail
#messagelist,

html.kropp-ui-v4
body.task-mail
#messagelist-content,

html.kropp-ui-v4
body.task-mail
.messagelist,

html.kropp-ui-v4
body.task-mail
#layout-content > .header,

html.kropp-ui-v4
body.task-mail
#layout-content .header,

html.kropp-ui-v4
body.task-mail
#layout-content .toolbar,

html.kropp-ui-v4
body.task-mail
#message-header,

html.kropp-ui-v4
body.task-mail
.message-headers,

html.kropp-ui-v4
body.task-mail
.message-part,

html.kropp-ui-v4
body.task-mail
.message-partheaders,

html.kropp-ui-v4
body.task-mail
#messagebody,

html.kropp-ui-v4
body.task-mail
#messagecontframe,

html.kropp-ui-v4
body.task-mail
#layout-content.empty,

html.kropp-ui-v4
body.task-mail
#layout-content .watermark {
    background:
        var(--kropp-bg) !important;

    background-color:
        var(--kropp-bg) !important;
}


/*
 * Genau die obere Toolbar:
 * Antworten / Allen antworten / Weiterleiten / Löschen ...
 */

html.kropp-ui-v4
body.task-mail
#layout-content .toolbar,

html.kropp-ui-v4
body.task-mail
#layout-content .toolbar ul,

html.kropp-ui-v4
body.task-mail
#layout-content .toolbar li,

html.kropp-ui-v4
body.task-mail
#messagetoolbar,

html.kropp-ui-v4
body.task-mail
#messagetoolbar ul,

html.kropp-ui-v4
body.task-mail
#messagetoolbar li {
    background:
        var(--kropp-bg) !important;

    background-color:
        var(--kropp-bg) !important;
}


/*
 * Kontakte:
 * alle drei Roundcube-Spalten identisch.
 */

html.kropp-ui-v4
body.task-addressbook
#layout-sidebar,

html.kropp-ui-v4
body.task-addressbook
#layout-list,

html.kropp-ui-v4
body.task-addressbook
#layout-content,

html.kropp-ui-v4
body.task-addressbook
#layout-sidebar > .header,

html.kropp-ui-v4
body.task-addressbook
#layout-sidebar .header,

html.kropp-ui-v4
body.task-addressbook
#layout-list > .header,

html.kropp-ui-v4
body.task-addressbook
#layout-list .header,

html.kropp-ui-v4
body.task-addressbook
#layout-content > .header,

html.kropp-ui-v4
body.task-addressbook
#layout-content .header,

html.kropp-ui-v4
body.task-addressbook
#layout-content .toolbar,

html.kropp-ui-v4
body.task-addressbook
#directorylist,

html.kropp-ui-v4
body.task-addressbook
#contactslist,

html.kropp-ui-v4
body.task-addressbook
#contacts-table,

html.kropp-ui-v4
body.task-addressbook
.listing,

html.kropp-ui-v4
body.task-addressbook
.listbox,

html.kropp-ui-v4
body.task-addressbook
#layout-content .content,

html.kropp-ui-v4
body.task-addressbook
#contact-details,

html.kropp-ui-v4
body.task-addressbook
.contact-info,

html.kropp-ui-v4
body.task-addressbook
.contentbox {
    background:
        var(--kropp-bg) !important;

    background-color:
        var(--kropp-bg) !important;
}


/*
 * Etwas kräftigere Spaltentrenner.
 */

html.kropp-ui-v4
body:not(.task-login)
#layout-menu,

html.kropp-ui-v4
body.task-mail
#layout-list,

html.kropp-ui-v4
body.task-addressbook
#layout-sidebar,

html.kropp-ui-v4
body.task-addressbook
#layout-list {
    border-right:
        2px
        solid
        var(--kropp-line) !important;
}


/*
 * Header-/Toolbar-Trenner ebenfalls 2 px.
 */

html.kropp-ui-v4
body.task-mail
#layout-list > .header,

html.kropp-ui-v4
body.task-mail
#layout-content > .header,

html.kropp-ui-v4
body.task-mail
#layout-content .toolbar,

html.kropp-ui-v4
body.task-addressbook
#layout-sidebar > .header,

html.kropp-ui-v4
body.task-addressbook
#layout-list > .header,

html.kropp-ui-v4
body.task-addressbook
#layout-content > .header,

html.kropp-ui-v4
body.task-addressbook
#layout-content .toolbar {
    border-bottom:
        2px
        solid
        var(--kropp-line) !important;
}


/* ----------------------------------------------------------
   Eigenes Über-Fenster
   ---------------------------------------------------------- */

html.kropp-ui-v4 #kropp-about-overlay {
    position: fixed !important;

    inset: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 20px !important;

    background:
        rgba(0,0,0,.72) !important;

    z-index: 100000 !important;
}


html.kropp-ui-v4 #kropp-about-card {
    position: relative !important;

    width:
        min(
            440px,
            100%
        ) !important;

    padding:
        30px
        26px
        22px !important;

    border:
        2px
        solid
        var(--kropp-line) !important;

    border-radius:
        15px !important;

    background:
        var(--kropp-bg) !important;

    color:
        var(--kropp-text) !important;

    box-shadow:
        0 24px 70px
        rgba(0,0,0,.52) !important;

    text-align:
        center !important;
}


html.kropp-ui-v4 #kropp-about-logo {
    display: block !important;

    width:
        150px !important;

    max-width:
        46vw !important;

    height:
        auto !important;

    margin:
        0 auto 18px !important;

    filter:
        drop-shadow(
            0 0 20px
            rgba(37,185,244,.20)
        ) !important;
}


html.kropp-ui-v4 #kropp-about-card h2 {
    margin:
        0 0 5px !important;

    color:
        var(--kropp-text) !important;

    font-size:
        22px !important;
}


html.kropp-ui-v4
#kropp-about-card
.kropp-about-sub {
    margin:
        0 0 20px !important;

    color:
        var(--kropp-text-soft) !important;
}


html.kropp-ui-v4
#kropp-about-card
.kropp-about-meta {
    padding:
        14px 0 !important;

    border-top:
        2px
        solid
        var(--kropp-line) !important;

    border-bottom:
        2px
        solid
        var(--kropp-line) !important;

    color:
        var(--kropp-text-soft) !important;

    line-height:
        1.7 !important;
}


html.kropp-ui-v4
#kropp-about-card
.kropp-about-legal {
    margin:
        14px 0 0 !important;

    color:
        var(--kropp-text-dim) !important;

    font-size:
        11px !important;
}


html.kropp-ui-v4 #kropp-about-close {
    position:
        absolute !important;

    top:
        9px !important;

    right:
        9px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        34px !important;

    height:
        34px !important;

    padding:
        0 !important;

    border:
        0 !important;

    border-radius:
        8px !important;

    background:
        transparent !important;

    color:
        var(--kropp-text-soft) !important;

    font-size:
        25px !important;

    cursor:
        pointer !important;
}


html.kropp-ui-v4 #kropp-about-close:hover {
    background:
        var(--kropp-hover) !important;

    color:
        var(--kropp-text) !important;
}

/* === KROPP SURFACE FINAL V4 END === */

/* === KROPP MIDDLE PANE SURGICAL FIX V12 BEGIN === */

/* Gemeinsamer Pfeil-Container im originalen KROPP Header. */
html.kropp-ui-v4 #kropp-toggle-group {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    gap: 2px !important;
    margin: 0 0 0 4px !important;
    padding: 0 !important;
    min-width: 0 !important;
    overflow: visible !important;
}

/* Beide Pfeile sehen aus wie ein gemeinsames Control-Paar. */
html.kropp-ui-v4 #kropp-toggle-group #kropp-nav-toggle,
html.kropp-ui-v4 #kropp-toggle-group #kropp-list-toggle {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 28px !important;
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: var(--kropp-text-soft) !important;
    box-shadow: none !important;
    outline: 0 !important;
    font: inherit !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

html.kropp-ui-v4 #kropp-toggle-group #kropp-nav-toggle:hover,
html.kropp-ui-v4 #kropp-toggle-group #kropp-list-toggle:hover,
html.kropp-ui-v4 #kropp-toggle-group #kropp-nav-toggle:focus-visible,
html.kropp-ui-v4 #kropp-toggle-group #kropp-list-toggle:focus-visible {
    background: var(--kropp-hover) !important;
    color: var(--kropp-text) !important;
    border-color: var(--kropp-line-soft) !important;
}

/* Im schmalen Zustand passen beide Pfeile weiterhin nebeneinander. */
html.kropp-ui-v4.kropp-sidebar-collapsed #kropp-toggle-group {
    width: 100% !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    gap: 2px !important;
    margin: 2px 0 0 !important;
}

html.kropp-ui-v4.kropp-sidebar-collapsed #kropp-toggle-group #kropp-nav-toggle,
html.kropp-ui-v4.kropp-sidebar-collapsed #kropp-toggle-group #kropp-list-toggle {
    flex: 0 0 18px !important;
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 28px !important;
    font-size: 17px !important;
}

/* Der neue List-Pfeil sitzt nicht mehr in der Searchbar. */
html.kropp-ui-v4 body.task-mail #kropp-toggle-group #kropp-list-toggle {
    border-left: 0 !important;
}

/*
 * Zuverlässiges Einklappen: die mittlere Spalte wird wirklich
 * aus dem Layout entfernt. Der Wiederöffnen-Pfeil liegt außerhalb.
 */
html.kropp-ui-v4.kropp-list-collapsed body.task-mail #layout-list,
html.kropp-ui-v4.kropp-list-collapsed.layout-phone body.task-mail #layout-list,
html.kropp-ui-v4.kropp-list-collapsed.layout-small body.task-mail #layout-list {
    display: none !important;
}

/* Alte V7/V8/V9/V10 Message-Pane Controls dürfen nie wieder auftauchen. */
html.kropp-ui-v4 body.task-mail #kropp-list-reopen,
html.kropp-ui-v4 body.task-mail #kropp-middle-toggle,
html.kropp-ui-v4 body.task-mail #kropp-middle-toggle-v10,
html.kropp-ui-v4 body.task-mail #kropp-list-toggle,
html.kropp-ui-v4 body.task-mail #kropp-list-reopen {
    display: none !important;
}

/* === KROPP MIDDLE PANE SURGICAL FIX V12 END === */


/* ==========================================================
   KROPP RESPONSIVE HARDENING · 2026-09-27
   ========================================================== */
html.kropp-ui-v4,html.kropp-ui-v4 body{min-width:0!important;max-width:100vw!important}
html.kropp-ui-v4 body:not(.task-login){overflow:hidden!important;overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html.kropp-ui-v4 body:not(.task-login) #layout{width:100vw!important;max-width:100vw!important;height:100vh!important;height:100dvh!important;min-width:0!important;padding-bottom:env(safe-area-inset-bottom)!important}
html.kropp-ui-v4 body:not(.task-login) #layout-menu,
html.kropp-ui-v4 body:not(.task-login) #layout-sidebar,
html.kropp-ui-v4 body:not(.task-login) #layout-list,
html.kropp-ui-v4 body:not(.task-login) #layout-content{min-width:0}
html.kropp-ui-v4 body:not(.task-login) button,
html.kropp-ui-v4 body:not(.task-login) .button,
html.kropp-ui-v4 body:not(.task-login) a,
html.kropp-ui-v4 body:not(.task-login) input,
html.kropp-ui-v4 body:not(.task-login) select{touch-action:manipulation}
html.kropp-ui-v4 body:not(.task-login) button:focus-visible,
html.kropp-ui-v4 body:not(.task-login) .button:focus-visible,
html.kropp-ui-v4 body:not(.task-login) a:focus-visible,
html.kropp-ui-v4 body:not(.task-login) input:focus-visible{outline:2px solid var(--kropp-accent-hi)!important;outline-offset:2px!important}
html.kropp-ui-v4 #kropp-nav-header{padding-top:max(8px,env(safe-area-inset-top))!important}
html.kropp-ui-v4 #layout-menu{padding-left:env(safe-area-inset-left)!important}
html.kropp-ui-v4 .kropp-item{min-height:44px!important}
html.kropp-ui-v4 .kropp-icon{min-height:40px!important}
@media screen and (max-width:900px){html.kropp-ui-v4{--kropp-nav-open:min(176px,32vw);--kropp-list-width:min(220px,34vw)}html.kropp-ui-v4 #layout-content{overflow-x:hidden!important}}
@media screen and (max-width:620px){html.kropp-ui-v4{--kropp-nav-open:min(164px,40vw);--kropp-list-width:min(195px,43vw)}html.kropp-ui-v4 .kropp-item{font-size:13px!important}}
@media screen and (max-width:430px){html.kropp-ui-v4{--kropp-nav-open:46px;--kropp-nav-closed:46px;--kropp-list-width:min(174px,48vw)}html.kropp-ui-v4 .kropp-label,html.kropp-ui-v4 .kropp-item-label{display:none!important}html.kropp-ui-v4 #kropp-nav-logo{width:38px!important;min-width:38px!important;max-width:38px!important}}
@media screen and (max-width:360px){html.kropp-ui-v4{--kropp-nav-open:44px;--kropp-nav-closed:44px;--kropp-list-width:46vw}}
@media(prefers-reduced-motion:reduce){html.kropp-ui-v4 *,html.kropp-ui-v4 *::before,html.kropp-ui-v4 *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}