@charset "UTF-8";

/* ==========================================================================
   Mono — minimalistisches Theme für grommunio Web
   --------------------------------------------------------------------------
   Dieses Stylesheet wird NACH den aus theme.json generierten Styles geladen
   (theme.json > stylesheets). Es enthält nur Feinschliff: Typografie,
   Radien, Haarlinien und Schatten. Die Farbwelt steuert theme.json.

   Hinweis: Bei Änderungen an dieser Datei den Zähler in theme.json erhöhen
   ("stylesheets": "css/mono.css?v=2"), damit Browser die Datei neu laden.
   ========================================================================== */


/* ---------- Mitgelieferte Schrift: Inter (SIL OFL 1.1) ---------------------
   Liegt unter ../fonts/ und macht das Schriftbild auf jedem System identisch
   (sonst fiele das Theme je nach OS auf Segoe UI, San Francisco oder Roboto
   zurück). font-display: swap verhindert unsichtbaren Text beim Laden.
   Lizenz: fonts/OFL.txt */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/inter-latin-400-normal.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/inter-latin-ext-400-normal.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(../fonts/inter-latin-500-normal.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(../fonts/inter-latin-ext-500-normal.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(../fonts/inter-latin-600-normal.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(../fonts/inter-latin-ext-600-normal.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/inter-latin-700-normal.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(../fonts/inter-latin-ext-700-normal.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ---------- Design-Variablen (Fallback & eigene Erweiterungen) ----------- */

/* Auf aktuellen Versionen setzt grommunio Web diese Variablen bereits aus
   theme.json. Die Zuordnung über body.theme-mono deckt ältere Builds ab,
   in denen JSON-Themes die Variablen noch nicht selbst definierten. */
body.theme-mono {
	--theme-primary-color: #1E4D78;
	--theme-primary-hover: #163A5B;
	--theme-primary-dark: #0F2A42;
	--theme-gradient-start: #1F4E7A;
	--theme-gradient-end: #13385A;

	/* Eigene Neutraltöne des Themes */
	--mono-hairline: #E3E9F0;
	--mono-panel: #F7F9FC;
	--mono-text: #1B2A3A;
	--mono-text-muted: #64748B;
	--mono-shadow-soft: 0 1px 2px rgba(15, 36, 56, .05), 0 8px 24px rgba(15, 36, 56, .08);
	--mono-radius: 6px;
}

body.theme-mono.dark-mode {
	--mono-hairline: #27364A;
	--mono-panel: #16222E;
	--mono-text: #E6EDF3;
	--mono-text-muted: #93A3B5;
	--mono-shadow-soft: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .45);
}


/* ---------- Typografie --------------------------------------------------- */

/* Inter ist oben per @font-face eingebunden und steht damit auf jedem
   System zur Verfügung; der Rest der Kette ist nur noch Absicherung.
   Icon-Schriften haben eigene font-family-Regeln und bleiben unberührt. */
body.theme-mono {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}


/* ---------- Login- und Willkommens-Screen -------------------------------- */

body.theme-mono.login #form-container,
body.theme-mono #loading-mask #form-container,
#loading-mask.theme-mono #form-container {
	border-radius: 14px;
	border: 1px solid var(--mono-hairline);
	box-shadow: 0 32px 80px rgba(15, 36, 56, .16), 0 4px 16px rgba(15, 36, 56, .08);
}

body.theme-mono.login #form-container input,
body.theme-mono #loading-mask #form-container input,
#loading-mask.theme-mono #form-container input {
	border: 1px solid #D5DEE8;
	border-radius: var(--mono-radius);
	transition: border-color .15s ease, box-shadow .15s ease;
}

body.theme-mono.login #form-container input:focus,
body.theme-mono #loading-mask #form-container input:focus,
#loading-mask.theme-mono #form-container input:focus {
	border-color: var(--theme-primary-color);
	box-shadow: 0 0 0 3px rgba(30, 77, 120, .14);
	outline: none;
}

body.theme-mono.login #form-container #submitbutton,
body.theme-mono #loading-mask #form-container #submitbutton,
#loading-mask.theme-mono #form-container #submitbutton {
	border-radius: var(--mono-radius);
	letter-spacing: .02em;
	transition: background-color .15s ease, box-shadow .15s ease;
}

