# === Main Screen Layouts ===

DashboardScreen {
    layout: vertical;
    layers: below above;
}

InventoryScreen {
    layout: vertical;
    align: center top;
}

HostDetailsPanel {
    layout: vertical;
    align: center middle;
    background: $background 60%;
}

UpdateDetailsPanel {
    layout: vertical;
    align: center middle;
    background: $background 60%;
}

ProgressScreen {
    layout: vertical;
    align: center middle;
    background: $background 60%;
}

ErrorScreen {
    layout: vertical;
    align: center middle;
    background: $background 60%;
}

FilterScreen {
    layout: vertical;
    align: center middle;
    background: $background 60%;
}

SortScreen {
    layout: vertical;
    align: center middle;
    background: $background 60%;
}

# === Dashboard Components ===

#hosts-scroll {
    padding: 0;
}

#hosts-container {
    grid-gutter: 0 0;
    height: auto;
}

#empty-container {
    align: center middle;
    height: 100%;
}

.host-box {
    layout: vertical;
    width: 100%;
    height: 10;
    /* min-height: 8; */
    text-align: center;
    border: solid;
    layer: below;
    padding: 1 1;
}

.host-box.online {
    border: solid $success;
    tint: $success 10%;
}

.host-box.offline {
    border: solid $error;
    tint: $error 10%;
}

.host-name {
    text-align: center;
    width: 100%;
    height: 1;
}

.host-version {
    text-align: center;
    width: 100%;
    height: auto;
    max-height: 2;
}

.host-description {
    text-align: center;
    width: 100%;
    height: auto;
    max-height: 2;
    content-align: center top;
}

.host-status {
    dock: bottom;
    text-align: center;
    width: 100%;
    height: 1;
    content-align: center bottom;
}

# Host box online state - apply tint to children
.host-box.online .host-name,
.host-box.online .host-version,
.host-box.online .host-description,
.host-box.online .host-status {
    tint: $success 10%;
}

# Host box offline state - apply tint to children
.host-box.offline .host-name,
.host-box.offline .host-version,
.host-box.offline .host-description,
.host-box.offline .host-status {
    tint: $error 10%;
}

# === Detail Panels ===

.host-details {
    dock: right;
    width: 45%;
    height: 100%;
    padding: 2 2;
    background: $panel 30%;
}

.update-details {
    dock: left;
    width: 65%;
    height: 100%;
    padding: 2 2;
    background: $panel 30%;
}

.update-details #update-name {
    margin-bottom: 1;
}

.update-details #update-version-change {
    margin-bottom: 1;
}

.host-details #host-online {
    margin-bottom: 1;
}

.host-details #updates-table-container {
    height: 10fr;
    overflow-y: auto;
    margin-top: 1;
    margin-bottom: 1;
}

.update-details #update-security {
    margin-top: 1;
}

.update-details #update-source {
    margin-top: 1;
}

#close-instruction {
    dock: bottom;
    align: center bottom;
    text-align: center;
    color: $foreground-darken-3;
    text-style: italic;
}

# === Inventory Components ===

#inventory-container {
    width: 100%;
    height: 100%;
}

#inventory-table {
    width: 100%;
    height: 1fr;
}

.inventory-info {
    width: 100%;
    height: auto;
    padding: 0 1;
    background: $panel 30%;
    dock: bottom;
    grid-size: 4 1;
    grid-columns: 1fr auto auto auto;
}

#inventory-filter-label {
    text-style: italic;
    column-span: 1;
    color: $accent;
}

#inventory-separator {
    color: $foreground;
    column-span: 1;
    padding: 0 1;
    text-opacity: 30%;
}

#inventory-legend-label {
    text-style: italic;
    column-span: 1;
    text-align: right;
    text-opacity: 50%;
}

# === Message Boxes ===

# Empty message box
.empty-message {
    text-align: center;
    border: hkey $primary-darken-1;
    layer: above;
    padding: 2 2;
}

# Progress bar box
.progress-message {
    background: $panel;
    padding: 1;
    border: hkey $primary-darken-1;
    width: auto;
    height: auto;
    min-width: 40;
    max-width: 80;
    content-align: center middle;
    layout: vertical;
}

# Wrap progress message labels instead of overflowing the box
.progress-message Label {
    width: 100%;
    text-align: center;
    text-wrap: wrap;
    margin-bottom: 1;
}

# Abort line in progress bar box
#abort-message {
    text-align: center;
    color: $foreground-darken-3;
    text-style: italic;
    margin-top: 1;
}

# Error message box
.error-message {
    background: $panel;
    border: hkey $error;
    width: auto;
    height: auto;
    min-width: 40;
    max-width: 80;
}

# Filter message box
.filter-message {
    background: $panel;
    padding: 2;
    border: hkey $primary-darken-1;
    width: 50;
    height: auto;
    layout: vertical;
}

# Filter center container
#filter-center {
    width: auto;
    height: auto;
}

# Filter container
#filter-container {
    width: auto;
}

# Filter screen title
#filter-title {
    text-align: center;
    text-style: bold;
    width: 100%;
    margin-bottom: 2;
}

# Filter list view
#filter-list {
    width: auto;
    height: auto;
    margin-bottom: 1;
}

# Filter help text
#filter-help {
    text-align: center;
    width: 100%;
    margin-top: 2;
}

# Sort center container
#sort-center {
    width: auto;
    height: auto;
}

# Sort screen title
#sort-title {
    text-align: center;
    text-style: bold;
    width: 100%;
    margin-bottom: 2;
}

# Sort list view
#sort-list {
    width: auto;
    height: auto;
    margin-bottom: 1;
}

# Sort reverse checkbox
#sort-reverse {
    width: 100%;
    margin-top: 1;
}

# Sort help text
#sort-help {
    text-align: center;
    width: 100%;
    margin-top: 2;
}

.error-message Center {
    width: 100%;
}

.error-message Center Label {
    margin-top: 1;
    padding-bottom: 1;
    width: 100%;
    text-align: center;
    text-wrap: wrap;
}

.error-message Center Button {
    margin-bottom: 1;
}
