/*
 rqwatch on Bootstrap 5.3 (bisnet). Bootstrap does layout, forms and
 components; this file holds the brand, the action colour code and the few
 rqwatch-specific pieces. Works with data-bs-theme="light" and "dark".
*/

:root,
[data-bs-theme="light"] {
	--rq-brand: #23756b;
	--rq-brand-rgb: 35, 117, 107;
	--rq-brand-hover: #1c5f57;
	--rq-brand-soft: #e3f1ef;
	--rq-nav-bg: #12302c;
	--rq-page-bg: #f4f6f8;
	--rq-card-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);

	/* action colour code: stripe/badge background, badge text */
	--rq-clean: #adb5bd;         --rq-clean-fg: #212529;
	--rq-add_header: #d9534f;    --rq-add_header-fg: #fff;
	--rq-subject: #f1a7a7;       --rq-subject-fg: #5c1b1b;
	--rq-greylist: #8f969c;      --rq-greylist-fg: #fff;
	--rq-reject: #1f2328;        --rq-reject-fg: #fff;
	--rq-discard: #2f5bd8;       --rq-discard-fg: #fff;
	--rq-whitelist: #2fa35a;     --rq-whitelist-fg: #fff;
	--rq-blacklist: #7a3b14;     --rq-blacklist-fg: #fff;
	--rq-rqwatch_map: #e8c419;   --rq-rqwatch_map-fg: #3d3300;
	--rq-rqwatch_fuzzy: #f0892c; --rq-rqwatch_fuzzy-fg: #fff;
	--rq-rqwatch_fuzzy_white: #6cc17f; --rq-rqwatch_fuzzy_white-fg: #10361b;
	--rq-virus: #7b68ee;         --rq-virus-fg: #fff;
	--rq-stored: #f59f00;        --rq-stored-fg: #3a2600;
	--rq-released: #0d9fb8;      --rq-released-fg: #fff;
}

[data-bs-theme="dark"] {
	--rq-brand: #4fb3a6;
	--rq-brand-rgb: 79, 179, 166;
	--rq-brand-hover: #6cc4b8;
	--rq-brand-soft: #16332f;
	--rq-nav-bg: #0b1d1a;
	--rq-page-bg: #13171b;
	--rq-card-shadow: none;
	--rq-clean: #5c636a;         --rq-clean-fg: #e9ecef;
	--rq-reject: #e9ecef;        --rq-reject-fg: #111;
}

