/* Theme variables */
:root[data-bs-theme="light"] {
    --bg-custom: var(--bs-light);
    --text-custom: var(--bs-dark);
    --border-custom: var(--bs-gray-300);
}

:root[data-bs-theme="dark"] {
    --bg-custom: var(--bs-dark);
    --text-custom: var(--bs-light);
    --border-custom: var(--bs-gray-700);
}

/* General styles */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--bg-custom);
    color: var(--text-custom);
}

main {
    flex-grow: 1;
}

/* Fix for content display */
.content-preview {
    background-color: var(--bs-dark);
    border-radius: 0.25rem;
    padding: 1rem;
    overflow-x: auto;
    max-height: 700px;
    overflow-y: auto;
    font-family: monospace;
    font-size: 0.9rem;
    line-height: 1.5;
}

.content-preview pre {
    margin: 0;
    color: var(--bs-light);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Truncated text */
.truncate {
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status pills */
.status-pill {
    border-radius: 1rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-pending {
    background-color: var(--bs-warning);
    color: var(--bs-dark);
}

.status-running {
    background-color: var(--bs-info);
    color: var(--bs-dark);
}

.status-completed {
    background-color: var(--bs-success);
    color: var(--bs-dark);
}

.status-failed {
    background-color: var(--bs-danger);
    color: var(--bs-white);
}

/* Charts */
.chart-container {
    position: relative;
    height: 300px;
}

/* Dashboard stats */
.stat-card {
    border-left: 4px solid;
}

.stat-card.completed {
    border-color: var(--bs-success);
}

.stat-card.running {
    border-color: var(--bs-info);
}

.stat-card.pending {
    border-color: var(--bs-warning);
}

.stat-card.failed {
    border-color: var(--bs-danger);
}

/* Modal and backdrop styles */
.modal, .modal-backdrop {
    transition: none !important;
}

/* Tab content styles */
.tab-content {
    position: relative;
    min-height: 500px;
    width: 100%;
}

.tab-pane {
    display: none;
    width: 100%;
}

.tab-pane.active {
    display: block;
}

.fade {
    opacity: 1;
}

.content-preview {
    max-height: 700px;
    overflow-y: auto;
    width: 100%;
}