/* Extracted from public/index.html style block 30. */
:root {
    --ws-bg: #070b11;
    --ws-panel: #0d141e;
    --ws-panel-2: #111a26;
    --ws-panel-3: #172231;
    --ws-line: rgba(144, 164, 193, .18);
    --ws-line-strong: rgba(144, 164, 193, .30);
    --ws-text: #f3f6fa;
    --ws-soft: #c7d0dc;
    --ws-muted: #7e8a9a;
    --ws-blue: #3478ff;
    --ws-blue-soft: rgba(52,120,255,.14);
    --ws-green: #37d68a;
    --ws-red: #ff6170;
    --ws-orange: #f3ae48;
    --ws-radius: 6px;
}

/* ---------------------------------------------------------------- */
/* 01 – WORKSTATION-FRAME                                           */
/* ---------------------------------------------------------------- */
html,
body {
    min-height: 100%;
    background:
        linear-gradient(rgba(255,255,255,.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.009) 1px, transparent 1px),
        radial-gradient(circle at 72% -8%, rgba(52,120,255,.13), transparent 32%),
        var(--ws-bg) !important;
    background-size: 32px 32px, 32px 32px, auto, auto !important;
}

body {
    padding: 7px 10px 12px !important;
    color: var(--ws-text) !important;
    font-family: Inter, "Segoe UI", Arial, sans-serif !important;
}

/* Alle großen Arbeitsbereiche wirken wie angedockte Terminalmodule. */
.v2-workspace {
    border: 1px solid var(--ws-line) !important;
    border-radius: 7px !important;
    background: rgba(9,14,22,.96) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.34) !important;
    overflow: hidden !important;
}

/* ---------------------------------------------------------------- */
/* 02 – TOPBAR ALS TERMINAL COMMAND HEADER                           */
/* ---------------------------------------------------------------- */
.v31-topbar {
    min-height: 64px !important;
    padding: 8px 11px !important;
    border: 1px solid var(--ws-line) !important;
    border-radius: 7px !important;
    background:
        linear-gradient(90deg, rgba(52,120,255,.13), transparent 29%),
        #0b121c !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.28) !important;
}

.v31-brand-copy strong {
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: .035em !important;
}

.v31-brand-copy span {
    font-size: 11px !important;
    color: #9cb3d3 !important;
}

.v31-context-item span,
.v31-status-rack span,
.v31-user-zone span {
    font-size: 10px !important;
}

.v31-context-item strong,
.v31-status-rack strong,
.v31-user-zone strong {
    font-size: 12px !important;
}

/* ---------------------------------------------------------------- */
/* 03 – HAUPTNAVIGATION ALS MODULLEISTE                              */
/* ---------------------------------------------------------------- */
.dp-app-navigation {
    min-height: 50px !important;
    padding: 5px 8px !important;
    border: 1px solid var(--ws-line) !important;
    border-radius: 7px 7px 0 0 !important;
    background: #0e1621 !important;
    box-shadow: none !important;
}

.dp-app-navigation .tabs-left {
    display: flex !important;
    gap: 5px !important;
}

