/* ========================================
   Djansible Custom Component Styles
   ======================================== */

/* Custom Color Definitions */
:root {
    --component-green: #1abc9c;
    --component-green-dark: #16a085;
}

/* Component Card Headers */
.bg-component {
    background-color: var(--component-green) !important;
    color: #ffffff !important;
}

.bg-component-dark {
    background-color: var(--component-green-dark) !important;
    color: #ffffff !important;
}

/* Badge Colors */
.badge-component {
    background-color: var(--component-green);
    color: #ffffff;
}

/* Button Variants */
.btn-component {
    background-color: var(--component-green);
    border-color: var(--component-green);
    color: #ffffff;
}

.btn-component:hover {
    background-color: var(--component-green-dark);
    border-color: var(--component-green-dark);
    color: #ffffff;
}

.btn-outline-component {
    border-color: var(--component-green);
    color: var(--component-green);
}

.btn-outline-component:hover {
    background-color: var(--component-green);
    border-color: var(--component-green);
    color: #ffffff;
}

/* Border Variants */
.border-component {
    border-color: var(--component-green) !important;
}

/* Text Color */
.text-component {
    color: var(--component-green) !important;
}

/* Alert Variant */
.alert-component {
    background-color: rgba(26, 188, 156, 0.1);
    border-color: var(--component-green);
    color: var(--component-green-dark);
}