@import "alerts.css";

/* --- Global / Base --- */
.root {
    /* Color Palette based on NeverLose design concept */
    -never-blue: #1a3a8f; /* Deep royal blue for "Never" elements */
    -lose-orange: #ff7b29; /* Vibrant warm orange for "Lose" elements */
    -accent-silver: #c0c0c0; /* Polished silver for interactive elements */
    -accent-gold: #d4af37; /* Matte gold for premium accents */
    -bg-light: #f5f5f0; /* Light warm gray background */
    -bg-dark: #2a2a2a; /* Deep charcoal for dark mode */
    -text-primary: #333333; /* Primary text color */
    -text-secondary: #666666; /* Secondary text color */

    /* Typography */
    -fx-font-family: "Lato, 'Segoe UI', System"; /* Modern sans-serif for body text */
    -fx-font-size: 13px;
    -fx-base: -bg-light; /* Light background base */
    -fx-background: -bg-light; /* Light warm gray background */
    -fx-text-fill: -text-primary; /* Standard text color */
}

/* --- Global override: never use ellipsis for text overrun --- */
.label, .button, .toggle-button, .check-box, .radio-button, .list-cell, .table-cell, .tab .tab-label, .titled-pane > .title {
    -fx-text-overrun: clip;
}

/* --- Top Bar --- */
.top-search-bar {
    -fx-background-color: -bg-light;
    -fx-border-color: -accent-silver;
    -fx-border-width: 0 0 1 0; /* Bottom line only */
    -fx-padding: 5 10 5 10;
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.1), 3, 0, 0, 1);
    -fx-alignment: CENTER_LEFT;
    -fx-spacing: 10;
    -fx-pref-height: 40.0;
}

/* Dynamic components container in TopBar */
.dynamic-components-container {
    -fx-min-height: 30px;
}

.search-field {
    -fx-background-radius: 20px 0 0 20px; /* Größere abgerundete Ecken, links */
    -fx-border-radius: 20px 0 0 20px;
    -fx-border-color: transparent;
    -fx-background-color: white;
    -fx-padding: 5 10 5 10;
    -fx-prompt-text-fill: -text-secondary;
    -fx-font-family: "Lato, 'Segoe UI', System"; /* Sans-serif for UI elements */
    -fx-border-insets: 0;
    -fx-background-insets: 0;
    -fx-pref-height: 30; /* Angepasste Höhe */
    -fx-font-size: 13px; /* Angepasste Schriftgröße */
}

.search-field:focused {
    -fx-border-color: -never-blue; /* Blue accent on focus */
    -fx-border-width: 1px;
    -fx-effect: dropshadow(gaussian, rgba(26, 58, 143, 0.3), 5, 0, 0, 1);
}

/* Search container (HBox containing search field and label) */
.search-container {
    -fx-background-radius: 20px; /* Größere abgerundete Ecken */
    -fx-border-radius: 20px;
    -fx-border-color: -accent-silver;
    -fx-background-color: white;
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.15), 5, 0, 0, 2);
    -fx-border-width: 1px;
    -fx-border-insets: 0;
    -fx-background-insets: 0;
    -fx-padding: 0;
    -fx-pref-height: 30px;
    -fx-alignment: CENTER;
}

/* Label next to search field */
.search-label {
    -fx-background-color: #ececec;
    -fx-text-fill: -text-secondary;
    -fx-font-family: "Lato, 'Segoe UI', System";
    -fx-padding: 5 15 5 10;
    -fx-background-radius: 0 20px 20px 0; /* Größere abgerundete Ecken, rechts */
    -fx-border-radius: 0 20px 20px 0;
    -fx-alignment: center;
    -fx-min-width: 70;
    -fx-pref-height: 30; /* Angepasste Höhe */
    -fx-cursor: hand;
    -fx-border-insets: 0;
    -fx-background-insets: 0;
    -fx-font-size: 13px; /* Angepasste Schriftgröße */
}

/* --- Bottom Bar (Footer) --- */
.footer-bar {
    -fx-background-color: -bg-light;
    -fx-border-color: -accent-silver;
    -fx-border-width: 1 0 0 0; /* Top line only */
    -fx-padding: 5 10 5 10;
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.05), 3, 0, 0, -1);
    -fx-alignment: CENTER_LEFT;
    -fx-spacing: 10;
}

.footer-label {
    -fx-font-size: 12pt;
    -fx-font-weight: bold;
    -fx-text-fill: #c0c0c0;
    -fx-font-family: "Garamond, Baskerville, 'Times New Roman', serif";
    -fx-effect: /* Sanfte Vertiefung */ innershadow(one-pass-box, rgba(0, 0, 0, 0.3), 2, 0.0, 0, -1),
        /* Heller Metallglanz */ innershadow(one-pass-box, rgba(255, 255, 255, 0.6), 1, 0.0, 0, 1);
    -fx-alignment: center-left;
    -fx-cursor: hand;
    -fx-underline: false;
}

.footer-label:hover {
    -fx-text-fill: -never-blue; /* Blue color on hover */
    -fx-effect: dropshadow(gaussian, rgba(26, 58, 143, 0.3), 5, 0, 0, 1);
}

.footer-label:pressed {
    -fx-scale-x: 0.95;
    -fx-scale-y: 0.95;
}

.new-plan-button {
    -fx-text-fill: white;
    -fx-font-weight: bold;
    -fx-font-family: "Lato, 'Segoe UI', System"; /* Sans-serif for UI elements */
    -fx-font-size: 14px; /* slightly larger for better prominence */
    -fx-background-radius: 5px;
    -fx-border-radius: 5px;
    -fx-padding: 7 14 7 14; /* a bit more padding to enlarge the button */
    -fx-cursor: hand;
    -fx-background-color: linear-gradient(
            to right,
            #e05a00 0%,
            #ff7b29 8%,
            #ff9b59 25%, /* Glanz-Bereich Start */ #ffbb89 33%, /* Hellster Punkt des Glanzes */ #ff9b59 41%, /* Glanz-Bereich Ende */ #ff7b29 50%,
            #e05a00 75%,
            #c04a00 100%
    ),
    linear-gradient(
            to bottom,
            #ff9b59 0%,
            #ff7b29 50%,
            #e05a00 100%
    );
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.2), 3, 0.3, 0, 1),
    innershadow(one-pass-box, #ffbb89, 8, 0.8, 0, -1);
}

.new-plan-button:hover {
    -fx-text-fill: white;
    -fx-background-color: linear-gradient(
            to right,
            #e05a00 0%,
            #ff7b29 25%,
            #ff8b39 50%,
            #ff9b59 75%, /* Glanz-Bereich Start (verschoben) */ #ffbb89 83%, /* Hellster Punkt des Glanzes */ #ff9b59 91%, /* Glanz-Bereich Ende (verschoben) */ #ff7b29 100%
    ),
    linear-gradient(
            to bottom,
            #ff9b59 0%,
            #ff7b29 50%,
            #e05a00 100%
    );
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.4), 4, 0.5, 0, 2),
    innershadow(one-pass-box, #ffbb89, 10, 0.7, 0, -1),
        /* Eingravierungs-Effekt für Text */ innershadow(one-pass-box, rgba(0, 0, 0, 0.8), 1, 0.0, 0, -1),
    innershadow(one-pass-box, rgba(255, 255, 255, 0.9), 1, 0.0, 0, 1);
}

.new-plan-button:pressed {
    -fx-scale-x: 0.95;
    -fx-scale-y: 0.95;
    -fx-text-fill: #ffe0d0; /* Lighter orange text when pressed */
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.4), 2, 0.6, 0, 1),
    innershadow(one-pass-box, #ffbb89, 6, 0.7, 0, -1),
        /* Verstärkter Eingravierungs-Effekt beim Drücken */ innershadow(one-pass-box, rgba(0, 0, 0, 0.9), 2, 0.0, 0, -2),
    innershadow(one-pass-box, rgba(255, 255, 255, 1.0), 2, 0.0, 0, 1);
}

/* --- Plan List View --- */
.plan-list-view-background {
    -fx-background-color: -bg-light; /* Light warm gray background */
}

