/* Server Management Styles */

/* Sub-Navigation */
.server-nav {
    margin-bottom: 20px;
    border-radius: 4px;
    overflow: hidden;
}

.server-nav .nav-wrapper {
    padding: 0 10px;
}

.server-subnav {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.server-subnav li {
    margin: 0;
}

.server-subnav li a {
    display: block;
    padding: 12px 20px;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.server-subnav li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-text-primary);
}

.server-subnav li.active a {
    color: var(--color-primary);
    border-bottom: 3px solid var(--color-primary);
    background-color: rgba(255, 87, 34, 0.1);
}

@media only screen and (max-width: 600px) {
    .server-subnav {
        flex-direction: column;
    }

    .server-subnav li a {
        padding: 10px 15px;
    }
}

/* Status Indicators */
.status-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    padding: 15px 0;
}

.status-indicator i {
    font-size: 3rem;
}

.status-indicator.running {
    color: var(--color-status-running);
}

.status-indicator.stopped {
    color: var(--color-status-stopped);
}

/* Input field styling */
.input-field input[type=text]:focus,
.input-field textarea.materialize-textarea:focus {
    border-bottom: 1px solid var(--color-primary);
    box-shadow: 0 1px 0 0 var(--color-primary);
}

.input-field input[type=text]:focus + label,
.input-field input[type=text]:focus:not([readonly]) + label,
.input-field textarea.materialize-textarea:focus + label,
.input-field textarea.materialize-textarea:focus:not([readonly]) + label {
    color: var(--color-primary) !important;
}

.input-field label.active {
    color: var(--color-text-primary);
}

.input-field .prefix.active {
    color: var(--color-primary);
}

.input-field input[type=text],
.input-field input[type=number],
.input-field textarea {
    color: var(--color-text-primary);
}

/* Primary color for flat action buttons */
.btn-flat.primary-text,
.btn-flat.primary-text i {
    color: var(--color-primary) !important;
}

.btn-flat.primary-text:hover {
    background-color: rgba(255, 87, 34, 0.15);
}

/* Hide number input spinners */
.input-field input[type=number]::-webkit-outer-spin-button,
.input-field input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.input-field input[type=number] {
    -moz-appearance: textfield;
}

.input-field label,
.input-field label.active {
    left: 0 !important;
}

/* Form row spacing - gap between columns only */
form.col .row {
    margin-left: 0;
    margin-right: 0;
}

form.col .row > .col {
    padding-left: 0;
}

form.col .row > .col:not(:last-child) {
    padding-right: 1.5rem;
}

/* Helper text styling */
.input-field .helper-text {
    color: var(--color-text-muted);
}

/* Select dropdown styling */
.select-wrapper input.select-dropdown {
    color: var(--color-text-primary) !important;
}

.select-wrapper input.select-dropdown:disabled {
    color: var(--color-text-muted) !important;
    border-bottom-color: var(--color-border-dark) !important;
}

.select-wrapper input.select-dropdown:focus {
    border-bottom: 1px solid var(--color-primary);
}

.select-wrapper .caret {
    fill: var(--color-text-primary);
}

/* Select label styling */
.input-field > label:not(.label-icon) {
    color: var(--color-text-muted) !important;
}

.input-field > label.active {
    color: var(--color-text-muted) !important;
}

.dropdown-content {
    background-color: var(--color-bg-card);
}

.dropdown-content li > span {
    color: var(--color-text-primary);
}

.dropdown-content li:hover {
    background-color: var(--color-bg-medium);
}

.dropdown-content li.disabled > span {
    color: var(--color-text-muted);
}

.dropdown-content li.selected {
    background-color: var(--color-bg-light);
}

/* Modset Cards */
.modset-card {
    background-color: var(--color-bg-card);
}

.modset-card.predefined {
    border-left: 4px solid var(--color-primary);
}

.modset-card .badge {
    float: right;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
}

/* Status Badges */
.status-badge {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 500;
}

.status-badge.status-pending {
    background-color: var(--color-status-pending);
    color: var(--color-text-primary);
}

.status-badge.status-downloading {
    background-color: var(--color-status-downloading);
    color: var(--color-text-primary);
}

.status-badge.status-paused {
    background-color: var(--color-status-paused);
    color: #000;
}

.status-badge.status-completed {
    background-color: var(--color-status-completed);
    color: var(--color-text-primary);
}

.status-badge.status-failed {
    background-color: var(--color-status-failed);
    color: var(--color-text-primary);
}

.status-badge.status-cancelled {
    background-color: var(--color-status-cancelled);
    color: var(--color-text-primary);
}

/* Result Badges */
.result-badge {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 500;
}

.result-badge.result-success {
    background-color: var(--color-success);
    color: var(--color-text-primary);
}

