"""
CSS styles and theming for the hosts TUI application.

This module contains all CSS definitions for consistent styling
across the application.
"""

# Common CSS classes shared across components
COMMON_CSS = """
.default-button {
    margin: 0 1;
    min-width: 10;
}

.default-checkbox {
    height: 1fr;
    margin: 0 2;
    border: none;
}

.default-input {
    height: 1fr;
    width: 1fr;
    margin: 0 2;
    border: none;
}

.default-radio-set {
    margin: 0 2;
    border: none;
}

.default-section {
    border: round $primary;
    height: 3;
    padding: 0;
    margin: 1 0;
}

.default-flex-section {
    border: round $primary;
    height: auto;
    padding: 0;
    margin: 1 0;
}

.button-row {
    margin-top: 2;
    height: 3;
    align: center middle;
}

.hidden {
    display: none;
}

.section-no-top-margin {
    margin-top: 0 !important;
}
"""

# CSS styles for the hosts manager application
HOSTS_MANAGER_CSS = (
    COMMON_CSS
    + """
.search-container {
    border: round $primary;
    height: 3;
    padding: 0 1;
    margin-top: 1;
    margin-bottom: 0;
}

.search-input {
    height: 1fr;
    width: 1fr;
    border: none;
}

.hosts-container {
    height: 1fr;
    margin-top: 0;
}

.common-pane {
    border: round $primary;
    margin: 0;
}

.left-pane {
    width: 60%;
}

.right-pane {
    width: 40%;
}

.entry-active {
    color: $success;
}

.entry-inactive {
    color: $warning;
    text-style: italic;
}

/* DataTable styling to match background */
#entries-table {
    background: $background;
}

#entries-table .datatable--header {
    background: $surface;
}

#entries-table .datatable--even-row {
    background: $background;
}

#entries-table .datatable--odd-row {
    background: $surface;
}

/* DataTable row styling - colors are now handled via Rich Text objects */

.hidden {
    display: none;
}

.status-bar {
    height: 1;
    width: 100%;
    background: $error;
    color: $text;
    content-align: center middle;
    layer: overlay;
    dock: top;
    offset-y: 1;
}

.status-bar.hidden {
    display: none;
}

.entry-form {
    height: auto;
    padding: 1;
}

Header {
    height: 1;
}

Header.-tall {
    height: 1; /* Fix tall header also to height 1 */
}

/* Custom Footer Styling */
CustomFooter {
    background: $surface;
    color: $text;
    dock: bottom;
    height: 1;
    padding: 0 1;
    width: 100%;
}

CustomFooter > Horizontal {
    height: 1;
    width: 100%;
    align: left middle;
}

.footer-left {
    width: auto;
    text-align: left;
    text-style: dim;
    height: 1;
    content-align: left middle;
}

.footer-spacer {
    width: 1fr;
    height: 1;
}

.footer-right {
    width: auto;
    text-align: right;
    text-style: dim;
    height: 1;
    content-align: right middle;
}

.footer-separator {
    width: auto;
    color: $primary;
    text-style: dim;
    height: 1;
    content-align: center middle;
}

.footer-status {
    width: auto;
    text-align: right;
    color: $accent;
    text-style: bold;
    height: 1;
    content-align: right middle;
}
"""
)


# Add Entry Modal CSS
ADD_ENTRY_MODAL_CSS = (
    COMMON_CSS
    + """
AddEntryModal {
    align: center middle;
}

.add-entry-container {
    width: 80;
    height: 26;
    background: $surface;
    border: thick $primary;
    padding: 1;
}

.add-entry-title {
    text-align: center;
    text-style: bold;
    color: $primary;
    margin-bottom: 1;
}

.validation-error {
    color: $error;
    margin: 0 2;
    text-style: italic;
}
"""
)

# Delete Confirmation Modal CSS
DELETE_CONFIRMATION_MODAL_CSS = (
    COMMON_CSS
    + """
DeleteConfirmationModal {
    align: center middle;
}

.delete-container {
    width: 60;
    height: 16;
    background: $surface;
    border: thick $error;
    padding: 1;
}

.delete-title {
    text-align: center;
    text-style: bold;
    color: $error;
    margin-bottom: 1;
}

.delete-message {
    text-align: center;
    margin: 1 0;
}

.entry-info {
    text-align: center;
    text-style: bold;
    color: $primary;
    margin: 1 0;
}
"""
)

# Password Modal CSS
PASSWORD_MODAL_CSS = (
    COMMON_CSS
    + """
PasswordModal {
    align: center middle;
}

.password-container {
    width: 60;
    height: 11;
    background: $surface;
    border: thick $primary;
    padding: 1;
}

.password-title {
    text-align: center;
    text-style: bold;
    color: $primary;
    margin-bottom: 1;
}

.password-message {
    text-align: center;
    color: $text;
    margin-bottom: 1;
}

.error-message {
    color: $error;
    text-align: center;
    margin: 1 0;
}
"""
)

# Config Modal CSS
CONFIG_MODAL_CSS = (
    COMMON_CSS
    + """
ConfigModal {
    align: center middle;
}

.config-container {
    width: 80;
    height: 20;
    background: $surface;
    border: thick $primary;
    padding: 1;
}

.config-title {
    text-align: center;
    text-style: bold;
    color: $primary;
    margin-bottom: 1;
}

.config-section {
    margin: 1 0;
}

.config-option {
    margin: 0 2;
}
"""
)

# Save Confirmation Modal CSS
SAVE_CONFIRMATION_MODAL_CSS = (
    COMMON_CSS
    + """
SaveConfirmationModal {
    align: center middle;
}

.save-confirmation-container {
    width: 60;
    height: 15;
    background: $surface;
    border: thick $primary;
    padding: 1;
}

.save-confirmation-title {
    text-align: center;
    text-style: bold;
    color: $primary;
    margin-bottom: 1;
}

.save-confirmation-message {
    text-align: center;
    margin-bottom: 2;
    color: $text;
}

.save-confirmation-button {
    margin: 0 1;
    min-width: 12;
}
"""
)
