/* ============================================================
   sim.css - Lokales CSS fuer die Simulationsseiten
   (simulation.html = body.sim-embed, profit-simulation.html = body.sim-full)

   Ersetzt das Tailwind-CDN: enthaelt
   1. Mini-Preflight (die von den Seiten benoetigten Tailwind-Resets)
   2. Exakt die benutzten Utility-Klassen mit Tailwind-v3-Standardwerten
   3. Seitenspezifisches CSS (frueher im <style>-Block der Seiten)
   ============================================================ */

/* ------------------------------------------------------------
   1. Mini-Preflight (Auszug aus Tailwind v3 Preflight)
   ------------------------------------------------------------ */
*, ::before, ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}
html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}
body { margin: 0; line-height: inherit; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; }
a { color: inherit; text-decoration: inherit; }
button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}
button, [type='button'], [type='reset'], [type='submit'] {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}
button { text-transform: none; }
button, [role="button"] { cursor: pointer; }
img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }

/* ------------------------------------------------------------
   2. Utility-Klassen (Tailwind-v3-Werte, nur die benutzten)
   ------------------------------------------------------------ */

/* Position / Display */
.absolute { position: absolute; }
.relative { position: relative; }
.top-3 { top: 0.75rem; }
.left-3 { left: 0.75rem; }
.right-3 { right: 0.75rem; }
.z-20 { z-index: 20; }
.hidden { display: none; }
.flex { display: flex; }
.overflow-hidden { overflow: hidden; }

/* Flexbox */
.flex-1 { flex: 1 1 0%; }
.flex-grow { flex-grow: 1; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }

/* Groessen */
.h-0\.5 { height: 0.125rem; }
.h-1 { height: 0.25rem; }
.h-3 { height: 0.75rem; }
.h-4 { height: 1rem; }
.h-full { height: 100%; }
.w-3 { width: 0.75rem; }
.w-4 { width: 1rem; }
.w-20 { width: 5rem; }
.w-full { width: 100%; }
.max-w-6xl { max-width: 72rem; }
.max-w-\[95rem\] { max-width: 95rem; }
.aspect-\[16\/9\] { aspect-ratio: 16/9; }

