@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');

/*
 * Rite Systems SOGo application theme
 *
 * Applies to the authenticated SOGo application only.
 * Login page styling is handled separately by rite-sogo.css.
 */

/* ================================================================
 * BASE
 * ================================================================ */

body:not(:has(#loginContent)) {
    background: #0c0c0c !important;
    color: #d7ddd9 !important;
}


/* ================================================================
 * TOP TOOLBARS
 * ================================================================ */

body:not(:has(#loginContent)) md-toolbar {
    background: #0b0b0b !important;
    color: #e0e0e0 !important;
    border-bottom: 1px solid rgba(51, 255, 153, 0.22) !important;
    box-shadow: none !important;
}

body:not(:has(#loginContent)) md-toolbar,
body:not(:has(#loginContent)) md-toolbar .md-button,
body:not(:has(#loginContent)) md-toolbar span,
body:not(:has(#loginContent)) md-toolbar p {
    font-family: 'IBM Plex Mono', monospace !important;
}

body:not(:has(#loginContent)) md-toolbar md-icon {
    color: #b7beb9 !important;
}

body:not(:has(#loginContent)) md-toolbar .md-button:hover,
body:not(:has(#loginContent)) md-toolbar .md-button:hover md-icon {
    color: #33ff99 !important;
}


/* ================================================================
 * LEFT NAVIGATION
 * ================================================================ */

body:not(:has(#loginContent)) md-sidenav {
    background: #101010 !important;
    color: #d3d9d5 !important;
    border-right: 1px solid rgba(51, 255, 153, 0.11) !important;
    box-shadow: none !important;
}

body:not(:has(#loginContent)) md-sidenav md-content {
    background: #101010 !important;
}

body:not(:has(#loginContent)) md-sidenav md-list {
    background: transparent !important;
}

/* Neutral folders */
body:not(:has(#loginContent)) md-sidenav md-list-item,
body:not(:has(#loginContent)) md-sidenav md-list-item span,
body:not(:has(#loginContent)) md-sidenav md-list-item p {
    color: #c2cac5 !important;
    font-family: 'IBM Plex Mono', monospace !important;
}

body:not(:has(#loginContent)) md-sidenav md-list-item md-icon {
    color: #89948d !important;
}

/*
 * SOGo uses md-primary on some standard folders.
 * Keep them neutral unless they are actually selected.
 */
body:not(:has(#loginContent)) md-sidenav .md-primary,
body:not(:has(#loginContent)) md-sidenav .md-primary span,
body:not(:has(#loginContent)) md-sidenav .md-primary p {
    color: #c2cac5 !important;
}

body:not(:has(#loginContent)) md-sidenav .md-primary md-icon {
    color: #89948d !important;
}

/* Folder hover */
body:not(:has(#loginContent)) md-sidenav md-list-item:hover {
    background: rgba(51, 255, 153, 0.045) !important;
}

body:not(:has(#loginContent)) md-sidenav md-list-item:hover span,
body:not(:has(#loginContent)) md-sidenav md-list-item:hover p,
body:not(:has(#loginContent)) md-sidenav md-list-item:hover md-icon {
    color: #33ff99 !important;
}

/* Selected/current folder */
body:not(:has(#loginContent)) md-sidenav .sg-selected,
body:not(:has(#loginContent)) md-sidenav md-list-item.sg-selected,
body:not(:has(#loginContent)) md-sidenav md-list-item.md-selected,
body:not(:has(#loginContent)) md-sidenav md-list-item[aria-selected="true"],
body:not(:has(#loginContent)) md-sidenav md-list-item.md-background {
    background: #12261c !important;
    border-left: 3px solid #33ff99 !important;
}

body:not(:has(#loginContent)) md-sidenav .sg-selected,
body:not(:has(#loginContent)) md-sidenav .sg-selected span,
body:not(:has(#loginContent)) md-sidenav .sg-selected p,
body:not(:has(#loginContent)) md-sidenav .sg-selected md-icon,
body:not(:has(#loginContent)) md-sidenav md-list-item.md-selected,
body:not(:has(#loginContent)) md-sidenav md-list-item.md-selected span,
body:not(:has(#loginContent)) md-sidenav md-list-item.md-selected p,
body:not(:has(#loginContent)) md-sidenav md-list-item.md-selected md-icon,
body:not(:has(#loginContent)) md-sidenav md-list-item[aria-selected="true"],
body:not(:has(#loginContent)) md-sidenav md-list-item[aria-selected="true"] span,
body:not(:has(#loginContent)) md-sidenav md-list-item[aria-selected="true"] p,
body:not(:has(#loginContent)) md-sidenav md-list-item[aria-selected="true"] md-icon,
body:not(:has(#loginContent)) md-sidenav md-list-item.md-background,
body:not(:has(#loginContent)) md-sidenav md-list-item.md-background span,
body:not(:has(#loginContent)) md-sidenav md-list-item.md-background p,
body:not(:has(#loginContent)) md-sidenav md-list-item.md-background md-icon {
    color: #33ff99 !important;
}

/* Folder unread counters */
body:not(:has(#loginContent)) md-sidenav .badge,
body:not(:has(#loginContent)) md-sidenav .sg-counter,
body:not(:has(#loginContent)) md-sidenav .sg-unread-count {
    color: #33ff99 !important;
}

/* Mailbox expand arrows */
body:not(:has(#loginContent))
md-sidenav md-checkbox.sg-folder .md-container::after {
    color: #8f9993 !important;
}


/* ================================================================
 * MAIN APPLICATION AREA
 * ================================================================ */

body:not(:has(#loginContent)) .view,
body:not(:has(#loginContent)) section,
body:not(:has(#loginContent)) md-content {
    background-color: #141414 !important;
    color: #d7ddd9;
}

/* Preserve toolbar/sidenav inheritance */
body:not(:has(#loginContent)) md-toolbar md-content,
body:not(:has(#loginContent)) md-sidenav md-content {
    background-color: inherit !important;
}

body:not(:has(#loginContent)) .view-list {
    background: #141414 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.055) !important;
}

body:not(:has(#loginContent)) .view-detail {
    background: #121212 !important;
}


/* ================================================================
 * GENERAL LISTS
 * ================================================================ */

body:not(:has(#loginContent)) .view-list md-list-item {
    color: #d0d6d2 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045) !important;
}

/* Non-mail lists */
body:not(:has(#loginContent))
.view-list md-list-item:not(.sg-message-list-item):hover {
    background: rgba(51, 255, 153, 0.045) !important;
}


/* ================================================================
 * MESSAGE LIST
 *
 * SOGo identifies the currently opened message using:
 *   .md-accent.md-bg.md-hue-2
 *
 * Leave that application logic untouched and style only its visuals.
 * ================================================================ */

/* Normal message */
body:not(:has(#loginContent))
#messagesList
md-list-item.sg-message-list-item {
    background: #141414 !important;
    color: #d0d6d2 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.035) !important;
}

/* Unread message */
body:not(:has(#loginContent))
#messagesList
md-list-item.sg-message-list-item.unread:not(.md-bg) {
    background: #171717 !important;
}

body:not(:has(#loginContent))
#messagesList
md-list-item.sg-message-list-item.unread
.sg-md-subhead,
body:not(:has(#loginContent))
#messagesList
md-list-item.sg-message-list-item.unread
.sg-md-body {
    color: #f0f3f1 !important;
}

/* Normal hover */
body:not(:has(#loginContent))
#messagesList
md-list-item.sg-message-list-item:hover {
    background: #202020 !important;
}

/*
 * Angular Material puts the clickable button inside the list item.
 * The parent row owns all background states.
 */
body:not(:has(#loginContent))
#messagesList
md-list-item.sg-message-list-item > .md-button,
body:not(:has(#loginContent))
#messagesList
md-list-item.sg-message-list-item > .md-button:hover,
body:not(:has(#loginContent))
#messagesList
md-list-item.sg-message-list-item > .md-button:focus,
body:not(:has(#loginContent))
#messagesList
md-list-item.sg-message-list-item > .md-button.md-focused,
body:not(:has(#loginContent))
#messagesList
md-list-item.sg-message-list-item > .md-button:active {
    background: transparent !important;
}

/* Current/open message */
body:not(:has(#loginContent))
#messagesList
md-list-item.sg-message-list-item.md-accent.md-bg.md-hue-2 {
    background: #12261c !important;
    color: #dce4df !important;

    transition:
        background-color 160ms ease,
        color 160ms ease !important;
}

/* Current/open message while hovered */
body:not(:has(#loginContent))
#messagesList
md-list-item.sg-message-list-item.md-accent.md-bg.md-hue-2:hover {
    background: #172f23 !important;
}

/* Current message clickable layer */
body:not(:has(#loginContent))
#messagesList
md-list-item.sg-message-list-item.md-accent.md-bg.md-hue-2
> .md-button.md-no-style {
    background: transparent !important;
    color: inherit !important;
}

/* Current message sender */
body:not(:has(#loginContent))
#messagesList
md-list-item.sg-message-list-item.md-accent.md-bg.md-hue-2
.sg-md-subhead {
    color: #e4ebe7 !important;
}

/* Current message secondary text */
body:not(:has(#loginContent))
#messagesList
md-list-item.sg-message-list-item.md-accent.md-bg.md-hue-2
.sg-md-body,
body:not(:has(#loginContent))
#messagesList
md-list-item.sg-message-list-item.md-accent.md-bg.md-hue-2
.sg-tile-date,
body:not(:has(#loginContent))
#messagesList
md-list-item.sg-message-list-item.md-accent.md-bg.md-hue-2
.sg-tile-size {
    color: #aebbb4 !important;
}

/* Current message avatar/accent */
body:not(:has(#loginContent))
#messagesList
md-list-item.sg-message-list-item.md-accent.md-bg.md-hue-2
.sg-avatar-selectable md-icon {
    color: #33ff99 !important;
}

/* Default secondary message text */
body:not(:has(#loginContent)) .sg-md-body,
body:not(:has(#loginContent)) .sg-tile-date,
body:not(:has(#loginContent)) .md-caption {
    color: #929c96 !important;
}


/* ================================================================
 * DIVIDERS / SUBHEADERS
 * ================================================================ */

body:not(:has(#loginContent)) md-divider {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

body:not(:has(#loginContent)) md-subheader,
body:not(:has(#loginContent)) .md-subheader,
body:not(:has(#loginContent)) .sg-md-subheader {
    background: #141414 !important;
    color: #7f8b84 !important;
    font-family: 'IBM Plex Mono', monospace !important;
}


/* ================================================================
 * CARDS / MESSAGE HEADER
 * ================================================================ */

body:not(:has(#loginContent)) md-card {
    background: #151515 !important;
    color: #d8ddd9 !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    box-shadow: none !important;
}

body:not(:has(#loginContent)) md-card-actions {
    background: #121212 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

body:not(:has(#loginContent)) .msg-header {
    background: #151515 !important;
    color: #d8ddd9 !important;
}


/* ================================================================
 * EMAIL CONTENT
 *
 * Do not dark-theme arbitrary HTML email bodies.
 * ================================================================ */

body:not(:has(#loginContent)) .mailer_mailcontent {
    background: #ffffff !important;
    color: #181818 !important;
}

body:not(:has(#loginContent)) .sg-mail-part {
    background: #ffffff !important;
    color: #181818 !important;
    padding: 14px !important;
}

body:not(:has(#loginContent)) .sg-mail-part a {
    color: #1565c0 !important;
}

/* Plain/raw source */
body:not(:has(#loginContent)) .sg-back pre {
    background: #101010 !important;
    color: #d5ddd8 !important;
}


/* ================================================================
 * BUTTONS / ICONS
 * ================================================================ */

body:not(:has(#loginContent)) .md-button {
    color: #c9d0cc;
}

body:not(:has(#loginContent)) .md-button md-icon,
body:not(:has(#loginContent)) md-icon {
    color: #aab2ad;
}

/*
 * Exclude .md-no-style because SOGo uses it as the transparent
 * message-row click target.
 */
body:not(:has(#loginContent))
.md-button:not(.md-no-style):hover {
    background: rgba(51, 255, 153, 0.07) !important;
}

body:not(:has(#loginContent)) .md-button:hover md-icon {
    color: #33ff99 !important;
}

/* Floating action buttons */
body:not(:has(#loginContent)) .md-button.md-fab {
    background: #33ff99 !important;
    color: #07110c !important;

    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.40),
        0 0 18px rgba(51, 255, 153, 0.12) !important;
}

body:not(:has(#loginContent)) .md-button.md-fab md-icon {
    color: #07110c !important;
}

body:not(:has(#loginContent)) .md-button.md-fab:hover {
    background: #5cffad !important;
}

/* Primary actions */
body:not(:has(#loginContent)) .md-primary,
body:not(:has(#loginContent)) .md-button.md-primary,
body:not(:has(#loginContent)) .md-fg.md-primary {
    color: #33ff99 !important;
}


/* ================================================================
 * INPUTS / SEARCH / FORMS
 * ================================================================ */

body:not(:has(#loginContent)) md-input-container label {
    color: #8f9993 !important;
}

body:not(:has(#loginContent)) md-input-container input,
body:not(:has(#loginContent)) md-input-container textarea {
    color: #e0e5e2 !important;
    caret-color: #33ff99 !important;
}

body:not(:has(#loginContent)) md-input-container .md-input {
    border-color: rgba(255, 255, 255, 0.22) !important;
}

body:not(:has(#loginContent))
md-input-container.md-input-focused .md-input {
    border-color: #33ff99 !important;
}

body:not(:has(#loginContent))
md-input-container.md-input-focused label {
    color: #33ff99 !important;
}

body:not(:has(#loginContent)) md-select .md-select-value {
    color: #d9dfdb !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}


/* ================================================================
 * MENUS / DIALOGS / TOOLTIPS
 * ================================================================ */

body:not(:has(#loginContent)) md-menu-content {
    background: #141414 !important;
    color: #d5dcd7 !important;
    border: 1px solid rgba(51, 255, 153, 0.13) !important;
}

body:not(:has(#loginContent)) md-menu-item .md-button {
    color: #d0d7d2 !important;
}

body:not(:has(#loginContent)) md-menu-item .md-button:hover {
    color: #33ff99 !important;
    background: rgba(51, 255, 153, 0.07) !important;
}

body:not(:has(#loginContent)) md-dialog {
    background: #151515 !important;
    color: #d8ddd9 !important;
    border: 1px solid rgba(51, 255, 153, 0.16) !important;
}

body:not(:has(#loginContent)) md-dialog md-dialog-content,
body:not(:has(#loginContent)) md-dialog md-dialog-actions {
    background: #151515 !important;
    color: #d8ddd9 !important;
}

body:not(:has(#loginContent)) md-tooltip .md-content {
    background: #080808 !important;
    color: #dce2de !important;
    border: 1px solid rgba(51, 255, 153, 0.20) !important;
}


/* ================================================================
 * TABS
 * ================================================================ */

body:not(:has(#loginContent)) md-tabs {
    background: #141414 !important;
}

body:not(:has(#loginContent)) md-tab-item {
    color: #9da7a1 !important;
    font-family: 'IBM Plex Mono', monospace !important;
}

body:not(:has(#loginContent)) md-tab-item.md-active {
    color: #33ff99 !important;
}

body:not(:has(#loginContent)) md-tabs md-ink-bar {
    background: #33ff99 !important;
}


/* ================================================================
 * CHECKBOXES / SWITCHES
 * ================================================================ */

body:not(:has(#loginContent)) md-checkbox.md-checked .md-icon {
    background: #33ff99 !important;
}

body:not(:has(#loginContent)) md-switch.md-checked .md-thumb {
    background: #33ff99 !important;
}

body:not(:has(#loginContent)) md-switch.md-checked .md-bar {
    background: rgba(51, 255, 153, 0.40) !important;
}


/* ================================================================
 * CHIPS
 * ================================================================ */

body:not(:has(#loginContent)) md-chip {
    background: #1d1d1d !important;
    color: #d7ddd9 !important;
    border: 1px solid rgba(51, 255, 153, 0.12);
}


/* ================================================================
 * CALENDAR
 *
 * Do not overwrite actual event/category colours.
 * ================================================================ */

body:not(:has(#loginContent)) .calendarView,
body:not(:has(#loginContent)) .calendar-view {
    background: #141414 !important;
}

body:not(:has(#loginContent)) .calendarView td,
body:not(:has(#loginContent)) .calendarView th {
    border-color: rgba(255, 255, 255, 0.07) !important;
}


/* ================================================================
 * COMPOSER
 *
 * Keep the actual message editor white.
 * ================================================================ */

body:not(:has(#loginContent))
[ui-view="maileditor"] .ck-editor__editable,
body:not(:has(#loginContent))
[ui-view="maileditor"] .cke_editable {
    background: #ffffff !important;
    color: #171717 !important;
}


/* ================================================================
 * SCROLLBARS - FIREFOX
 * ================================================================ */

body:not(:has(#loginContent)) * {
    scrollbar-color: #39443e #101010;
    scrollbar-width: thin;
}


/* ================================================================
 * LINKS
 * ================================================================ */

body:not(:has(#loginContent)) a {
    color: #33d98a;
}

body:not(:has(#loginContent)) a:hover {
    color: #5cffad;
}

/* ================================================================
 * Selected folder - neutral surface, Rite accent only
 * ================================================================ */

body:not(:has(#loginContent)) md-sidenav .sg-selected,
body:not(:has(#loginContent)) md-sidenav md-list-item.sg-selected,
body:not(:has(#loginContent)) md-sidenav md-list-item.md-selected,
body:not(:has(#loginContent)) md-sidenav md-list-item[aria-selected="true"],
body:not(:has(#loginContent)) md-sidenav md-list-item.md-background {
    background: #181818 !important;
    border-left: 3px solid #33ff99 !important;
}

/* Selected folder text */
body:not(:has(#loginContent)) md-sidenav .sg-selected span,
body:not(:has(#loginContent)) md-sidenav .sg-selected p,
body:not(:has(#loginContent)) md-sidenav md-list-item.md-selected span,
body:not(:has(#loginContent)) md-sidenav md-list-item.md-selected p,
body:not(:has(#loginContent)) md-sidenav md-list-item[aria-selected="true"] span,
body:not(:has(#loginContent)) md-sidenav md-list-item[aria-selected="true"] p {
    color: #e1e6e3 !important;
}

/* Keep selected folder icon as the Rite accent */
body:not(:has(#loginContent)) md-sidenav .sg-selected md-icon,
body:not(:has(#loginContent)) md-sidenav md-list-item.md-selected md-icon,
body:not(:has(#loginContent)) md-sidenav md-list-item[aria-selected="true"] md-icon {
    color: #33ff99 !important;
}

/* Keep unread count green */
body:not(:has(#loginContent)) md-sidenav .sg-selected .badge,
body:not(:has(#loginContent)) md-sidenav .sg-selected .sg-counter,
body:not(:has(#loginContent)) md-sidenav .sg-selected .sg-unread-count {
    color: #33ff99 !important;
}

/* ================================================================
 * Folder tree final colours
 *
 * IMPORTANT:
 * md-background is present on ALL SOGo mailbox rows.
 * sg-selected is the actual current-folder state.
 * ================================================================ */

/* Normal folders */
body:not(:has(#loginContent))
md-sidenav md-list-item.sg-mailbox-list-item:not(.sg-selected) {
    color: #c2cac5 !important;
    background: transparent !important;
}

body:not(:has(#loginContent))
md-sidenav md-list-item.sg-mailbox-list-item:not(.sg-selected) a,
body:not(:has(#loginContent))
md-sidenav md-list-item.sg-mailbox-list-item:not(.sg-selected) span,
body:not(:has(#loginContent))
md-sidenav md-list-item.sg-mailbox-list-item:not(.sg-selected) p,
body:not(:has(#loginContent))
md-sidenav md-list-item.sg-mailbox-list-item:not(.sg-selected) .md-button {
    color: #c2cac5 !important;
}

/* Normal folder icons */
body:not(:has(#loginContent))
md-sidenav md-list-item.sg-mailbox-list-item:not(.sg-selected) md-icon,
body:not(:has(#loginContent))
md-sidenav md-list-item.sg-mailbox-list-item:not(.sg-selected) .material-icons {
    color: #89948d !important;
}

/* Selected/current folder */
body:not(:has(#loginContent))
md-sidenav md-list-item.sg-mailbox-list-item.sg-selected {
    background: #181818 !important;
    color: #33ff99 !important;
    border-left: 3px solid #33ff99 !important;
}

body:not(:has(#loginContent))
md-sidenav md-list-item.sg-mailbox-list-item.sg-selected a,
body:not(:has(#loginContent))
md-sidenav md-list-item.sg-mailbox-list-item.sg-selected span,
body:not(:has(#loginContent))
md-sidenav md-list-item.sg-mailbox-list-item.sg-selected p,
body:not(:has(#loginContent))
md-sidenav md-list-item.sg-mailbox-list-item.sg-selected .md-button,
body:not(:has(#loginContent))
md-sidenav md-list-item.sg-mailbox-list-item.sg-selected md-icon,
body:not(:has(#loginContent))
md-sidenav md-list-item.sg-mailbox-list-item.sg-selected .material-icons {
    color: #33ff99 !important;
}

/* Hover only non-selected folders */
body:not(:has(#loginContent))
md-sidenav md-list-item.sg-mailbox-list-item:not(.sg-selected):hover {
    background: #181818 !important;
}

body:not(:has(#loginContent))
md-sidenav md-list-item.sg-mailbox-list-item:not(.sg-selected):hover a,
body:not(:has(#loginContent))
md-sidenav md-list-item.sg-mailbox-list-item:not(.sg-selected):hover span,
body:not(:has(#loginContent))
md-sidenav md-list-item.sg-mailbox-list-item:not(.sg-selected):hover p,
body:not(:has(#loginContent))
md-sidenav md-list-item.sg-mailbox-list-item:not(.sg-selected):hover md-icon {
    color: #33ff99 !important;
}

/* Unread counters remain accent green */
body:not(:has(#loginContent)) md-sidenav .badge,
body:not(:has(#loginContent)) md-sidenav .sg-counter,
body:not(:has(#loginContent)) md-sidenav .sg-unread-count {
    color: #33ff99 !important;
}


/* ================================================================
 * Folder tree corrections
 * md-background is present on every SOGo mailbox row and is NOT
 * an indication that the folder is selected.
 * ================================================================ */

/* No green left border on ordinary mailbox rows */
body:not(:has(#loginContent))
md-sidenav md-list-item.sg-mailbox-list-item {
    border-left: 3px solid transparent !important;
}

/* Green marker only on the genuinely selected folder */
body:not(:has(#loginContent))
md-sidenav md-list-item.sg-mailbox-list-item.sg-selected,
body:not(:has(#loginContent))
md-sidenav md-list-item.sg-mailbox-list-item.md-selected,
body:not(:has(#loginContent))
md-sidenav md-list-item.sg-mailbox-list-item[aria-selected="true"] {
    border-left-color: #33ff99 !important;
    background: #181818 !important;
}

/*
 * SOGo uses md-checkbox.sg-folder as an expand/collapse control.
 * It is not a real user checkbox, so don't paint its square green.
 */
body:not(:has(#loginContent))
md-sidenav md-checkbox.sg-folder .md-icon,
body:not(:has(#loginContent))
md-sidenav md-checkbox.sg-folder.md-checked .md-icon {
    background: transparent !important;
    border-color: transparent !important;
}

/* Normal expand/collapse arrow */
body:not(:has(#loginContent))
md-sidenav md-checkbox.sg-folder .md-container::after {
    color: #89948d !important;
}

/* Accent the arrow only for hover/current folder */
body:not(:has(#loginContent))
md-sidenav md-list-item.sg-mailbox-list-item:hover
md-checkbox.sg-folder .md-container::after,
body:not(:has(#loginContent))
md-sidenav md-list-item.sg-mailbox-list-item.sg-selected
md-checkbox.sg-folder .md-container::after {
    color: #33ff99 !important;
}

/* ================================================================
 * Header divider alignment
 * Use the same real border on both sides; avoid pseudo/subpixel line.
 * ================================================================ */

body:not(:has(#loginContent)) md-toolbar {
    box-sizing: border-box !important;
    border-bottom: 1px solid rgba(51, 255, 153, 0.22) !important;
}

/* Ensure no artificial second separator remains on the sidebar */
body:not(:has(#loginContent)) md-sidenav md-toolbar::after {
    content: none !important;
    display: none !important;
}

/* ================================================================
 * Desktop header geometry
 * Sidebar header = 128px
 * Main header 64px + mailbox header 64px = 128px
 * ================================================================ */

@media (min-width: 960px) {

    body:not(:has(#loginContent))
    section > md-toolbar.toolbar-main {
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
        flex: 0 0 64px !important;
        box-sizing: border-box !important;
    }

    body:not(:has(#loginContent))
    .view-list > md-toolbar.md-accent.md-hue-1 {
        height: 64px !important;
        min-height: 64px !important;
        max-height: 64px !important;
        flex: 0 0 64px !important;
        box-sizing: border-box !important;
    }

    body:not(:has(#loginContent))
    md-sidenav > md-toolbar.md-tall {
        height: 128px !important;
        min-height: 128px !important;
        max-height: 128px !important;
        flex: 0 0 128px !important;
        box-sizing: border-box !important;
    }
}