Screen {
    background: $background;
}

.title {
    height: 3;
    background: $primary-darken-2;
    color: $text;
    content-align: center middle;
    text-style: bold;
    border: solid $primary;
}

.search-container {
    height: 7;
    background: $surface;
    padding: 1 2;
    border: solid $accent;
    width: 100%;
}

.weather-container {
    width: 60%;
    height: 1fr;
    background: $surface;
    margin: 1;
    border: solid $primary;
    padding: 0;
}

.forecast-container {
    width: 100%;
    height: 1fr;
    background: $surface;
    margin: 1;
    border: solid $secondary;
    padding: 0;
}

.details-container {
    width: 100%;
    height: 1fr;
    background: $surface;
    margin: 1;
    border: solid $accent;
    padding: 0;
}

.art-container {
    width: 40%;
    height: 1fr;
    background: $surface;
    margin: 1;
    border: solid $warning;
    padding: 0;
}

.hourly-container {
    width: 100%;
    height: 1fr;
    background: $surface;
    margin: 1;
    border: solid $warning;
    padding: 0;
}

/* Nested TabbedContent within hourly tab */
.hourly-container TabbedContent {
    height: 1fr;
    margin: 0;
    padding: 0;
}

.hourly-container TabPane {
    padding: 0;
    height: 1fr;
    margin: 0;
}

.hourly-container Container {
    width: 100%;
    height: 1fr;
    margin: 0;
    padding: 0;
    border: none;
}

Input {
    margin: 0 1;
    width: 1fr;
    min-width: 20;
    border: solid $accent;
}

Button {
    margin: 0 1;
    width: auto;
    min-width: 10;
    border: solid $warning;
}

WeatherDisplay {
    padding: 1;
    height: 1fr;
    border: none;
    overflow-y: auto;
}

ForecastDisplay {
    padding: 1;
    height: 1fr;
    border: none;
    overflow-y: auto;
}

TabbedContent {
    height: 1fr;
    min-height: 20;
}

TabPane {
    padding: 0;
    height: 1fr;
}

HourlyDisplay {
    padding: 1;
    height: 1fr;
    border: none;
    overflow-y: auto;
}

DetailedDisplay {
    padding: 1;
    height: 1fr;
    border: none;
    overflow-y: auto;
}

AsciiArtDisplay {
    padding: 1;
    height: 1fr;
    border: none;
    overflow-y: auto;
}

TomorrowHourlyDisplay {
    padding: 1;
    height: 1fr;
    border: none;
    overflow-y: auto;
}