/* ===================================================================
   SIMPLE VOID INSTALLER - MODERN DARK THEME (ui.css)
   =================================================================== */

/* --- 1. FARB-DEFINITIONEN --- */
@define-color bg_app        #1e1e1e;    /* Haupt-Hintergrund */
@define-color bg_card       #2d2d2d;    /* Karten-Hintergrund */
@define-color border_color  #404040;    /* Ränder */

@define-color text_main     #ffffff;    /* Haupttext */
@define-color text_sec      #b0b0b0;    /* Sekundärtext */

/* AKZENT: LEUCHTENDES ORANGE (Void Linux Style) */
@define-color accent_bg     #f47a21;
@define-color accent_fg     #ffffff; 
@define-color accent_hover  #f78836;

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

/* --- 2. BASIS-STYLING --- */
window, .background {
    background-color: @bg_app;
    color: @text_main;
    font-family: "Sans", sans-serif;
    font-size: 11pt;
}

/* WICHTIG: Container transparent machen, um schwarze Blöcke zu vermeiden */
box, grid {
    background-color: transparent;
}

label {
    color: @text_main;
}

.dim-label {
    color: @text_sec;
    font-size: 9pt;
    opacity: 0.8;
}

/* Überschriften */
.title-1 { font-size: 24pt; font-weight: 800; margin-bottom: 12px; }
.title-2 { font-size: 18pt; font-weight: 700; margin-bottom: 10px; }
.heading { font-size: 13pt; font-weight: bold; color: #eeeeee; margin-bottom: 6px; }

/* --- 3. HEADERBAR (OBEN) --- */
headerbar {
    background-color: @bg_app;
    color: @text_main;
    border-bottom: 1px solid @border_color;
    min-height: 46px;
}

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

headerbar button:hover {
    background-color: rgba(255,255,255,0.1);
}

/* --- 4. NAVIGATION BAR (UNTEN) --- */
.navigation-bar {
    background-color: rgba(30, 30, 30, 0.95);
    border-top: 1px solid @border_color;
    padding-top: 15px;
    padding-bottom: 15px;
}

.navigation-bar button {
    font-weight: bold;
    border-radius: 8px;
    padding: 8px 16px;
}

/* --- 5. BUTTONS --- */
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;
}

/* Der "Weiter"-Button (Orange) */
button.suggested-action {
    background-color: @accent_bg;
    color: @accent_fg;
    border-color: @accent_bg;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

button.suggested-action:hover {
    background-color: @accent_hover;
    border-color: @accent_hover;
    box-shadow: 0 3px 6px rgba(0,0,0,0.5);
}

button.suggested-action:disabled {
    background-color: #444444;
    color: #888888;
    border-color: #444444;
    box-shadow: none;
}

/* Flat Buttons (z.B. Sprache) */
button.flat {
    background: transparent;
    border: none;
    box-shadow: none;
}
button.flat:hover {
    background-color: rgba(255,255,255,0.1);
}

/* --- 6. CARDS (Container) --- */
.card {
    background-color: @bg_card;
    border: 1px solid @border_color;
    border-radius: 12px;
    padding: 0; /* Padding wird oft von innerer Box geregelt */
    margin: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Inhalt von Cards transparent machen */
.card box, .card grid, .card label {
    background-color: transparent;
}

/* --- 7. WELCOME VIEW (Kacheln) --- */
.welcome-container { padding: 20px; }
.welcome-title { font-size: 28pt; font-weight: 900; color: #ffffff; }
.welcome-subtitle { font-size: 14pt; color: @text_sec; }
.welcome-hero-icon { color: @accent_bg; margin-bottom: 8px; }

.step-tile {
    background-color: @bg_card;
    border: 1px solid @border_color;
    border-radius: 12px;
    padding: 6px;
    transition: all 0.2s ease;
}

.step-tile-title { font-weight: 800; font-size: 11pt; color: @text_main; }
.step-tile-desc { color: @text_sec; font-size: 9pt; }
.step-tile-icon { color: @accent_bg; opacity: 0.9; }

/* Klickbare Kacheln (Hover-Effekt) */
.clickable-tile {
    transition: all 0.2s ease;
}

.clickable-tile:hover {
    background-color: #383838;
    border-color: @accent_bg;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
}

/* Transparenz-Fix für Kacheln */
.step-tile box, .step-tile label, .step-tile image {
    background-color: transparent;
}

/* --- 8. INSTALL MODE CARDS (Große Auswahl) --- */
.clickable-card {
    transition: all 0.2s ease;
}

.clickable-card:hover {
    background-color: #353535;
    border-color: @accent_bg;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* --- 9. INPUTS & COMBOBOX --- */
entry, combobox {
    background-color: #222222;
    border: 1px solid @border_color;
    border-radius: 8px;
    color: #ffffff;
    min-height: 36px;
    padding: 0 8px;
}

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

/* --- 10. CHECKBOX & RADIO (Orange Style) --- */
checkbutton check, checkbutton radio {
    min-height: 22px;
    min-width: 22px;
    border: 2px solid #666666;
    background-color: transparent;
    color: transparent;
    transition: all 0.1s ease;
}

checkbutton check { border-radius: 4px; }
checkbutton radio { border-radius: 50%; }

checkbutton:hover check, checkbutton:hover radio {
    border-color: #aaaaaa;
    background-color: rgba(255,255,255,0.05);
}

checkbutton:checked check, checkbutton:checked radio {
    background-color: @accent_bg;
    border-color: @accent_bg;
    color: #ffffff;
    background-image: none;
}

/* --- 11. SUMMARY & LISTS --- */
.boxed-list {
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid @border_color;
}

.summary-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 8px;
}

.summary-row:last-child { border-bottom: none; }
.summary-key { font-weight: bold; color: #dddddd; }
.summary-value { color: @accent_bg; }

/* Transparenz-Fix für Listen */
.boxed-list row, .boxed-list box, .boxed-list label {
    background-color: transparent;
}

/* --- 12. MENÜS (Popovers) --- */
popover > contents {
    background-color: @bg_card;
    color: @text_main;
    border: 1px solid @border_color;
    border-radius: 10px;
    padding: 8px;
}

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

/* --- 13. ICONS --- */
.page-illustration {
    opacity: 0.5;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}