.plan-list-scroll-pane {
    -fx-background-color: transparent; /* Transparent ScrollPane */
    -fx-border-color: transparent; /* No borders */
    -fx-fit-to-width: true;
    -fx-fit-to-height: true;
}

.plan-list-flow-pane {
    -fx-background-color: transparent;
    -fx-hgap: 15;
    -fx-vgap: 15;
    -fx-padding: 20 20 20 20;
}

/* Card for each individual plan */
.plan-card {
    -fx-background-color: white;
    -fx-padding: 15 15 15 15;
    -fx-background-radius: 8px; /* Rounded corners */
    -fx-border-radius: 8px;
    -fx-border-color: derive(-accent-silver, 20%); /* Very subtle border */
    -fx-border-width: 1px;
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.1), 8, 0, 0, 2); /* Subtle shadow */
    -fx-pref-width: 200px; /* Example width */
    -fx-pref-height: 120px; /* Example height */
    /* Transition for hover effect */
    -fx-transition: all 0.2s ease-in-out;
    -fx-cursor: hand;
    -fx-alignment: CENTER;
    -fx-spacing: 10;
}

.plan-card:hover {
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.15), 12, 0, 0, 4); /* Stronger shadow */
    -fx-scale-x: 1.02; /* Slight enlargement */
    -fx-scale-y: 1.02;
    -fx-border-color: -accent-gold; /* Gold accent on hover */
    -fx-border-width: 1px;
}

/* Title (Plan Name) within the card */
.plan-card-title {
    -fx-font-size: 16px; /* Slightly larger */
    -fx-font-weight: bold;
    -fx-font-family: "Garamond, Baskerville, 'Times New Roman', serif"; /* Serif font for headlines */
    -fx-text-fill: -never-blue; /* Royal blue for "Never" branding */
    -fx-padding: 0 0 5 0; /* Bottom padding */
    -fx-wrap-text: true;
    -fx-text-alignment: CENTER;
}

/* Subtitle (Plan ID) within the card */
.plan-card-subtitle {
    -fx-font-size: 11px;
    -fx-font-family: "Lato, 'Segoe UI', System"; /* Sans-serif for UI elements */
    -fx-text-fill: -lose-orange; /* Orange for "Lose" elements */
}

/* Plan icon in the plan card */
.plan-icon {
    -fx-fit-width: 48;
    -fx-fit-height: 48;
    -fx-preserve-ratio: true;
}

/* Placeholder text when no plans are found */
.search-results-placeholder {
    -fx-font-size: 16px;
    -fx-font-family: "Garamond, Baskerville, 'Times New Roman', serif"; /* Serif font for headlines */
    -fx-text-fill: -text-secondary;
    -fx-alignment: center;
    /* Ensures it takes up space in the FlowPane */
    /* This may need to be set in Java code depending on how FlowPane handles it */
    /* e.g., by setting prefWidth/prefHeight to the size of the FlowPane */
}

/* Placeholder text when no exercises exist in a training unit */
.placeholder-label {
    -fx-font-style: italic;
    -fx-text-fill: -text-secondary;
    -fx-opacity: 75%;
    -fx-alignment: center;
    -fx-max-width: infinity;
    -fx-padding: 20 0 20 0;
}

/* Placeholder for empty training plan */
.empty-placeholder {
    -fx-background-color: #f9f9f9;
    -fx-background-radius: 5px;
    -fx-border-radius: 5px;
    -fx-border-color: -accent-silver;
    -fx-border-width: 1px;
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.05), 3, 0, 0, 1);
    -fx-padding: 30 20 30 20;
    -fx-alignment: center;
}

.placeholder-text {
    -fx-font-family: "Lato, 'Segoe UI', System";
    -fx-font-size: 16px;
    -fx-text-fill: -text-secondary;
    -fx-font-style: italic;
    -fx-opacity: 80%;
}

/* --- General Styles --- */
.button { /* Standard button styling with shimmering silver effect */
    -fx-text-fill: #666666; /* Silver-gray text color */
    -fx-font-family: "Lato, 'Segoe UI', System"; /* Sans-serif for UI elements */
    -fx-background-radius: 5px;
    -fx-border-radius: 5px;
    -fx-cursor: hand;
    -fx-background-color: linear-gradient(
            to right,
            #a8a8a8 0%,
            #c8c8c8 8%,
            #f0f0f0 25%, /* Glanz-Bereich Start */ #ffffff 33%, /* Hellster Punkt des Glanzes */ #f0f0f0 41%, /* Glanz-Bereich Ende */ #d0d0d0 50%,
            #b8b8b8 75%,
            #888888 100%
    ),
    linear-gradient(
            to bottom,
            #ffffff 0%,
            #e0e0e0 50%,
            #c0c0c0 100%
    );
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.2), 3, 0.3, 0, 1),
    innershadow(one-pass-box, #ffffff, 8, 0.8, 0, -1);
}

.button:hover {
    -fx-text-fill: #777777; /* Slightly lighter text on hover */
    -fx-background-color: linear-gradient(
            to right,
            #a8a8a8 0%,
            #c8c8c8 25%,
            #d0d0d0 50%,
            #f0f0f0 75%, /* Glanz-Bereich Start (verschoben) */ #ffffff 83%, /* Hellster Punkt des Glanzes */ #f0f0f0 91%, /* Glanz-Bereich Ende (verschoben) */ #c8c8c8 100%
    ),
    linear-gradient(
            to bottom,
            #ffffff 0%,
            #e8e8e8 50%,
            #c8c8c8 100%
    );
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.4), 4, 0.5, 0, 2),
    innershadow(one-pass-box, #ffffff, 10, 0.7, 0, -1),
        /* Eingravierungs-Effekt für Text */ innershadow(one-pass-box, rgba(0, 0, 0, 0.8), 1, 0.0, 0, -1),
    innershadow(one-pass-box, rgba(255, 255, 255, 0.9), 1, 0.0, 0, 1);
}

.button:pressed {
    -fx-scale-x: 0.95;
    -fx-scale-y: 0.95;
    -fx-text-fill: #555555; /* Darker text when pressed */
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.4), 2, 0.6, 0, 1),
    innershadow(one-pass-box, #ffffff, 6, 0.7, 0, -1),
        /* Verstärkter Eingravierungs-Effekt beim Drücken */ innershadow(one-pass-box, rgba(0, 0, 0, 0.9), 2, 0.0, 0, -2),
    innershadow(one-pass-box, rgba(255, 255, 255, 1.0), 2, 0.0, 0, 1);
}

.separator *.line { /* Lighter lines for separators */
    -fx-border-style: solid;
    -fx-border-color: -accent-silver;
    -fx-border-width: 1px 0 0 0; /* Top line only */
}

/* Vertical separator styling */
.separator:vertical *.line {
    -fx-border-style: solid;
    -fx-border-color: -never-blue; /* Using the app's blue color for better visibility */
    -fx-border-width: 0 2px 0 0; /* Right line only, thicker for better visibility */
    -fx-opacity: 0.3; /* Slightly transparent for a softer look */
    -fx-effect: dropshadow(gaussian, rgba(26, 58, 143, 0.3), 3, 0, 1, 0); /* Subtle shadow for depth */
}

/* --- Typography Classes --- */
.title-text {
    -fx-font-family: "Garamond, Baskerville, 'Times New Roman', serif"; /* Serif font for headlines */
    -fx-font-size: 24px;
    -fx-font-weight: bold;
    -fx-text-fill: -never-blue; /* Royal blue for "Never" branding */
}

.subtitle-text {
    -fx-font-family: "Garamond, Baskerville, 'Times New Roman', serif"; /* Serif font for headlines */
    -fx-font-size: 18px;
    -fx-text-fill: -lose-orange; /* Orange for "Lose" elements */
}

.body-text {
    -fx-font-family: "Lato, 'Segoe UI', System"; /* Sans-serif for body text */
    -fx-font-size: 13px;
    -fx-text-fill: -text-primary;
}

/* --- Template Browser --- */
.template-browser {
    -fx-background-color: -bg-light;
}

.template-browser-title {
    -fx-font-family: "Garamond, Baskerville, 'Times New Roman', serif";
    -fx-font-size: 20px;
    -fx-font-weight: bold;
    -fx-text-fill: -never-blue;
    -fx-alignment: center;
    -fx-padding: 15 15 15 15;
}