body.theme-mono.login #form-container #submitbutton:hover,
body.theme-mono #loading-mask #form-container #submitbutton:hover,
#loading-mask.theme-mono #form-container #submitbutton:hover {
	box-shadow: 0 4px 14px rgba(15, 36, 56, .22);
}


/* ---------- Obere Menüleiste --------------------------------------------- */

/* Weiche Abgrenzung statt harter Kante unter der Top-Bar */
body.theme-mono #grommunio-mainmenu.grommunio-maintabbar > .x-toolbar-ct {
	box-shadow: 0 1px 0 rgba(15, 36, 56, .06);
}


/* ---------- Schaltflächen ------------------------------------------------ */

body.theme-mono .x-btn .x-btn-small,
body.theme-mono .x-btn .x-btn-medium,
body.theme-mono .x-btn .x-btn-large {
	border-radius: 5px;
	transition: background-color .12s ease, border-color .12s ease;
}


/* ---------- Eingabefelder ------------------------------------------------- */

body.theme-mono .x-form-text,
body.theme-mono input.x-form-field,
body.theme-mono textarea.x-form-field,
body.theme-mono .x-form-field-wrap .x-form-text {
	border-color: #D5DEE8;
	border-radius: 4px;
}

body.theme-mono.dark-mode .x-form-text,
body.theme-mono.dark-mode input.x-form-field,
body.theme-mono.dark-mode textarea.x-form-field {
	border-color: var(--mono-hairline);
}


/* ---------- Listen und Tabellen (Grid) ------------------------------------ */

/* Ruhige Kopfzeile der Mailliste */
body.theme-mono .x-grid3 .x-grid3-header {
	background: var(--mono-panel);
	border-bottom-color: var(--mono-hairline);
}

/* Dezente Zeilentrennung */
body.theme-mono .x-grid3 .x-grid3-row {
	border-bottom-color: var(--mono-hairline);
}

/* Hover ganz leicht einfärben */
body.theme-mono .x-grid3 .x-grid3-row-over {
	background-color: rgba(30, 77, 120, .045);
}

body.theme-mono.dark-mode .x-grid3 .x-grid3-row-over {
	background-color: rgba(140, 170, 200, .08);
}


/* ---------- Ordnerbaum ---------------------------------------------------- */

body.theme-mono .x-tree-node .grommunio-hierarchy-node {
	border-radius: 4px;
}


/* ---------- Menüs und Dialoge --------------------------------------------- */

body.theme-mono .x-menu,
body.theme-mono .x-menu .x-menu-list {
	border-radius: var(--mono-radius);
	border-color: var(--mono-hairline);
	box-shadow: var(--mono-shadow-soft);
}

body.theme-mono .x-window,
body.theme-mono .x-window .x-window-bwrap {
	border-color: var(--mono-hairline);
	box-shadow: var(--mono-shadow-soft);
}


/* ---------- Scrollbars (Webkit/Blink) ------------------------------------- */

body.theme-mono ::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

body.theme-mono ::-webkit-scrollbar-thumb {
	background: rgba(100, 116, 139, .35);
	border-radius: 5px;
	border: 2px solid transparent;
	background-clip: content-box;
}

body.theme-mono ::-webkit-scrollbar-thumb:hover {
	background: rgba(100, 116, 139, .55);
	border: 2px solid transparent;
	background-clip: content-box;
}

body.theme-mono ::-webkit-scrollbar-track {
	background: transparent;
}


/* Web 5.2: the night-mode login uses brand variables with !important.
   Supply the original artwork there too; keep it outside the opaque card.
   Otherwise the stock pattern returns and a light logo sits on a light image. */
body.theme-mono,
#loading-mask.theme-mono {
    --brand-bg-overlay: none;
    --brand-bg-position: center;
    --brand-bg-size: cover;
}

body.theme-mono.login #form-container #bg,
body.theme-mono #loading-mask #form-container #bg,
#loading-mask.theme-mono #form-container #bg {
    background: none;
}