/* Margin / Padding */
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.mt-4 { margin-top: 1rem; }
.mt-12 { margin-top: 3rem; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-12 { padding-bottom: 3rem; }
.pl-3 { padding-left: 0.75rem; }
.pt-4 { padding-top: 1rem; }
.pt-8 { padding-top: 2rem; }

/* Rahmen / Radius */
.rounded { border-radius: 0.25rem; }
.rounded-full { border-radius: 9999px; }
.rounded-lg { border-radius: 0.5rem; }
.border { border-width: 1px; }
.border-t { border-top-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-l { border-left-width: 1px; }
.border-l-4 { border-left-width: 4px; }
.border-dashed { border-style: dashed; }
.border-black { border-color: #000; }
.border-gray-100 { border-color: #f3f4f6; }
.border-gray-200 { border-color: #e5e7eb; }
.border-gray-300 { border-color: #d1d5db; }
.border-gray-400 { border-color: #9ca3af; }
.border-t-gray-100 { border-top-color: #f3f4f6; }

/* Hintergruende */
.bg-white { background-color: #fff; }
.bg-gray-50 { background-color: #f9fafb; }
.bg-blue-600 { background-color: #2563eb; }
.bg-\[\#1d4ed8\] { background-color: #1d4ed8; }
.bg-\[\#dcfce7\] { background-color: #dcfce7; }
.bg-\[\#ea580c\] { background-color: #ea580c; }
.bg-\[\#fee2e2\] { background-color: #fee2e2; }

/* Typografie */
.text-center { text-align: center; }
.font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-\[10px\] { font-size: 10px; }
.text-\[9px\] { font-size: 9px; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.font-normal { font-weight: 400; }
.uppercase { text-transform: uppercase; }
.italic { font-style: italic; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.text-white { color: #fff; }
.text-black { color: #000; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-900 { color: #111827; }

/* Effekte / Interaktion */
.opacity-90 { opacity: 0.9; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.cursor-pointer { cursor: pointer; }
.select-none { -webkit-user-select: none; user-select: none; }
.pointer-events-none { pointer-events: none; }
.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:border-blue-600:focus { border-color: #2563eb; }
/* Wie im Original ohne sichtbaren Effekt (setzt nur die Ring-Farbe,
   eine Ring-Breite wurde nie definiert) */
.focus\:ring-gray-500:focus { --tw-ring-color: #6b7280; }
/* .group ist bei Tailwind ein reiner Marker ohne eigene Styles */
.group {}

/* lg:-Varianten (ab 1024px) */
@media (min-width: 1024px) {
    .lg\:flex-row { flex-direction: row; }
    .lg\:w-\[75\%\] { width: 75%; }
    .lg\:w-\[25\%\] { width: 25%; }
}

/* ------------------------------------------------------------
   3a. Gemeinsames Seiten-CSS (Chart-Interaktion, beide Seiten)
   ------------------------------------------------------------ */
#chart-wrapper { transition: border-color 0.2s, box-shadow 0.2s; position: relative; }

/* Standard: Cursor-Modus (Linie schieben) */
#chart-container { touch-action: pan-y; /* vertikales Scrollen bleibt moeglich; die Engine schaltet im Zoom-Modus per Inline-Style auf none */ }
#chart-container.mode-cursor { cursor: crosshair; }
#chart-container.mode-cursor:hover { cursor: col-resize; }

/* Zoom-Modus */
#chart-container.mode-zoom { cursor: grab; }
#chart-container.mode-zoom:active { cursor: grabbing; }

/* Visuelles Feedback wenn Zoom aktiv ist */
.zoom-active-border {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Toolbar-Buttons (Groesse/Radius pro Seite unten) */
.tool-btn {
    display: flex; align-items: center; justify-content: center;
    color: #6b7280;
    background: white;
    border: 1px solid #e5e7eb;
    transition: all 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.tool-btn.active {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
}

/* Ungueltige Zahleneingabe: roter Rahmen, letzter gueltiger Wert bleibt aktiv */
.input-invalid { border-color: #dc2626 !important; }

/* ------------------------------------------------------------
   3b. simulation.html (Embed-Widget im iframe)
   ------------------------------------------------------------ */
body.sim-embed {
    margin: 0; padding: 0; background-color: transparent;
    overflow: hidden;
    font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
}
body.sim-embed .tool-btn { width: 32px; height: 32px; border-radius: 6px; }
body.sim-embed .tool-btn:hover { background: #f9fafb; color: #1f2937; }

body.sim-embed .main-wrapper {
    display: flex; flex-direction: row; gap: 1rem; align-items: flex-start;
    height: 100vh; width: 100%; background: white; padding: 10px; box-sizing: border-box;
}
body.sim-embed .chart-column { flex: 1 1 65%; width: 65%; display: flex; flex-direction: column; height: 100%; }
body.sim-embed .controls-column { flex: 0 0 35%; width: 35%; display: flex; flex-direction: column; height: 100%; padding-right: 10px; overflow-y: auto; }
body.sim-embed .page-title { display: none !important; }

/* Mobile: Inhalte untereinander, Legende kompakt (einzeilig umbrechend) statt versteckt */
@media (max-width: 768px) {
    body.sim-embed { overflow-y: auto; }
    body.sim-embed .main-wrapper { flex-direction: column; height: auto; min-height: 100vh; }
    body.sim-embed .chart-column { width: 100%; height: 50vh; flex: none; margin-bottom: 15px; }
    body.sim-embed .controls-column { width: 100%; height: auto; flex: none; overflow-y: visible; padding-right: 0; }
    body.sim-embed .legend-box { margin-bottom: 8px; padding: 6px 8px; }
    body.sim-embed .legend-box > .flex { flex-direction: row; flex-wrap: wrap; gap: 8px; }
    body.sim-embed .legend-box .font-bold { display: none; }
}

/* ------------------------------------------------------------
   3c. profit-simulation.html (Vollseite)
   ------------------------------------------------------------ */
body.sim-full .tool-btn { width: 36px; height: 36px; border-radius: 9999px; }
body.sim-full .tool-btn:hover { background: #f9fafb; color: #2563eb; }

/* Header / Titelleiste */
body.sim-full header { background: #fff; border-bottom: 1px solid #e0e0e0; padding: 15px 0; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02); }
body.sim-full .header-content { max-width: 900px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
body.sim-full .logo-area { display: flex; flex-direction: column; }
body.sim-full .brand { text-decoration: none; }
body.sim-full .main-title { font-size: 28px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.2; color: #002d5b; margin: 0; }
body.sim-full .title-accent { color: #0066cc; }

/* Bottom-Navigation: Rückweg zur Übersicht (Buttons wie style.css) */
body.sim-full .bottom-nav { margin-top: 40px; }
body.sim-full .bottom-nav .btn { display: inline-block; padding: 12px 24px; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 15px; transition: all 0.2s; }
body.sim-full .bottom-nav .btn-back { background-color: #fff; color: #333; border: 1px solid #ccc; }
body.sim-full .bottom-nav .btn-back:hover { background-color: #f5f5f5; border-color: #bbb; }

/* Call/Put-Tabs */
.tab-active { background-color: #1a202c; color: white; border-color: #1a202c; }
.tab-inactive { background-color: #f9fafb; color: #4b5563; }
.tab-inactive:hover { background-color: #f3f4f6; }

/* Erst-Nutzungs-Hinweis im Chart (verschwindet bei der ersten Interaktion) */
#drag-hint {
    position: absolute;
    left: 50%;
    bottom: 14%;
    transform: translateX(-50%);
    background: rgba(29, 78, 216, 0.9);
    color: #fff;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 9999px;
    pointer-events: none;
    z-index: 15;
    white-space: nowrap;
    max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Wert-Zerlegung (Zeitwert-Modus, profit-simulation2 / Kapitel 4):
   tabellarische Zeilen - links Bezeichnung, rechts Rechnung mit
   hellgrauer Formel darunter, rechts aussen das Resultat
   (Darstellungs-Entscheid Jürg, 08.08.2026) */
.zz-zeile {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid #e5e7eb;
}
.zz-zeile:last-child { border-bottom: none; padding-bottom: 0; }
.zz-label { flex: 1; font-weight: 600; color: #111827; }
.zz-mitte { text-align: right; color: #374151; }
.zz-grau { color: #9ca3af; font-size: 10px; }
.zz-resultat { min-width: 52px; text-align: right; font-weight: 700; }