/* Retrotec brand — palette sampled from 2026 marketing (charcoal #141414, red #C13430) and the logo (#E01830 / #F8E800). */
:root {
  --rt-red: #C13430; --rt-red-bright: #E01830; --rt-red-dark: #9E2724; --rt-yellow: #F8E800; --rt-ink: #201820;
  --rt-charcoal: #141414; --rt-charcoal-2: #1f1f1f; --rt-grey: #f3f3f4; --rt-line: #e3e3e5;
  --bs-primary: var(--rt-red); --bs-primary-rgb: 193, 52, 48; --bs-link-color: var(--rt-red-dark);
  --bs-link-hover-color: var(--rt-red); --bs-body-color: var(--rt-ink); --bs-body-bg: #f7f7f8;
  --bs-font-sans-serif: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rt-heading-font: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body { background: var(--bs-body-bg); font-family: var(--bs-font-sans-serif); }
h1, h2, h3, h4, h5, .rt-section-title, .card-header, .navbar-brand, .rt-appname { font-family: var(--rt-heading-font); letter-spacing: -.01em; }
h1, h2, h3, h4 { font-weight: 700; }
body { font-size: 1.02rem; }
.rt-subhead { color: var(--rt-red); font-weight: 700; }

/* buttons: marketing CTA look */
.btn { border-radius: 4px; font-weight: 600; }
.btn-primary { --bs-btn-bg: var(--rt-red); --bs-btn-border-color: var(--rt-red); --bs-btn-hover-bg: var(--rt-red-dark);
  --bs-btn-hover-border-color: var(--rt-red-dark); --bs-btn-active-bg: var(--rt-red-dark); --bs-btn-active-border-color: var(--rt-red-dark);
  --bs-btn-focus-shadow-rgb: 193, 52, 48; }
.btn-outline-primary { --bs-btn-color: var(--rt-red); --bs-btn-border-color: var(--rt-red); --bs-btn-hover-bg: var(--rt-red);
  --bs-btn-hover-border-color: var(--rt-red); --bs-btn-active-bg: var(--rt-red-dark); }
.btn-outline-danger { --bs-btn-color: var(--rt-red); --bs-btn-border-color: var(--rt-red); --bs-btn-hover-bg: var(--rt-red); --bs-btn-hover-border-color: var(--rt-red); }
.form-control, .form-select { border-radius: 4px; }
.form-control:focus, .form-select:focus { border-color: var(--rt-red); box-shadow: 0 0 0 .2rem rgba(193,52,48,.15); }
.form-check-input:checked { background-color: var(--rt-red); border-color: var(--rt-red); }
.nav-pills .nav-link.active { background: var(--rt-red); }

/* dark navbar with the thin red rule from the marketing header */
.rt-navbar { background: var(--rt-charcoal) !important; border-bottom: 3px solid var(--rt-red) !important; }
.rt-navbar .navbar-toggler { border-color: #555; } .rt-navbar .navbar-toggler-icon { filter: invert(1); }
.rt-appname { color: #fff; letter-spacing: -.01em; font-size: 1.2rem; }
.rt-tabs .nav-link { color: #e6e6e6; font-weight: 500; border-radius: 4px; padding: .4rem .6rem; white-space: nowrap; font-size: .95rem; }
.rt-tabs .nav-link .bi { display: none; }
@media (min-width: 1500px) { .rt-tabs .nav-link { padding: .45rem .8rem; font-size: 1rem; } .rt-tabs .nav-link .bi { display: inline; } }
.rt-tabs .nav-link.active { background: var(--rt-red); color: #fff; }
.rt-tabs .nav-link.disabled { color: #6f6f6f; }
.rt-tabs .nav-link:not(.active):not(.disabled):hover { background: var(--rt-charcoal-2); color: #fff; }
.rt-navright { min-width: 0; }
@media (max-width: 1199.98px) { .rt-navright { flex-wrap: wrap; margin-top: .5rem; } .rt-navbar .navbar-collapse { padding-bottom: .5rem; } }
.rt-client-pill { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #fff !important; }
.rt-navbar .rt-bug { --bs-btn-color: #fff; --bs-btn-border-color: var(--rt-red); --bs-btn-hover-bg: var(--rt-red); --bs-btn-hover-border-color: var(--rt-red); white-space: nowrap; }
.rt-navbar .btn-light { background: var(--rt-charcoal-2); border-color: #444; color: #fff; }
.rt-navbar .btn-light:hover { background: #333; color: #fff; }
.rt-navbar .btn-primary { text-transform: none; letter-spacing: 0; }
.rt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* cards & results */
.rt-card { border: 0; border-radius: 6px; box-shadow: 0 1px 6px rgba(0,0,0,.08); }
.rt-card .card-header { background: #fff; border-bottom: 2px solid var(--rt-red); font-weight: 600; border-radius: 6px 6px 0 0; font-size: 1.05rem; }
.rt-result { background: var(--rt-grey); border-radius: 4px; padding: .6rem .9rem; }
.rt-result .label { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: #666; font-weight: 600; }
.rt-result .value { font-size: 1.5rem; font-weight: 700; color: var(--rt-ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.rt-result .value small { font-size: .85rem; font-weight: 500; color: #666; font-family: var(--bs-font-sans-serif); }
.rt-result.hero { border-left: 5px solid var(--rt-red); }
.rt-result.good { border-left: 5px solid #1c9a4a; } .rt-result.bad { border-left: 5px solid var(--rt-red); }
.rt-section-title { font-size: 1.35rem; font-weight: 600; margin: 1rem 0 .5rem; }
.rt-readings input { text-align: right; padding: .3rem .4rem; }
.rt-readings .col { min-width: 62px; flex: 0 0 8.33%; }
@media (max-width: 767px) { .rt-readings .col { flex: 0 0 25%; } }
.rt-zone-badge { font-size: 1rem; padding: .45em .8em; }
.zone-1 { background: #cfe0ff !important; color: #143a7a !important; } .zone-2 { background: #e8e8e8 !important; color: #333 !important; }
.zone-3 { background: #ffe0b3 !important; color: #7a3d00 !important; } .zone-4 { background: #ffc7cf !important; color: #7a0c1c !important; }
#zoneMap { height: 360px; border-radius: 4px; }
table.rt-table td, table.rt-table th { vertical-align: middle; }
input[type=number] { font-variant-numeric: tabular-nums; }
.rt-rating-row .cell { min-width: 58px; text-align: center; background: var(--rt-grey); border-radius: 4px; padding: .35rem .2rem; font-weight: 600; }
.rt-rating-row .cell.sub { background: #fff; border: 1px solid #ddd; font-weight: 500; }

/* login hero: charcoal with the hex texture and red rule */
.rt-login-bg { background-color: var(--rt-charcoal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23c13430' stroke-opacity='.22' stroke-width='1.2'/%3E%3Cpath d='M28 0L28 34L0 50M28 34L56 50' fill='none' stroke='%23c13430' stroke-opacity='.22' stroke-width='1.2'/%3E%3C/svg%3E");
  background-size: 56px 100px; min-height: calc(100vh - 140px); position: relative; }
.rt-login-bg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 20%, rgba(193,52,48,.25), transparent 55%), linear-gradient(180deg, rgba(20,20,20,0) 0%, rgba(20,20,20,.6) 100%); pointer-events: none; }
.rt-login-bg > .container { position: relative; }
.rt-login-bg h1 { font-size: 3rem; letter-spacing: -.02em; }
.rt-login-bg .lead { color: var(--rt-red-bright); font-weight: 700; }

/* footer */
.rt-footer { background: var(--rt-charcoal); color: #bdbdbd !important; border-top: 3px solid var(--rt-red) !important; }
.rt-footer a { color: #fff; } .rt-footer img { opacity: .95; }
@media print { .rt-navbar, .rt-footer, .btn, .alert, nav { display: none !important; } body { background: #fff; } }

/* nav right-side links, avatar, underline-style active tab (design mock) */
.rt-tabs .nav-link { border-radius: 0; padding: .9rem .7rem; font-size: 1rem; }
.rt-tabs .nav-link.active { background: transparent; color: #fff; box-shadow: inset 0 -3px 0 var(--rt-red); }
.rt-tabs .nav-link:not(.active):not(.disabled):hover { background: transparent; color: #fff; }
.rt-navlink { color: #e6e6e6; background: none; border: 0; padding: .5rem .6rem; white-space: nowrap; }
.rt-navlink:hover, .rt-navlink.active { color: #fff; text-decoration: none; }
.rt-avatar { width: 36px; height: 36px; border-radius: 50%; background: #333; color: #fff; border: 0; font-weight: 600; font-size: .85rem; }
.rt-avatar::after { display: none; }
.rt-navbar { padding-top: 0; padding-bottom: 0; }
.rt-navbar .navbar-brand { padding: .6rem 0; }
.rt-context { color: #555; font-size: 1rem; }
.rt-context .name { color: var(--rt-red); font-weight: 600; }
.rt-context .sep { color: #bbb; margin: 0 .5rem; }
.rt-hero .big { font-size: 4rem; font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.rt-hero .label { font-size: .95rem; color: #666; }
.rt-badge-pass { background: #e6f5ec; color: #187a3c; border-radius: 999px; padding: .35rem .9rem; font-weight: 600; }
.rt-badge-fail { background: #fbe4e4; color: #9e2724; border-radius: 999px; padding: .35rem .9rem; font-weight: 600; }
.rt-badge-none { background: #eee; color: #555; border-radius: 999px; padding: .35rem .9rem; font-weight: 600; }
.rt-bar-row { display: grid; grid-template-columns: 8.5rem 1fr 5.5rem; align-items: center; gap: .75rem; margin: .5rem 0; }
.rt-bar-row .v { white-space: nowrap; }
.rt-bar-row .k { color: #555; } .rt-bar-row .v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.rt-bar { height: 10px; border-radius: 999px; background: #e4e4e6; overflow: hidden; }
.rt-bar > span { display: block; height: 100%; border-radius: 999px; background: #c9c9cc; width: 0; transition: width .3s; }
.rt-bar.measured > span { background: var(--rt-red); }
.rt-kv { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--rt-line); }
.rt-kv:last-child { border-bottom: 0; } .rt-kv .k { color: #555; } .rt-kv .v { font-weight: 600; text-align: right; }
.rt-history th { color: #555; font-weight: 500; }
.ev-item { width: 150px; position: relative; } .ev-item img { width: 150px; height: 110px; object-fit: cover; border-radius: 4px; display: block; }
.ev-doc { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 150px; height: 110px; background: var(--rt-grey); border-radius: 4px; color: var(--rt-ink); text-decoration: none; font-size: .75rem; text-align: center; padding: .4rem; word-break: break-all; }
.ev-doc .bi { font-size: 1.8rem; color: var(--rt-red); }
.ev-badge { position: absolute; top: 6px; left: 6px; font-size: .65rem; font-weight: 700; padding: .15rem .4rem; border-radius: 3px; color: #fff; background: var(--rt-red); text-transform: uppercase; }
.ev-badge.plan { background: #2a6fd6; }
.ev-item figcaption { display: flex; gap: .25rem; align-items: center; margin-top: .25rem; } .ev-item figcaption input { font-size: .75rem; padding: .15rem .35rem; }
.rt-info { color: #999; font-size: .9rem; line-height: 1; } .rt-info:hover { color: var(--rt-red); }
.popover { max-width: 360px; }
.rt-viewtoggle .btn { --bs-btn-padding-y: .15rem; --bs-btn-padding-x: .6rem; font-size: .8rem; }
body.view-simple .pro-only { display: none !important; }
body:not(.view-simple) .simple-only { display: none !important; }
.rt-plain { font-size: 1.05rem; line-height: 1.5; } .rt-plain strong { color: var(--rt-ink); }