/* The supplied backdrop is pale in both modes, unlike the stock gradient. */
body.theme-mono.login .disclaimer,
body.theme-mono.login .disclaimer a {
    color: #334155;
}

body.theme-mono.login .disclaimer a:focus-visible {
    outline: 2px solid #1E4D78;
    outline-offset: 3px;
}


/* The stock day/week grid already has a dark-mode color filter.
   Leave those cells untouched: an extra overlay would itself be inverted. */

body.theme-mono.dark-mode .grommunio-calendar-container-header .k-html-header-background {
    /* Mute the calendar's own header color, retaining its identity.
       Appointment layers are siblings, so their colors/status stay intact. */
    box-shadow: inset 0 0 0 100vmax rgba(15, 27, 39, .65);
}
body.theme-mono.dark-mode .x-tree-node .grommunio-hierarchy-node.x-tree-selected {
    background-color: var(--dm-selected) !important;
    color: var(--mono-text) !important;
}
body.theme-mono.dark-mode .x-tree-node .grommunio-hierarchy-node.x-tree-selected a span {
    color: var(--mono-text) !important;
}
body.theme-mono.dark-mode .grommunio-calendar-boxview .k-html-body-background > .k-today {
    border-color: #8EC1EE !important;
}

@media (prefers-color-scheme: dark) {
    body.theme-mono.dark-mode-system {
        --mono-hairline: #27364A;
        --mono-panel: #16222E;
        --mono-text: #E6EDF3;
        --mono-text-muted: #93A3B5;
    }

body.theme-mono.dark-mode-system .grommunio-calendar-container-header .k-html-header-background {
    /* Mute the calendar's own header color, retaining its identity.
       Appointment layers are siblings, so their colors/status stay intact. */
    box-shadow: inset 0 0 0 100vmax rgba(15, 27, 39, .65);
}
body.theme-mono.dark-mode-system .x-tree-node .grommunio-hierarchy-node.x-tree-selected {
    background-color: var(--dm-selected) !important;
    color: var(--mono-text) !important;
}
body.theme-mono.dark-mode-system .x-tree-node .grommunio-hierarchy-node.x-tree-selected a span {
    color: var(--mono-text) !important;
}
body.theme-mono.dark-mode-system .grommunio-calendar-boxview .k-html-body-background > .k-today {
    border-color: #8EC1EE !important;
}
}


/* Clear document-tab states: Inbox, compose and other open workspaces.
   Keep the upstream icon/text treatment and add independent shape + fill. */
body.theme-mono {
    --mono-tab-rest: #EDF1F6;
    --mono-tab-hover: #E3EAF3;
    --mono-tab-active: #DCE7F2;
    --mono-tab-marker: #1E4D78;
}
body.theme-mono.dark-mode {
    --mono-tab-rest: #16222E;
    --mono-tab-hover: #1B3044;
    --mono-tab-active: #223C54;
    --mono-tab-marker: #8EC1EE;
}
@media (prefers-color-scheme: dark) {
    body.theme-mono.dark-mode-system {
        --mono-tab-rest: #16222E;
        --mono-tab-hover: #1B3044;
        --mono-tab-active: #223C54;
        --mono-tab-marker: #8EC1EE;
    }
}
body.theme-mono #grommunio-mainpanel > .x-tab-panel-header ul.x-tab-strip li .x-tab-right {
    background-color: var(--mono-tab-rest) !important;
    box-shadow: inset 0 -3px transparent;
    border-radius: 6px 6px 0 0;
}
body.theme-mono #grommunio-mainpanel > .x-tab-panel-header ul.x-tab-strip li:hover .x-tab-right {
    background-color: var(--mono-tab-hover) !important;
}
body.theme-mono #grommunio-mainpanel > .x-tab-panel-header ul.x-tab-strip li.x-tab-strip-active .x-tab-right {
    background-color: var(--mono-tab-active) !important;
    box-shadow: inset 0 -3px var(--mono-tab-marker);
}
body.theme-mono #grommunio-mainpanel > .x-tab-panel-header ul.x-tab-strip li.x-tab-strip-active .x-tab-strip-text {
    font-weight: 700;
}
body.theme-mono #grommunio-mainpanel > .x-tab-panel-header ul.x-tab-strip li .x-tab-right:focus-visible {
    outline: 2px solid var(--mono-tab-marker) !important;
    outline-offset: -2px !important;
}


