Screen {
    layout: grid;
    grid-size: 1;
    grid-rows: 1fr;
}

*{
    border-subtitle-color: $primary-darken-1;
    border-title-color: $primary-darken-1;
}



#status-bar {
    dock: bottom;
    height: 2;
    margin: 0;
    padding: 0 1;
    background:$primary-darken-3;
    color: $foreground;
}

#status.normal {
    color: $background;
}

#status.success {
    color: $success;
}

#status.error {
    color: $error;
}

#status.warning {
    color: $warning;
}

#file-explorer-area {
    width: 30%;
    height: 100%;
    dock: left;
}

DirectoryTree > .tree--guides {
    color: $primary;
}

TopicTree > .tree--guides {
    color: $primary;
}

#topic-search {
    width: 100%;
    height: 1;
    background: $background;
    border: none;
    margin-bottom: 1;
}

BagExplorer {
    background: $background;
    border: $border;
    padding: 1; 
    height: 100%;
}

#topics-area {
    height: 60%;
}

#tasks-table-container{
    height: 40%;
}

TopicTreePanel {
    width: 50%;
    background: $background;
    border: $border;
    padding: 0 1;
    layout: vertical;
}

TopicTree {
    background: $background;
    color:$foreground-lighten-2
}

#topic-search {
    width: 100%;
    padding: 0;
    background: $background-lighten-1;
    border: none;
    text-align: center;
}



ControlPanel {
    width: 50%;
    layout: horizontal;
    border: $border;    

}

#run-btn-container {
    align: right bottom;
    padding: 0;
    margin: 0;
}

#run-btn{
    background: $primary;
    color: $background;
}


#time-range-container1, #time-range-container2{
    width: 100%;
    padding: 0 1;
}
#output-file-container {
    width: 100%;
    padding: 0 1;
}


#time-range-container1 > .time-input,
#time-range-container2 > .time-input,
#output-file-container > .file-input {
    width: 100%;
    padding: 0;
    background: $background-lighten-1;
    border: none;
    text-align: center;
}

#time-range-container1 > .time-input:hover,
#time-range-container2 > .time-input:hover,
#output-file-container > .file-input:hover {
    border: none;
    padding: 0;
    color: $warning;
}


TaskTable {
    width: 100%;
    height: 100%;
    border: $border;
    background: $background;
    color: $foreground;
}



TaskTable.has-header  > .datatable--header {
    background:$primary;
    color: $background;
}




Button {
    width: 15%;
    margin: 0 1;
    border: none;
}
#main-container {
    layout: horizontal;
    height: 100%;
    margin: 0;
    padding: 0;
}

#right-top {
    height: 40%;
    layout: horizontal;
}

#right-top-left, #right-top-right {
    width: 40%;
    height: 100%;
    border: $border;
    margin: 1;
    background: $background;
}

#right-middle {
    height: 20%;
    border: $border;
    margin: 1;
    background: $background;
}

#right-bottom {
    height: 30%;
    layout: horizontal;
}

#right-bottom-left, #right-bottom-right {
    width: 50%;
    height: 100%;
    border: $border;
    margin: 1;
    background: $background;
}

#splash-content {
    align: center middle;
    background: $background;
}

#logo {
    color: $primary;
    content-align-horizontal: center;
}

#subtitle {
    background:$primary;
    color: $foreground;
    content-align-horizontal: center;
}

#prompt {
    background:$secondary;
    content-align-horizontal: center;
    color: $foreground;
}

#about {
    align: center bottom;
    padding: 1;
    color: $accent;
}

#about-divider {
    height: 1;
}
.about-link {
    color: $accent;
    background: $link-background;
}

#whitelist-header{
    text-align: center;
}

#whitelist-container {
    padding: 1;
}
#whitelist-preview{
    background: $background;
}
#whitelist-select{
    background: $background;
}
#dialog-container {
    background: $background;
    padding: 1;
    width: 40%;
    height: 8;
    border: thick $primary;
    
}

#dialog-buttons {
    layout: horizontal;
    align-horizontal: center;
    margin-top: 1;
    color: $accent;
    border: none;
}

.confirm-btn{
    color: $background;
    background: $primary;
}
.confirm-btn:hover{
    background: $accent;
}


ConfirmDialog {
    align: center middle;
}

LogsScreen {
    align: center middle;
}

#logs-container {
    width: 95%;
    height: 90%;
    border: solid $primary;
}
.logs {
    background: $surface-darken-1;
    color: $text;
    height: 100%;
    border: none;
    overflow-y: scroll;
}


.logs:hover {
    scrollbar-background: $surface-lighten-1;
    scrollbar-color: $primary-lighten-1;
    scrollbar-color-hover: $primary-lighten-2;
    scrollbar-color-active: $primary-lighten-3;
}



