styles.tcss

$background: #0a1f0a;
$surface: #1a2e1a;
$primary: #2e7d32;
$primary-light: #4caf50;
$accent: #66bb6a;
$text: #ffffff;

* {
    scrollbar-background: $background;
    scrollbar-color: $primary-light;
    scrollbar-corner-color: $primary;
}

Screen {
    layout: vertical;
    background: $background;
}

Horizontal {
    height: 100%;
}

Header {
    background: $primary;
    color: $text;
}

Footer {
    background: $surface;
    color: $text;
    height: auto;

    .footer--key {
        color: $text;
        background: $primary;
    }

    .footer--highlight {
        color: $accent;
    }

    .footer--description {
        color: $text;
    }
}

ListView {
    height: 1fr;
    width: 100%;
    border: round $primary-light;
    background: $background;
    scrollbar-background: $background;
    scrollbar-color: $primary-light;
    scrollbar-corner-color: $primary;

    ListItem {
        padding: 1 2;
        background: $surface;

        &:hover {
            background: $primary 50%;
        }

        &.-selected {
            background: $primary-light;
            color: $text;
        }
    }

    &:focus > ListItem.-selected {
        background: $primary;
        color: $text;
    }
}

Button {
    width: 100%;
    margin-top: 1;
    background: transparent;
    color: $text;
    border: round $primary-light;

    &:hover {
        background: $primary-light 50%;
    }
}

.section-title {
    background: transparent;
    color: $text;
    padding: 1;
    text-align: center;
    text-style: bold;
    border: round $primary-light;
}

.button-container {
    width: 100%;
    height: auto;
    align: center middle;

    Button {
        width: 1fr;
        margin: 1 1;
    }
}

#app-container {
    width: 100%;
    height: 1fr;
}

#main-content {
    width: 100%;
    height: 100%;
    margin: 1 1;
}

#left-panel {
    width: 40%;
    margin-right: 1;
    layout: vertical;
    height: 100%;
}

#right-panel {
    width: 60%;
    layout: vertical;
    height: 100%;
}

#details {
    height: 1fr;
    border: round $primary-light;
    margin-bottom: 1;
    background: $background;
    color: $text;

    .details-content {
        padding: 1;
    }
}

#manage_applications_button {
    margin: 1 1;
    width: 1fr;
}

#processes_container {
    width: 100%;
    height: 100%;
}

#processes_modal {
    layout: vertical;
    background: $background;
    height: 1fr;
    width: 33%;
    padding: 1;

    #running_apps_list {
        height: 1fr;
        margin: 1 0;
        border: round $primary-light;
    }

    #running_apps_list > ListItem {
        padding: 1 2;
        background: transparent;
        border: round $primary-light;
        height: 5;  /* Set a fixed height for the list items */

        &:hover {
            background: transparent;
        }
    }

    .action-button {
        width: 10;
        min-width: 0;
        padding: 0 1;
        margin: 0 1;
        height: 1;
        background: $primary;
        color: $text;
        border: none;
    }

    Button {
        margin-top: 1;
        width: 100%;
    }
}

#output_sidebar {
    width: 67%;
    background: $background;
    border-left: solid $primary;
    padding: 1;

    &.hidden {
        display: none;
    }
}

#output_title {
    background: transparent;
    border: round $primary-light;
    color: $text;
    text-align: center;
    padding: 1;
    text-style: bold;
}

#process_output {
    height: 1fr;
    border: round $primary-light;
    margin-top: 1;
    background: transparent;
    color: $text;
    padding: 1;
}

#manage_applications_modal {
    layout: vertical;
    background: $background;
    padding: 1;
    width: 100%;
    height: 100%;

    .modal-title {
        text-style: bold;
        text-align: center;
        padding: 1;
        background: transparent;
        border: round $primary-light;
        color: $text;
    }

    #yaml_editor {
        height: 1fr;
        border: round $primary-light;
        margin: 1 0;
        background: transparent;
        color: $text;
        scrollbar-background: $background;
        scrollbar-color: $primary-light;
        scrollbar-corner-color: $primary;

        .border-title {
            background: $primary;
            color: $text;
            padding: 0 1;
        }
    }

    .button-container {
        width: 100%;
        height: auto;
        align: center middle;
        padding: 1;
        background: transparent;
    }

    Button {
        margin: 0 2;
        width: 20%;
    }
}

.list-item-content {
    width: 100%;
    height: 100%;
    layout: horizontal;
    align: left middle;
}

.app-info {
    width: 1fr;
    content-align: left middle;
    padding: 0 1;
}



.action-button:hover {
    background: $primary-light;
}