/* ---------- Local Inter font integration for Web 5.2.13 ------------------ */

/* The login card has an explicit --login-font derived from --brand-font.
   Keep this independent of the user's active theme during the loader. */
body.theme-mono,
#loading-mask.theme-mono {
	--mono-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	--brand-font: var(--mono-font);
}

/* Match the specificity of upstream html * instead of using !important.
   Explicit icon, PGP, code and other specialized font rules keep precedence.
   This does not enter the mail preview or rich-text editor iframe documents. */
body:where(.theme-mono) * {
	font-family: var(--mono-font);
}

/* These widgets explicitly set the upstream system/Roboto stack. Reuse the
   actual upstream selectors with a zero-specificity Mono scope, changing
   only the family and retaining all font sizes, weights and line heights. */
:where(body.theme-mono) .ext-el-mask-msg div,
:where(body.theme-mono).ext-webkit .x-small-editor .x-form-field,
:where(body.theme-mono) .loading-indicator,
:where(body.theme-mono) .x-date-inner a,
:where(body.theme-mono) .x-dd-drag-ghost,
:where(body.theme-mono) .x-fieldset legend,
:where(body.theme-mono) .x-form-field,
:where(body.theme-mono) .x-form-item,
:where(body.theme-mono) .x-grid-empty,
:where(body.theme-mono) .x-menu-list-item,
:where(body.theme-mono) .x-panel-header,
:where(body.theme-mono) .x-panel-mc,
:where(body.theme-mono) .x-panel-tl .x-panel-header,
:where(body.theme-mono) .x-small-editor .x-form-field,
:where(body.theme-mono) .x-tab-strip span.x-tab-strip-text,
:where(body.theme-mono) .x-tip :is(.x-tip-body,.x-tip-mc),
:where(body.theme-mono) .x-toolbar :is(div,input,label,select,span,td),
:where(body.theme-mono) .x-tree-node,
:where(body.theme-mono) .x-window-dlg,
:where(body.theme-mono) .x-window-dlg .ext-mb-text,
:where(body.theme-mono) .x-window-mc,
:where(body.theme-mono) .x-window-tl .x-window-header,
:where(body.theme-mono) :is(.x-btn,.x-date-mp-btns) button,
:where(body.theme-mono) :is(.x-date-mp,.x-grid3-hd-row,.x-grid3-row,.x-grid3-summary-row) td {
	font-family: var(--mono-font);
}


/* A relative URL in a custom property resolves against the CONSUMING
   stylesheet. darkmode.css lives elsewhere: apply the image directly here. */
:root body.theme-mono.login,
body.theme-mono.grommunio-welcome,
body.theme-mono #loading-mask,
#loading-mask.theme-mono {
    background-image: url(../img/login-background.svg) !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* These login badges use --login-primary for text and their masked icon.
   Keep the original ink-blue submit button and use a lighter badge accent. */
body.theme-mono.dark-mode,
body.dark-mode #loading-mask.theme-mono {
    --login-primary: #8EC1EE;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body.theme-mono.login {
        --login-primary: #8EC1EE;
        --mono-hairline: #27364A;
    }
    :root:not([data-theme="light"]) body.theme-mono.login #form-container input {
        border-color: #40556C;
    }
}


/* Calendar-folder tabs retain their color, with readable dark-mode labels. */

body.theme-mono.dark-mode #grommunio-mainpanel-contentpanel-calendar .grommunio-calendar-tab-contents {
    box-shadow: inset 0 0 0 100vmax rgba(15, 27, 39, .65);
}
body.theme-mono.dark-mode #grommunio-mainpanel-contentpanel-calendar .grommunio-calendar-tab-contents.grommunio-calendar-tab-selected {
    /* Upstream only restores opacity when a close icon is present; the
       single selected calendar has none, but must still be fully active. */
    opacity: 1;
}
body.theme-mono.dark-mode #grommunio-mainpanel-contentpanel-calendar .grommunio-calendar-tab-contents .grommunio-calendar-tab-title {
    color: #FFFFFF;
}
body.theme-mono.dark-mode #grommunio-mainpanel-contentpanel-calendar .grommunio-calendar-tab-contents.light-background .grommunio-calendar-tab-icon {
    filter: invert(1);
}