.template-browser-scroll-pane {
    -fx-background-color: transparent;
    -fx-border-color: transparent;
    -fx-fit-to-width: true;
    -fx-fit-to-height: true;
}

.template-browser-flow-pane {
    -fx-background-color: transparent;
    -fx-hgap: 10;
    -fx-vgap: 10;
    -fx-padding: 10 10 10 10;
}

.template-card {
    -fx-background-color: white;
    -fx-padding: 10 10 10 10;
    -fx-background-radius: 8px;
    -fx-border-radius: 8px;
    -fx-border-color: derive(-accent-silver, 20%);
    -fx-border-width: 1px;
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.1), 8, 0, 0, 2);
    -fx-pref-width: 180px;
    -fx-pref-height: 100px;
    -fx-cursor: hand;
}

.template-card:hover {
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.15), 12, 0, 0, 4);
    -fx-scale-x: 1.02;
    -fx-scale-y: 1.02;
    -fx-border-color: -accent-gold;
    -fx-border-width: 1px;
}

.template-name {
    -fx-font-size: 14px;
    -fx-font-weight: bold;
    -fx-font-family: "Garamond, Baskerville, 'Times New Roman', serif";
    -fx-text-fill: -never-blue;
    -fx-padding: 5 0 0 0;
    -fx-alignment: center;
    -fx-wrap-text: true;
}

.delete-template-button {
    -fx-text-fill: white;
    -fx-font-weight: bold;
    -fx-min-width: 20px;
    -fx-min-height: 20px;
    -fx-background-radius: 10px;
    -fx-cursor: hand;
    -fx-background-color: linear-gradient(
            to right,
            #c0392b 0%,
            #e74c3c 8%,
            #ec7063 25%, /* Glanz-Bereich Start */ #f29f97 33%, /* Hellster Punkt des Glanzes */ #ec7063 41%, /* Glanz-Bereich Ende */ #e74c3c 50%,
            #c0392b 75%,
            #a0291b 100%
    ),
    linear-gradient(
            to bottom,
            #ec7063 0%,
            #e74c3c 50%,
            #c0392b 100%
    );
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.2), 3, 0.3, 0, 1),
    innershadow(one-pass-box, #f29f97, 8, 0.8, 0, -1);
}

.delete-template-button:hover {
    -fx-text-fill: white;
    -fx-background-color: linear-gradient(
            to right,
            #c0392b 0%,
            #e74c3c 25%,
            #e95c4d 50%,
            #ec7063 75%, /* Glanz-Bereich Start (verschoben) */ #f29f97 83%, /* Hellster Punkt des Glanzes */ #ec7063 91%, /* Glanz-Bereich Ende (verschoben) */ #e74c3c 100%
    ),
    linear-gradient(
            to bottom,
            #ec7063 0%,
            #e74c3c 50%,
            #c0392b 100%
    );
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.4), 4, 0.5, 0, 2),
    innershadow(one-pass-box, #f29f97, 12, 0.9, 0, -1),
        /* Eingravierungs-Effekt für Text */ innershadow(one-pass-box, rgba(0, 0, 0, 0.8), 1, 0.0, 0, -1),
    innershadow(one-pass-box, rgba(255, 255, 255, 0.9), 1, 0.0, 0, 1);
}

.delete-template-button:pressed {
    -fx-scale-x: 0.95;
    -fx-scale-y: 0.95;
    -fx-text-fill: #ffd0d0; /* Lighter red text when pressed */
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.4), 2, 0.6, 0, 1),
    innershadow(one-pass-box, #f29f97, 6, 0.7, 0, -1),
        /* Verstärkter Eingravierungs-Effekt beim Drücken */ innershadow(one-pass-box, rgba(0, 0, 0, 0.9), 2, 0.0, 0, -2),
    innershadow(one-pass-box, rgba(255, 255, 255, 1.0), 2, 0.0, 0, 1);
}

.template-card-header {
    -fx-alignment: CENTER_RIGHT;
}

.no-templates-message {
    -fx-font-size: 14px;
    -fx-font-family: "Lato, 'Segoe UI', System";
    -fx-text-fill: -text-secondary;
    -fx-alignment: center;
    -fx-padding: 20px;
}

/* --- Training Plan Editor --- */
.plan-editor-background {
    -fx-background-color: #f0f0f0; /* Light gray background */
}

.editor-action-bar {
    -fx-background-color: -bg-light;
    -fx-border-color: -accent-silver;
    -fx-border-width: 0 0 1 0; /* Bottom line only */
    -fx-padding: 10 10 10 10;
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.1), 3, 0, 0, 1);
    -fx-alignment: CENTER_RIGHT;
    -fx-spacing: 10;
}

.editor-action-button {
    -fx-text-fill: white;
    -fx-font-weight: 700;
    -fx-background-radius: 8;
    -fx-padding: 8 14 8 14;
    -fx-cursor: hand;
    -fx-background-color: -never-blue;
    -fx-effect: dropshadow(gaussian, rgba(26, 58, 143, 0.10), 6, 0, 0, 1);
}

.editor-action-button:hover {
    -fx-text-fill: white;
    -fx-background-color: derive(-never-blue, -5%);
}

.editor-action-button:pressed {
    -fx-scale-x: 0.98;
    -fx-scale-y: 0.98;
    -fx-text-fill: white;
    -fx-background-color: derive(-never-blue, -10%);
}

.editor-background {
    -fx-background-color: #f0f0f0; /* Light gray background */
}

/* --- Preview Overlay --- */
.preview-overlay {
    -fx-background-color: rgba(0, 0, 0, 0.6);
}

.preview-content {
    -fx-background-color: white;
    -fx-background-radius: 8;
    -fx-padding: 15;
}

.preview-topbar {
    -fx-padding: 0 0 10 0;
}

.preview-scrollpane {
    -fx-background: transparent;
    -fx-background-color: transparent;
}

.preview-scrollpane > .viewport {
    -fx-background-color: transparent;
}

.editor-scroll-pane {
    -fx-background-color: transparent;
    -fx-background: transparent;
    -fx-border-color: transparent;
    -fx-fit-to-width: true;
    -fx-anchor-top: 0.0;
    -fx-anchor-left: 0.0;
    -fx-anchor-right: 0.0;
    -fx-anchor-bottom: 0.0;
}

.editor-scroll-pane > .viewport {
    -fx-background-color: transparent;
}

.editor-document {
    -fx-background-color: white;
    -fx-background-radius: 5px;
    -fx-border-radius: 5px;
    -fx-border-color: -accent-silver;
    -fx-border-width: 1px;
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.1), 8, 0, 0, 2);
    -fx-max-width: 800;
    -fx-pref-width: 800;
}

.editor-header {
    -fx-border-color: -accent-silver;
    -fx-border-width: 0 0 1 0; /* Bottom line only */
    -fx-spacing: 10;
    -fx-padding: 20 20 20 20;
}

.editor-title-field {
    -fx-background-color: transparent;
    -fx-border-color: transparent;
    -fx-font-family: "Garamond, Baskerville, 'Times New Roman', serif";
    -fx-font-size: 24px;
    -fx-font-weight: bold;
    -fx-text-fill: -never-blue;
    -fx-padding: 5px 0;
}

.editor-description-field {
    -fx-background-color: transparent;
    -fx-border-color: transparent;
    -fx-font-family: "Lato, 'Segoe UI', System";
    -fx-font-size: 16px;
    -fx-text-fill: -text-secondary;
    -fx-padding: 5px 0;
}

.editor-description-field {
    -fx-background-color: transparent;
    -fx-border-color: transparent;
    -fx-font-family: "Lato, 'Segoe UI', System";
    -fx-font-size: 16px;
    -fx-text-fill: -text-secondary;
}

.editor-description-field:focused {
    -fx-background-color: #f8f8f8;
    -fx-border-color: -never-blue;
    -fx-border-radius: 3px;
}

.training-units-container {
    -fx-background-color: transparent;
    -fx-spacing: 20;
    -fx-padding: 20 20 20 20;
}

.unit-buttons-container {
    -fx-alignment: CENTER;
    -fx-spacing: 10;
}