.dp-app-navigation .tab-btn {
    min-width: 96px !important;
    min-height: 38px !important;
    padding: 0 18px !important;
    border: 1px solid transparent !important;
    border-radius: 5px !important;
    color: #aeb9c7 !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 780 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

.dp-app-navigation .tab-btn:hover {
    border-color: rgba(144,164,193,.18) !important;
    background: rgba(255,255,255,.035) !important;
    color: #ffffff !important;
}

.dp-app-navigation .tab-btn.active {
    border-color: rgba(52,120,255,.62) !important;
    background:
        linear-gradient(180deg, rgba(52,120,255,.28), rgba(52,120,255,.12)) !important;
    color: #ffffff !important;
    box-shadow:
        inset 0 -2px 0 #4d88ff,
        0 7px 17px rgba(52,120,255,.18) !important;
}

.v31-nav-chip {
    min-height: 32px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    border: 1px solid rgba(52,120,255,.35) !important;
    border-radius: 5px !important;
    background: rgba(52,120,255,.08) !important;
    color: #a8c2f7 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .06em !important;
}

.v31-start-button {
    min-width: 165px !important;
}

/* ---------------------------------------------------------------- */
/* 04 – SYSTEM RAIL                                                 */
/* ---------------------------------------------------------------- */
.tde-system-rail {
    min-height: 43px;
    margin: 0 0 8px;
    padding: 0 10px;
    display: flex;
    align-items: stretch;
    border: 1px solid var(--ws-line);
    border-top: none;
    border-radius: 0 0 7px 7px;
    background: #0a111a;
    box-shadow: 0 8px 22px rgba(0,0,0,.22);
}

.tde-rail-group {
    min-width: 150px;
    padding: 6px 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid rgba(144,164,193,.12);
}

.tde-rail-group:first-child {
    padding-left: 4px;
}

.tde-rail-label {
    color: #687687;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .10em;
}

.tde-rail-group strong {
    margin-top: 2px;
    color: #dce4ee;
    font-size: 11px;
    font-weight: 760;
    letter-spacing: .035em;
}

.tde-rail-dot {
    width: 7px;
    height: 7px;
    margin-right: 5px;
    display: inline-block;
    border-radius: 50%;
    background: var(--ws-green);
    box-shadow: 0 0 9px rgba(55,214,138,.66);
}

.tde-rail-spacer {
    flex: 1;
}

.tde-rail-compact {
    min-width: 122px;
}

/* ---------------------------------------------------------------- */
/* 05 – DASHBOARD ALS DREISPALTIGES TRADING DESK                    */
/* ---------------------------------------------------------------- */
.v2-shell {
    grid-template-columns: 420px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 8px !important;
    background: #080d14 !important;
}

.v2-control-center,
.v2-analysis-center {
    border: 1px solid var(--ws-line) !important;
    border-radius: var(--ws-radius) !important;
    background: var(--ws-panel) !important;
    box-shadow: none !important;
}

.v2-control-center {
    gap: 7px !important;
    padding: 8px !important;
}

.v2-analysis-center {
    padding: 8px !important;
}

/* Karten nicht mehr wie Webkarten, sondern wie angedockte Module. */
.v2-control-card,
.v2-execution-card,
.v2-data-card,
.v3-decision-engine,
.v3-validation-bar,
.v2-table-card {
    border: 1px solid var(--ws-line) !important;
    border-radius: 5px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.016), transparent 45%),
        var(--ws-panel-2) !important;
    box-shadow: none !important;
}

.v2-panel-heading,
.v2-cockpit-heading {
    min-height: 45px !important;
    padding: 5px 7px 10px !important;
}

.v2-panel-heading h2,
.v2-cockpit-heading h2 {
    font-size: 17px !important;
}

.v2-section-head h3,
.v2-data-card h3,
.v3-decision-header h3,
.v2-table-toolbar h2 {
    font-size: 14px !important;
}

.v2-field > span,
.v3-summary-row span,
.v3-level-row span,
.v3-validation-stat span,
.v3-validation-actions label > span {
    font-size: 12px !important;
}

.v2-field input,
.v2-field select,
.v3-validation-actions select {
    min-height: 39px !important;
    font-size: 14px !important;
}

/* ---------------------------------------------------------------- */
/* 06 – ENTSCHEIDUNGSZENTRUM                                        */
/* ---------------------------------------------------------------- */
.v3-decision-engine {
    overflow: hidden !important;
}

.v3-decision-header {
    min-height: 48px !important;
    padding: 8px 11px !important;
    background: #111b28 !important;
    border-bottom: 1px solid var(--ws-line) !important;
}

.v3-decision-grid {
    gap: 7px !important;
    padding: 7px !important;
}

.v3-report-pane,
.v3-summary-pane,
.v3-levels-pane {
    border: 1px solid rgba(144,164,193,.13) !important;
    border-radius: 5px !important;
    background: #0c131d !important;
}

.v3-pane-title {
    min-height: 34px !important;
    padding: 9px 10px !important;
    border-bottom: 1px solid rgba(144,164,193,.12) !important;
    color: #aab9cc !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.v3-report-pane textarea {
    height: 190px !important;
    min-height: 190px !important;
    border: none !important;
    border-radius: 0 !important;
    background: #090f17 !important;
    color: #edf2f8 !important;
    font-size: 13px !important;
    line-height: 1.58 !important;
}

.v3-decision-primary {
    min-height: 58px !important;
    font-size: 26px !important;
}

.v3-summary-row,
.v3-level-row {
    min-height: 32px !important;
    padding: 6px 10px !important;
}

.v3-summary-row strong,
.v3-level-row strong {
    font-size: 13px !important;
}

/* Validation ist eine echte Order-Confirmation-Zeile. */
.v3-validation-bar {
    grid-template-columns:
        minmax(215px, 1.05fr)
        minmax(125px, .55fr)
        minmax(125px, .55fr)
        minmax(150px, .70fr)
        minmax(375px, 1.35fr) !important;
    gap: 8px !important;
    padding: 8px !important;
}