.result-badge.result-failed {
    background-color: var(--color-error);
    color: var(--color-text-primary);
}

.result-badge.result-debug_mode {
    background-color: var(--color-status-debug);
    color: var(--color-text-primary);
}

/* DLC Chips */
.dlc-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    vertical-align: middle;
}

.dlc-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.dlc-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1.4;
    white-space: nowrap;
}

.dlc-chip-cdlc {
    background-color: var(--color-primary);
    color: var(--color-text-primary) !important;
}

.dlc-chip-cdlc:hover {
    background-color: var(--color-primary);
    opacity: 0.85;
    text-decoration: none;
}

.dlc-chip-base {
    background-color: var(--color-bg-light);
    color: var(--color-text-muted) !important;
    border: 1px solid var(--color-border-dark);
}

.dlc-chip-base:hover {
    background-color: var(--color-bg-medium);
    text-decoration: none;
}

.dlc-banner {
    border-left: 4px solid var(--color-primary);
}

.dlc-auto-selected span {
    color: var(--color-primary-light);
    font-weight: 500;
}

.dlc-auto-selected span::after {
    content: " (vom Modset benötigt)";
    color: var(--color-text-muted);
    font-weight: 400;
    font-size: 0.85em;
}

/* Command Badge */
.command-badge {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 500;
    background-color: var(--color-bg-light);
    color: var(--color-text-primary);
    font-family: monospace;
}

/* Progress Bar */
.progress {
    background-color: var(--color-bg-light);
    height: 10px;
    margin: 5px 0;
}

.progress .determinate {
    background-color: var(--color-primary);
}

.progress-text {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* Command Output */
.command-output {
    background-color: var(--color-bg-dark);
    color: var(--color-success);
    padding: 15px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.85rem;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 400px;
    overflow-y: auto;
}

/* Inline Forms */
.inline-form {
    display: inline-block;
    margin-right: 10px;
}

/* Quick Action Buttons */
.btn-large {
    margin: 5px 0;
}

/* Card Actions */
.card-action form.inline-form {
    display: inline-block;
}

/* Modal Styles */
.modal {
    background-color: var(--color-bg-card);
}

.modal .modal-content {
    color: var(--color-text-primary);
}

.modal .modal-footer {
    background-color: var(--color-bg-card);
    border-top: 1px solid var(--color-border-dark);
}

/* Table Styles */
table.striped > tbody > tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.05);
}

table th {
    color: var(--color-text-muted);
}

/* Code Styling */
code {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.9em;
}

/* Collection Items */
.collection-item {
    background-color: var(--color-bg-card) !important;
    border-bottom-color: var(--color-border-dark) !important;
}

.collection-item a {
    color: var(--color-primary);
}

/* Responsive Adjustments */
@media only screen and (max-width: 600px) {
    .status-indicator {
        font-size: 1.2rem;
    }

    .status-indicator i {
        font-size: 2rem;
    }

    .btn-large {
        width: 100%;
    }
}

/* Workshop Search Results */
.search-results {
    margin-top: 15px;
}

.search-result-card {
    margin-bottom: 10px;
}

.search-result-card .card-content {
    padding: 12px;
}

.search-result-card .card-action {
    padding: 10px 15px;
    border-top: 1px solid var(--color-border-dark);
}

.search-result-content {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.search-result-preview {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.search-result-preview-placeholder {
    width: 80px;
    height: 80px;
    background-color: var(--color-bg-medium);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.search-result-preview-placeholder i {
    font-size: 2rem;
    color: var(--color-text-muted);
}

.search-result-info {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    font-weight: 500;
    font-size: 1.1rem;
    color: var(--color-text-primary);
    display: block;
    margin-bottom: 5px;
}

.search-result-description {
    font-size: 0.85rem;
    margin: 0 0 8px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.search-result-meta {
    display: flex;
    gap: 15px;
    font-size: 0.85rem;
}

.search-result-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.search-result-meta i {
    font-size: 1rem;
}

/* More results info box */
.search-more-results {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 15px;
    background-color: var(--color-bg-medium);
    border-radius: 4px;
    border-left: 4px solid var(--color-info);
    margin-top: 15px;
    color: var(--color-text-muted);
}

.search-more-results i {
    color: var(--color-info);
    flex-shrink: 0;
}

.search-more-results a {
    color: var(--color-primary);
}

.search-more-results a:hover {
    text-decoration: underline;
}

/* Highlight animation for selected card */
.highlight-card {
    animation: highlight-pulse 1.5s ease-out;
}

@keyframes highlight-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 87, 34, 0.6);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(255, 87, 34, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 87, 34, 0);
    }
}

/* Drop zone styling */
.drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    margin-bottom: 20px;
    border: 2px dashed var(--color-text-disabled);
    border-radius: 8px;
    background-color: var(--color-bg-card);
    cursor: pointer;
    transition: all 0.3s ease;
}