.add-unit-button {
    -fx-text-fill: white;
    -fx-font-weight: bold;
    -fx-min-width: 30px;
    -fx-min-height: 30px;
    -fx-background-radius: 15px;
    -fx-cursor: hand;
    -fx-font-size: 18.0;
    -fx-background-color: radial-gradient(
            center 50% 50%,
            radius 100%,
            #ffbb89 0%,
            #ff9b59 20%,
            #ff7b29 50%,
            #e05a00 80%,
            #c04a00 100%
    );
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.2), 3, 0.3, 0, 1),
    innershadow(one-pass-box, #ffbb89, 8, 0.8, 0, -1);
}

.add-unit-button:hover {
    -fx-text-fill: white;
    -fx-background-color: radial-gradient(
            center 50% 50%,
            radius 100%,
            #ffbb89 0%,
            #ff9b59 30%,
            #ff7b29 60%,
            #e05a00 80%,
            #c04a00 100%
    );
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.4), 4, 0.5, 0, 2),
    innershadow(one-pass-box, #ffbb89, 10, 0.7, 0, -1),
        /* Eingravierungs-Effekt für Text */ innershadow(one-pass-box, rgba(0, 0, 0, 0.8), 1, 0.0, 0, -1),
    innershadow(one-pass-box, rgba(255, 255, 255, 0.9), 1, 0.0, 0, 1);
}

.add-unit-button:pressed {
    -fx-scale-x: 0.95;
    -fx-scale-y: 0.95;
    -fx-text-fill: #ffe0d0; /* Lighter orange text when pressed */
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.4), 2, 0.6, 0, 1),
    innershadow(one-pass-box, #ffbb89, 6, 0.7, 0, -1),
        /* Verstärkter Eingravierungs-Effekt beim Drücken */ innershadow(one-pass-box, rgba(0, 0, 0, 0.9), 2, 0.0, 0, -2),
    innershadow(one-pass-box, rgba(255, 255, 255, 1.0), 2, 0.0, 0, 1);
}

.add-from-template-button {
    -fx-text-fill: white;
    -fx-font-weight: bold;
    -fx-background-radius: 5px;
    -fx-cursor: hand;
    -fx-font-size: 14.0;
    -fx-background-color: linear-gradient(
            to right,
            #0a2a7f 0%,
            #1a3a8f 8%,
            #3a5abf 25%, /* Glanz-Bereich Start */ #5a7adf 33%, /* Hellster Punkt des Glanzes */ #3a5abf 41%, /* Glanz-Bereich Ende */ #1a3a8f 50%,
            #0a2a7f 75%,
            #001a6f 100%
    ),
    linear-gradient(
            to bottom,
            #3a5abf 0%,
            #1a3a8f 50%,
            #0a2a7f 100%
    );
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.2), 3, 0.3, 0, 1),
    innershadow(one-pass-box, #5a7adf, 8, 0.8, 0, -1);
}

.add-from-template-button:hover {
    -fx-text-fill: white;
    -fx-background-color: linear-gradient(
            to right,
            #0a2a7f 0%,
            #1a3a8f 25%,
            #2a4a9f 50%,
            #3a5abf 75%, /* Glanz-Bereich Start (verschoben) */ #5a7adf 83%, /* Hellster Punkt des Glanzes */ #3a5abf 91%, /* Glanz-Bereich Ende (verschoben) */ #1a3a8f 100%
    ),
    linear-gradient(
            to bottom,
            #3a5abf 0%,
            #1a3a8f 50%,
            #0a2a7f 100%
    );
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.4), 4, 0.5, 0, 2),
    innershadow(one-pass-box, #5a7adf, 10, 0.7, 0, -1),
        /* Eingravierungs-Effekt für Text */ innershadow(one-pass-box, rgba(0, 0, 0, 0.8), 1, 0.0, 0, -1),
    innershadow(one-pass-box, rgba(255, 255, 255, 0.9), 1, 0.0, 0, 1);
}

.add-from-template-button:pressed {
    -fx-scale-x: 0.95;
    -fx-scale-y: 0.95;
    -fx-text-fill: #e0e0ff; /* Lighter blue text when pressed */
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.4), 2, 0.6, 0, 1),
    innershadow(one-pass-box, #5a7adf, 6, 0.7, 0, -1),
        /* Verstärkter Eingravierungs-Effekt beim Drücken */ innershadow(one-pass-box, rgba(0, 0, 0, 0.9), 2, 0.0, 0, -2),
    innershadow(one-pass-box, rgba(255, 255, 255, 1.0), 2, 0.0, 0, 1);
}

/* --- Training Unit Control --- */
.training-unit-control {
    -fx-background-color: #f9f9f9;
    -fx-background-radius: 5px;
    -fx-border-radius: 5px;
    -fx-border-color: -accent-silver;
    -fx-border-width: 1px;
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.05), 3, 0, 0, 1);
}

.toggle-arrow {
    -fx-font-size: 14px;
    -fx-text-fill: -never-blue;
    -fx-font-weight: bold;
    -fx-padding: 0 5 0 0;
    -fx-cursor: hand;
    -fx-font-family: "Arial Unicode MS, Segoe UI Symbol, DejaVu Sans, Lucida Sans Unicode, sans-serif";
}

.unit-name-field {
    -fx-background-color: transparent;
    -fx-border-color: transparent;
    -fx-font-family: "Garamond, Baskerville, 'Times New Roman', serif";
    -fx-font-size: 18px;
    -fx-font-weight: bold;
    -fx-text-fill: -never-blue;
}

.unit-name-field:focused {
    -fx-background-color: #f8f8f8;
    -fx-border-color: -never-blue;
    -fx-border-radius: 3px;
}

.unit-description-field {
    -fx-background-color: transparent;
    -fx-border-color: transparent;
    -fx-font-family: "Lato, 'Segoe UI', System";
    -fx-font-size: 14px;
    -fx-text-fill: -text-secondary;
}

.unit-description-field:focused {
    -fx-background-color: #f8f8f8;
    -fx-border-color: -never-blue;
    -fx-border-radius: 3px;
}

.unit-weekday-selector {
    -fx-background-color: white;
    -fx-border-color: -accent-silver;
    -fx-border-radius: 3px;
    -fx-background-radius: 3px;
}

.save-as-template-button {
    -fx-text-fill: #5c4a00; /* Gold text color */
    -fx-font-weight: bold;
    -fx-background-radius: 5px;
    -fx-border-radius: 5px;
    -fx-cursor: hand;
    -fx-background-color: linear-gradient(
            to right,
            #b7922a 0%,
            #d4af37 8%,
            #f5e56b 25%, /* Glanz-Bereich Start */ #fff0a0 33%, /* Hellster Punkt des Glanzes */ #f5e56b 41%, /* Glanz-Bereich Ende */ #d4af37 50%,
            #c5a028 75%,
            #a67c00 100%
    ),
    linear-gradient(
            to bottom,
            #fff0a0 0%,
            #f5e56b 50%,
            #d4af37 100%
    );
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.2), 3, 0.3, 0, 1),
    innershadow(one-pass-box, #fff0a0, 8, 0.8, 0, -1);
}

.save-as-template-button:hover {
    -fx-text-fill: #6e5a00; /* Slightly darker gold text on hover */
    -fx-background-color: linear-gradient(
            to right,
            #b7922a 0%,
            #d4af37 25%,
            #e5c349 50%,
            #f5e56b 75%, /* Glanz-Bereich Start (verschoben) */ #fff0a0 83%, /* Hellster Punkt des Glanzes */ #f5e56b 91%, /* Glanz-Bereich Ende (verschoben) */ #d4af37 100%
    ),
    linear-gradient(
            to bottom,
            #fff0a0 0%,
            #f5e56b 50%,
            #d4af37 100%
    );
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.4), 4, 0.5, 0, 2),
    innershadow(one-pass-box, #fff0a0, 10, 0.7, 0, -1),
        /* Eingravierungs-Effekt für Text */ innershadow(one-pass-box, rgba(0, 0, 0, 0.8), 1, 0.0, 0, -1),
    innershadow(one-pass-box, rgba(255, 255, 255, 0.9), 1, 0.0, 0, 1);
}