.v3-validation-title,
.v3-validation-stat,
.v3-validation-actions {
    min-height: 62px !important;
    border: 1px solid rgba(144,164,193,.12) !important;
    border-radius: 5px !important;
    background: #0e1621 !important;
}

.v3-validation-title strong {
    font-size: 14px !important;
}

.v3-validation-title small {
    font-size: 10px !important;
}

.v3-validation-stat strong {
    font-size: 14px !important;
}

.v3-validation-actions {
    grid-template-columns: minmax(150px, .8fr) minmax(190px, 1fr) !important;
    gap: 20px !important;
    padding: 9px 12px !important;
}

.v3-validation-actions select,
.v3-validation-actions .v2-btn-success {
    min-height: 41px !important;
    margin: 0 !important;
}

/* ---------------------------------------------------------------- */
/* 07 – JOURNAL ALS AUDIT TERMINAL                                   */
/* ---------------------------------------------------------------- */
.v2-workspace-journal,
.v2-workspace-backtest {
    padding: 0 !important;
    background: #080d14 !important;
}

.v2-workspace-header {
    min-height: 82px !important;
    padding: 13px 16px !important;
    border-bottom: 1px solid var(--ws-line) !important;
    background:
        linear-gradient(90deg, rgba(52,120,255,.08), transparent 38%),
        #0c141f !important;
}

.v2-workspace-header h1 {
    margin: 3px 0 2px !important;
    font-size: 23px !important;
    letter-spacing: .01em !important;
}

.v2-workspace-header p {
    color: #8f9dad !important;
    font-size: 12px !important;
}

.v2-table-card {
    margin: 9px !important;
    overflow: hidden !important;
}

.v2-table-toolbar {
    min-height: 55px !important;
    padding: 9px 12px !important;
    border-bottom: 1px solid var(--ws-line) !important;
    background: #111b28 !important;
}

.v2-table-toolbar h2 {
    margin-top: 2px !important;
    color: #ffffff !important;
    font-size: 16px !important;
}

.v2-table-scroll {
    max-height: calc(100vh - 310px) !important;
    overflow: auto !important;
    background: #080d14 !important;
}

.journal-table {
    border: none !important;
    border-radius: 0 !important;
    background: #080d14 !important;
}

.journal-table thead {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
}

.journal-table thead th {
    height: 44px !important;
    padding: 10px 12px !important;
    border-right: 1px solid rgba(144,164,193,.10) !important;
    border-bottom: 1px solid var(--ws-line-strong) !important;
    background: #172230 !important;
    color: #cbd5e1 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .045em !important;
}

.journal-table tbody td {
    height: 41px !important;
    padding: 9px 12px !important;
    border-right: 1px solid rgba(144,164,193,.055) !important;
    border-bottom: 1px solid rgba(144,164,193,.075) !important;
    color: #e4eaf1 !important;
    font-size: 13px !important;
}

.journal-table tbody tr:nth-child(even) {
    background: rgba(255,255,255,.014) !important;
}

.journal-table tbody tr:hover {
    background: rgba(52,120,255,.09) !important;
}

.v2-helper-text {
    color: #9aa7b7 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
}

/* ---------------------------------------------------------------- */
/* 09 – BUTTONS                                                      */
/* ---------------------------------------------------------------- */
.v2-btn {
    border-radius: 5px !important;
    font-size: 13px !important;
    font-weight: 780 !important;
}