.drop-zone:hover {
    border-color: var(--color-primary);
    background-color: var(--color-bg-medium);
}

.drop-zone-active {
    border-color: var(--color-primary);
    background-color: var(--color-bg-medium);
    border-style: solid;
}

.drop-zone i {
    color: var(--color-text-disabled);
    margin-bottom: 16px;
    transition: color 0.3s ease;
}

.drop-zone:hover i,
.drop-zone-active i {
    color: var(--color-primary);
}

.drop-zone p {
    margin: 4px 0;
    color: var(--color-text-primary);
}

.drop-zone-hint {
    font-size: 0.9rem;
    color: var(--color-text-muted) !important;
}

#upload-progress {
    text-align: center;
    padding: 40px;
    background-color: var(--color-bg-card);
    border-radius: 8px;
    margin-bottom: 20px;
}

#upload-status {
    color: var(--color-text-primary);
    margin-top: 15px;
}

/* Responsive Search Results */
@media only screen and (max-width: 600px) {
    .search-result-content {
        flex-direction: column;
    }

    .search-result-preview,
    .search-result-preview-placeholder {
        width: 100px;
        height: 100px;
    }

    .search-result-meta {
        flex-wrap: wrap;
        gap: 10px;
    }
}

/* === Server settings (CBA / profile vars) editor === */

/* Dark tab bar to match the theme (Materialize defaults to a white bar). */
.server-settings-tabs {
    background-color: var(--color-bg-card);
    border-radius: 4px;
}

.server-settings-tabs .tab a {
    color: var(--color-text-muted);
}

.server-settings-tabs .tab a:hover,
.server-settings-tabs .tab a.active {
    color: var(--color-text-primary);
    background-color: transparent;
}

.server-settings-tabs .tab a:focus,
.server-settings-tabs .tab a:focus.active {
    background-color: rgba(255, 255, 255, 0.05);
}

.server-settings-tabs .indicator {
    background-color: var(--color-primary);
}

.cba-row-form {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0;
}

.cba-row-form .cba-field {
    min-width: 140px;
    flex: 0 0 auto;
}

/* Priority shown as force/force-force checkboxes (like CBA's in-game UI). */
.cba-row-form .cba-priority {
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 320px;
}

.cba-row-form .cba-priority label {
    margin: 0;
}

/* Inputs/selects should blend into the row, not render as black boxes. */
.cba-row-form input[type="text"],
.cba-row-form input[type="number"] {
    margin: 0;
    height: 2rem;
    background-color: transparent;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border-medium);
    box-shadow: none;
    box-sizing: border-box;
}

.cba-row-form .select-wrapper input.select-dropdown {
    margin: 0;
    height: 2rem;
    background-color: transparent;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border-medium);
}

.cba-row-form .select-wrapper .caret {
    fill: var(--color-text-muted);
}

.var-value {
    max-width: 400px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Long "Wert" values: clamp to a couple of lines until expanded. */
.value-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.value-text.expanded {
    display: block;
    -webkit-line-clamp: unset;
}

.value-toggle.btn-flat {
    height: auto;
    line-height: 1.4;
    padding: 0;
    margin-top: 2px;
    font-size: 0.8rem;
    text-transform: none;
    color: var(--color-primary);
}

/* Materialize's .btn-flat sets display:inline-block, which overrides the
   [hidden] attribute - force hidden toggles to stay hidden. */
.value-toggle[hidden] {
    display: none !important;
}

/* Striping for the settings tables is applied in JS over the *visible* rows
   (.row-odd), so it stays correct under filtering/paging - disable the default
   position-based striping for these tables. */
#cba-table.striped > tbody > tr:nth-child(odd),
#vars-table.striped > tbody > tr:nth-child(odd),
#backups-table.striped > tbody > tr:nth-child(odd) {
    background-color: transparent;
}

#cba-table tbody tr.row-odd,
#vars-table tbody tr.row-odd,
#backups-table tbody tr.row-odd {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Search + page-size toolbar above each settings table. */
.settings-toolbar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.settings-toolbar .settings-search {
    flex: 1;
    min-width: 220px;
    margin: 0;
}

.settings-toolbar .settings-pagesize {
    flex-shrink: 0;
}

.settings-toolbar select.browser-default {
    background-color: var(--color-bg-card);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-dark);
    border-radius: 4px;
    height: 2.5rem;
    padding: 0 0.75rem;
}

/* Pagination controls below each settings table. */
.settings-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.settings-pager .btn-flat[disabled] {
    opacity: 0.4;
}