.save-as-template-button:pressed {
    -fx-scale-x: 0.95;
    -fx-scale-y: 0.95;
    -fx-text-fill: #4a3800; /* Darker gold text when pressed */
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.4), 2, 0.6, 0, 1),
    innershadow(one-pass-box, #fff0a0, 6, 0.7, 0, -1),
        /* Verstärkter Eingravierungs-Effekt beim Drücken */ innershadow(one-pass-box, rgba(0, 0, 0, 0.9), 2, 0.0, 0, -2),
    innershadow(one-pass-box, rgba(255, 255, 255, 1.0), 2, 0.0, 0, 1);
}

.exercises-container {
    -fx-background-color: transparent;
    -fx-padding: 5 0 5 0;
}

/* Fade-out effect for the third exercise when not showing all */
.exercise-fade-out {
    -fx-effect: dropshadow(gaussian, rgba(255, 255, 255, 0.9), 10, 0, 0, 10),
    linear-gradient(to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.8) 80%,
            rgba(255, 255, 255, 1) 100%);
}

/* Show more button */
.show-more-button {
    -fx-text-fill: #666666; /* Silver-gray text color */
    -fx-font-weight: normal;
    -fx-background-radius: 3px;
    -fx-border-radius: 3px;
    -fx-padding: 8 0 8 0;
    -fx-cursor: hand;
    -fx-alignment: center;
    -fx-background-color: linear-gradient(
            to right,
            #a8a8a8 0%,
            #c8c8c8 8%,
            #f0f0f0 25%, /* Glanz-Bereich Start */ #ffffff 33%, /* Hellster Punkt des Glanzes */ #f0f0f0 41%, /* Glanz-Bereich Ende */ #d0d0d0 50%,
            #b8b8b8 75%,
            #888888 100%
    ),
    linear-gradient(
            to bottom,
            #ffffff 0%,
            #e0e0e0 50%,
            #c0c0c0 100%
    );
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.2), 3, 0.3, 0, 1),
    innershadow(one-pass-box, #ffffff, 8, 0.8, 0, -1);
}

.show-more-button:hover {
    -fx-text-fill: #777777; /* Slightly lighter text on hover */
    -fx-background-color: linear-gradient(
            to right,
            #a8a8a8 0%,
            #c8c8c8 25%,
            #d0d0d0 50%,
            #f0f0f0 75%, /* Glanz-Bereich Start (verschoben) */ #ffffff 83%, /* Hellster Punkt des Glanzes */ #f0f0f0 91%, /* Glanz-Bereich Ende (verschoben) */ #c8c8c8 100%
    ),
    linear-gradient(
            to bottom,
            #ffffff 0%,
            #e8e8e8 50%,
            #c8c8c8 100%
    );
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.4), 4, 0.5, 0, 2),
    innershadow(one-pass-box, #ffffff, 10, 0.7, 0, -1),
        /* Eingravierungs-Effekt für Text */ innershadow(one-pass-box, rgba(0, 0, 0, 0.8), 1, 0.0, 0, -1),
    innershadow(one-pass-box, rgba(255, 255, 255, 0.9), 1, 0.0, 0, 1);
}

.show-more-button:pressed {
    -fx-scale-x: 0.95;
    -fx-scale-y: 0.95;
    -fx-text-fill: #555555; /* Darker text when pressed */
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.4), 2, 0.6, 0, 1),
    innershadow(one-pass-box, #ffffff, 6, 0.7, 0, -1),
        /* Verstärkter Eingravierungs-Effekt beim Drücken */ innershadow(one-pass-box, rgba(0, 0, 0, 0.9), 2, 0.0, 0, -2),
    innershadow(one-pass-box, rgba(255, 255, 255, 1.0), 2, 0.0, 0, 1);
}

.add-exercise-button {
    -fx-text-fill: black;
    -fx-font-weight: bold;
    -fx-min-width: 30px;
    -fx-min-height: 30px;
    -fx-background-radius: 15px;
    -fx-cursor: hand;
    -fx-background-color: radial-gradient(
            center 50% 50%,
            radius 100%,
            #ffffff 0%,
            #f0f0f0 25%,
            #d0d0d0 50%,
            #a8a8a8 75%,
            #888888 100%
    );
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.2), 3, 0.3, 0, 1),
    innershadow(one-pass-box, #ffffff, 8, 0.8, 0, -1);
}

.add-exercise-button:hover {
    -fx-text-fill: black;
    -fx-background-color: radial-gradient(
            center 50% 50%,
            radius 100%,
            #ffffff 0%,
            #f0f0f0 20%,
            #d0d0d0 40%,
            #b8b8b8 60%,
            #a0a0a0 80%,
            #888888 100%
    );
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.4), 4, 0.5, 0, 2),
    innershadow(one-pass-box, #ffffff, 10, 0.7, 0, -1),
        /* Eingravierungs-Effekt für Text */ innershadow(one-pass-box, rgba(0, 0, 0, 0.8), 1, 0.0, 0, -1),
    innershadow(one-pass-box, rgba(255, 255, 255, 0.9), 1, 0.0, 0, 1);
}

.add-exercise-button:pressed {
    -fx-scale-x: 0.95;
    -fx-scale-y: 0.95;
    -fx-text-fill: black;
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.4), 2, 0.6, 0, 1),
    innershadow(one-pass-box, #ffffff, 6, 0.7, 0, -1),
        /* Verstärkter Eingravierungs-Effekt beim Drücken */ innershadow(one-pass-box, rgba(0, 0, 0, 0.9), 2, 0.0, 0, -2),
    innershadow(one-pass-box, rgba(255, 255, 255, 1.0), 2, 0.0, 0, 1);
}

/* --- Exercise Control --- */
.exercise-control {
    -fx-background-color: white;
    -fx-background-radius: 3px;
    -fx-border-radius: 3px;
    -fx-border-color: -accent-silver;
    -fx-border-width: 1px;
    -fx-transition: all 0.2s ease-in-out;
}

/* More button for touch devices */
.more-button {
    -fx-text-fill: #666666; /* Silver-gray text color */
    -fx-font-size: 18px;
    -fx-font-weight: bold;
    -fx-background-radius: 5px;
    -fx-border-radius: 5px;
    -fx-padding: 2 8 2 8;
    -fx-cursor: hand;
    -fx-background-color: linear-gradient(
            to right,
            #a8a8a8 0%,
            #c8c8c8 8%,
            #f0f0f0 25%, /* Glanz-Bereich Start */ #ffffff 33%, /* Hellster Punkt des Glanzes */ #f0f0f0 41%, /* Glanz-Bereich Ende */ #d0d0d0 50%,
            #b8b8b8 75%,
            #888888 100%
    ),
    linear-gradient(
            to bottom,
            #ffffff 0%,
            #e0e0e0 50%,
            #c0c0c0 100%
    );
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.2), 3, 0.3, 0, 1),
    innershadow(one-pass-box, #ffffff, 8, 0.8, 0, -1);
}

.more-button:hover {
    -fx-text-fill: #777777; /* Slightly lighter text on hover */
    -fx-background-color: linear-gradient(
            to right,
            #a8a8a8 0%,
            #c8c8c8 25%,
            #d0d0d0 50%,
            #f0f0f0 75%, /* Glanz-Bereich Start (verschoben) */ #ffffff 83%, /* Hellster Punkt des Glanzes */ #f0f0f0 91%, /* Glanz-Bereich Ende (verschoben) */ #c8c8c8 100%
    ),
    linear-gradient(
            to bottom,
            #ffffff 0%,
            #e8e8e8 50%,
            #c8c8c8 100%
    );
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.4), 4, 0.5, 0, 2),
    innershadow(one-pass-box, #ffffff, 12, 0.9, 0, -1),
        /* Eingravierungs-Effekt für Text */ innershadow(one-pass-box, rgba(0, 0, 0, 0.8), 1, 0.0, 0, -1),
    innershadow(one-pass-box, rgba(255, 255, 255, 0.9), 1, 0.0, 0, 1);
}

