/* screens.css — Layout pro Screen */

/* Gemeinsame Screen-Container */
.screen {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* ─────────────────────────────────────────────────────────────────────── */
/* Welcome-Screen                                                           */
/* ─────────────────────────────────────────────────────────────────────── */

.screen-welcome {
    align-items: center;
    justify-content: center;
    gap: var(--shell-spacing-lg);
    padding-top: 3rem;
}

.stepper {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--shell-spacing-lg);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--shell-primary) 6%, var(--shell-bg-elevated)),
        color-mix(in srgb, var(--shell-accent) 4%, var(--shell-bg-elevated))
    );
    border-radius: var(--shell-radius-lg);
    width: 100%;
    max-width: 980px;
}

/* Per-Step Brand-Farbe via CSS-Variable. */
.step[data-step-key="upload"]   { --step-color: #4a90d0; }
.step[data-step-key="crop"]     { --step-color: #b97aca; }
.step[data-step-key="params"]   { --step-color: #e8a23a; }
.step[data-step-key="generate"] { --step-color: #84b96a; }
.step[data-step-key="preview"]  { --step-color: #f5908a; }
.step[data-step-key="import"]   { --step-color: #4fb0a8; }

.step {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding: 0.5rem 0.25rem;
    min-width: 0;
    color: var(--step-color);
}

.step-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1.5px dashed transparent;
    background: transparent;
    transform: scale(0.78);
    opacity: 0.55;
    transition:
        opacity 0.4s ease,
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        border-color 0.4s ease,
        background-color 0.4s ease;
}

.step-icon svg {
    width: 56px;
    height: 56px;
    display: block;
}

.step.step-active .step-icon {
    opacity: 1;
    transform: scale(1.18);
    border-color: var(--step-color);
    background: color-mix(in srgb, var(--step-color) 12%, transparent);
}

/* ─────────────────────────────────────────────────────────────────────── */
/* Per-Icon-Look (Inactive + Active)                                      */
/* Jedes Icon definiert seine eigenen semantischen Klassen.               */
/* ─────────────────────────────────────────────────────────────────────── */

/* ─── Upload — Pfeil + Doc-Outline, Text "2D PLAN" innen ────────────── */
.step-icon svg .upload-arrow,
.step-icon svg .upload-doc {
    fill: none;
    stroke: var(--step-color);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.step-icon svg .upload-text {
    fill: var(--step-color);
}

/* ─── Crop — gefuellter Inner-Square + dashed Frame + Corner-Handles ─── */
.step-icon svg .crop-fill {
    fill: var(--step-color);
    fill-opacity: 0.85;
}
.step-icon svg .crop-frame {
    fill: none;
    stroke: var(--step-color);
    stroke-width: 1.8;
}
.step-icon svg .crop-handle {
    fill: var(--step-color);
    rx: 1;
}

/* ─── Params — gefuelltes Doc + Eselsohr + weisse Linien ──────────────── */
.step-icon svg .params-doc {
    fill: var(--step-color);
}
.step-icon svg .params-fold {
    fill: rgba(0, 0, 0, 0.18);
}
.step-icon svg .params-line {
    stroke: rgba(255, 255, 255, 0.92);
    stroke-width: 1.8;
    stroke-linecap: round;
    fill: none;
}

/* ─── Cube — echtes 3D mit transform-style: preserve-3d ──────────────── */
/* Sechs Faces in 3D-Raum positioniert, der Wrapper rotiert um Y-Achse.   */
/* Anders als SVG/rotateY-Squish: hier waechst/schrumpft die sichtbare    */
/* Flaeche jeder Seitenwand wirklich beim Drehen.                          */
.step-icon .cube-3d-wrap {
    position: relative;
    width: 56px;
    height: 56px;
    perspective: 220px;
    display: block;
}
.step-icon .cube-3d {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    transform-style: preserve-3d;
    transform: rotateX(-22deg) rotateY(-28deg);
    transition: transform 0.3s ease;
}
.step-icon .cube-face {
    position: absolute;
    width: 30px;
    height: 30px;
    background: var(--step-color);
    border: 1px solid rgba(0, 0, 0, 0.32);
    box-sizing: border-box;
}
.step-icon .cube-face.f-front   { transform: translateZ(15px);                  opacity: 0.92; }
.step-icon .cube-face.f-back    { transform: rotateY(180deg) translateZ(15px);  opacity: 0.5; }
.step-icon .cube-face.f-right   { transform: rotateY(90deg)  translateZ(15px);  opacity: 0.7; }
.step-icon .cube-face.f-left    { transform: rotateY(-90deg) translateZ(15px);  opacity: 0.7; }
.step-icon .cube-face.f-top     { transform: rotateX(90deg)  translateZ(15px);  opacity: 1; }
.step-icon .cube-face.f-bottom  { transform: rotateX(-90deg) translateZ(15px);  opacity: 0.4; }

.step-icon .cube-spark {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--step-color);
    opacity: 0;
    pointer-events: none;
}
.step-icon .cube-spark.s1 { top: 4px;  right: 4px;  }
.step-icon .cube-spark.s2 { top: 8px;  left: 4px;   }
.step-icon .cube-spark.s3 { bottom: 6px; right: 4px; }

/* ─── Preview — Bilderrahmen mit Floorplan-Linien drin ─────────────── */
/* Inactive: Outline-Rahmen mit Floorplan-Linien in Step-Farbe.           */
/* Active:  Rahmen fuellt sich, Linien werden weiss + animieren wie ein   */
/*           "Plan wird gezeichnet"-Effekt (stagger draw-in).             */
.step-icon svg .preview-hanger {
    fill: none;
    stroke: var(--step-color);
    stroke-width: 2.5;
    stroke-linecap: round;
}
.step-icon svg .preview-frame {
    fill: none;
    stroke: var(--step-color);
    stroke-width: 2;
    transition: fill 0.3s ease;
}
.step-icon svg .floor-line {
    stroke: var(--step-color);
    stroke-width: 1.8;
    stroke-linecap: round;
    fill: none;
    transition: stroke 0.3s ease;
}
.step.step-active .step-icon svg .preview-frame { fill: var(--step-color); }
.step.step-active .step-icon svg .floor-line    { stroke: #ffffff; }

/* ─── Import — Kreis + Haken ───────────────────────────────────────── */
/* Inactive: Outline-Kreis, Haken in Step-Farbe.                          */
/* Active:  Kreis fuellt sich, Haken wird weiss + zeichnet sich.           */
.step-icon svg .import-circle {
    fill: none;
    stroke: var(--step-color);
    stroke-width: 2;
    transition: fill 0.3s ease;
}
.step-icon svg .import-check {
    stroke: var(--step-color);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    transition: stroke 0.3s ease;
}
.step.step-active .step-icon svg .import-circle { fill: var(--step-color); }
.step.step-active .step-icon svg .import-check  { stroke: #ffffff; }

.step-label {
    font-size: 0.8125rem;
    text-align: center;
    color: var(--shell-fg-muted);
    line-height: 1.3;
    min-height: 2.6em;
    font-weight: 400;
    transition: color 0.35s ease, font-weight 0.35s ease;
    max-width: 11ch;
}

.step.step-active .step-label {
    color: var(--shell-fg);
    font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────────── */
/* Per-Icon-Mikro-Animationen                                               */
/* Nur aktiv waehrend .step-active. Bei Inactive: keine Animation,          */
/* Icon im Ruhe-Zustand.                                                    */
/* ─────────────────────────────────────────────────────────────────────── */

/* Upload: Pfeil bounct nach oben */
.step[data-step-key="upload"].step-active .anim-arrow {
    animation: anim-arrow-bounce 1.6s ease-in-out infinite;
    transform-origin: 50% 100%;
}
@keyframes anim-arrow-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}

/* Crop: gestrichelter Rahmen marschiert ("marching ants") + Handles pulsen */
.step[data-step-key="crop"].step-active .anim-march {
    animation: anim-march 1.2s linear infinite;
}
@keyframes anim-march {
    to { stroke-dashoffset: -22; }
}
.step[data-step-key="crop"].step-active .anim-handles .crop-handle {
    animation: anim-handle-pulse 1.4s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}
.step[data-step-key="crop"].step-active .anim-handles .crop-handle:nth-child(2) { animation-delay: 0.1s; }
.step[data-step-key="crop"].step-active .anim-handles .crop-handle:nth-child(3) { animation-delay: 0.2s; }
.step[data-step-key="crop"].step-active .anim-handles .crop-handle:nth-child(4) { animation-delay: 0.3s; }
@keyframes anim-handle-pulse {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%      { transform: scale(1.35); opacity: 0.75; }
}

/* Params: Linien sliden nacheinander rein (stagger) */
.step[data-step-key="params"].step-active .anim-line-1,
.step[data-step-key="params"].step-active .anim-line-2,
.step[data-step-key="params"].step-active .anim-line-3 {
    animation: anim-line-slide 1.8s ease-out infinite;
    transform-origin: 15px center;
}
.step[data-step-key="params"].step-active .anim-line-2 { animation-delay: 0.15s; }
.step[data-step-key="params"].step-active .anim-line-3 { animation-delay: 0.30s; }
@keyframes anim-line-slide {
    0%       { transform: scaleX(0);     opacity: 0; }
    20%      { transform: scaleX(1);     opacity: 1; }
    80%      { transform: scaleX(1);     opacity: 1; }
    100%     { transform: scaleX(1);     opacity: 1; }
}

/* Generate (Cube): echte 3D-Rotation um Y-Achse + Sparkles drumherum.   */
/* Im Aktiv-Zustand laeuft der Cube kontinuierlich, sodass man verschiede */
/* Seitenflaechen sieht. Inactive: statisch im Default-Winkel.            */
.step[data-step-key="generate"].step-active .cube-3d {
    animation: anim-cube-rotate 3.6s linear infinite;
}
@keyframes anim-cube-rotate {
    from { transform: rotateX(-22deg) rotateY(-28deg); }
    to   { transform: rotateX(-22deg) rotateY(332deg); }
}
.step[data-step-key="generate"].step-active .cube-spark {
    animation: anim-spark 1.8s ease-in-out infinite;
}
.step[data-step-key="generate"].step-active .cube-spark.s2 { animation-delay: 0.4s; }
.step[data-step-key="generate"].step-active .cube-spark.s3 { animation-delay: 0.8s; }
@keyframes anim-spark {
    0%, 100% { opacity: 0; transform: scale(0.6); }
    50%      { opacity: 1; transform: scale(1.3); }
}

/* Preview: Floorplan-Trennwaende zeichnen sich versetzt, ueberlappen, halten */
/* alle gemeinsam, faden gemeinsam aus. Gemeinsame Timeline ueber 2.4s.       */
/* Jede Linie braucht zum Zeichnen gleich lang (~15% = 0.36s).                */
.step[data-step-key="preview"].step-active .floor-line {
    stroke-dasharray: 100;
}
.step[data-step-key="preview"].step-active .floor-line.fl1 {
    animation: anim-floor-1 2.4s ease-out infinite;
}
.step[data-step-key="preview"].step-active .floor-line.fl2 {
    animation: anim-floor-2 2.4s ease-out infinite;
}
.step[data-step-key="preview"].step-active .floor-line.fl3 {
    animation: anim-floor-3 2.4s ease-out infinite;
}

/* Phasen pro Linie (Total 2.4s = 100%):                                      */
/*   fl1 zeichnet sich  3–18%   (Start sofort)                                 */
/*   fl2 zeichnet sich 10–25%   (startet WAEHREND fl1 noch laeuft)            */
/*   fl3 zeichnet sich 20–35%   (startet WAEHREND fl2 noch laeuft)            */
/*   alle drei halten 35–80%                                                   */
/*   alle drei faden 80–92% gleichzeitig aus                                   */
/*   Pause 92–100%                                                              */
@keyframes anim-floor-1 {
    0%        { opacity: 0; stroke-dashoffset: 100; }
    3%        { opacity: 1; stroke-dashoffset: 100; }
    18%       { opacity: 1; stroke-dashoffset: 0;   }
    80%       { opacity: 1; stroke-dashoffset: 0;   }
    92%, 100% { opacity: 0; stroke-dashoffset: 0;   }
}
@keyframes anim-floor-2 {
    0%, 10%   { opacity: 0; stroke-dashoffset: 100; }
    13%       { opacity: 1; stroke-dashoffset: 100; }
    25%       { opacity: 1; stroke-dashoffset: 0;   }
    80%       { opacity: 1; stroke-dashoffset: 0;   }
    92%, 100% { opacity: 0; stroke-dashoffset: 0;   }
}
@keyframes anim-floor-3 {
    0%, 20%   { opacity: 0; stroke-dashoffset: 100; }
    23%       { opacity: 1; stroke-dashoffset: 100; }
    35%       { opacity: 1; stroke-dashoffset: 0;   }
    80%       { opacity: 1; stroke-dashoffset: 0;   }
    92%, 100% { opacity: 0; stroke-dashoffset: 0;   }
}

/* Import: Haken zeichnet sich (stroke-dashoffset 100 → 0, dann reset) */
.step[data-step-key="import"].step-active .anim-check {
    stroke-dasharray: 100;
    animation: anim-check-draw 1.8s ease-in-out infinite;
}
@keyframes anim-check-draw {
    0%   { stroke-dashoffset: 100; }
    40%  { stroke-dashoffset: 0;   }
    100% { stroke-dashoffset: 0;   }
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
    .step .anim-arrow,
    .step .anim-march,
    .step .anim-handles .crop-handle,
    .step .anim-line-1,
    .step .anim-line-2,
    .step .anim-line-3,
    .step .cube-3d,
    .step .cube-spark,
    .step .floor-line,
    .step .anim-check {
        animation: none !important;
    }
}

.welcome-terms {
    display: flex;
    justify-content: center;
}

.welcome-terms label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
    font-size: 0.9375rem;
}

.welcome-terms input[type="checkbox"] {
    margin-top: 0.2em;
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
}

.welcome-actions {
    display: flex;
    justify-content: center;
}

.welcome-actions .btn-primary {
    min-width: 12rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* ─────────────────────────────────────────────────────────────────────── */
/* Upload-Screen                                                            */
/* ─────────────────────────────────────────────────────────────────────── */

/* [hidden]-Attribut hat per Browser-Default display:none mit Spezifitaet 0,1,0;
 * unsere class-Regeln (display:flex etc.) ueberschreiben es. Erzwingen.        */
.screen-upload [hidden] { display: none !important; }

.screen-upload {
    display: grid;
    grid-template-columns: 1fr 300px;
    grid-template-rows: auto 1fr;
    gap: var(--shell-spacing-lg);
    align-items: start;
}

.upload-help {
    grid-column: 1 / -1;
    grid-row: 1;
    background: color-mix(in srgb, var(--shell-primary) 8%, var(--shell-bg-elevated));
    border-left: 3px solid var(--shell-primary);
    border-radius: var(--shell-radius);
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
}

.upload-help summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    user-select: none;
    list-style: none;
}
.upload-help summary::-webkit-details-marker { display: none; }

.upload-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--shell-primary);
    color: var(--shell-primary-fg);
    font-size: 0.75rem;
    font-weight: 700;
    font-style: italic;
}

.upload-help ul {
    margin: 0.625rem 0 0;
    padding-left: 1.5rem;
    color: var(--shell-fg-muted);
}
.upload-help li {
    margin: 0.25rem 0;
    line-height: 1.4;
}

/* ── Main-Bereich (Dropzone oder Canvas) ─────────────────────────────── */

.upload-main {
    grid-column: 1;
    grid-row: 2;
    position: relative;
    background: var(--shell-bg-elevated);
    border-radius: var(--shell-radius-lg);
    min-height: 520px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    padding: var(--shell-spacing);
    gap: var(--shell-spacing-sm);
}

.upload-dropzone {
    border: 2px dashed var(--shell-border-strong);
    border-radius: var(--shell-radius);
    flex: 1 1 auto;
    min-height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--shell-fg-muted);
    text-align: center;
    padding: var(--shell-spacing-lg);
    transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.upload-dropzone:hover,
.upload-dropzone.dragover {
    border-color: var(--shell-primary);
    background: color-mix(in srgb, var(--shell-primary) 6%, transparent);
    color: var(--shell-fg);
}

.upload-dropzone-inner {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}
.upload-dropzone-title    { font-size: 1rem; font-weight: 500; }
.upload-dropzone-subtitle { font-size: 0.875rem; opacity: 0.7; }

/* Crop-Canvas = fester Viewport, fuellt den .upload-main-Bereich.
 * KEIN object-fit / height:auto — die Bitmap-Groesse wird in initCropView
 * exakt auf die angezeigte Groesse gesetzt (1:1), sonst sitzen Klick-
 * Koordinaten daneben (Crop-Tool-Drift, siehe CONTRIBUTING Drift-Diary). */
.upload-canvas {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    border-radius: var(--shell-radius);
    background: transparent;
    cursor: default;
}

/* "Ansicht zuruecksetzen" — overlay oben rechts auf dem Crop-Canvas. */
.crop-reset {
    position: absolute;
    top: calc(var(--shell-spacing) + 0.4rem);
    right: calc(var(--shell-spacing) + 0.4rem);
    z-index: 1;
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
}

/* ── PDF-Seitenwahl-Tabs ─────────────────────────────────────────────── */

.pdf-pages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem 0;
}
.pdf-page-btn {
    padding: 0.35rem 0.75rem;
    background: var(--shell-bg);
    border: 1px solid var(--shell-border-strong);
    border-radius: var(--shell-radius);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--shell-fg);
    transition: background-color 0.15s, border-color 0.15s;
}
.pdf-page-btn:hover:not(.active) {
    background: var(--shell-bg-elevated);
    border-color: var(--shell-primary);
}
.pdf-page-btn.active {
    background: var(--shell-primary);
    color: var(--shell-primary-fg);
    border-color: var(--shell-primary);
    font-weight: 600;
}

/* ── Params-Panel ───────────────────────────────────────────────────── */

.params-panel {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: var(--shell-spacing);
    padding: var(--shell-spacing-lg);
    background: var(--shell-bg-elevated);
    border-radius: var(--shell-radius-lg);
}

.params-panel .btn {
    width: 100%;
    justify-content: center;
}

.params-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.params-row label {
    font-size: 0.875rem;
    color: var(--shell-fg-muted);
    font-weight: 500;
}

.input-with-unit {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.input-with-unit .input {
    flex: 1 1 auto;
    width: auto;
}

.input-with-unit .unit-label {
    font-size: 0.875rem;
    color: var(--shell-fg-muted);
    min-width: 1.75rem;
    text-align: left;
}

/* ─────────────────────────────────────────────────────────────────────── */
/* Preview-Screen — Full-Screen-CAD-iframe                                */
/* ─────────────────────────────────────────────────────────────────────── */

/* .screen-preview erbt von .screen: flex / column / width:100% / flex:1 1 auto.
 * app-main hat bei Preview kein Padding mehr (siehe base.css), also fuellt
 * width:100% den ganzen Viewport. Hier nur max-width + auto-margin killen.   */
.screen-preview {
    max-width: none;
    margin: 0;
    background: var(--shell-bg);
}

.preview-frame-container {
    flex: 1 1 auto;
    width: 100%;
    overflow: hidden;
    background: var(--shell-bg);
}

.preview-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: var(--shell-bg);
}