/* Zentic Base Styles - Applying Tokens */
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--zc-sidebar-bg-2);
    color: #1e293b;
}

/* Card Overrides */
.card {
    border: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border-radius: 12px;
}

/* Primary Button Overrides */
.btn-primary {
    background-color: var(--zc-primary) !important;
    border-color: var(--zc-primary) !important;
}
.btn-primary:hover {
    background-color: var(--zc-primary-dark) !important;
    border-color: var(--zc-primary-dark) !important;
}

/* Secondary/Cyan Button Overrides */
.btn-secondary {
    background-color: var(--zc-secondary) !important;
    border-color: var(--zc-secondary) !important;
    color: var(--zc-white) !important;
}
.btn-secondary:hover {
    background-color: var(--zc-sidebar-bg-2) !important;
    border-color: var(--zc-sidebar-bg-2) !important;
}

/* Remaining Bootstrap button variants, mapped onto the same token set so
   every btn-* class across the app renders one consistent palette instead
   of raw Bootstrap blue/green/red/yellow next to the orange/dark-ink brand. */
.btn-success {
    background-color: var(--zc-success) !important;
    border-color: var(--zc-success) !important;
    color: var(--zc-white) !important;
}
.btn-success:hover { filter: brightness(0.92); }

.btn-danger {
    background-color: var(--zc-danger) !important;
    border-color: var(--zc-danger) !important;
    color: var(--zc-white) !important;
}
.btn-danger:hover { filter: brightness(0.92); }

.btn-info {
    background-color: var(--zc-info) !important;
    border-color: var(--zc-info) !important;
    color: var(--zc-white) !important;
}
.btn-info:hover { filter: brightness(0.92); }

.btn-warning {
    background-color: var(--zc-warning) !important;
    border-color: var(--zc-warning) !important;
    color: var(--zc-secondary) !important;
}
.btn-warning:hover { filter: brightness(0.94); }

.btn-light {
    background-color: var(--zc-secondary-xlight) !important;
    border-color: var(--zc-border-color) !important;
    /* No color override here — leave Bootstrap's default dark text so
       combos like "btn btn-light text-danger" keep their utility color
       instead of losing to this rule's !important. */
}
.btn-light:hover { background-color: var(--zc-body-bg) !important; }

.btn-dark {
    background-color: var(--zc-secondary) !important;
    border-color: var(--zc-secondary) !important;
    color: var(--zc-white) !important;
}
.btn-dark:hover { background-color: var(--zc-sidebar-bg-2) !important; }

/* Outline variants: token-colored border/text, fill with the same token + white text on hover */
.btn-outline-primary { color: var(--zc-primary-text) !important; border-color: var(--zc-primary) !important; }
.btn-outline-primary:hover { background-color: var(--zc-primary) !important; color: var(--zc-white) !important; }

.btn-outline-secondary { color: var(--zc-secondary) !important; border-color: var(--zc-border-color) !important; }
.btn-outline-secondary:hover { background-color: var(--zc-secondary) !important; border-color: var(--zc-secondary) !important; color: var(--zc-white) !important; }

.btn-outline-success { color: var(--zc-success) !important; border-color: var(--zc-success) !important; }
.btn-outline-success:hover { background-color: var(--zc-success) !important; color: var(--zc-white) !important; }

.btn-outline-danger { color: var(--zc-danger) !important; border-color: var(--zc-danger) !important; }
.btn-outline-danger:hover { background-color: var(--zc-danger) !important; color: var(--zc-white) !important; }

.btn-outline-info { color: var(--zc-info) !important; border-color: var(--zc-info) !important; }
.btn-outline-info:hover { background-color: var(--zc-info) !important; color: var(--zc-white) !important; }

.btn-outline-warning { color: var(--zc-warning) !important; border-color: var(--zc-warning) !important; }
.btn-outline-warning:hover { background-color: var(--zc-warning) !important; color: var(--zc-secondary) !important; }

.btn-outline-dark { color: var(--zc-secondary) !important; border-color: var(--zc-secondary) !important; }
.btn-outline-dark:hover { background-color: var(--zc-secondary) !important; color: var(--zc-white) !important; }

.btn-outline-light { color: var(--zc-text-secondary) !important; border-color: var(--zc-border-color) !important; }
.btn-outline-light:hover { background-color: var(--zc-secondary-xlight) !important; color: var(--zc-text-primary) !important; }