.more-button:pressed {
    -fx-scale-x: 0.95;
    -fx-scale-y: 0.95;
    -fx-text-fill: #555555; /* Darker text when pressed */
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.4), 2, 0.6, 0, 1),
    innershadow(one-pass-box, #ffffff, 6, 0.7, 0, -1),
        /* Verstärkter Eingravierungs-Effekt beim Drücken */ innershadow(one-pass-box, rgba(0, 0, 0, 0.9), 2, 0.0, 0, -2),
    innershadow(one-pass-box, rgba(255, 255, 255, 1.0), 2, 0.0, 0, 1);
}

/* Container for action buttons */
.action-buttons-container {
    -fx-transition: all 0.2s ease-in-out;
}

/* Button container */
.button-container {
    -fx-transition: all 0.2s ease-in-out;
}

.exercise-name-field, .exercise-description-field, .exercise-duration-field {
    -fx-background-radius: 3px;
    -fx-border-radius: 3px;
    -fx-background-color: linear-gradient(
            to right,
            #e0e0e0 0%,
            #f0f0f0 40%,
            #ffffff 50%,
            #f0f0f0 60%,
            #e0e0e0 100%
    ),
    linear-gradient(
            to bottom,
            #ffffff 0%,
            #f0f0f0 70%,
            #e8e8e8 100%
    );
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.1), 2, 0.2, 0, 1),
    innershadow(one-pass-box, #ffffff, 5, 0.5, 0, -1);
}

.exercise-name-field:focused, .exercise-description-field:focused, .exercise-duration-field:focused {
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.15), 3, 0.3, 0, 1),
    innershadow(one-pass-box, #ffffff, 6, 0.6, 0, -1);
    -fx-border-color: -never-blue;
}

.exercise-sets-spinner {
    -fx-background-radius: 3px;
    -fx-border-radius: 3px;
    -fx-background-color: linear-gradient(
            to right,
            #e0e0e0 0%,
            #f0f0f0 40%,
            #ffffff 50%,
            #f0f0f0 60%,
            #e0e0e0 100%
    ),
    linear-gradient(
            to bottom,
            #ffffff 0%,
            #f0f0f0 70%,
            #e8e8e8 100%
    );
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.1), 2, 0.2, 0, 1),
    innershadow(one-pass-box, #ffffff, 5, 0.5, 0, -1);
}

.exercise-sets-spinner:focused {
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.15), 3, 0.3, 0, 1),
    innershadow(one-pass-box, #ffffff, 6, 0.6, 0, -1);
    -fx-border-color: -never-blue;
}

.exercise-ball-bucket-checkbox {
    -fx-cursor: hand;
}

.exercise-ball-bucket-checkbox .box {
    -fx-background-radius: 3px;
    -fx-border-radius: 3px;
    -fx-background-color: linear-gradient(
            to right,
            #e0e0e0 0%,
            #f0f0f0 40%,
            #ffffff 50%,
            #f0f0f0 60%,
            #e0e0e0 100%
    ),
    linear-gradient(
            to bottom,
            #ffffff 0%,
            #f0f0f0 70%,
            #e8e8e8 100%
    );
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.1), 2, 0.2, 0, 1),
    innershadow(one-pass-box, #ffffff, 5, 0.5, 0, -1);
}

.exercise-ball-bucket-checkbox:hover .box {
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.15), 3, 0.3, 0, 1),
    innershadow(one-pass-box, #ffffff, 6, 0.6, 0, -1);
}

.exercise-ball-bucket-checkbox:selected .box {
    -fx-background-color: linear-gradient(
            to right,
            #0a2a7f 0%,
            #1a3a8f 8%,
            #3a5abf 25%, /* Glanz-Bereich Start */ #5a7adf 33%, /* Hellster Punkt des Glanzes */ #3a5abf 41%, /* Glanz-Bereich Ende */ #1a3a8f 50%,
            #0a2a7f 75%,
            #001a6f 100%
    ),
    linear-gradient(
            to bottom,
            #3a5abf 0%,
            #1a3a8f 50%,
            #0a2a7f 100%
    );
}

.exercise-label {
    -fx-font-weight: bold;
    -fx-text-fill: -text-primary;
    -fx-font-family: "Lato, 'Segoe UI', System";
}

/* Plan card button container */
.plan-card-button-container {
    -fx-alignment: CENTER;
}

/* Delete button for plan cards */
.delete-button {
    -fx-text-fill: white;
    -fx-font-weight: bold;
    -fx-background-radius: 6px;
    -fx-border-radius: 6px;
    -fx-cursor: hand;
    -fx-font-size: 13px; /* a bit bigger */
    -fx-background-color: linear-gradient(
            to right,
            #c0392b 0%,
            #e74c3c 8%,
            #f76c5e 25%, /* Glanz-Bereich Start */ #ff8b7d 33%, /* Hellster Punkt des Glanzes */ #f76c5e 41%, /* Glanz-Bereich Ende */ #e74c3c 50%,
            #d44637 75%,
            #c0392b 100%
    ),
    linear-gradient(
            to bottom,
            #f76c5e 0%,
            #e74c3c 50%,
            #c0392b 100%
    );
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.2), 3, 0.3, 0, 1),
    innershadow(one-pass-box, #ff8b7d, 8, 0.8, 0, -1);
}

.delete-button:hover {
    -fx-text-fill: white;
    -fx-background-color: linear-gradient(
            to right,
            #c0392b 0%,
            #e74c3c 25%,
            #ec5e4e 50%,
            #f76c5e 75%, /* Glanz-Bereich Start (verschoben) */ #ff8b7d 83%, /* Hellster Punkt des Glanzes */ #f76c5e 91%, /* Glanz-Bereich Ende (verschoben) */ #e74c3c 100%
    ),
    linear-gradient(
            to bottom,
            #f76c5e 0%,
            #e74c3c 50%,
            #c0392b 100%
    );
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.4), 4, 0.5, 0, 2),
    innershadow(one-pass-box, #ff8b7d, 10, 0.7, 0, -1),
        /* Eingravierungs-Effekt für Text */ innershadow(one-pass-box, rgba(0, 0, 0, 0.8), 1, 0.0, 0, -1),
    innershadow(one-pass-box, rgba(255, 255, 255, 0.9), 1, 0.0, 0, 1);
}

.delete-button:pressed {
    -fx-scale-x: 0.95;
    -fx-scale-y: 0.95;
    -fx-text-fill: #ffe0e0; /* Lighter red text when pressed */
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.4), 2, 0.6, 0, 1),
    innershadow(one-pass-box, #ff8b7d, 6, 0.7, 0, -1),
        /* Verstärkter Eingravierungs-Effekt beim Drücken */ innershadow(one-pass-box, rgba(0, 0, 0, 0.9), 2, 0.0, 0, -2),
    innershadow(one-pass-box, rgba(255, 255, 255, 1.0), 2, 0.0, 0, 1);
}

/* --- NeverLoseMeta Styles --- */
.never-lose-meta {
    -fx-pref-height: 700.0;
    -fx-pref-width: 1000.0;
}

.top-bar-placeholder {
    -fx-pref-height: 40.0;
    -fx-hgrow: ALWAYS;
}

.center-content-placeholder {
    -fx-alignment: CENTER;
}

.bottom-bar-placeholder {
    -fx-hgrow: ALWAYS;
}

/* --- Notification Styles --- */
.notification-container {
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.3), 10, 0.5, 0, 3);
    -fx-opacity: 0.95;
    -fx-max-width: 350;
    -fx-min-width: 250;
}

.notification {
    -fx-background-color: white;
    -fx-background-radius: 8px;
    -fx-border-radius: 8px;
    -fx-border-color: -accent-silver;
    -fx-border-width: 1px;
    -fx-spacing: 5;
}

.notification-title {
    -fx-font-family: "Lato, 'Segoe UI', System";
    -fx-font-size: 16px;
    -fx-font-weight: bold;
    -fx-text-fill: -text-primary;
}

.notification-message {
    -fx-font-family: "Lato, 'Segoe UI', System";
    -fx-font-size: 14px;
    -fx-text-fill: -text-secondary;
}

