/* Flugwetter Admin */
:root,
[data-theme="cockpit"] {
  --bg: #0D1416;
  --panel: #151E21;
  --panel-2: #1B2629;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);
  --text: #E6EDEF;
  --muted: #95A8AE;
  --accent: #8FD3E3;
  --accent-fg: #0D1416;
  --accent-soft: rgba(143, 211, 227, 0.14);
  --sector: #8FD3E3;
  --danger: #F0605D;
  --warn: #F2C14E;
  --ok: #7BD88F;
  --input: #0D1416;
  --font: "Barlow", system-ui, sans-serif;
  --font-head: "Barlow", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --radius: 14px;
  --v-good: #7BD88F; --v-borderline: #F2C14E; --v-edge: #F2C14E; --v-calm: #6FB7C9; --v-wrong: #7D8C92; --v-strong: #F0605D; --v-nodata: #7D8C92;
  color-scheme: dark;
}

[data-theme="flugbuch"] {
  --bg: #F5F0E6;
  --panel: #FBF8F2;
  --panel-2: #F3ECDF;
  --line: #E4DCCB;
  --line-strong: #CFC4AE;
  --text: #1E2724;
  --muted: #5F635C;
  --accent: #9A4522;
  --accent-fg: #FFFFFF;
  --accent-soft: #F6E6DA;
  --sector: #4F86A3;
  --danger: #A8352A;
  --warn: #9A6410;
  --ok: #3F7D4E;
  --input: #FFFFFF;
  --font: "Outfit", system-ui, sans-serif;
  --font-head: "Fraunces", Georgia, serif;
  --v-good: #3F7D4E; --v-borderline: #B67812; --v-edge: #B67812; --v-calm: #4F86A3; --v-wrong: #8A8676; --v-strong: #A8352A; --v-nodata: #8A8676;
  color-scheme: light;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.5 var(--font); }
a { color: var(--accent); }
h1, h2 { font-family: var(--font-head); line-height: 1.15; }
h1 { font-size: 30px; margin: 0; font-weight: 600; }
h2 { font-size: 19px; margin: 0 0 12px; font-weight: 600; }
.muted { color: var(--muted); margin: 4px 0 0; }
.small { font-size: 13px; }
.mono { font-family: var(--mono); font-size: 14px; }
.warn { color: var(--warn); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.adm-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 14px 24px; border-bottom: 1px solid var(--line); background: var(--panel); }
.adm-brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 700; letter-spacing: 0.2em; font-size: 14px; }
.adm-brand svg { color: var(--accent); }
.adm-brand em { font-style: normal; letter-spacing: 0.05em; color: var(--muted); font-weight: 500; }
.adm-nav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.adm-nav a { padding: 8px 12px; border-radius: 8px; color: var(--muted); text-decoration: none; font-weight: 500; }
.adm-nav a:hover { color: var(--text); background: var(--panel-2); }
.adm-nav a.active { color: var(--text); background: var(--accent-soft); }
.adm-logout { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; margin: 0; }

.adm-main { max-width: 1180px; margin: 0 auto; padding: 28px 24px 60px; }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 18px; }
.card.narrow { max-width: 560px; }
.card h2 + .muted { margin-top: -6px; margin-bottom: 14px; }
.card h2:not(:first-child) { margin-top: 26px; }
.login-card { max-width: 420px; margin: 60px auto; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1px solid var(--line-strong); background: transparent; color: var(--text); font: 600 15px var(--font); text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--panel-2); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.btn-primary:hover { background: var(--accent); filter: brightness(1.08); }
.btn-ghost { border-color: transparent; color: var(--muted); }
.btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.btn-small { min-height: 36px; padding: 0 12px; font-size: 14px; }

.flash { padding: 12px 14px; border-radius: 10px; margin-bottom: 16px; border: 1px solid; }
.flash-ok { border-color: color-mix(in srgb, var(--ok) 50%, transparent); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.flash-err { border-color: color-mix(in srgb, var(--danger) 50%, transparent); background: color-mix(in srgb, var(--danger) 12%, transparent); }

.form-grid { display: grid; gap: 14px; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: end; }
label { display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
input, select, textarea { width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--input); color: var(--text); font: 16px var(--font); }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; accent-color: var(--accent); }
input[type="range"] { padding: 0; min-height: 28px; border: 0; background: transparent; accent-color: var(--accent); }
label.check { display: flex; align-items: center; gap: 10px; color: var(--text); min-height: 44px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.table-card { padding: 6px 0; overflow-x: auto; }
.site-table { width: 100%; border-collapse: collapse; }
.site-table th { text-align: left; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.site-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.site-table tr:last-child td { border-bottom: 0; }
.site-table tr.inactive td { opacity: 0.55; }
.site-table .num { text-align: right; }
.site-name { color: var(--text); font-weight: 600; text-decoration: none; }
.site-name:hover { text-decoration: underline; }
.actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.actions form { margin: 0; }
.pill { min-width: 52px; height: 32px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--muted); font: 600 13px var(--font); cursor: pointer; }
.pill-on { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, transparent); }

