/* src/styles.css — helles CAD-Layout */
:root { --bg:#ffffff; --bg2:#f4f6f8; --linie:#d9dee4; --text:#1f2933; --primaer:#2A7AE4; --fang:#2e9e5b; --offen:#f0932b; }
html, body { margin:0; height:100%; font:13px/1.4 system-ui, "Segoe UI", sans-serif; color:var(--text); background:var(--bg); }
body { display:grid; grid-template-columns:240px 1fr 300px; grid-template-rows:auto auto auto 1fr auto 24px;
  grid-template-areas:"dateien dateien dateien" "ribbon ribbon ribbon" "schnell schnell schnell" "bib view eig" "cmd cmd cmd" "status status status"; height:100vh; }
.dateien { grid-area:dateien; border-bottom:1px solid var(--linie); padding:2px 8px; background:var(--bg2); display:flex; gap:4px; align-items:center; }
.ribbon { grid-area:ribbon; border-bottom:1px solid var(--linie); background:var(--bg); }
.bibliothek { grid-area:bib; border-right:1px solid var(--linie); overflow:auto; background:var(--bg); }
/* Verlauf oben hell, unten dunkler: gibt dem Boden Gewicht. Vorher lief er andersherum und war
   mit 11 Helligkeitsstufen ohnehin unsichtbar. */
.viewport { grid-area:view; position:relative; background:linear-gradient(180deg,#fdfefe 0%,#e9edf1 100%); overflow:hidden; }
#canvas3d { display:block; width:100%; height:100%; }
.eigenschaften { grid-area:eig; border-left:1px solid var(--linie); overflow:auto; padding:8px; background:var(--bg); }
.commandbar { grid-area:cmd; border-top:1px solid var(--linie); padding:4px 8px; display:flex; gap:12px; align-items:center; background:var(--bg2); }
.status { grid-area:status; font-size:12px; padding:2px 8px; background:var(--bg2); border-top:1px solid var(--linie); }
.status { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.status[data-fehler] #status-text { color:#d63031; font-weight:600; }   /* Werkzeugfehler: rot in der Statuszeile, Werkzeug bleibt aktiv */
#status-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.status-speicher { flex:none; color:#6b7480; font-variant-numeric:tabular-nums; }
.status[data-speicher="gespeichert"] .status-speicher { color:var(--fang); }
.status[data-speicher="ungespeichert"] .status-speicher { color:#8a6d1f; }
.status[data-speicher="konflikt"] .status-speicher, .status[data-speicher="fehler"] .status-speicher { color:#d63031; font-weight:600; }
button, input, select { font:inherit; }
.knopf { border:1px solid var(--linie); background:var(--bg); border-radius:4px; padding:4px 8px; cursor:pointer; }
.knopf.aktiv { border-color:var(--primaer); background:#e8f1fd; }
.triade { position:absolute; left:8px; bottom:8px; width:110px; height:110px; pointer-events:auto; }
.viewcube { position:absolute; right:8px; bottom:8px; width:120px; height:120px; pointer-events:auto; cursor:pointer;
  background:rgba(255,255,255,0.9); border:1px solid #cbd3db; border-radius:6px; box-shadow:0 2px 8px rgba(31,41,51,0.14); }

/* Command-Bar */
.commandbar label { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.commandbar input[type=number] { width:76px; padding:3px 4px; border:1px solid var(--linie); border-radius:4px; }
.commandbar select { padding:3px 4px; border:1px solid var(--linie); border-radius:4px; }
.cmd-gruppe { display:inline-flex; align-items:center; gap:8px; color:#6b7480; }
.cmd-gruppe label { color:var(--text); gap:3px; }
.cmd-prompt { border-left:2px solid var(--primaer); padding-left:10px; }
.cmd-prompt[hidden] { display:none; }   /* schlaegt das display der .cmd-gruppe, sonst bliebe das Panel sichtbar */
.cmd-prompt input[type=number] { width:64px; }

/* Ribbon */
.reiter-leiste { display:flex; gap:2px; padding:2px 6px; border-bottom:1px solid var(--linie); }
.reiter-leiste .reiter { border:none; background:none; padding:6px 10px; cursor:pointer; border-bottom:2px solid transparent; }
.reiter-leiste .reiter.aktiv { border-bottom-color:var(--primaer); color:var(--primaer); font-weight:600; }
.ribbon .werkzeuge { display:flex; flex-wrap:wrap; gap:4px; padding:6px; }
.ribbon .hinweis { color:#6b7480; font-style:italic; padding:4px; }

/* Bibliothek */
.bib-suche { width:calc(100% - 16px); margin:6px 8px; padding:4px 6px; border:1px solid var(--linie); border-radius:4px; }
.bibliothek details { border-bottom:1px solid var(--linie); }
.bibliothek summary { padding:6px 8px; cursor:pointer; font-weight:600; background:var(--bg2); }
.bib-eintrag { display:flex; align-items:center; gap:6px; width:100%; text-align:left; border:none; background:none; padding:4px 10px; cursor:pointer; }
.bib-eintrag:hover { background:#e8f1fd; }
.bib-eintrag.aktiv { background:#e8f1fd; box-shadow:inset 2px 0 0 var(--primaer); }
.bib-symbol { width:28px; height:28px; flex:none; }

/* Auswahlrahmen (Strg + Ziehen im Leeren) */
.auswahl-rahmen { position:absolute; border:1px dashed var(--primaer); background:rgba(42,122,228,0.10); pointer-events:none; z-index:5; }

/* Eigenschaften-Panel */
.eigenschaften h3, .eigenschaften h4 { margin:10px 0 4px; font-size:12px; letter-spacing:0.02em; color:#6b7480; }
.eigenschaften h3 { margin-top:0; color:var(--text); font-size:13px; }
.eig-leer { color:#6b7480; line-height:1.5; }
.eig-hinweis { margin:4px 0; color:#6b7480; font-size:11px; line-height:1.4; }
.eig-einheit { color:#9aa7b5; font-weight:400; }
.eig-gitter { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:4px 6px; align-items:center; }
.eig-gitter > label { color:#6b7480; }
.eigenschaften input[type=number], .eigenschaften select { box-sizing:border-box; width:100%; min-width:0; padding:3px 4px; border:1px solid var(--linie); border-radius:4px; background:var(--bg); }
.eig-vektor { display:grid; grid-template-columns:52px repeat(3, minmax(0, 1fr)); gap:4px; align-items:center; margin-bottom:4px; }
.eig-vektor > span { color:#6b7480; }
.eig-quer { display:flex; gap:8px; align-items:flex-start; }
.eig-quer img { flex:none; border:1px solid var(--linie); border-radius:4px; background:var(--bg2); }
.eig-formfelder { display:grid; grid-template-columns:minmax(0, 1fr) 68px; gap:3px 6px; align-items:center; flex:1; min-width:0; }
.eig-formfelder > label { color:#6b7480; font-size:11px; }
.eig-fehler { margin:4px 0; color:#d63031; font-size:11px; line-height:1.4; }
table.eig-kw { width:100%; table-layout:fixed; border-collapse:collapse; margin-top:6px; font-size:11px; font-variant-numeric:tabular-nums; }
table.eig-kw th, table.eig-kw td { border-bottom:1px solid var(--linie); padding:2px 3px; text-align:right; font-weight:400; overflow-wrap:anywhere; }
table.eig-kw tbody th { width:34%; }
table.eig-kw thead th { color:#6b7480; font-size:11px; text-align:right; }
table.eig-kw tbody th { text-align:left; color:var(--text); }
table.eig-kw td.eig-hw { color:#6b7480; }
table.eig-kw th[title], table.eig-kw td[title] { cursor:help; text-decoration:underline dotted #d9dee4; }
.eig-liste { list-style:none; margin:4px 0; padding:0; }
.eig-liste li { display:flex; justify-content:space-between; gap:6px; padding:2px 0; border-bottom:1px solid var(--linie); }
.eig-status { color:#6b7480; font-size:11px; }
.eig-status.st-offen { color:var(--offen); }
.eig-status.st-ungueltig { color:#d63031; }

/* Datei-Leiste (Tabs, Speichern/Laden, JSON, Konto) */
.dateien .tab-leiste { display:flex; gap:2px; align-items:center; overflow-x:auto; }
.dateien .tab { display:inline-flex; align-items:center; gap:4px; max-width:220px; padding:3px 6px; border:1px solid var(--linie); border-bottom:none;
  border-radius:4px 4px 0 0; background:var(--bg); cursor:pointer; white-space:nowrap; }
.dateien .tab.aktiv { border-color:var(--primaer); background:#e8f1fd; font-weight:600; }
.dateien .tab-name { overflow:hidden; text-overflow:ellipsis; }
.dateien .tab-zu { border:none; background:none; cursor:pointer; color:#6b7480; padding:0 2px; line-height:1; }
.dateien .tab-zu:hover { color:#d63031; }
.dateien .tab-neu { padding:2px 8px; }
.dateien-luecke { flex:1; }

/* Panels und Dialoge (kein window.prompt/confirm — headless würde hängen) */
.dateien-panel, .modal { position:fixed; inset:0; background:rgba(31,41,51,0.28); display:flex; align-items:center; justify-content:center; z-index:50; }
.dateien-panel[hidden], .modal[hidden] { display:none; }
.panel-kasten, .modal-kasten { background:var(--bg); border:1px solid var(--linie); border-radius:6px; padding:14px 16px; min-width:340px; max-width:620px;
  max-height:70vh; overflow:auto; box-shadow:0 8px 28px rgba(31,41,51,0.22); }
.panel-kasten h4, .modal-kasten h3 { margin:0 0 8px; font-size:13px; }
.modal-knoepfe { display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }
.dateien-feld { display:block; width:100%; box-sizing:border-box; margin:4px 0; padding:4px 6px; border:1px solid var(--linie); border-radius:4px; }
.datei-zeile { display:flex; gap:6px; align-items:center; padding:3px 0; border-bottom:1px solid var(--linie); }
.datei-zeile .datei-oeffnen { flex:1; text-align:left; }
.datei-zeit { color:#6b7480; font-size:11px; white-space:nowrap; }

/* ---- Schnellwahlleiste: Profilart anklicken und sofort bauen ------------------------- */
.schnellwahl { grid-area:schnell; position:relative; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:4px 8px; background:var(--bg2); border-bottom:1px solid var(--linie); }
.sw-formen { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.sw-knopf { display:inline-flex; align-items:stretch; border:1px solid var(--linie); border-radius:5px; overflow:hidden; background:var(--bg); }
.sw-icon { border:none; background:none; padding:2px 4px; cursor:pointer; line-height:0; }
.sw-icon img { width:30px; height:30px; display:block; }
.sw-icon:hover, .sw-zahn:hover { background:#e8f1fd; }
.sw-icon.aktiv { background:#e8f1fd; box-shadow:inset 0 -2px 0 var(--primaer); }
.sw-icon.sw-ungueltig { background:#fdeaea; }
.sw-leer { display:inline-block; width:30px; height:30px; line-height:30px; color:#9aa7b5; font-size:16px; }
.sw-zahn { border:none; border-left:1px solid var(--linie); background:var(--bg2); padding:0 3px; cursor:pointer; font-size:10px; color:#6b7480; }
.sw-rechts { display:flex; align-items:center; gap:12px; flex:none; }
.sw-rechts label { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.sw-rechts input[type=number] { width:70px; padding:3px 4px; border:1px solid var(--linie); border-radius:4px; }
.sw-gruppe { display:inline-flex; align-items:center; gap:4px; color:#6b7480; }
.sw-gruppe .knopf { padding:3px 7px; }
.sw-panel { position:absolute; top:100%; left:8px; z-index:20; min-width:250px; padding:8px 10px; background:var(--bg);
  border:1px solid var(--linie); border-radius:6px; box-shadow:0 6px 18px rgba(31,41,51,0.16); }
.sw-panel h4 { margin:0 0 6px; font-size:12px; color:#6b7480; }
.sw-felder { display:grid; grid-template-columns:minmax(0,1fr) 76px; gap:4px 8px; align-items:center; }
.sw-felder label { display:contents; color:#6b7480; font-size:11px; }
.sw-felder input[type=number] { width:100%; box-sizing:border-box; padding:3px 4px; border:1px solid var(--linie); border-radius:4px; }
.sw-breit select { width:100%; padding:3px 4px; border:1px solid var(--linie); border-radius:4px; }
.sw-vorschau { display:flex; gap:8px; align-items:center; margin-top:8px; padding-top:8px; border-top:1px solid var(--linie); font-size:11px; color:#6b7480; }
.sw-vorschau img { border:1px solid var(--linie); border-radius:4px; background:var(--bg2); }
.sw-hinweis { margin:6px 0 0; font-size:11px; color:#6b7480; line-height:1.4; }
.sw-fehler { margin:0; font-size:11px; color:#d63031; }
.sw-fuss { display:flex; gap:6px; justify-content:flex-end; margin-top:8px; }

/* ---- 3D-Maus: Bedienfeld im Viewport ------------------------------------------------ */
.raummaus { position:absolute; top:8px; right:8px; z-index:10; width:270px; }
.raummaus[hidden] { display:none; }
.rm-panel { padding:8px 10px; background:var(--bg); border:1px solid var(--linie); border-radius:6px; box-shadow:0 6px 18px rgba(31,41,51,0.16); font-size:11px; }
.rm-panel h4 { display:flex; justify-content:space-between; align-items:center; margin:0 0 6px; font-size:12px; color:var(--text); }
.rm-zu { border:none; background:none; cursor:pointer; font-size:15px; line-height:1; color:#6b7480; padding:0 2px; }
.rm-status, .rm-warnung, .rm-hinweis { margin:0 0 6px; color:#6b7480; line-height:1.4; }
.rm-status.rm-an { color:var(--fang); font-weight:600; }
.rm-warnung { color:#8a6d1f; }
.rm-knoepfe { margin-bottom:8px; }
.rm-regler { display:grid; grid-template-columns:56px 1fr 30px; gap:6px; align-items:center; margin-bottom:3px; color:#6b7480; }
.rm-regler input[type=range] { width:100%; }
.rm-regler span { text-align:right; font-variant-numeric:tabular-nums; color:var(--text); }
.rm-feld { border:1px solid var(--linie); border-radius:4px; padding:4px 6px; margin:6px 0; }
.rm-feld legend { color:#6b7480; padding:0 3px; }
.rm-feld label, .rm-panel > label { display:inline-flex; align-items:center; gap:3px; margin-right:8px; white-space:nowrap; }
.rm-achsen { display:grid; gap:2px; margin-top:8px; padding-top:8px; border-top:1px solid var(--linie); }
.rm-achse { display:grid; grid-template-columns:60px 1fr 34px; gap:5px; align-items:center; }
.rm-achse b { font-weight:400; color:#6b7480; }
.rm-balken { position:relative; height:7px; background:var(--bg2); border:1px solid var(--linie); border-radius:3px; overflow:hidden; }
.rm-balken i { display:block; height:100%; width:0; margin-left:50%; background:var(--primaer); }
.rm-achse > span:last-child { text-align:right; font-variant-numeric:tabular-nums; }
.rm-zuordnung { display:grid; gap:2px; }
.rm-zeile { display:grid; grid-template-columns:52px 1fr 26px; gap:4px; align-items:center; }
.rm-zeile b { font-weight:400; color:#6b7480; }
.rm-zeile select { width:100%; padding:1px 2px; border:1px solid var(--linie); border-radius:3px; font-size:11px; }
.rm-zeile label { margin:0; justify-content:center; }

/* ---- Werkzeuge in der Schnellwahlleiste ---------------------------------------------- */
.sw-werkzeuge { display:inline-flex; align-items:center; gap:4px; }
.sw-werkzeuge .sw-icon { border:1px solid var(--linie); border-radius:5px; background:var(--bg); }
.sw-text { line-height:1; font-size:19px; padding:5px 7px; }
.sw-trenner { width:1px; align-self:stretch; margin:2px 6px; background:var(--linie); }

/* ---- Masse & Schwerpunkt im Eigenschaften-Panel -------------------------------------- */
.eig-physik th { font-weight:400; color:#6b7480; text-align:left; }
.eig-physik td { text-align:right; font-variant-numeric:tabular-nums; }
.eig-physik td:last-child { width:32px; text-align:left; color:#9aa7b5; }
.eig-physik .eig-summe th, .eig-physik .eig-summe td { border-top:1px solid var(--linie); font-weight:600; color:var(--text); }

/* ---- Zwangsbedingungen im Eigenschaften-Panel ---------------------------------------- */
.eig-mini { border:none; background:none; cursor:pointer; padding:0 2px; margin-left:4px; color:#9aa7b5; font-size:11px; line-height:1; }
.eig-mini:hover { color:var(--text); }
.eig-liste .eig-status.st-frei { color:var(--fang); }