.notification-close-button {
    -fx-background-color: rgba(255, 255, 255, 0.8);
    -fx-background-radius: 50%;
    -fx-border-radius: 50%;
    -fx-border-color: rgba(200, 200, 200, 0.5);
    -fx-border-width: 1px;
    -fx-padding: 4;
    -fx-cursor: hand;
    -fx-min-width: 24px;
    -fx-min-height: 24px;
    -fx-max-width: 24px;
    -fx-max-height: 24px;
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.1), 3, 0, 0, 1);
    -fx-transition-duration: 0.3s;
}

.notification-close-button:hover {
    -fx-background-color: rgba(255, 255, 255, 0.9);
    -fx-border-color: rgba(180, 180, 180, 0.7);
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.2), 5, 0, 0, 2);
    -fx-scale-x: 1.1;
    -fx-scale-y: 1.1;
}

.notification-close-button:pressed {
    -fx-background-color: rgba(240, 240, 240, 0.9);
    -fx-scale-x: 0.9;
    -fx-scale-y: 0.9;
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.1), 2, 0, 0, 1);
}

.notification-close-icon {
    -fx-stroke: #666666;
    -fx-stroke-width: 2;
    -fx-stroke-line-cap: ROUND;
}

.notification-icon-container {
    -fx-background-radius: 50%;
    -fx-min-width: 24;
    -fx-min-height: 24;
    -fx-max-width: 24;
    -fx-max-height: 24;
    -fx-alignment: center;
}

.notification-icon {
    -fx-fill: white;
    -fx-scale-x: 0.6;
    -fx-scale-y: 0.6;
}

.notification-info {
    -fx-background-color: #3498db;
}

.notification-success {
    -fx-background-color: #2ecc71;
}

.notification-warning {
    -fx-background-color: #f39c12;
}

.notification-error {
    -fx-background-color: #e74c3c;
}

.notification-button {
    -fx-font-family: "Lato, 'Segoe UI', System";
    -fx-font-size: 13px;
    -fx-padding: 5 10;
    -fx-cursor: hand;
    -fx-background-radius: 4px;
    -fx-border-radius: 4px;
}

.notification-confirm-button {
    -fx-text-fill: white;
    -fx-background-color: #2ecc71;
}

.notification-confirm-button:hover {
    -fx-background-color: #27ae60;
}

.notification-cancel-button {
    -fx-text-fill: -text-primary;
    -fx-background-color: #ecf0f1;
}

.notification-cancel-button:hover {
    -fx-background-color: #bdc3c7;
}

/* Draggable Container */
.draggable-container {
    -fx-background-color: -fx-background;
    -fx-border-color: -fx-accent;
    -fx-border-width: 1px;
    -fx-border-radius: 5px;
    -fx-background-radius: 5px;
    -fx-effect: dropshadow(three-pass-box, rgba(0, 0, 0, 0.6), 10, 0, 0, 0);
    -fx-padding: 10px;
}

/* Ensure the draggable container is above other content but below notifications */
.draggable-container {
    -fx-z-index: 100;
}

/* Notification container should be above everything */
.notification-container {
    -fx-z-index: 1000;
}

/* ================== Combined View (Split Layout) ================== */
/* SplitPane host */
.combined-split-pane {
    -fx-background-color: -bg-light;
}

/* SplitPane divider with subtle brand accent */
.combined-split-pane > .split-pane-divider {
    -fx-padding: 0 2 0 2; /* thin divider */
    /* two-layer background: transparent full height + gray bar with top/bottom gaps */
    -fx-background-color: transparent, -accent-silver;
    -fx-background-insets: 0, 8 0 8 0; /* creates spacing above and below the visible bar */
    -fx-background-radius: 0, 2; /* slightly soften edges of the gray bar */
}

/* Header bars on both sides (override base top-search-bar for the combined layout) */
.combined-header-left,
.combined-header-right {
    -fx-background-color: white;
    -fx-border-width: 0 0 2 0; /* stronger accent line at the bottom */
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.06), 8, 0, 0, 2);
}

.combined-header-left {
    -fx-border-color: -never-blue;
}

.combined-header-right {
    -fx-border-color: -lose-orange;
}

/* Keep search compact in header */
.combined-header-left .search-container {
    -fx-max-width: 420px;
    -fx-min-width: 320px;
}

/* Buttons on the right header get a bit more presence */
.combined-header-right .editor-action-button {
    -fx-background-color: -lose-orange;
    -fx-text-fill: white;
    -fx-font-weight: bold;
    -fx-background-radius: 8;
    -fx-padding: 6 14 6 14;
}

.combined-header-right .editor-action-button:hover {
    -fx-background-color: derive(-lose-orange, -5%);
}

/* Ensure list area looks clean when embedded */
.preview-container {
    -fx-background-color: transparent;
}


/* ================== Compact Plan List ================== */
.plan-list {
    -fx-background-color: transparent;
    -fx-control-inner-background: transparent;
    -fx-background-insets: 0;
    -fx-padding: 8; /* breathing space around list */
}

/* Ensure the virtual flow background stays transparent */
.plan-list .virtual-flow > .clipped-container > .sheet {
    -fx-background-color: transparent;
}

/* Card-like rows with spacing via layered backgrounds */
.plan-list .list-cell {
    -fx-background-color: transparent, white; /* outer transparent layer creates spacing */
    -fx-background-insets: 0, 0 0 8 0; /* bottom gap between items */
    -fx-background-radius: 0, 10; /* rounded corners for the card */
    -fx-padding: 10 14 10 14;
    -fx-font-size: 13px;
    -fx-text-fill: -text-primary;
    -fx-border-color: transparent; /* no hard separators */
    -fx-cursor: hand;
}

/* Completely empty cells should not render card visuals */
.plan-list .list-cell:empty {
    -fx-background-color: transparent;
    -fx-background-insets: 0;
    -fx-padding: 0;
    -fx-effect: null;
}

/* Hover state: subtle brand tint and soft elevation */
.plan-list .list-cell:filled:hover {
    -fx-background-color: transparent, derive(-never-blue, 94%);
    -fx-effect: dropshadow(gaussian, rgba(26, 58, 143, 0.12), 8, 0, 0, 2);
}

/* Selected state: clearer emphasis with border accent */
.plan-list .list-cell:filled:selected {
    -fx-background-color: transparent, derive(-never-blue, 85%);
    -fx-text-fill: -text-primary;
    -fx-border-color: -never-blue;
    -fx-border-radius: 10;
    -fx-border-width: 1;
    /* Align the border with the inner card area (matches background insets) */
    -fx-border-insets: 0 0 8 0;
}

/* Focused + selected: slightly stronger background and shadow */
.plan-list:focused .list-cell:filled:selected {
    -fx-background-color: transparent, derive(-never-blue, 80%);
    -fx-effect: dropshadow(gaussian, rgba(26, 58, 143, 0.18), 10, 0, 0, 2);
}

/* Brand the scrollbar subtly */
.plan-list .scroll-bar:vertical {
    -fx-background-color: transparent;
}

.plan-list .scroll-bar:vertical .thumb {
    -fx-background-color: derive(-never-blue, 30%);
    -fx-background-insets: 0;
    -fx-background-radius: 6;
}


/* --- Plan List Text Styles --- */
.plan-list-title {
    -fx-font-size: 15px;
    -fx-font-weight: 700;
    -fx-text-fill: -text-primary;
    /* Prevent long titles from affecting row height; do not use ellipsis */
    -fx-wrap-text: false;
    -fx-text-overrun: clip;
}

.plan-list-subtitle {
    -fx-font-size: 12px;
    -fx-text-fill: -text-secondary;
    -fx-opacity: 0.9;
}


/* --- Plan List Meta Row & Units/Exercises Icons --- */
.plan-list-meta {
    /* spacing handled in code; keep for future overrides */
}

.plan-units,
.plan-exercises {
    -fx-spacing: 0; /* ensure consistent gap between icon and count */
}

.plan-unit-icon,
.plan-exercise-icon {
    -fx-fill: -text-primary; /* higher contrast icon color */
    -fx-opacity: 0.5;
}

.plan-unit-count,
.plan-exercise-count {
    -fx-text-fill: -text-primary;
    -fx-font-size: 13px;
    -fx-font-weight: 600;
    /* Fix label width to prevent icon shifting when numbers have different digits */
    -fx-min-width: 28; /* enough for up to 3 digits in current font size */
    -fx-pref-width: 28;
    -fx-max-width: 28;
    -fx-alignment: CENTER_RIGHT; /* right-align numbers inside the fixed-width label */
}