@media (prefers-color-scheme: dark) {

body.theme-mono.dark-mode-system #grommunio-mainpanel-contentpanel-calendar .grommunio-calendar-tab-contents {
    box-shadow: inset 0 0 0 100vmax rgba(15, 27, 39, .65);
}
body.theme-mono.dark-mode-system #grommunio-mainpanel-contentpanel-calendar .grommunio-calendar-tab-contents.grommunio-calendar-tab-selected {
    /* Upstream only restores opacity when a close icon is present; the
       single selected calendar has none, but must still be fully active. */
    opacity: 1;
}
body.theme-mono.dark-mode-system #grommunio-mainpanel-contentpanel-calendar .grommunio-calendar-tab-contents .grommunio-calendar-tab-title {
    color: #FFFFFF;
}
body.theme-mono.dark-mode-system #grommunio-mainpanel-contentpanel-calendar .grommunio-calendar-tab-contents.light-background .grommunio-calendar-tab-icon {
    filter: invert(1);
}
}


/* Resolve the supplied spinner in this stylesheet, not in the consuming
   application's CSS directory. These are Web 5.2's five spinner consumers. */
body.theme-mono .k-search-token-input.grommunio-tbar-loading,
body.theme-mono .grommunio-searchfield.grommunio-tbar-loading,
body.theme-mono .x-mask-loading div,
body.theme-mono .loading-indicator {
    background-image: url(../img/spinner.svg);
}
body.theme-mono .x-tree-node-loading .x-tree-node-icon {
    background-image: url(../img/spinner.svg) !important;
}


/* Theme JSON generates literal light selection colors; dark foregrounds
   require a matching surface in grids, settings, recipient chips and pickers. */
