/* Dronehelbred (U68 trin 4): "Er dronen OK?" - the four states after the approved sketch
   (dronehelbred-er-dronen-ok.html). A state always has its icon and word next to the colour; GRÅ never looks
   like GRØN. The lamp's colours are used for the lamp only - the charts' series use neutral colours. */
.dh {
	--dh-groen: #1f7a47; --dh-groen-bg: #e6f3ec;
	--dh-gul: #8a5a06; --dh-gul-bg: #fbf1dc;
	--dh-roed: #b3261e; --dh-roed-bg: #fbe7e5;
	--dh-graa: #4f5866; --dh-graa-bg: #eceff3;
	--dh-info: #4a5566; --dh-info-bg: #f3f5f8;
	--dh-line: var(--mud-palette-lines-default, #dde3ea);
	--dh-ink2: var(--mud-palette-text-secondary, #4a5566);
	--dh-soft: #f3f5f8;
	--dh-panel: var(--mud-palette-surface, #fff);
	display: grid; gap: 20px;
}
.mud-theme-dark .dh, .dh.dh-dark, .qd-dark .dh {
	--dh-groen: #5fc48c; --dh-groen-bg: #16302a; --dh-gul: #e6b24f; --dh-gul-bg: #342a14;
	--dh-roed: #f07b72; --dh-roed-bg: #3a1c1b; --dh-graa: #a7b0bd; --dh-graa-bg: #252d38;
	--dh-soft: #1d2530;
}
.dh h2, .dh h3 { margin: 0; }
.dh-muted { color: var(--dh-ink2); }
.dh-small { font-size: 13px; }
.dh-mono { font-family: "Roboto Mono", ui-monospace, Menlo, monospace; font-size: 13px; }
.dh-eyebrow { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--dh-ink2); }
.dh-panel { background: var(--dh-panel); border: 1px solid var(--dh-line); border-radius: 10px; padding: 18px; display: grid; gap: 10px; min-width: 0; }
.dh-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.dh-scroll { overflow-x: auto; }

/* the chip: icon + word on the state's colour */
.dh-chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; padding: 2px 10px 2px 4px; border-radius: 999px; white-space: nowrap; line-height: 20px; }
.dh-chip .dh-ico { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; background: currentColor; }
.dh-chip .dh-ico > span { color: var(--dh-panel); }
.dh-s-RED { color: var(--dh-roed); background: var(--dh-roed-bg); }
.dh-s-YELLOW { color: var(--dh-gul); background: var(--dh-gul-bg); }
.dh-s-GREEN { color: var(--dh-groen); background: var(--dh-groen-bg); }
.dh-s-GREY { color: var(--dh-graa); background: var(--dh-graa-bg); }
.dh-s-INFO { color: var(--dh-info); background: var(--dh-info-bg); }
.dh-tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--dh-line); color: var(--dh-ink2); }
.dh-tag.dh-prelim { border-style: dashed; }

/* counters */
.dh-counters { display: flex; flex-wrap: wrap; gap: 10px; }
.dh-counter { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; font-weight: 600; border: 2px solid transparent; cursor: pointer; font: inherit; font-weight: 600; }
.dh-counter[aria-pressed="true"] { border-color: currentColor; }
.dh-counter:focus-visible { outline: 2px solid var(--mud-palette-primary, #355696); outline-offset: 2px; }

/* the fleet table */
.dh-fleet { width: 100%; border-collapse: collapse; font-size: 14px; }
.dh-fleet th { text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--dh-ink2); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--dh-line); }
.dh-fleet td { padding: 12px 10px; border-bottom: 1px solid var(--dh-line); vertical-align: top; }
.dh-fleet tr.dh-row { cursor: pointer; }
.dh-fleet tr.dh-row:hover td, .dh-fleet tr.dh-row:focus-visible td { background: var(--dh-soft); }
.dh-fleet .dh-name { font-size: 18px; font-weight: 600; }
.dh-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; background: #9aa3ae; }
.dh-dot.dh-online { background: #2e7d32; }

/* the status card */
.dh-card { border-radius: 12px; padding: 20px; display: grid; gap: 10px; border: 1px solid var(--dh-line); background: var(--dh-panel); }
.dh-band { display: flex; align-items: center; gap: 12px; border-radius: 10px; padding: 14px 16px; flex-wrap: wrap; }
.dh-band .dh-bigico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; font-weight: 700; background: currentColor; flex: none; }
.dh-band .dh-bigico > span { color: var(--dh-panel); }
.dh-band h2 { font-size: 26px; font-weight: 600; color: inherit; flex: 1; min-width: 200px; }
.dh-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 14px; margin: 0; }
.dh-kv dt { color: var(--dh-ink2); }
.dh-kv dd { margin: 0; }
.dh-btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* the small top view on the card */
.dh-mini { display: grid; grid-template-columns: 18px 18px; gap: 3px; }
.dh-mini span { width: 18px; height: 18px; border-radius: 50%; font-size: 10px; display: grid; place-items: center; font-weight: 700; background: var(--dh-panel); color: var(--dh-ink2); border: 1px solid var(--dh-line); }
.dh-mini span.dh-hit { background: currentColor; }
.dh-mini span.dh-hit > b { color: var(--dh-panel); }

