/* --- ui.css (MODERN DARK THEME) --- */

/* =========================
   1. Color Tokens
   ========================= */
@define-color bg_app #1e1e1e;      /* Sehr dunkles Grau (Basis) */
@define-color bg_card #2d2d2d;     /* Karten-Hintergrund */
@define-color border_color #404040; /* Subtile Ränder */

@define-color text_main #ffffff;   /* Reinweiß für Haupttext */
@define-color text_sec #b0b0b0;    /* Helles Grau für Beschreibungen */
@define-color text_dim #707070;    /* Dunkleres Grau */

/* AKZENT: LEUCHTENDES ORANGE */
@define-color accent_bg #ff9800;
@define-color accent_fg #ffffff;
@define-color accent_hover #ffa726; /* Heller beim Drüberfahren */

@define-color btn_bg #383838;
@define-color btn_border #454545;
@define-color btn_hover #454545;

/* =========================
   2. Base Styling
   ========================= */
window, .background {
    background-color: @bg_app;
    color: @text_main;
}
/* WICHTIG: Layout-Boxen müssen durchsichtig sein! */
box {
    background-color: transparent;
    color: inherit;
}
label {
    color: @text_main;
}

.dim-label {
    color: @text_sec;
    font-size: 10pt;
}

/* =========================
   3. Headerbar (Titelleiste)
   ========================= */
headerbar {
    background-color: @bg_app; /* Verschmilzt mit dem Hintergrund */
    color: @text_main;
    border-bottom: 1px solid @border_color;
    min-height: 46px;
}

headerbar label.title {
    font-weight: 800;
    font-size: 11pt;
    color: @text_main;
}

headerbar button {
    background-color: transparent;
    color: #eeeeee;
    border: none;
    box-shadow: none;
}

headerbar button:hover {
    background-color: rgba(255,255,255,0.08); /* Heller Schimmer */
    color: #ffffff;
}

/* =========================
   4. Der "Weiter" Button (ORANGE & WEISS)
   ========================= */
/* Wir erzwingen den Style mit !important */

headerbar button.suggested-action {
    background-color: @accent_bg !important;
    border: 1px solid @accent_bg !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4) !important; /* Starker Schatten */
    font-weight: 800;
}

/* ALLES im Button muss weiß sein */
headerbar button.suggested-action,
headerbar button.suggested-action label,
headerbar button.suggested-action * {
    color: #ffffff !important;
}

/* Hover (Maus drüber) */
headerbar button.suggested-action:hover {
    background-color: @accent_hover !important;
    border-color: @accent_hover !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.5) !important;
}

headerbar button.suggested-action:hover label,
headerbar button.suggested-action:hover * {
    color: #ffffff !important;
}

/* Deaktiviert (Dunkelgrau) */
headerbar button.suggested-action:disabled {
    background-color: #333333 !important;
    border-color: #333333 !important;
    box-shadow: none !important;
}

headerbar button.suggested-action:disabled label,
headerbar button.suggested-action:disabled * {
    color: #777777 !important;
}

/* =========================
   5. Cards (Karten-Look)
   ========================= */
.card {
    background-color: @bg_card;
    border: 1px solid @border_color;
    border-radius: 12px;
    padding: 16px;
    margin: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Tiefe Schatten im Dark Mode */
}

/* Hover bei interaktiven Karten (Install Mode) */
.card:hover {
    border-color: #606060;
}

.card label.heading {
    font-weight: 700;
    font-size: 13pt;
    color: #ffffff; /* Reinweiß für Titel */
    margin-bottom: 6px;
}

/* =========================
   6. Normale Buttons (im Content)
   ========================= */
button {
    background-color: @btn_bg;
    color: #eeeeee;
    border: 1px solid @btn_border;
    border-radius: 8px;
    padding: 6px 12px;
    font-weight: 600;
    transition: all 0.1s ease;
}

button:hover {
    background-color: @btn_hover;
    border-color: #606060;
    color: #ffffff;
}

button.flat {
    background: transparent;
    border: none;
    box-shadow: none;
}

button.flat:hover {
    background-color: rgba(255,255,255,0.08);
}

/* =========================
   7. Inputs & Comboboxes
   ========================= */
entry, combobox {
    background-color: #222222; /* Dunkler als die Karte */
    border: 1px solid @border_color;
    border-radius: 8px;
    color: #ffffff;
    min-height: 36px;
    padding: 0 8px;
}

entry:focus, combobox:focus {
    border-color: @accent_bg;
    outline: none;
    box-shadow: 0 0 0 1px @accent_bg; /* Feiner oranger Rand */
}

combobox button {
    color: #ffffff;
    border: none;
    box-shadow: none;
    background: transparent;
}

/* =========================
   8. Popover (Menüs)
   ========================= */
popover.background > contents {
    background-color: @bg_card;
    color: @text_main;
    border: 1px solid @border_color;
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
}

popover button.flat {
    border-radius: 6px;
    padding: 6px;
    margin-bottom: 2px;
}

