@font-face {
	font-family: 'BR Sans';
	src: url('../fonts/Inter.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
}

@font-face {
	font-family: 'BR Mono';
	src: url('../fonts/JetBrainsMono.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}

:root {
	--br-bg: #14181c;
	--br-bg-raised: #1b2126;
	--br-ink: #f6f5f1;
	--br-ink-muted: #9aa0a6;
	--br-accent: #12324f;
	--br-accent-hover: #163a5c;
	--br-gold: #c9a96a;
	--br-border: #323a41;
}

/* App is deliberately always-dark, same call as the login page — brand
   identity over system preference. dark-mode is forced on unconditionally
   in layout.html; this repaints Elastic's own dark palette (#21292c-based)
   to the exact brand tone instead of building a parallel theme. */
html.dark-mode body {
	background-color: var(--br-bg);
	color: var(--br-ink);
	font-family: 'BR Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html.dark-mode #layout-menu {
	background-color: var(--br-bg-raised) !important;
}

/* Text wordmark replacing Elastic's default logo.svg, same call as the
   login page. The sidebar slot is a fixed ~58x58px square (popover-header
   in the icon rail) — too narrow for "The BluRidge" at a legible size, so
   this is the compact monogram form of the same wordmark, not a different
   mark. */
.popover-header .brand-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	font-family: 'BR Sans', system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: 0.02em;
	color: var(--br-gold);
	opacity: 1;
}

html.dark-mode #layout-list,
html.dark-mode #layout-content,
html.dark-mode #layout-sidebar,
html.dark-mode #layout > div > .header,
html.dark-mode #layout > div > .footer {
	border-color: var(--br-border);
}

html.dark-mode .listing li.selected,
html.dark-mode .listing li.selected > a,
html.dark-mode .listing li.selected > div > a,
html.dark-mode .listing tr.selected td {
	background-color: var(--br-accent);
}

/* --- Accent recolor: Roundcube's default cyan (#37beff) -> brand gold for
   text/icon/focus accents, brand navy for solid filled surfaces (paired
   with white text, same treatment as the login button). Every selector
   below is copied from the compiled skin CSS's own #37beff rules — this
   isn't a guess at what might be affected, it's the full, exact set. --- */

.quota-widget .value,
.floating-action-buttons a.button,
.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled,
.ui-menu .ui-state-active,
.ui-datepicker a.ui-state-active,
.popover .menu li a:not(.disabled):hover,
.popover .menu .dropbutton a.dropdown:hover,
.popupmenu .listing li > a:not(.disabled):hover,
.popupmenu .listing li.selected,
.folderlist li.mailbox .unreadcount,
.folderlist li.mailbox.recent > a > .unreadcount,
#messagestack .alert-info.information,
div.tox .tox-dialog__footer .tox-button,
div.tox .tox-dialog__footer .tox-button.disabled,
div.tox .tox-dialog__footer .tox-button:disabled,
div.tox .tox-dialog__footer .tox-button:focus:not(:disabled),
.googie_list li.googie_list_onhover {
	background-color: var(--br-accent) !important;
	border-color: var(--br-accent) !important;
	color: #fff !important;
}

.ui-slider .ui-slider-handle.ui-state-active {
	background: var(--br-accent);
	border-color: var(--br-accent-hover);
}

#taskmenu .action-buttons a,
#taskmenu .action-buttons a:hover,
.ui.alert a:not(.btn),
html.dark-mode #taskmenu .action-buttons a,
html.dark-mode .listing li.selected,
html.dark-mode .listing li.selected > a,
html.dark-mode .listing li.selected > div > a,
html.dark-mode .listing tr.selected td,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject a,
html.dark-mode .messagelist tr:not(.flagged):not(.deleted).selected td.subject span.msgicon.status,
html.dark-mode .tox .tox-dialog__body-nav-item--active,
html.dark-mode .tox .tox-collection__item--enabled,
html.dark-mode .ui-datepicker .ui-state-highlight,
html.dark-mode .ui-datepicker.ui-widget-content .ui-state-highlight {
	color: var(--br-gold) !important;
}

.formcontent.raweditor .CodeMirror-focused,
.multi-input > .content.focused,
.recipient-input.focus,
.tagedit-list[tabindex="-1"],
.form-control:focus,
.input-group-text input:focus,
.custom-switch .custom-control-input:focus:not(:checked) ~ .custom-control-label::before,
.custom-switch .custom-control-input:checked ~ .custom-control-label::before,
.custom-file-input:focus ~ .custom-file-label,
div.tox.focused,
div.tox .tox-color-input > input:focus,
div.tox .tox-listboxfield .tox-listbox--select:focus,
div.tox .tox-textarea:focus,
div.tox .tox-textfield:focus,
html.dark-mode .custom-file-label:focus:not(.is-invalid),
html.dark-mode .form-control:focus:not(.is-invalid),
html.dark-mode .multi-input:not(.is-invalid) > .content.focused,
html.dark-mode .input-group a:focus,
html.dark-mode .recipient-input.focus,
html.dark-mode .formcontent.raweditor .CodeMirror-focused {
	border-color: var(--br-gold) !important;
	box-shadow: 0 0 0 0.2rem rgba(201, 169, 106, 0.25) !important;
}