/* Main app screen with grid layout */
Screen.main-app {
    layout: grid;
    grid-size: 4 4;  /* 4 columns, 4 rows */
    grid-gutter: 1;
    height: 100vh;
    padding: 1;
}

/* Modal screens use vertical layout */
ModalScreen {
    layout: vertical;
    align: center middle;
    background: rgba(0, 0, 0, 0.7);
}

/* Header - spans all columns, first row */
#header {
    column-span: 4;
    row-span: 1;
    height: 3;
    content-align: center middle;
    text-style: bold;
    background: $boost;
    color: $text;
}

/* Footer - spans all columns, last row */
#footer {
    column-span: 4;
    row-span: 1;
    height: 1;
    background: $boost;
    color: $text-muted;
}

/* Repository list container - first column, spans 1 column, 2 rows */
#repo-container {
    column-span: 1;
    row-span: 2;
    width: 1fr;
    height: 100%;
    border: panel $boost;
    background: $surface;
    overflow: hidden;
    layout: vertical;
}

/* Repository details - spans 3 columns, 2 rows */
#repo-details {
    column-span: 3;
    row-span: 2;
    width: 1fr;
    height: 100%;
    border: panel $boost;
    background: $surface;
    overflow: auto;
}

/* Status bar - spans all columns, last row */
#status-bar {
    column-span: 4;
    row-span: 1;
    height: 20%;
    background: $boost;
    color: $text-muted;
    border-top: panel $accent;
    layout: vertical;
}

/* Log area styling */
#status-bar > RichLog {
    height: 100%;
    overflow-y: auto;
    padding: 0 1;
    background: $surface;
    border: none;
}

#status-bar > RichLog > .text-log {
    background: $surface;
}

/* Make sure the log area is scrollable */
#status-bar > RichLog > .text-log > .text-log--line {
    padding: 0 1;
    border-bottom: solid $boost;
}

.section-header {
    text-style: bold;
    text-align: center;
    padding: 1;
    border-bottom: solid $accent;
    height: auto;
}

#repo-list {
    height: 1fr;
    overflow-y: auto;
    background: $panel;
    scrollbar-gutter: stable;
}

#repo-list > ListItem {
    height: 1;
    padding: 0 1;
}

#repo-list > ListItem:hover {
    background: $accent 10%;
}

#repo-list > ListItem.--highlight {
    background: $accent 20%;
}

#repo-details {
    height: 100%;
}

/* Modal and Dialog styles */
Screen.-modal {
    align: center middle;
    background: rgba(0, 0, 0, 0.5);
}

Screen.-modal > Container {
    width: 60;
    height: auto;
    background: $panel;
    border: panel $accent;
    padding: 1 2;
}

.dialog-header {
    text-style: bold;
    height: 3;
    content-align: center middle;
    margin-bottom: 1;
}

.dialog-content {
    height: auto;
    margin: 1 0 2 0;
}

.dialog-content > * {
    margin: 1 0;
}

.dialog-buttons {
    height: auto;
    margin-top: 1;
    width: 100%;
    align: right middle;
}

.dialog-buttons > Button {
    margin-left: 1;
    width: 1fr;
}