body {
	background: var(--rq-page-bg);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

main { flex: 1 0 auto; }

a { color: var(--rq-brand); }
a:hover { color: var(--rq-brand-hover); }

/* ---- brand on Bootstrap components ------------------------------------ */

.btn-primary {
	--bs-btn-bg: var(--rq-brand);
	--bs-btn-border-color: var(--rq-brand);
	--bs-btn-hover-bg: var(--rq-brand-hover);
	--bs-btn-hover-border-color: var(--rq-brand-hover);
	--bs-btn-active-bg: var(--rq-brand-hover);
	--bs-btn-active-border-color: var(--rq-brand-hover);
	--bs-btn-disabled-bg: var(--rq-brand);
	--bs-btn-disabled-border-color: var(--rq-brand);
}
.btn-outline-primary {
	--bs-btn-color: var(--rq-brand);
	--bs-btn-border-color: var(--rq-brand);
	--bs-btn-hover-bg: var(--rq-brand);
	--bs-btn-hover-border-color: var(--rq-brand);
	--bs-btn-active-bg: var(--rq-brand);
	--bs-btn-active-border-color: var(--rq-brand);
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
	border-color: rgba(var(--rq-brand-rgb), .6);
	box-shadow: 0 0 0 .2rem rgba(var(--rq-brand-rgb), .2);
}
.form-check-input:checked {
	background-color: var(--rq-brand);
	border-color: var(--rq-brand);
}
.pagination {
	--bs-pagination-color: var(--rq-brand);
	--bs-pagination-hover-color: var(--rq-brand-hover);
	--bs-pagination-active-bg: var(--rq-brand);
	--bs-pagination-active-border-color: var(--rq-brand);
	--bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(var(--rq-brand-rgb), .2);
	margin-bottom: 0;
}
.nav-pills {
	--bs-nav-pills-link-active-bg: var(--rq-brand);
	--bs-nav-link-color: var(--rq-brand);
	--bs-nav-link-hover-color: var(--rq-brand-hover);
}

.card {
	border: 0;
	box-shadow: var(--rq-card-shadow);
}
[data-bs-theme="dark"] .card { border: 1px solid var(--bs-border-color); }
.card-header {
	background: transparent;
	font-weight: 600;
}

/* ---- top navigation --------------------------------------------------- */

.rq-navbar {
	background: var(--rq-nav-bg);
	--bs-navbar-color: rgba(255, 255, 255, .72);
	--bs-navbar-hover-color: #fff;
	--bs-navbar-active-color: #fff;
	--bs-navbar-brand-color: #fff;
	--bs-navbar-brand-hover-color: #fff;
	--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	--bs-navbar-toggler-border-color: rgba(255, 255, 255, .2);
}
.rq-navbar .navbar-brand img {
	height: 30px;
	width: auto;
	filter: brightness(0) invert(1);
}
.rq-navbar .navbar-brand span { font-weight: 600; letter-spacing: .01em; }
.rq-navbar .nav-link {
	border-radius: .375rem;
	padding: .4rem .7rem !important;
	font-weight: 500;
}
.rq-navbar .nav-link.active { background: rgba(255, 255, 255, .12); }
.rq-navbar .form-control {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .15);
	color: #fff;
	min-width: 12rem;
}
.rq-navbar .form-control::placeholder { color: rgba(255, 255, 255, .5); }
.rq-navbar .form-control:focus { background: rgba(255, 255, 255, .14); }
.rq-navbar .btn-nav {
	color: rgba(255, 255, 255, .8);
	border-color: rgba(255, 255, 255, .2);
}
.rq-navbar .btn-nav:hover { color: #fff; background: rgba(255, 255, 255, .1); }

/* ---- page header ------------------------------------------------------ */

.rq-page-title {
	font-size: 1.35rem;
	font-weight: 600;
	margin: 0;
}
.rq-meta { color: var(--bs-secondary-color); font-size: .875rem; }

/* ---- action colour code ----------------------------------------------- */

.rq-badge,
span.clean, span.add_header, span.subject, span.greylist, span.reject,
span.discard, span.whitelist, span.blacklist, span.rqwatch_map,
span.rqwatch_fuzzy, span.rqwatch_fuzzy_white, span.virus, span.released,
a.whitelist, a.blacklist {
	display: inline-block;
	padding: .2em .55em;
	font-size: .78em;
	font-weight: 600;
	line-height: 1.2;
	border-radius: 999px;
	white-space: nowrap;
	vertical-align: baseline;
	text-decoration: none;
}

/* one badge class per action: .rq-badge.clean etc. and the legacy spans */
.clean:not(tr)          { background: var(--rq-clean);  color: var(--rq-clean-fg); }
.add_header:not(tr)     { background: var(--rq-add_header); color: var(--rq-add_header-fg); }
.subject:not(tr)        { background: var(--rq-subject); color: var(--rq-subject-fg); }
.greylist:not(tr)       { background: var(--rq-greylist); color: var(--rq-greylist-fg); }
.reject:not(tr)         { background: var(--rq-reject); color: var(--rq-reject-fg); }
.discard:not(tr)        { background: var(--rq-discard); color: var(--rq-discard-fg); }
.whitelist:not(tr)      { background: var(--rq-whitelist); color: var(--rq-whitelist-fg); }
.blacklist:not(tr)      { background: var(--rq-blacklist); color: var(--rq-blacklist-fg); }
.rqwatch_map:not(tr)    { background: var(--rq-rqwatch_map); color: var(--rq-rqwatch_map-fg); }
.rqwatch_fuzzy:not(tr)  { background: var(--rq-rqwatch_fuzzy); color: var(--rq-rqwatch_fuzzy-fg); }
.rqwatch_fuzzy_white:not(tr) { background: var(--rq-rqwatch_fuzzy_white); color: var(--rq-rqwatch_fuzzy_white-fg); }
.virus:not(tr)          { background: var(--rq-virus); color: var(--rq-virus-fg); }
.released:not(tr)       { background: var(--rq-released); color: var(--rq-released-fg); }
a.whitelist:hover, a.blacklist:hover { filter: brightness(1.08); }

/* rows: a coloured stripe on the left instead of a filled row */
tr.clean, tr.add_header, tr.subject, tr.greylist, tr.reject, tr.discard,
tr.whitelist, tr.blacklist, tr.rqwatch_map, tr.virus, tr.released { --rq-stripe: var(--rq-clean); }
tr.add_header  { --rq-stripe: var(--rq-add_header); }
tr.subject     { --rq-stripe: var(--rq-subject); }
tr.greylist    { --rq-stripe: var(--rq-greylist); }
tr.reject      { --rq-stripe: var(--rq-reject); }
tr.discard     { --rq-stripe: var(--rq-discard); }
tr.whitelist   { --rq-stripe: var(--rq-whitelist); }
tr.blacklist   { --rq-stripe: var(--rq-blacklist); }
tr.rqwatch_map { --rq-stripe: var(--rq-rqwatch_map); }
tr.virus       { --rq-stripe: var(--rq-virus); }
tr.released    { --rq-stripe: var(--rq-released); }
tr[class] > td:first-child { box-shadow: inset 4px 0 0 var(--rq-stripe, transparent); }

/* legend */
.rq-legend { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .8rem; color: var(--bs-secondary-color); }
.rq-legend .dot {
	display: inline-block; width: .7rem; height: .7rem; border-radius: 3px;
	margin-right: .3rem; vertical-align: -1px;
}

/* ---- mail tables ------------------------------------------------------ */

.rq-table { margin-bottom: 0; font-size: .875rem; }
.rq-table > thead th {
	position: sticky; top: 0; z-index: 1;
	background: var(--bs-tertiary-bg);
	color: var(--bs-secondary-color);
	font-size: .72rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: .04em;
	white-space: nowrap;
	border-bottom-width: 1px;
}
.rq-table td { vertical-align: middle; }
.rq-table .rq-time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rq-table .rq-score { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rq-table .rq-addr { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rq-table .rq-subject { min-width: 14rem; }
.rq-table tbody tr { cursor: pointer; }
.rq-table tbody tr a { position: relative; z-index: 1; }
.rq-table .badge { font-weight: 600; }
.table-responsive { border-radius: var(--bs-border-radius); }

/* ---- message detail --------------------------------------------------- */

.rq-dl { display: grid; grid-template-columns: minmax(9rem, max-content) 1fr; gap: .45rem 1.25rem; margin: 0; }
.rq-dl dt { color: var(--bs-secondary-color); font-weight: 500; font-size: .85rem; padding-top: .1rem; }
.rq-dl dd { margin: 0; word-break: break-word; }
@media (max-width: 575.98px) {
	.rq-dl { grid-template-columns: 1fr; gap: .1rem; }
	.rq-dl dd { margin-bottom: .55rem; }
}
.rq-maplinks { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.rq-symbols { display: flex; flex-wrap: wrap; gap: .35rem; }
.rq-symbol {
	font-family: var(--bs-font-monospace); font-size: .78rem;
	padding: .2rem .45rem; border-radius: .3rem;
	background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color);
}
.rq-symbol.whitelist, .rq-symbol.blacklist, .rq-symbol.rqwatch_map,
.rq-symbol.rqwatch_fuzzy, .rq-symbol.rqwatch_fuzzy_white, .rq-symbol.virus {
	border-color: transparent; border-radius: .3rem; font-weight: 500; font-size: .78rem;
}
.rq-symbol .rq-score-pos { color: var(--bs-danger-text-emphasis); }
.rq-symbol .rq-score-neg { color: var(--bs-success-text-emphasis); }
pre.rq-headers {
	max-height: 28rem; overflow: auto; margin: 0;
	font-size: .78rem; background: var(--bs-tertiary-bg);
	padding: .9rem 1rem; border-radius: var(--bs-border-radius);
	white-space: pre-wrap; word-break: break-all;
}

/* delivery timeline */
.rq-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.rq-timeline::before {
	content: ""; position: absolute; left: .55rem; top: .4rem; bottom: .4rem;
	width: 2px; background: var(--bs-border-color);
}
.rq-timeline li { position: relative; padding: 0 0 1rem 2rem; }
.rq-timeline li:last-child { padding-bottom: 0; }
.rq-timeline .rq-dot {
	position: absolute; left: 0; top: .15rem;
	width: 1.15rem; height: 1.15rem; border-radius: 50%;
	border: 3px solid var(--bs-body-bg);
	background: var(--bs-secondary-bg);
}
.rq-timeline .rq-dot.sent { background: var(--bs-success); }
.rq-timeline .rq-dot.deferred { background: var(--bs-warning); }
.rq-timeline .rq-dot.bounced, .rq-timeline .rq-dot.expired { background: var(--bs-danger); }
.rq-timeline .rq-dot.rejected { background: var(--bs-dark); }
.rq-timeline .rq-dot.softrejected { background: var(--bs-secondary); }
.rq-timeline .rq-dot.discarded { background: var(--rq-discard); }
.rq-timeline .rq-response {
	font-family: var(--bs-font-monospace); font-size: .78rem;
	background: var(--bs-tertiary-bg); border-radius: .3rem;
	padding: .35rem .55rem; margin-top: .3rem; word-break: break-word;
}

/* ---- misc --------------------------------------------------------------- */

.rq-empty { color: var(--bs-secondary-color); text-align: center; padding: 3rem 1rem; }
.rq-empty .bi { font-size: 2rem; display: block; margin-bottom: .5rem; opacity: .6; }
.rq-footer { color: var(--bs-secondary-color); font-size: .8rem; }
.rq-stats-table { font-size: .82rem; }
.rq-stats-table td, .rq-stats-table th { white-space: nowrap; }
.rq-login {
	max-width: 24rem; width: 100%;
}
.rq-login .rq-logo { height: 54px; width: auto; }
.rq-chart { position: relative; height: 220px; }
.text-truncate-2 {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- review fixes -------------------------------------------------------- */

/* Bootstrap's dark badge vanishes on dark cards: reuse the "reject" colours */
[data-bs-theme="dark"] .text-bg-dark {
	background-color: var(--rq-reject) !important;
	color: var(--rq-reject-fg) !important;
}
.progress-bar { background-color: var(--rq-brand); }
.rq-table .rq-subject { min-width: 0; }
@media (min-width: 992px) { .rq-table .rq-subject { min-width: 14rem; } }