/* findings */
.dh-finding { border: 1px solid var(--dh-line); border-left: 6px solid currentColor; border-radius: 10px; padding: 14px 16px; display: grid; gap: 8px; background: var(--dh-panel); }
.dh-finding .dh-why { color: var(--mud-palette-text-primary, #18212d); font-size: 15px; }
.dh-finding ul { margin: 0; padding-left: 18px; color: var(--mud-palette-text-primary, #18212d); font-size: 13px; }
.dh-toofew { color: var(--dh-graa); font-style: italic; }

/* motors seen from above */
.dh-motors { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dh-front { grid-column: 1 / -1; text-align: center; font-size: 12px; color: var(--dh-ink2); letter-spacing: .06em; text-transform: uppercase; }
.dh-motor { border: 1px solid var(--dh-line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 6px; background: var(--dh-panel); color: var(--mud-palette-text-primary, #18212d); min-width: 0; }
.dh-motor.dh-hl { outline: 2px solid var(--dh-roed); }
.dh-motor .dh-hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dh-motor ul { list-style: none; margin: 0; padding: 0; font-size: 13px; display: grid; gap: 3px; }
.dh-motor li { display: flex; justify-content: space-between; gap: 8px; }
.dh-motor li .dh-v { color: var(--dh-ink2); text-align: right; }
.dh-lv-Bad .dh-v { color: var(--dh-roed) !important; font-weight: 600; }
.dh-lv-Warn .dh-v { color: var(--dh-gul) !important; font-weight: 600; }
.dh-lv-Unknown .dh-v { color: var(--dh-graa) !important; font-style: italic; }

/* flights */
.dh-flights { display: grid; gap: 6px; }
.dh-flight { display: grid; grid-template-columns: 22px 130px 70px 1fr; gap: 10px; align-items: start; font-size: 14px; color: inherit; text-decoration: none; padding: 4px 6px; border-radius: 6px; }
.dh-flight:hover, .dh-flight:focus-visible { background: var(--dh-soft); }
.dh-sq { width: 20px; height: 20px; border-radius: 4px; display: grid; place-items: center; font-size: 12px; font-weight: 700; margin-top: 1px; }
.dh-sq.dh-s-RED { background: var(--dh-roed); color: #fff; }
.dh-sq.dh-s-YELLOW { background: var(--dh-gul); color: #fff; }
.dh-sq.dh-s-GREEN { background: var(--dh-groen); color: #fff; }
.dh-sq.dh-s-GREY { background: var(--dh-graa); color: #fff; }
.dh-strip { display: flex; gap: 4px; flex-wrap: wrap; }
.dh-strip .dh-sq { width: 16px; height: 16px; font-size: 10px; }

/* rule table */
.dh-rules { border-collapse: collapse; width: 100%; font-size: 13px; }
.dh-rules th, .dh-rules td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--dh-line); vertical-align: top; }
.dh-rules th { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--dh-ink2); }
.dh-rules tr.dh-flightlog td { color: var(--dh-graa); }

/* trend */
.dh-trend text { fill: var(--dh-ink2); font: 11px "Roboto Mono", ui-monospace, Menlo, monospace; }
.dh-trend .dh-date { font-size: 10px; }
.dh-trend .dh-band { fill: var(--dh-groen-bg); }
.dh-trend .dh-grid { stroke: var(--dh-line); }
.dh-trend .dh-limit { stroke: var(--dh-roed); stroke-dasharray: 5 4; }
.dh-trend .dh-limit-text { fill: var(--dh-roed); }
.dh-trend .dh-maint { stroke: var(--dh-ink2); stroke-dasharray: 2 3; }
.dh-trend .dh-maint-text { font-size: 10px; }
.dh-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--dh-ink2); align-items: center; }
.dh-legend i { display: inline-block; width: 14px; height: 3px; margin-right: 6px; vertical-align: middle; }
.dh-legend i.dh-lg-band { height: 10px; background: var(--dh-groen-bg); }
.dh-legend i.dh-lg-limit { border-top: 2px dashed var(--dh-roed); height: 0; }
.dh-legend i.dh-lg-hollow { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--dh-ink2); }

/* release form */
.dh-problems { margin: 0; padding-left: 18px; color: var(--dh-roed); font-size: 14px; }
.dh-form { display: grid; gap: 12px; }

@media (max-width: 640px) {
	.dh-motors { grid-template-columns: 1fr; }
	.dh-flight { grid-template-columns: 22px 1fr; }
	.dh-flight .dh-fd { grid-column: 2; }
	.dh-band h2 { font-size: 22px; }
}