popover button.flat:hover {
    background-color: @accent_bg;
    color: @accent_fg;
}

/* =========================
   9. Welcome View (Startseite)
   ========================= */
.welcome-title {
    font-size: 20pt;
    font-weight: 900;
    color: #ffffff;
}

.welcome-subtitle {
    font-size: 11pt;
    color: @text_sec;
}

.welcome-hero-icon {
    color: @accent_bg; /* Icon wird Orange */
}

.welcome-step-title {
    font-weight: 700;
    color: #ffffff;
}

.welcome-step-desc {
    color: @text_sec;
    font-size: 9.5pt;
}

/* =========================
   10. Summary View
   ========================= */
.summary-card {
    background-color: @bg_card;
    border: 1px solid @border_color;
    border-radius: 12px;
}

.summary-row {
    border-bottom: 1px solid @border_color;
}

.summary-row:last-child {
    border-bottom: none;
}

.summary-key {
    font-weight: 700;
    color: @text_sec;
}

.summary-value {
    font-weight: 500;
    color: #ffffff;
}

/* =========================
   11. Check & Radio (FIX: Haken WEISS, Hintergrund ORANGE)
   ========================= */

/* 1. Basis-Zustand (Leer) */
checkbutton check,
checkbutton radio {
    min-height: 24px;
    min-width: 24px;
    border: 2px solid #707070;     /* Deutlicher grauer Rand */
    background-color: transparent;
    color: transparent;            /* Kein Symbol sichtbar */
    transition: all 0.1s ease;
}

/* Checkboxen leicht abrunden, Radios rund */
checkbutton check { border-radius: 4px; }
checkbutton radio { border-radius: 50%; }

/* 2. Hover (Maus drüber) */
checkbutton:hover check,
checkbutton:hover radio {
    border-color: #ffffff; /* Weißer Rand beim Hovern */
    background-color: rgba(255,255,255,0.05);
}

/* 3. ANGEHAKT (CHECKED) - HIER PASSIERT DIE MAGIE */
checkbutton:checked check,
checkbutton:checked radio {
    /* Der Hintergrund wird Orange */
    background-color: #ff9800 !important;
    border-color: #ff9800 !important;
    
    /* Der Haken / Punkt wird WEISS */
    color: #ffffff !important;
    
    /* Sicherheitshalber Standard-Bilder entfernen */
    background-image: none !important;
    opacity: 1;
}

/* 4. Active (Klicken) - Kein blaues Blitzen */
checkbutton:active check,
checkbutton:active radio {
    background-color: @accent_hover !important;
    color: #ffffff !important;
}

/* Deaktiviert (falls mal nötig) */
checkbutton:disabled check {
    opacity: 0.5;
}
/* --- Welcome View: Tiles (Kacheln) --- */

.step-tile {
    background-color: @bg_card;
    border: 1px solid @border_color;
    border-radius: 12px;
    padding: 0;
    transition: all 0.2s ease;
    /* Subtiler Schatten */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); 
}

/* Hover-Effekt: Kachel wird heller und Rand farbig */
.step-tile:hover {
    background-color: #383838; /* Etwas heller als bg_card */
    border-color: @accent_bg;  /* Oranger Rand */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transform: translateY(-2px); /* Leichtes Anheben */
}

.step-tile-icon {
    color: @accent_bg;
    opacity: 0.9;
}

.step-tile-title {
    font-weight: 800;
    font-size: 11pt;
    color: @text_main;
}

.step-tile-desc {
    color: @text_sec;
    font-size: 9pt;
}

/* Hero Bereich */
.welcome-hero-icon {
    color: @accent_bg;
    margin-bottom: 8px;
}
/* ========================================================
   FIX: Transparenz für Kacheln & Karten-Inhalte
   ======================================================== */

/* 
   Sorgt dafür, dass der Inhalt (Boxen, Grids, Labels) 
   die Farbe der Karte annimmt und nicht schwarz wird.
*/

/* Für die Kacheln auf der Startseite */
.step-tile box,
.step-tile grid,
.step-tile label,
.step-tile image {
    background-color: transparent !important;
    box-shadow: none;
    border: none;
}

/* Für die Karten auf allen anderen Seiten */
.card box,
.card grid,
.card label,
.card image {
    background-color: transparent !important;
    box-shadow: none;
    border: none;
}

/* Speziell für die Boxed-List (Zusammenfassung & Startseite Liste) */
.boxed-list row,
.boxed-list box,
.boxed-list label {
    background-color: transparent !important;
}

/* Damit Hover-Effekte auf der Startseite trotzdem funktionieren */
.step-tile:hover box, 
.step-tile:hover label {
    background-color: transparent !important;
}
.navigation-bar button {
    font-weight: bold;
    border-radius: 8px;
    padding: 8px 16px;
}

/* Optional: Eine Trennlinie über den Buttons */
.navigation-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
}
.clickable-tile:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: #3584e4; /* Ein schönes Blau beim Drüberfahren */
    transition: all 0.2s ease;
}
