/* Theme-aware button styles using CSS variables with foreground colors */

/* ============================================
   Base button styles - Common to all variants
   ============================================ */
.btn {
    font-family: Lexend, Arial !important;
    font-size: 14px !important; /* Fixed size - not affected by global font settings */
    padding: 0.375rem 0.75rem !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    transition: all 0.1s ease !important;
    text-transform: none !important;
    letter-spacing: 0.3px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* Large buttons */
.btn-lg {
    font-size: 16px !important;
    padding: 10px 20px !important;
}

/* Modal footer buttons - consistent sizing */
.modal-footer .btn {
    font-size: 14px !important;
    padding: 0.375rem 0.75rem !important;
}

.btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.btn:focus,
.btn:active,
.btn.active {
    transform: translateY(0px) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* ============================================
   Button Color Variants - Only color properties
   ============================================ */

/* Primary Button */
.btn-primary {
    --btn-bg: var(--bit-primary, #0d6efd);
    background-color: var(--btn-bg) !important;
    border-color: var(--btn-bg) !important;
    color: var(--bit-primary-fg, white) !important;
}

.btn-primary:hover {
    --btn-bg-hover: color-mix(in srgb, var(--bit-primary, #0d6efd) 85%, black);
    background-color: var(--btn-bg-hover) !important;
    border-color: var(--btn-bg-hover) !important;
    color: var(--bit-primary-fg, white) !important;
}

.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    --btn-bg-active: color-mix(in srgb, var(--bit-primary, #0d6efd) 75%, black);
    background-color: var(--btn-bg-active) !important;
    border-color: var(--btn-bg-active) !important;
    color: var(--bit-primary-fg, white) !important;
}

/* Secondary Button */
.btn-secondary {
    --btn-bg: var(--bit-secondary, #6c757d);
    background-color: var(--btn-bg) !important;
    border-color: var(--btn-bg) !important;
    color: var(--bit-secondary-fg, white) !important;
}

.btn-secondary:hover {
    --btn-bg-hover: color-mix(in srgb, var(--bit-secondary, #6c757d) 85%, black);
    background-color: var(--btn-bg-hover) !important;
    border-color: var(--btn-bg-hover) !important;
    color: var(--bit-secondary-fg, white) !important;
}

.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active {
    --btn-bg-active: color-mix(in srgb, var(--bit-secondary, #6c757d) 75%, black);
    background-color: var(--btn-bg-active) !important;
    border-color: var(--btn-bg-active) !important;
    color: var(--bit-secondary-fg, white) !important;
}

/* Success Button */
.btn-success {
    --btn-bg: var(--bit-success, #198754);
    background-color: var(--btn-bg) !important;
    border-color: var(--btn-bg) !important;
    color: var(--bit-success-fg, white) !important;
}

.btn-success:hover {
    --btn-bg-hover: color-mix(in srgb, var(--bit-success, #198754) 85%, black);
    background-color: var(--btn-bg-hover) !important;
    border-color: var(--btn-bg-hover) !important;
    color: var(--bit-success-fg, white) !important;
}

.btn-success:focus,
.btn-success:active,
.btn-success.active {
    --btn-bg-active: color-mix(in srgb, var(--bit-success, #198754) 75%, black);
    background-color: var(--btn-bg-active) !important;
    border-color: var(--btn-bg-active) !important;
    color: var(--bit-success-fg, white) !important;
}

/* Danger Button */
.btn-danger {
    --btn-bg: var(--bit-danger, #dc3545);
    background-color: var(--btn-bg) !important;
    border-color: var(--btn-bg) !important;
    color: var(--bit-danger-fg, white) !important;
}

.btn-danger:hover {
    --btn-bg-hover: color-mix(in srgb, var(--bit-danger, #dc3545) 85%, black);
    background-color: var(--btn-bg-hover) !important;
    border-color: var(--btn-bg-hover) !important;
    color: var(--bit-danger-fg, white) !important;
}

.btn-danger:focus,
.btn-danger:active,
.btn-danger.active {
    --btn-bg-active: color-mix(in srgb, var(--bit-danger, #dc3545) 75%, black);
    background-color: var(--btn-bg-active) !important;
    border-color: var(--btn-bg-active) !important;
    color: var(--bit-danger-fg, white) !important;
}

/*!* Warning Button *!*/
/*.btn-warning {*/
/*    --btn-bg: var(--bit-warning, #f59e0b);*/
/*    background-color: var(--bit-warning) !important;*/
/*    border-color: var(--bit-warning) !important;*/
/*    color: var(--bit-warning-fg, #ffffff) !important;*/
/*}*/

/*.btn-warning:hover {*/
/*    --btn-bg-hover: color-mix(in srgb, var(--bit-warning, #ffffff) 85%, black);*/
/*    background-color: var(--btn-bg-hover) !important;*/
/*    border-color: var(--btn-bg-hover) !important;*/
/*    color: var(--bit-warning-fg, #000000) !important;*/
/*}*/

/*.btn-warning:focus,*/
/*.btn-warning:active,*/
/*.btn-warning.active {*/
/*    --btn-bg-active: color-mix(in srgb, var(--bit-warning, #f59e0b) 75%, black);*/
/*    background-color: var(--btn-bg-active) !important;*/
/*    border-color: var(--btn-bg-active) !important;*/
/*    color: var(--bit-warning-fg, #212529) !important;*/
/*}*/

/* Info Button */
.btn-info {
    --btn-bg: var(--bit-info, #0dcaf0);
    background-color: var(--btn-bg) !important;
    border-color: var(--btn-bg) !important;
    color: var(--bit-info-fg, #212529) !important;
}

.btn-info:hover {
    --btn-bg-hover: color-mix(in srgb, var(--bit-info, #0dcaf0) 85%, black);
    background-color: var(--btn-bg-hover) !important;
    border-color: var(--btn-bg-hover) !important;
    color: var(--bit-info-fg, #212529) !important;
}

.btn-info:focus,
.btn-info:active,
.btn-info.active {
    --btn-bg-active: color-mix(in srgb, var(--bit-info, #0dcaf0) 75%, black);
    background-color: var(--btn-bg-active) !important;
    border-color: var(--btn-bg-active) !important;
    color: var(--bit-info-fg, #212529) !important;
}

/* Light Button */
.btn-light {
    --btn-bg: var(--bit-light, #f8f9fa);
    background-color: var(--btn-bg) !important;
    border-color: var(--btn-bg) !important;
    color: var(--bit-light-fg, #212529) !important;
}

.btn-light:hover {
    --btn-bg-hover: color-mix(in srgb, var(--bit-light, #f8f9fa) 90%, black);
    background-color: var(--btn-bg-hover) !important;
    border-color: var(--btn-bg-hover) !important;
    color: var(--bit-light-fg, #212529) !important;
}

.btn-light:focus,
.btn-light:active,
.btn-light.active {
    --btn-bg-active: color-mix(in srgb, var(--bit-light, #f8f9fa) 85%, black);
    background-color: var(--btn-bg-active) !important;
    border-color: var(--btn-bg-active) !important;
    color: var(--bit-light-fg, #212529) !important;
}

/* Dark Button */
.btn-dark {
    --btn-bg: var(--bit-dark, #212529);
    background-color: var(--btn-bg) !important;
    border-color: var(--btn-bg) !important;
    color: var(--bit-dark-fg, white) !important;
}

.btn-dark:hover {
    --btn-bg-hover: color-mix(in srgb, var(--bit-dark, #212529) 85%, white);
    background-color: var(--btn-bg-hover) !important;
    border-color: var(--btn-bg-hover) !important;
    color: var(--bit-dark-fg, white) !important;
}

.btn-dark:focus,
.btn-dark:active,
.btn-dark.active {
    --btn-bg-active: color-mix(in srgb, var(--bit-dark, #212529) 75%, white);
    background-color: var(--btn-bg-active) !important;
    border-color: var(--btn-bg-active) !important;
    color: var(--bit-dark-fg, white) !important;
}

/* Default Button (Brand Color) */
.btn.bg-default {
    --btn-bg: var(--bit-default, #2d3748);
    background-color: var(--btn-bg) !important;
    border-color: var(--btn-bg) !important;
    color: var(--bit-default-fg, white) !important;
}

.btn.bg-default:hover {
    --btn-bg-hover: color-mix(in srgb, var(--bit-default, #2d3748) 85%, black);
    background-color: var(--btn-bg-hover) !important;
    border-color: var(--btn-bg-hover) !important;
    color: var(--bit-default-fg, white) !important;
}

.btn.bg-default:focus,
.btn.bg-default:active,
.btn.bg-default.active {
    --btn-bg-active: color-mix(in srgb, var(--bit-default, #2d3748) 75%, black);
    background-color: var(--btn-bg-active) !important;
    border-color: var(--btn-bg-active) !important;
    color: var(--bit-default-fg, white) !important;
}

/* Accent Button (Secondary Brand Color) */
.btn.bg-accent {
    --btn-bg: var(--bit-accent, #805ad5);
    background-color: var(--btn-bg) !important;
    border-color: var(--btn-bg) !important;
    color: var(--bit-accent-fg, white) !important;
}

.btn.bg-accent:hover {
    --btn-bg-hover: color-mix(in srgb, var(--bit-accent, #805ad5) 85%, black);
    background-color: var(--btn-bg-hover) !important;
    border-color: var(--btn-bg-hover) !important;
    color: var(--bit-accent-fg, white) !important;
}

.btn.bg-accent:focus,
.btn.bg-accent:active,
.btn.bg-accent.active {
    --btn-bg-active: color-mix(in srgb, var(--bit-accent, #805ad5) 75%, black);
    background-color: var(--btn-bg-active) !important;
    border-color: var(--btn-bg-active) !important;
    color: var(--bit-accent-fg, white) !important;
}

/* ============================================
   Outline Button Variants
   ============================================ */

/* Base outline button styles */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-light,
.btn-outline-dark,
.btn-outline-default,
.btn-outline-accent {
    background-color: transparent !important;
}


/* Outline Primary */
.btn-outline-primary {
    color: var(--bit-primary, #0d6efd) !important;
    border-color: var(--bit-primary, #0d6efd) !important;
}

.btn-outline-primary:hover {
    background-color: var(--bit-primary, #0d6efd) !important;
    border-color: var(--bit-primary, #0d6efd) !important;
    color: var(--bit-primary-fg, white) !important;
}

.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--bit-primary, #0d6efd) !important;
    border-color: var(--bit-primary, #0d6efd) !important;
    color: var(--bit-primary-fg, white) !important;
}

/* Outline Secondary */
.btn-outline-secondary {
    color: var(--bit-secondary, #6c757d) !important;
    border-color: var(--bit-secondary, #6c757d) !important;
}

.btn-outline-secondary:hover {
    background-color: var(--bit-secondary, #6c757d) !important;
    border-color: var(--bit-secondary, #6c757d) !important;
    color: var(--bit-secondary-fg, white) !important;
}

.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary.active {
    background-color: var(--bit-secondary, #6c757d) !important;
    border-color: var(--bit-secondary, #6c757d) !important;
    color: var(--bit-secondary-fg, white) !important;
}

/* Outline Success */
.btn-outline-success {
    color: var(--bit-success, #198754) !important;
    border-color: var(--bit-success, #198754) !important;
}

.btn-outline-success:hover {
    background-color: var(--bit-success, #198754) !important;
    border-color: var(--bit-success, #198754) !important;
    color: var(--bit-success-fg, white) !important;
}

.btn-outline-success:focus,
.btn-outline-success:active,
.btn-outline-success.active {
    background-color: var(--bit-success, #198754) !important;
    border-color: var(--bit-success, #198754) !important;
    color: var(--bit-success-fg, white) !important;
}

/* Outline Danger */
.btn-outline-danger {
    color: var(--bit-danger, #dc3545) !important;
    border-color: var(--bit-danger, #dc3545) !important;
}

.btn-outline-danger:hover {
    background-color: var(--bit-danger, #dc3545) !important;
    border-color: var(--bit-danger, #dc3545) !important;
    color: var(--bit-danger-fg, white) !important;
}

.btn-outline-danger:focus,
.btn-outline-danger:active,
.btn-outline-danger.active {
    background-color: var(--bit-danger, #dc3545) !important;
    border-color: var(--bit-danger, #dc3545) !important;
    color: var(--bit-danger-fg, white) !important;
}

/* Outline Warning */
.btn-outline-warning {
    color: var(--bit-warning, #f59e0b) !important;
    border-color: var(--bit-warning, #f59e0b) !important;
}

.btn-outline-warning:hover {
    background-color: var(--bit-warning, #f59e0b) !important;
    border-color: var(--bit-warning, #f59e0b) !important;
    color: var(--bit-warning-fg, #212529) !important;
}

.btn-outline-warning:focus,
.btn-outline-warning:active,
.btn-outline-warning.active {
    background-color: var(--bit-warning, #f59e0b) !important;
    border-color: var(--bit-warning, #f59e0b) !important;
    color: var(--bit-warning-fg, #212529) !important;
}

/* Outline Info */
.btn-outline-info {
    color: var(--bit-info, #0dcaf0) !important;
    border-color: var(--bit-info, #0dcaf0) !important;
}

.btn-outline-info:hover {
    background-color: var(--bit-info, #0dcaf0) !important;
    border-color: var(--bit-info, #0dcaf0) !important;
    color: var(--bit-info-fg, #212529) !important;
}

.btn-outline-info:focus,
.btn-outline-info:active,
.btn-outline-info.active {
    background-color: var(--bit-info, #0dcaf0) !important;
    border-color: var(--bit-info, #0dcaf0) !important;
    color: var(--bit-info-fg, #212529) !important;
}

/* Outline Light */
.btn-outline-light {
    color: var(--bit-light-fg, #212529) !important;
    border-color: color-mix(in srgb, var(--bit-light, #f8f9fa) 70%, #dee2e6) !important;
}

.btn-outline-light:hover {
    background-color: var(--bit-light, #f8f9fa) !important;
    border-color: var(--bit-light, #f8f9fa) !important;
    color: var(--bit-light-fg, #212529) !important;
}

.btn-outline-light:focus,
.btn-outline-light:active,
.btn-outline-light.active {
    background-color: var(--bit-light, #f8f9fa) !important;
    border-color: var(--bit-light, #f8f9fa) !important;
    color: var(--bit-light-fg, #212529) !important;
}

/* Outline Dark */
.btn-outline-dark {
    color: var(--bit-dark, #212529) !important;
    border-color: var(--bit-dark, #212529) !important;
}

.btn-outline-dark:hover {
    background-color: var(--bit-dark, #212529) !important;
    border-color: var(--bit-dark, #212529) !important;
    color: var(--bit-dark-fg, white) !important;
}

.btn-outline-dark:focus,
.btn-outline-dark:active,
.btn-outline-dark.active {
    background-color: var(--bit-dark, #212529) !important;
    border-color: var(--bit-dark, #212529) !important;
    color: var(--bit-dark-fg, white) !important;
}

/* Outline Default */
.btn-outline-default {
    color: var(--bit-default, #2d3748) !important;
    border-color: var(--bit-default, #2d3748) !important;
}

.btn-outline-default:hover {
    background-color: var(--bit-default, #2d3748) !important;
    border-color: var(--bit-default, #2d3748) !important;
    color: var(--bit-default-fg, white) !important;
}

.btn-outline-default:focus,
.btn-outline-default:active,
.btn-outline-default.active {
    background-color: var(--bit-default, #2d3748) !important;
    border-color: var(--bit-default, #2d3748) !important;
    color: var(--bit-default-fg, white) !important;
}

/* Outline Accent */
.btn-outline-accent {
    color: var(--bit-accent, #805ad5) !important;
    border-color: var(--bit-accent, #805ad5) !important;
}

.btn-outline-accent:hover {
    background-color: var(--bit-accent, #805ad5) !important;
    border-color: var(--bit-accent, #805ad5) !important;
    color: var(--bit-accent-fg, white) !important;
}

.btn-outline-accent:focus,
.btn-outline-accent:active,
.btn-outline-accent.active {
    background-color: var(--bit-accent, #805ad5) !important;
    border-color: var(--bit-accent, #805ad5) !important;
    color: var(--bit-accent-fg, white) !important;
}

/* ============================================
   Icon Button Styles
   ============================================ */

/* Small buttons with icons - commonly used in listing pages */
.btn-sm {
    padding: 4px 7px !important;
    font-size: 11px !important; /* Fixed size - not affected by global font settings */
}

.btn-sm i {
    font-size: 12px !important;
    vertical-align: middle;
}

/* Icon-only buttons */
.btn-icon,
.btn-icon-only {
    padding: 8px !important;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon i,
.btn-icon-only i {
    font-size: 16px !important; /* Fixed size - not affected by global font settings */
    margin: 0 !important;
}

/* Action buttons in tables and lists - swap default/hover states */
.btn-outline-secondary.btn-action,
.btn-outline-primary.btn-action,
.btn-outline-info.btn-action,
.btn-outline-success.btn-action,
.btn-outline-warning.btn-action,
.btn-outline-danger.btn-action {
    background-color: var(--btn-hover-bg) !important;
    border-color: var(--btn-hover-border) !important;
    color: var(--btn-hover-color) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

.btn-outline-secondary.btn-action {
    --btn-hover-bg: var(--bit-secondary, #6c757d);
    --btn-hover-border: var(--bit-secondary, #6c757d);
    --btn-hover-color: var(--bit-secondary-fg, white);
}

.btn-outline-primary.btn-action {
    --btn-hover-bg: var(--bit-primary, #0d6efd);
    --btn-hover-border: var(--bit-primary, #0d6efd);
    --btn-hover-color: var(--bit-primary-fg, white);
}

.btn-outline-info.btn-action {
    --btn-hover-bg: var(--bit-info, #0dcaf0);
    --btn-hover-border: var(--bit-info, #0dcaf0);
    --btn-hover-color: var(--bit-info-fg, #212529);
}

.btn-outline-success.btn-action {
    --btn-hover-bg: var(--bit-success, #198754);
    --btn-hover-border: var(--bit-success, #198754);
    --btn-hover-color: var(--bit-success-fg, white);
}

.btn-outline-warning.btn-action {
    --btn-hover-bg: var(--bit-warning, #f59e0b);
    --btn-hover-border: var(--bit-warning, #f59e0b);
    --btn-hover-color: var(--bit-warning-fg, #212529);
}

.btn-outline-danger.btn-action {
    --btn-hover-bg: var(--bit-danger, #dc3545);
    --btn-hover-border: var(--bit-danger, #dc3545);
    --btn-hover-color: var(--bit-danger-fg, white);
}

/* Hover state - revert to outline style */
.btn-outline-secondary.btn-action:hover,
.btn-outline-primary.btn-action:hover,
.btn-outline-info.btn-action:hover,
.btn-outline-success.btn-action:hover,
.btn-outline-warning.btn-action:hover,
.btn-outline-danger.btn-action:hover {
    background-color: transparent !important;
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.btn-outline-secondary.btn-action:hover {
    border-color: var(--bit-secondary, #6c757d) !important;
    color: var(--bit-secondary, #6c757d) !important;
}

.btn-outline-primary.btn-action:hover {
    border-color: var(--bit-primary, #0d6efd) !important;
    color: var(--bit-primary, #0d6efd) !important;
}

.btn-outline-info.btn-action:hover {
    border-color: var(--bit-info, #0dcaf0) !important;
    color: var(--bit-info, #0dcaf0) !important;
}

.btn-outline-success.btn-action:hover {
    border-color: var(--bit-success, #198754) !important;
    color: var(--bit-success, #198754) !important;
}

.btn-outline-warning.btn-action:hover {
    border-color: var(--bit-warning, #f59e0b) !important;
    color: var(--bit-warning, #f59e0b) !important;
}

.btn-outline-danger.btn-action:hover {
    border-color: var(--bit-danger, #dc3545) !important;
    color: var(--bit-danger, #dc3545) !important;
}

/* ============================================
   Badge Styles
   ============================================ */

/* Base badge styles */
.badge {
    font-family: var(--bit-font-family) !important;
    font-size: var(--bit-badge-font-size, 12px) !important;
    font-weight: 500 !important;
    padding: 0.5em 0.85em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25em !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}

/* Badge icon alignment - lower icon to align with text */
.badge i,
.badge .bi {
    font-size: 1em !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    transform: translateY(calc(var(--bit-badge-font-size, 12px) * 0.15)) !important;
}

/* Badge color variants - can be customized separately from buttons */
.badge.bg-primary {
    background-color: var(--bit-badge-primary, var(--bit-primary, #0d6efd)) !important;
    background-image: none !important; /* Override any gradient backgrounds */
    color: var(--bit-badge-primary-fg, var(--bit-primary-fg, white)) !important;
}

.badge.bg-secondary {
    background-color: var(--bit-badge-secondary, var(--bit-secondary, #6c757d)) !important;
    background-image: none !important;
    color: var(--bit-badge-secondary-fg, var(--bit-secondary-fg, white)) !important;
}

.badge.bg-success {
    background-color: var(--bit-badge-success, var(--bit-success, #198754)) !important;
    background-image: none !important;
    color: var(--bit-badge-success-fg, var(--bit-success-fg, white)) !important;
}

.badge.bg-danger {
    background-color: var(--bit-badge-danger, var(--bit-danger, #dc3545)) !important;
    background-image: none !important;
    color: var(--bit-badge-danger-fg, var(--bit-danger-fg, white)) !important;
}

.badge.bg-warning {
    background-color: var(--bit-badge-warning, var(--bit-warning, #f59e0b)) !important;
    background-image: none !important;
    color: var(--bit-badge-warning-fg, var(--bit-warning-fg, #212529)) !important;
}

.badge.bg-info {
    background-color: var(--bit-badge-info, var(--bit-info, #0dcaf0)) !important;
    background-image: none !important;
    color: var(--bit-badge-info-fg, var(--bit-info-fg, #212529)) !important;
}

.badge.bg-light {
    background-color: var(--bit-badge-light, var(--bit-light, #f8f9fa)) !important;
    background-image: none !important;
    color: var(--bit-badge-light-fg, var(--bit-light-fg, #212529)) !important;
}

.badge.bg-dark {
    background-color: var(--bit-badge-dark, var(--bit-dark, #212529)) !important;
    background-image: none !important;
    color: var(--bit-badge-dark-fg, var(--bit-dark-fg, white)) !important;
}

.badge.bg-default {
    background-color: var(--bit-badge-default, var(--bit-default, #2d3748)) !important;
    background-image: none !important;
    color: var(--bit-badge-default-fg, var(--bit-default-fg, white)) !important;
}

.badge.bg-accent {
    background-color: var(--bit-badge-accent, var(--bit-accent, #805ad5)) !important;
    background-image: none !important;
    color: var(--bit-badge-accent-fg, var(--bit-accent-fg, white)) !important;
}

/* Custom Badge Types */
.badge.bg-status {
    background-color: var(--bit-badge-status, #6b7280) !important;
    background-image: none !important;
    color: var(--bit-badge-status-fg, white) !important;
}

.badge.bg-student-info {
    background-color: var(--bit-badge-student-info, #8b5cf6) !important;
    background-image: none !important;
    color: var(--bit-badge-student-info-fg, white) !important;
}

.badge.bg-general {
    background-color: var(--bit-badge-general, #64748b) !important;
    background-image: none !important;
    color: var(--bit-badge-general-fg, white) !important;
}

.badge.bg-time {
    background-color: var(--bit-badge-time, #06b6d4) !important;
    background-image: none !important;
    color: var(--bit-badge-time-fg, white) !important;
}

.badge.bg-date {
    background-color: var(--bit-badge-date, #0891b2) !important;
    background-image: none !important;
    color: var(--bit-badge-date-fg, white) !important;
}

.badge.bg-price {
    background-color: var(--bit-badge-price, #10b981) !important;
    background-image: none !important;
    color: var(--bit-badge-price-fg, white) !important;
}

.badge.bg-qty {
    background-color: var(--bit-badge-qty, #f59e0b) !important;
    background-image: none !important;
    color: var(--bit-badge-qty-fg, white) !important;
}

.badge.bg-code {
    background-color: var(--bit-badge-code, #1f2937) !important;
    background-image: none !important;
    color: var(--bit-badge-code-fg, white) !important;
}

.badge.bg-pending {
    background-color: var(--bit-badge-pending, #eab308) !important;
    background-image: none !important;
    color: var(--bit-badge-pending-fg, white) !important;
}

.badge.bg-category {
    background-color: var(--bit-badge-category, #6366f1) !important;
    background-image: none !important;
    color: var(--bit-badge-category-fg, white) !important;
}

/* ============================================
   Background Color Utilities
   ============================================ */

.bg-default {
    background-color: var(--bit-default, #2d3748) !important;
}

.bg-accent {
    background-color: var(--bit-accent, #805ad5) !important;
}

/* ============================================
   Text Color Utilities
   ============================================ */

.text-default {
    color: var(--bit-default, #2d3748) !important;
}

.text-accent {
    color: var(--bit-accent, #805ad5) !important;
}