/* Einheitliches Box-Modell für alle Elemente */
*,
*::before,
*::after {
    box-sizing: border-box;
}


@font-face {
    font-family: 'Cabin Sketch';
    src: url('/fonts/CabinSketch-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Cabin Sketch';
    src: url('/fonts/CabinSketch-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Font Awesome 5 Free';
    src: url('/webfonts/fa-regular-400.woff2') format('woff2'),
         url('/webfonts/fa-regular-400.woff') format('woff');
}

:root {
    --app-font-family: "Roboto", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}


body {
    font-family: var(--app-font-family);
    font-size: 10px !important;
    color: #333;
    background-color: white;
}

/*
body, svg text {
  font-family: 'Cabin Sketch', sans-serif;
}
*/
svg text {
    font-family: var(--app-font-family) !important;
}

/* Dark Mode Styles */
.dark-mode {
    background-color: #333333 !important;
    color: white !important;
}

/* Wichtig: Buttons haben teils semantische Farben (Long/Short/Reset). */
.dark-mode button {
    color: white !important;
}

.dark-mode input {
    background-color: #333333 !important;
    color: white !important;
    border-color: white !important;
}

.dark-mode label {
    color: white !important;
}

.dark-mode select {
    background-color: #333333 !important;
    color: white !important;
    border-color: white !important;
}

.dark-mode .modal-content {
    background-color: #333333 !important;
    color: white !important;
}

.dark-mode .checkbox-item {
    color: white !important;
}

.dark-mode .slider-container {
    color: white !important;
    background-color: #3a3a3a !important;
    border-color: #94a3b8 !important;
}

.dark-mode .persistent-settings-panel {
    color: white !important;
    background-color: #3a3a3a !important;
    border-color: #94a3b8 !important;
}

.dark-mode .persistent-settings-panel label,
.dark-mode .persistent-settings-panel .checkbox-item,
.dark-mode .persistent-settings-panel .checkbox-icon {
    color: white !important;
}

.dark-mode .tab-button {
    background-color: #333333 !important;
    color: white !important;
}

.dark-mode .long-button, .dark-mode .short-button {
    /* Farben beibehalten für Kontrast */
    /* background-color: #333333 !important; */
    /* color: white !important; */
}

/* Modal-spezifische Dark Mode Regeln */
.dark-mode .modal {
    background-color: rgba(0, 0, 0, 0.6) !important;
}

.dark-mode .modal-content {
    background-color: #333333 !important;
    color: white !important;
    border-color: #666 !important;
}

.dark-mode .tab .tablinks {
    background-color: #555 !important;
    color: white !important;
    border-color: #666 !important;
}

.dark-mode .tab .tablinks:hover {
    background-color: #777 !important;
}

.dark-mode .tab .tablinks.active {
    background-color: #666 !important;
}

.dark-mode .tabcontent {
    background-color: #333333 !important;
    color: white !important;
    border-color: #666 !important;
}

.dark-mode .optionsTable th,
.dark-mode .optionsTable td {
    border-color: #666 !important;
    color: white !important;
    background-color: #333333 !important;
}

.dark-mode .highlightedStrike {
    border-color: white !important;
    background-color: #555 !important;
}

.dark-mode .close {
    color: #ccc !important;
}

.dark-mode .close:hover,
.dark-mode .close:focus {
    color: white !important;
}
.dark-mode input[type="range"] {
    background-color: transparent !important;
}

.dark-mode .inputField {
    color: white !important;
    border-color: white !important;
    background-color: #333333 !important;
}

.dark-mode .slider-container label,
.dark-mode .slider-container span,
.dark-mode .slider-container div {
    color: white !important;
}

.dark-mode .checkbox-item,
.dark-mode .checkbox-item label {
    color: white !important;
}

.dark-mode .tab-content,
.dark-mode .tab-pane {
    background-color: #333333 !important;
    color: white !important;
}

.dark-mode .grid-container,
.dark-mode .main-content,
.dark-mode .sidebar {
    background-color: #333333 !important;
    color: white !important;
}

.dark-mode .value-container,
.dark-mode .positions-table {
    background-color: #333333 !important;
    color: white !important;
}

.dark-mode .value-data {
    color: #e5e7eb !important;
}

.dark-mode .legend {
    background-color: rgba(31, 41, 55, 0.88) !important;
    color: white !important;
}

/* === Dark Mode: semantische Button-Farben beibehalten === */
.dark-mode button.long-button {
    background-color: #28a745 !important;
    color: white !important;
}

.dark-mode button.short-button {
    background-color: #dc3545 !important;
    color: white !important;
}

.dark-mode button.reset-button {
    background-color: #007bff !important;
    color: white !important;
}

.dark-mode button.long-button:hover {
    background-color: #218838 !important;
}

.dark-mode button.short-button:hover {
    background-color: #c82333 !important;
}

.dark-mode button.reset-button:hover {
    background-color: #0056b3 !important;
}

/* Generische Buttons (ohne semantische Farbe) */
.dark-mode button:not(.long-button):not(.short-button):not(.reset-button) {
    background-color: #444 !important;
    color: white !important;
    border: 1px solid #666 !important;
}

/* === OptionChain Swiper Modal (id="modal-option-chain") === */
.dark-mode #modal-option-chain,
.dark-mode .modal-content-option-chain {
    background-color: #333333 !important;
    color: white !important;
}

.dark-mode .modal-bar {
    background-color: #94a3b8 !important;
}

.dark-mode #addDurationContainerSwiper,
.dark-mode #addDurationContainer {
    color: white !important;
    border: 1px solid #94a3b8 !important;
    background-color: #444 !important;
}

.dark-mode #addDurationContainerSwiper .add-duration-plus::before,
.dark-mode #addDurationContainerSwiper .add-duration-plus::after {
    background-color: #f8fafc !important;
}

.dark-mode #dropdown-container select,
.dark-mode #dropdown-container option {
    background-color: #444 !important;
    color: white !important;
    border-color: #94a3b8 !important;
}

.dark-mode .swiper-header,
.dark-mode .horizontal-swiper-wrapper {
    background-color: #333333 !important;
    color: white !important;
}

.dark-mode .optionsTable {
    background-color: #2b2b2b !important;
}

.dark-mode .optionsTable th {
    background-color: #444 !important;
    color: white !important;
    border-color: #666 !important;
}

.dark-mode .optionsTable td {
    border-color: #666 !important;
}

.dark-mode .optionsTable tr:hover td {
    background-color: #3d3d3d !important;
}

.dark-mode #compare-choice-container,
.dark-mode #display-option-container,
.dark-mode #display-option-container-00,
.dark-mode #leg-display-container,
.dark-mode #select-option-button {
    border-color: #94a3b8 !important;
    background-color: #3a3a3a !important;
    color: #f8fafc !important;
}

.dark-mode .compare-option,
.dark-mode .display-option,
.dark-mode .slide-option {
    color: #e5e7eb !important;
}

.dark-mode .leg-option-pill {
    color: #fff !important;
}

.dark-mode .compare-option.selected,
.dark-mode .display-option.selected,
.dark-mode .slide-option.selected,
.dark-mode .leg-option.overlay-on {
    background-color: #64748b !important;
    color: #f8fafc !important;
}