body.theme-mono.dark-mode .x-grid3-row.x-grid3-row-selected,
body.theme-mono.dark-mode .x-grid3 .x-grid3-row-selected .grommunio-grid-button-container,
body.theme-mono.dark-mode .x-grommunio-boxfield ul .x-grommunio-boxfield-item-focus,
body.theme-mono.dark-mode .x-grommunio-boxfield ul .x-grommunio-boxfield-recipient-item.x-grommunio-boxfield-item-focus,
body.theme-mono.dark-mode .grommunio-note-iconview-selected,
body.theme-mono.dark-mode #grommunio-mainpanel-contentpanel-settings .grommunio-settings-category-panel .grommunio-settings-category-tab-active,
body.theme-mono.dark-mode .x-date-picker .x-date-inner td.x-date-selected:not(.x-date-today) a,
body.theme-mono.dark-mode .x-date-picker .x-date-inner td.x-date-selected:not(.x-date-today) a:hover,
body.theme-mono.dark-mode #contact-cardview .grommunio-contact-cardview-card-selected :is(.x-panel-body, .x-panel-header) {
    background-color: #223C54 !important;
    border-color: #52799B;
}
body.theme-mono.dark-mode #grommunio-mainpanel-contentpanel-settings .grommunio-settings-category-tab-active {
    box-shadow: inset 3px 0 #8EC1EE;
    font-weight: 600;
}
/* The renderer calls this class cardview-CARD-selected, not cardview-selected. */
body.theme-mono.dark-mode #contact-cardview .grommunio-contact-cardview-card-selected .x-panel {
    outline: 2px solid #8EC1EE;
    outline-offset: -2px;
}
body.theme-mono.dark-mode.k-unreadborders .x-grid3-row.mail_read.x-grid3-row-selected > table {
    border-left-color: #223C54 !important;
}
body.theme-mono.dark-mode .preview-header-extrainfobox,
body.theme-mono.dark-mode .preview-header-extrainfobox-item,
body.theme-mono.dark-mode .k-appointmentcreatetab .grommunio-calendar-appointment-extrainfo div,
body.theme-mono.dark-mode .k-taskgeneraltab .grommunio-calendar-appointment-extrainfo div,
body.theme-mono.dark-mode .grommunio-mailcreatepanel > .x-panel-bwrap > .x-panel-body .grommunio-mailcreatepanel-extrainfo div {
    background-color: #223C54 !important;
    color: var(--dm-fg, #D4D4D4) !important;
}

@media (prefers-color-scheme: dark) {
/* Theme JSON generates literal light selection colors; dark foregrounds
   require a matching surface in grids, settings, recipient chips and pickers. */
body.theme-mono.dark-mode-system .x-grid3-row.x-grid3-row-selected,
body.theme-mono.dark-mode-system .x-grid3 .x-grid3-row-selected .grommunio-grid-button-container,
body.theme-mono.dark-mode-system .x-grommunio-boxfield ul .x-grommunio-boxfield-item-focus,
body.theme-mono.dark-mode-system .x-grommunio-boxfield ul .x-grommunio-boxfield-recipient-item.x-grommunio-boxfield-item-focus,
body.theme-mono.dark-mode-system .grommunio-note-iconview-selected,
body.theme-mono.dark-mode-system #grommunio-mainpanel-contentpanel-settings .grommunio-settings-category-panel .grommunio-settings-category-tab-active,
body.theme-mono.dark-mode-system .x-date-picker .x-date-inner td.x-date-selected:not(.x-date-today) a,
body.theme-mono.dark-mode-system .x-date-picker .x-date-inner td.x-date-selected:not(.x-date-today) a:hover,
body.theme-mono.dark-mode-system #contact-cardview .grommunio-contact-cardview-card-selected :is(.x-panel-body, .x-panel-header) {
    background-color: #223C54 !important;
    border-color: #52799B;
}
body.theme-mono.dark-mode-system #grommunio-mainpanel-contentpanel-settings .grommunio-settings-category-tab-active {
    box-shadow: inset 3px 0 #8EC1EE;
    font-weight: 600;
}
/* The renderer calls this class cardview-CARD-selected, not cardview-selected. */
body.theme-mono.dark-mode-system #contact-cardview .grommunio-contact-cardview-card-selected .x-panel {
    outline: 2px solid #8EC1EE;
    outline-offset: -2px;
}
body.theme-mono.dark-mode-system.k-unreadborders .x-grid3-row.mail_read.x-grid3-row-selected > table {
    border-left-color: #223C54 !important;
}
body.theme-mono.dark-mode-system .preview-header-extrainfobox,
body.theme-mono.dark-mode-system .preview-header-extrainfobox-item,
body.theme-mono.dark-mode-system .k-appointmentcreatetab .grommunio-calendar-appointment-extrainfo div,
body.theme-mono.dark-mode-system .k-taskgeneraltab .grommunio-calendar-appointment-extrainfo div,
body.theme-mono.dark-mode-system .grommunio-mailcreatepanel > .x-panel-bwrap > .x-panel-body .grommunio-mailcreatepanel-extrainfo div {
    background-color: #223C54 !important;
    color: var(--dm-fg, #D4D4D4) !important;
}
}


body.theme-mono.dark-mode #grommunio-mainpanel button.x-btn-text:is(.icon_security_sign, .icon_security_sign_selected, .icon_security_encrypt, .icon_security_encrypt_selected) {
    color: var(--dm-fg, #D4D4D4) !important;
    filter: none !important;
}

@media (prefers-color-scheme: dark) {
body.theme-mono.dark-mode-system #grommunio-mainpanel button.x-btn-text:is(.icon_security_sign, .icon_security_sign_selected, .icon_security_encrypt, .icon_security_encrypt_selected) {
    color: var(--dm-fg, #D4D4D4) !important;
    filter: none !important;
}
}

/* Inter is wider than the old fixed 131px duration label allocation. */
body.theme-mono .k-recurrence-dialog .k-recurrence-duration-label {
    width: auto;
    white-space: nowrap;
}


/* Keep the geometric artwork visible, with a matching dark navy backdrop.
   The layered URLs stay in this stylesheet to preserve relative resolution. */