.mini-rose .rim { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.mini-rose .sec { fill: var(--sector); fill-opacity: 0.45; }
.mini-rose .n { font: 6px var(--mono); fill: var(--muted); }

.edit-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 18px; align-items: start; }
.edit-layout .card { margin: 0; }
.edit-layout .form-actions { grid-column: 1 / -1; margin: 0; }
.pick-map { height: 260px; border-radius: 10px; border: 1px solid var(--line); }

.sector-editor { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.sector-rows { flex: 1 1 260px; display: grid; gap: 12px; }
.sector-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 4px 14px 12px; margin: 0; }
.sector-row legend { padding: 0 6px; }
.sector-row legend .check { min-height: 32px; font-weight: 600; }
.sector-row input[type="number"] { font-family: var(--mono); }
.sector-row.off label:not(.check) { opacity: 0.45; }
.sector-span { grid-column: 1 / -1; font-size: 13px; color: var(--muted); }
.test-wind { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); }
.sector-preview { flex: 0 0 auto; margin: 0 auto; display: grid; justify-items: center; gap: 8px; }
.sector-preview svg { max-width: 100%; height: auto; }
.rose-rim { fill: none; stroke: var(--line-strong); stroke-width: 0.6; }
.tick { stroke: var(--line-strong); stroke-width: 0.4; }
.tick-big { stroke-width: 0.9; }
.rose-label { font: 4px var(--mono); fill: var(--muted); }
.rose-sector { fill: var(--sector); fill-opacity: 0.22; stroke: var(--sector); stroke-opacity: 0.8; stroke-width: 0.5; }
.rose-sector.active { fill-opacity: 0.42; }
.rose-sector-label { font: 600 5px var(--mono); fill: var(--text); }
.rose-center { fill: var(--text); }
.rose-arrow-line { stroke-width: 2; stroke-linecap: round; }
.verdict { font-weight: 700; font-size: 16px; }

.v-good { color: var(--v-good); stroke: var(--v-good); fill: var(--v-good); }
.v-borderline { color: var(--v-borderline); stroke: var(--v-borderline); fill: var(--v-borderline); }
.v-edge { color: var(--v-edge); stroke: var(--v-edge); fill: var(--v-edge); }
.v-calm { color: var(--v-calm); stroke: var(--v-calm); fill: var(--v-calm); }
.v-wrong { color: var(--v-wrong); stroke: var(--v-wrong); fill: var(--v-wrong); }
.v-strong { color: var(--v-strong); stroke: var(--v-strong); fill: var(--v-strong); }
.verdict.v-good, .verdict.v-borderline, .verdict.v-edge, .verdict.v-calm, .verdict.v-wrong, .verdict.v-strong { stroke: none; }

.threshold-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.threshold-grid span { display: flex; align-items: center; gap: 8px; }
.threshold-grid input { font-family: var(--mono); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }

@media (max-width: 640px) {
  .adm-main { padding: 20px 16px 40px; }
  .adm-top { padding: 12px 16px; }
  .edit-layout { grid-template-columns: minmax(0, 1fr); }
  .hide-sm { display: none; }
  .actions { flex-direction: column; align-items: stretch; }
  h1 { font-size: 26px; }
}

/* Sektoren ziehen */
#sectorRose { cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; }
.rose-sector { cursor: grab; }
#sectorRose.dragging, #sectorRose.dragging .rose-sector { cursor: grabbing; }
.rose-handle { fill: var(--panel); stroke: var(--sector); stroke-width: 1.4; cursor: grab; }
.rose-handle:hover { fill: var(--sector); }
.rose-sector-label, .rose-label, .rose-arrow-line, .rose-arrow-head, .rose-center, .tick { pointer-events: none; }
.rose-help { max-width: 280px; text-align: center; margin: 0; }

/* Landebahn */
.runway-card { grid-column: 1 / -1; }
.card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.card-head h2 { margin: 0; }
.runway-layout { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.runway-map-wrap { flex: 999 1 460px; min-width: 0; display: grid; gap: 10px; }
.runway-fields { flex: 1 1 320px; }
.runway-fields.off { opacity: 0.45; }
.runway-map { height: 440px; border-radius: 12px; border: 1px solid var(--line); }
.runway-map.drawing { cursor: crosshair; }
.map-switch { display: flex; flex-wrap: wrap; gap: 6px; }
.map-switch [aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.map-switch #rwDraw { margin-left: auto; }
.pseudo-label { display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
.desig { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); font: 600 18px var(--mono); }
.suggest { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); }
.suggest p { margin: 2px 0 0; }
.rw-handle { display: flex; align-items: center; justify-content: center; }
.rw-handle span { width: 30px; height: 30px; border-radius: 50%; background: #0D1416; border: 3px solid #8FD3E3; color: #8FD3E3; font: 700 13px var(--font); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.5); cursor: grab; }
.rw-desig { display: flex; align-items: center; justify-content: center; pointer-events: none; }
.rw-desig span { display: block; color: #FFFFFF; font: 700 15px var(--mono); text-shadow: 0 0 3px #000, 0 0 6px #000; }
.rose-runway rect { fill: #3E6B47; stroke: #9BD3A6; stroke-width: 0.5; pointer-events: none; }