/* Dashboard/Startseite - Redesign-Schicht (Typografie, Textur), wie im PC-Programm */
body {
    font-family: 'Inter', 'Segoe UI', sans-serif;
    background-color: #14141a;
    background-image:
        radial-gradient(ellipse 900px 500px at 15% -10%, rgba(64, 145, 108, 0.10), transparent),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 7px),
        repeating-linear-gradient(-45deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 7px);
}
h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; }
h1 { font-size: 3rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0; }
header p { font-family: 'Inter', sans-serif; }
header .byline { font-family: 'JetBrains Mono', monospace; letter-spacing: 0.03em; }

.stitch-divider { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 10px 0 14px 0; }
.stitch-divider .dash { width: 22px; height: 2px; background: #40916c; border-radius: 1px; opacity: 0.75; }
.stitch-divider .dash:nth-child(2n) { background: #52b788; opacity: 0.5; width: 14px; }
.stitch-divider .x { color: #40916c; font-size: 0.8rem; opacity: 0.6; font-family: 'JetBrains Mono', monospace; }

section { background: linear-gradient(180deg, #1c1c22, #18181d); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 8px 20px rgba(0,0,0,0.25); }

input[type="number"], select, .size-inputs input { font-family: 'JetBrains Mono', monospace !important; font-weight: 500; }

.top-nav-item { border-radius: 10px; }
.top-nav-item.active { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 14px rgba(64,145,108,0.15); }
.dash-card { position: relative; }
.dash-card:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.3); }
#dashboard-search-input:focus { border-color: #40916c; }

/* Layout */
.app-container { max-width: 96vw; width: 100%; margin: 0 auto; }
.main-content { height: calc(100vh - 250px); min-height: 400px; }
.main-content.generator-mode .right-navigation { display: none !important; }

/* WICHTIG: Die Spalten dürfen bei wenig Platz NICHT abgeschnitten werden,
   sondern müssen selbst scrollbar sein - unabhängig von Bildschirm-/Fenstergröße. */
.controls-sidebar, #dashboard-view, #preview-view, #large-dashboard-view {
    overflow-y: auto;
    padding-right: 10px;
}

/* Bei schmaleren Bildschirmen (Tablet/kleines Browserfenster): Spalten
   untereinander stapeln statt nebeneinander zu quetschen, und die feste
   Höhen-Bindung an den Bildschirm aufheben, damit die Seite normal
   durchscrollbar bleibt. */
@media (max-width: 1000px) {
    .main-content {
        display: block !important;
        height: auto !important;
    }
    .controls-sidebar, .preview-area, .right-navigation {
        height: auto !important;
        overflow: visible !important;
        margin-bottom: 20px;
    }
    .top-nav { flex-direction: column; }
    h1 { font-size: 2rem; }
}

.top-nav { display: flex; justify-content: center; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }
.top-nav-item { background: #1a1a1e; border: 1px solid #29292e; padding: 10px 25px; border-radius: 8px; color: #c4c4cc; text-decoration: none; display: flex; align-items: center; gap: 15px; transition: 0.2s; cursor: pointer; }
.top-nav-item.active { border-color: #40916c; background: #232329; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.top-nav-item:hover:not(.active) { border-color: #8f8f9d; color: #fff; }
.top-nav-item.disabled { opacity: 0.5; cursor: not-allowed; }

.view-tabs-bar { display: flex; gap: 10px; margin-bottom: 20px; }
.tab-btn { background: #1a1a1e; border: 1px solid #29292e; color: #8f8f9d; padding: 12px; border-radius: 6px; cursor: pointer; font-weight: bold; flex: 1; transition: 0.2s; font-size: 1rem; }
.tab-btn:hover { background: #29292e; color: #fff; }
.tab-btn.active { background: #40916c; color: #fff; border-color: #52b788; }

.dash-card { background: #232329; border: 1px solid #32323a; border-radius: 6px; padding: 12px; display: flex; flex-direction: column; gap: 8px; transition: 0.2s; }
.dash-card:hover { border-color: #40916c; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.dash-card select { background: #121214; color: #c4c4cc; border: 1px solid #3e3e46; padding: 6px 20px 6px 6px; border-radius: 4px; font-size: 0.75rem; width: 100%; cursor: pointer; text-overflow: ellipsis; }
.dash-btn { background: #29292e; color: #fff; border: 1px solid #3e3e46; padding: 8px; border-radius: 4px; cursor: pointer; font-weight: bold; text-align: center; margin-top: auto; transition: 0.2s; }
.dash-btn:hover { background: #40916c; border-color: #52b788; }

details summary { outline: none; user-select: none; padding: 12px; cursor: pointer; font-weight: bold; color: #c4c4cc; background: #1a1a1e; border: 1px solid #29292e; border-radius: 6px; }
details[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: none; }
details .folder-content { padding: 15px; border: 1px solid #29292e; border-top: none; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; background: #0f0f11; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 15px; }

.size-inputs { display: flex; gap: 10px; align-items: center; }
.size-inputs input { width: 100%; background: #121214; color: #c4c4cc; border: 1px solid #3e3e46; border-radius: 4px; padding: 8px; font-family: inherit; }
.format-preset-btn { background: #1a1a1e; color: #c4c4cc; border: 1px solid #3e3e46; border-radius: 4px; padding: 5px 12px; font-size: 0.78rem; font-weight: bold; cursor: pointer; }
.format-preset-btn:hover { background: #40916c; border-color: #52b788; color: #fff; }
.format-preset-btn.aktiv { background: #40916c; border-color: #52b788; color: #fff; }
.ausrichtung-btn { background: #1a1a1e; color: #8f8f9d; border: 1px solid #3e3e46; border-radius: 6px; padding: 9px 10px; font-size: 0.85rem; font-weight: bold; cursor: pointer; }
.ausrichtung-btn.aktiv { background: #40916c; border-color: #52b788; color: #fff; }

.motiv-section-header { display: flex; justify-content: space-between; align-items: center; height: 36px; margin-bottom: 15px; }
.motiv-section-header h2 { margin: 0 !important; padding-bottom: 0 !important; border-bottom: none !important; text-transform: none !important; letter-spacing: normal !important; font-size: 1.2rem !important; line-height: 1.2 !important; }
/* --- Umbau: Foto-Auswahl & Einstellungen oben statt links, Tabs links statt oben --- */

#foto-auswahl-leiste { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }

#einstellungen-leiste {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    background: #1a1a1e;
    border: 1px solid #29292e;
    border-radius: 8px;
    padding: 18px 20px;
    margin-bottom: 20px;
}
.einstellungen-gruppe { flex: 1; min-width: 220px; }
.einstellungen-gruppe .control-group:last-child { margin-bottom: 0; }
.einstellungen-gruppe-groesse-zoom { flex: 1.6; min-width: 420px; display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.einstellungen-gruppe-regler { flex: 2.2; min-width: 440px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }

/* Keine linke Spalte mehr - "Mein Dashboard" sitzt jetzt oben neben
   "Foto auswählen". Die Vorschau (und im Dashboard-Modus auch "Große
   Motive") nutzen dadurch die volle Breite. */
.main-content { grid-template-columns: 1fr 1fr; }
.main-content.generator-mode { grid-template-columns: 1fr !important; }

@media (max-width: 700px) {
    .main-content { grid-template-columns: 1fr !important; }
}