.v2-btn-primary {
    background: linear-gradient(180deg, #3d80ff, #2862df) !important;
}

.v2-btn-secondary {
    border: 1px solid rgba(111,160,230,.52) !important;
    background: #1b2b40 !important;
    color: #e7f0ff !important;
}

.v2-btn-danger {
    border: 1px solid rgba(255,97,112,.48) !important;
    background: #54222c !important;
    color: #ffe8eb !important;
}

.v2-btn-success {
    background: linear-gradient(180deg, #239966, #19774f) !important;
}

/* ---------------------------------------------------------------- */
/* 10 – RESPONSIVE WORKSTATION                                       */
/* ---------------------------------------------------------------- */
@media (max-width: 1360px) {
    .tde-rail-group {
        min-width: 125px;
        padding-inline: 10px;
    }

    .v2-shell {
        grid-template-columns: 390px minmax(0, 1fr) !important;
    }

    .v3-validation-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .v3-validation-title,
    .v3-validation-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1050px) {
    .tde-system-rail {
        overflow-x: auto;
    }

    .tde-rail-spacer {
        display: none;
    }

    .v2-shell {
        grid-template-columns: 1fr !important;
    }

    .v2-table-scroll {
        max-height: 520px !important;
    }
}

/* Extracted from public/index.html style block 31 id=cr-0011-2-lifecycle-dialog-styles. */
.journal-lifecycle-button { min-width: 170px; white-space: nowrap; }
.journal-lifecycle-complete { color: #40d98b; font-weight: 700; }
.journal-lifecycle-neutral { color: #8fa0b5; }
.journal-lifecycle-actions {
    display: grid;
    gap: 7px;
    min-width: 180px;
}
.journal-lifecycle-actions .v2-btn { width: 100%; }
.journal-history-button { min-height: 32px !important; }
.journal-history-dialog { width: min(720px, 100%); }
.journal-history-feedback {
    margin: 18px 20px;
    color: #9fb1c5;
}
.journal-history-feedback.error { color: #ff7b83; }
.journal-history-list {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0 20px 20px;
    list-style: none;
}
.journal-history-entry {
    position: relative;
    display: grid;
    grid-template-columns: 155px minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
    border: 1px solid #263d53;
    border-left: 4px solid #2d7dff;
    border-radius: 8px;
    background: #101f2e;
}
.journal-history-entry.is-completed { border-left-color: #34c879; }
.journal-history-entry time {
    color: #91a7bd;
    font-size: 11px;
    line-height: 1.5;
}
.journal-history-entry strong {
    display: block;
    margin-bottom: 5px;
    color: #eef6ff;
}
.journal-history-change {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    color: #b6c6d6;
}
.journal-history-change b { color: #fff; }
.journal-history-change i { color: #5e8fc2; font-style: normal; }
.journal-history-intervention {
    margin-top: 8px;
    color: #d9b967;
    font-size: 11px;
}
.journal-lifecycle-overlay {
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(2, 7, 13, .82);
    backdrop-filter: blur(5px);
}
.journal-lifecycle-overlay[hidden] { display: none !important; }
.journal-lifecycle-dialog {
    width: min(620px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    border: 1px solid #2d4c6a;
    border-radius: 12px;
    background: #0e1926;
    color: #eef6ff;
    box-shadow: 0 22px 70px rgba(0, 0, 0, .55);
}
.journal-lifecycle-dialog > header,
.journal-lifecycle-dialog > footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid #203448;
}
.journal-lifecycle-dialog > footer {
    justify-content: flex-end;
    border-top: 1px solid #203448;
    border-bottom: 0;
}
.journal-lifecycle-dialog h2 { margin: 3px 0; font-size: 20px; }
.journal-lifecycle-dialog p { margin: 4px 0 0; color: #9fb1c5; }
.journal-lifecycle-details {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 18px 20px 8px;
}
.journal-lifecycle-details div {
    min-width: 0;
    padding: 10px;
    border: 1px solid #243a50;
    border-radius: 7px;
    background: #101f2e;
}
.journal-lifecycle-details span,
.journal-lifecycle-field > span {
    display: block;
    margin-bottom: 5px;
    color: #8fa6bd;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}
.journal-lifecycle-details strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.journal-lifecycle-field,
.journal-lifecycle-check,
.journal-lifecycle-warning,
.journal-lifecycle-feedback {
    margin: 12px 20px !important;
}
.journal-lifecycle-field select {
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
}
.journal-lifecycle-check {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #d8e5f2;
}
.journal-lifecycle-check input { width: 18px; height: 18px; }
.journal-lifecycle-warning {
    padding: 10px 12px;
    border-left: 3px solid #e7ad32;
    background: #1c2630;
    color: #e5c982 !important;
}
.journal-lifecycle-feedback {
    min-height: 20px;
    color: #aebfd1;
}
.journal-lifecycle-feedback.success { color: #40d98b; }
.journal-lifecycle-feedback.error { color: #ff7b83; }
@media (max-width: 620px) {
    .journal-lifecycle-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .journal-lifecycle-dialog > footer { flex-direction: column-reverse; }
    .journal-lifecycle-dialog > footer .v2-btn { width: 100%; }
    .journal-history-entry { grid-template-columns: 1fr; }
    .journal-history-change { grid-template-columns: 1fr; }
    .journal-history-change i { display: none; }
}


/* HOTFIX-101 – Decision Transparency UI Clarity
   Status- und Begründungstexte sind fachliche Evidence und dürfen nicht
   durch Ellipsis verborgen werden. Die Karten wachsen bei Bedarf mehrzeilig. */
.v3-validation-stat strong {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.25 !important;
}

.v3-validation-stat {
    min-height: 62px !important;
    height: auto !important;
}