/* ================== Editor Input Fields & Actions (Modern Flat) ================== */
.editor-title-field {
    -fx-background-color: white;
    -fx-background-insets: 0;
    -fx-background-radius: 8;
    -fx-border-color: derive(-accent-silver, 10%);
    -fx-border-radius: 8;
    -fx-border-width: 1px;
    -fx-padding: 10 12 10 12;
    -fx-text-fill: -text-primary;
    -fx-font-family: "Lato, 'Segoe UI', System";
    -fx-font-size: 20px; /* overridden by FXML font size but kept for fallback */
}

.editor-title-field:focused {
    -fx-border-color: -never-blue;
    -fx-effect: dropshadow(gaussian, rgba(26, 58, 143, 0.18), 6, 0, 0, 1);
}

.editor-description-field {
    -fx-background-color: white;
    -fx-background-insets: 0;
    -fx-background-radius: 8;
    -fx-border-color: derive(-accent-silver, 10%);
    -fx-border-radius: 8;
    -fx-border-width: 1px;
    -fx-padding: 8 12 8 12;
    -fx-text-fill: -text-primary;
    -fx-prompt-text-fill: -text-secondary;
    -fx-font-family: "Lato, 'Segoe UI', System";
    -fx-font-size: 14px;
}

.editor-description-field:focused {
    -fx-border-color: -never-blue;
    -fx-effect: dropshadow(gaussian, rgba(26, 58, 143, 0.14), 5, 0, 0, 1);
}

.training-units-container {
    -fx-spacing: 16; /* consistent vertical rhythm */
}

/* Primary/Secondary actions inside the editor body */
.add-unit-button {
    -fx-background-color: -never-blue;
    -fx-text-fill: white;
    -fx-font-weight: 700;
    -fx-background-radius: 8;
    -fx-padding: 10 16 10 16;
    -fx-effect: dropshadow(gaussian, rgba(26, 58, 143, 0.10), 6, 0, 0, 1);
}

.add-unit-button:hover {
    -fx-background-color: derive(-never-blue, -5%);
}

.add-unit-button:pressed {
    -fx-background-color: derive(-never-blue, -10%);
}

.add-from-template-button {
    -fx-background-color: transparent;
    -fx-text-fill: -never-blue;
    -fx-font-weight: 600;
    -fx-background-radius: 8;
    -fx-padding: 8 14 8 14;
    -fx-border-color: derive(-never-blue, 10%);
    -fx-border-radius: 8;
    -fx-border-width: 1;
}

.add-from-template-button:hover {
    -fx-background-color: derive(-never-blue, 96%);
}

.add-from-template-button:pressed {
    -fx-background-color: derive(-never-blue, 92%);
}


/* ================== Modern Flat Overrides for Training Units & Exercises ================== */
/* Unit Card */
.training-unit-control {
    -fx-background-color: white;
    -fx-background-radius: 8;
    -fx-border-radius: 8;
    -fx-border-color: derive(-accent-silver, 10%);
    -fx-border-width: 1px;
    -fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.08), 8, 0, 0, 2);
}

.unit-header {
    -fx-padding: 8 12 8 12;
    -fx-spacing: 10;
    -fx-alignment: CENTER_LEFT;
    -fx-border-color: -accent-silver;
    -fx-border-width: 0 0 1 0;
}

.unit-content {
    -fx-padding: 12 12 12 12;
    -fx-spacing: 12;
}

.unit-footer-actions {
    -fx-padding: 8 0 0 0;
    -fx-spacing: 10;
}

/* Buttons inside unit */
.add-exercise-button {
    -fx-background-color: -never-blue;
    -fx-text-fill: white;
    -fx-font-weight: 700;
    -fx-background-radius: 8;
    -fx-padding: 8 14 8 14;
    -fx-effect: dropshadow(gaussian, rgba(26, 58, 143, 0.10), 6, 0, 0, 1);
}

.add-exercise-button:hover {
    -fx-background-color: derive(-never-blue, -5%);
}

.add-exercise-button:pressed {
    -fx-background-color: derive(-never-blue, -10%);
}

.save-as-template-button {
    -fx-background-color: transparent;
    -fx-text-fill: -never-blue;
    -fx-font-weight: 600;
    -fx-background-radius: 8;
    -fx-padding: 6 12 6 12;
    -fx-border-color: derive(-never-blue, 10%);
    -fx-border-radius: 8;
    -fx-border-width: 1;
}

.save-as-template-button:hover {
    -fx-background-color: derive(-never-blue, 96%);
}

.save-as-template-button:pressed {
    -fx-background-color: derive(-never-blue, 92%);
}

.remove-button {
    -fx-background-color: #e74c3c;
    -fx-text-fill: white;
    -fx-font-weight: 700;
    -fx-background-radius: 8;
    -fx-padding: 6 12 6 12;
}

.remove-button:hover {
    -fx-background-color: derive(#e74c3c, -8%);
}

.remove-button:pressed {
    -fx-background-color: derive(#e74c3c, -14%);
}

.show-more-button {
    -fx-background-color: transparent;
    -fx-text-fill: -never-blue;
    -fx-font-weight: 600;
    -fx-padding: 6 10;
    -fx-background-radius: 6;
    -fx-border-color: transparent;
}

.show-more-button:hover {
    -fx-background-color: derive(-never-blue, 96%);
}

.show-more-button:pressed {
    -fx-background-color: derive(-never-blue, 92%);
}

/* Exercise Card */
.exercise-control {
    -fx-background-color: white;
    -fx-background-radius: 8;
    -fx-border-radius: 8;
    -fx-border-color: derive(-accent-silver, 10%);
    -fx-border-width: 1px;
}

.exercise-grid {
    -fx-hgap: 8; /* aligned with code */
    -fx-vgap: 6;
    -fx-padding: 2 0 2 0;
}

.exercise-label {
    -fx-min-width: 96; /* align grid labels tighter */
    -fx-pref-width: 96;
    -fx-max-width: 96;
    -fx-alignment: CENTER_RIGHT;
}

.exercise-name-field, .exercise-description-field, .exercise-duration-field {
    -fx-background-color: white;
    -fx-background-insets: 0;
    -fx-background-radius: 8;
    -fx-border-color: derive(-accent-silver, 10%);
    -fx-border-radius: 8;
    -fx-border-width: 1px;
    -fx-padding: 6 10 6 10;
    -fx-text-fill: -text-primary;
    -fx-prompt-text-fill: -text-secondary;
    -fx-font-family: "Lato, 'Segoe UI', System";
    -fx-font-size: 13px;
}

.exercise-name-field:focused, .exercise-description-field:focused, .exercise-duration-field:focused {
    -fx-border-color: -never-blue;
    -fx-effect: dropshadow(gaussian, rgba(26, 58, 143, 0.14), 5, 0, 0, 1);
}

.exercise-sets-spinner {
    -fx-background-color: white;
    -fx-background-radius: 8;
    -fx-border-color: derive(-accent-silver, 10%);
    -fx-border-radius: 8;
}

.exercise-ball-bucket-checkbox {
    -fx-cursor: hand;
}

.more-button {
    -fx-background-color: transparent;
    -fx-text-fill: -text-secondary;
    -fx-font-weight: 600;
    -fx-background-radius: 8;
    -fx-padding: 4 10;
    -fx-border-color: derive(-accent-silver, 20%);
    -fx-border-radius: 8;
    -fx-border-width: 1;
}

.more-button:hover {
    -fx-background-color: #f7f7f7;
}

.more-button:pressed {
    -fx-background-color: #efefef;
}

/* Exercises container spacing */
.exercises-container {
    -fx-spacing: 12;
}


/* --- GitHub CTA (Bottom Bar) --- */
.github-cta {
    -fx-background-color: transparent;
    -fx-padding: 0;
}

/* Ensure default labels inside CTA look normal when not hovered */
.github-cta .github-cta-text .label {
    -fx-underline: false;
}

/* On hover: blueish text and underline to indicate clickability */
.github-cta:hover .github-cta-text .label {
    -fx-text-fill: -never-blue;
    -fx-underline: true;
}