:root body.theme-mono.login.dark-mode {
    background-image: linear-gradient(rgba(9, 18, 29, .87), rgba(9, 18, 29, .87)), url(../img/login-background.svg) !important;
}
body.theme-mono.login.dark-mode {
    --login-card: #16222E;
    --login-text: #E6EDF3;
    --login-muted: #A1B1C3;
    --login-input: #202F3D;
    --login-input-hover: #2A3D4F;
    --mono-hairline: #40556C;
}
body.theme-mono.login.dark-mode .disclaimer,
body.theme-mono.login.dark-mode .disclaimer a {
    color: #B4C6D8;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body.theme-mono.login {
        background-image: linear-gradient(rgba(9, 18, 29, .87), rgba(9, 18, 29, .87)), url(../img/login-background.svg) !important;
        --login-card: #16222E;
        --login-text: #E6EDF3;
        --login-muted: #A1B1C3;
        --login-input: #202F3D;
        --login-input-hover: #2A3D4F;
        --mono-hairline: #40556C;
    }
    :root:not([data-theme="light"]) body.theme-mono.login .disclaimer,
    :root:not([data-theme="light"]) body.theme-mono.login .disclaimer a {
        color: #B4C6D8;
    }
}


body.theme-mono.dark-mode .x-grid3-row-selected .grid_compact_subject_cell.mail_subject,
body.theme-mono.dark-mode #contact-cardview .grommunio-contact-cardview-card-selected .contact-card-label {
    color: #B4C6D8 !important;
}

@media (prefers-color-scheme: dark) {
body.theme-mono.dark-mode-system .x-grid3-row-selected .grid_compact_subject_cell.mail_subject,
body.theme-mono.dark-mode-system #contact-cardview .grommunio-contact-cardview-card-selected .contact-card-label {
    color: #B4C6D8 !important;
}
}


body.theme-mono .x-window.k-recipient-card-view {
    outline: 1px solid #94A3B8;
    outline-offset: 0;
    box-shadow: 0 16px 40px rgba(15, 36, 56, .25);
}
body.theme-mono .x-window.k-recipient-card-view .x-window-bwrap {
    box-shadow: none;
}
body.theme-mono.dark-mode .x-window.k-recipient-card-view {
    outline-color: #819CB6;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .65);
}
body.theme-mono.dark-mode .x-window.k-recipient-card-view :is(.x-window-bwrap, .x-window-body, .x-panel-body, .x-window-footer) {
    background-color: #263442 !important;
    color: #E6EDF3;
}

@media (prefers-color-scheme: dark) {
body.theme-mono.dark-mode-system .x-window.k-recipient-card-view {
    outline-color: #819CB6;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .65);
}
body.theme-mono.dark-mode-system .x-window.k-recipient-card-view :is(.x-window-bwrap, .x-window-body, .x-panel-body, .x-window-footer) {
    background-color: #263442 !important;
    color: #E6EDF3;
}
}


/* Login is a scrollable document, unlike the authenticated Ext viewport.
   A fixed 100% body plus the old relative-offset script left unpainted scroll
   space and moved the card above short viewports. Let its real contents size
   the body; auto margins center the card only when spare height is available. */
html:has(> body.theme-mono.login) {
    height: auto;
    min-height: 100%;
    background-color: #EDF2F8;
    background-image: url(../img/login-background.svg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overscroll-behavior-y: none;
}
body.theme-mono.login {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 0;
    overscroll-behavior-y: none;
}
body.theme-mono.login > #form-container {
    top: 0 !important;
    left: 0 !important;
    flex: none;
    margin: auto 0;
}
body.theme-mono.login > .disclaimer {
    position: static;
    flex: none;
    box-sizing: border-box;
}
html:has(> body.theme-mono.login.dark-mode) {
    background-color: #09121D;
    background-image: linear-gradient(rgba(9, 18, 29, .87), rgba(9, 18, 29, .87)), url(../img/login-background.svg);
}
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]):has(> body.theme-mono.login) {
        background-color: #09121D;
        background-image: linear-gradient(rgba(9, 18, 29, .87), rgba(9, 18, 29, .87)), url(../img/login-background.svg);
    }
}