:root {
    --collabia-bg: #f4f6f8;
    --collabia-card: #ffffff;
    --collabia-accent: #0b7285;
    --collabia-accent-2: #1f4f78;
}

body {
    background: var(--collabia-bg);
    font-family: "Source Sans 3", "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
}

.card {
    border: 1px solid #e6eaef;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(15, 45, 62, 0.05);
}

.badge-ok {
    background-color: #0a7f4f;
}

.badge-warning {
    background-color: #d0911a;
}

.badge-danger {
    background-color: #c92c3a;
}

.hero {
    background: linear-gradient(120deg, #e9f2f7, #f9fbfc);
    border-radius: 16px;
    padding: 24px;
}

.card-title i {
    color: var(--collabia-accent-2);
}

.btn {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 6px 16px rgba(11, 114, 133, 0.12);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(11, 114, 133, 0.16);
}

.btn-primary {
    background: linear-gradient(135deg, #0b7285 0%, #1f4f78 100%);
    border: none;
}

.btn-outline-primary {
    border-color: #0b7285;
    color: #0b7285;
}

.btn-outline-primary:hover {
    background: #0b7285;
    color: #fff;
}

.btn-danger {
    background: linear-gradient(135deg, #c92c3a 0%, #8f1e2a 100%);
    border: none;
}

.btn-outline-danger {
    border-color: #c92c3a;
    color: #c92c3a;
}

.btn-outline-danger:hover {
    background: #c92c3a;
    color: #fff;
}

.btn-warning {
    background: linear-gradient(135deg, #f0b429 0%, #d0911a 100%);
    border: none;
    color: #222;
}

.btn-outline-warning {
    border-color: #d0911a;
    color: #d0911a;
}

.btn-outline-warning:hover {
    background: #d0911a;
    color: #fff;
}

.btn-outline-secondary {
    border-color: #4b5b6a;
    color: #4b5b6a;
}

.btn-outline-secondary:hover {
    background: #4b5b6a;
    color: #fff;
}

.card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.card-actions form {
    margin: 0;
}