/*
 * Custom CSS Overrides for Backpack + Tabler
 * This file loads AFTER Backpack and Tabler CSS, so all styles here will override theirs
 */






/* ============================================
   ADD YOUR CUSTOM STYLES BELOW
   ============================================ */

/* Your custom styles here... */

/*
 * Custom CSS Overrides for Backpack + Tabler
 * This file loads AFTER Backpack and Tabler CSS, so all styles here will override theirs
 */

/* ============================================
   PRIMARY COLOR THEME OVERRIDE (TABLER + BS)
   ============================================ */

:root,
[data-bs-theme="light"] {
    --tblr-primary: #cf513f;
    --tblr-primary-rgb: 207, 81, 63;
    --tblr-primary-fg: #ffffff;
    --tblr-primary-darken: #b84637;
    --tblr-primary-lt: #f9dfdc;
    --tblr-primary-bg-subtle: #f9dfdc;
    --tblr-primary-border-subtle: #efc3bd;
    --tblr-primary-border: #cf513f;

    --bs-primary: #cf513f;
    --bs-primary-rgb: 207, 81, 63;
    --bs-btn-bg: #cf513f;
    --bs-btn-border-color: #cf513f;
    --bs-btn-hover-bg: #b84637;
    --bs-btn-hover-border-color: #b84637;
    --bs-btn-active-bg: #a64032;
    --bs-btn-active-border-color: #a64032;



    --tblr-link-color: #cf513f;
    --tblr-link-hover-color: #b84637;
    --bs-link-color: #cf513f;
    --bs-link-color-rgb: 207, 81, 63;
    --bs-link-hover-color: #b84637;
    --bs-link-hover-color-rgb: 184, 70, 55;
}

body a:not(.btn) {
    color: var(--bs-link-color, #cf513f);
}

body a:not(.btn):hover,
body a:not(.btn):focus {
    color: var(--bs-link-hover-color, #b84637);
}

body a.nav-link {
    color: #66626c;
}

/* ============================================
   BADGE TEXT COLOR CUSTOMIZATION
   ============================================ */

/* Override all badge text colors to ensure readability */
.badge {
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

/* Primary badge */
.badge.bg-primary,
.badge.badge-primary {
    color: #ffffff !important;
    background-color: var(--tblr-primary, #cf513f) !important;
}

/* Success badge (green) */
.badge.bg-success,
.badge.badge-success {
    color: #ffffff !important;
    background-color: #2fb344 !important;
}

/* Info badge (blue) */
.badge.bg-info,
.badge.badge-info {
    color: #ffffff !important;
    background-color: #4299e1 !important;
}

/* Warning badge (yellow/orange) */
.badge.bg-warning,
.badge.badge-warning {
    color: #000000 !important;
    /* Dark text for better readability on yellow */
    background-color: #f59f00 !important;
}

/* Danger badge (red) */
.badge.bg-danger,
.badge.badge-danger {
    color: #ffffff !important;
    background-color: #d63939 !important;
}

/* Secondary badge (gray) */
.badge.bg-secondary,
.badge.badge-secondary {
    color: #ffffff !important;
    background-color: #6c757d !important;
}

/* Dark badge */
.badge.bg-dark,
.badge.badge-dark {
    color: #ffffff !important;
    background-color: #1d2124 !important;
}

/* Light badge */
.badge.bg-light,
.badge.badge-light {
    color: #000000 !important;
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
}

/* ============================================
   CUSTOM BADGE VARIANTS (Optional)
   ============================================ */

/* Custom status badges for tickets */
.badge.badge-open {
    color: #000000 !important;
    background-color: #ffc107 !important;
}

.badge.badge-assigned {
    color: #ffffff !important;
    background-color: #17a2b8 !important;
}

.badge.badge-in-progress {
    color: #ffffff !important;
    background-color: var(--tblr-primary, #cf513f) !important;
}

.badge.badge-completed {
    color: #ffffff !important;
    background-color: #28a745 !important;
}

.badge.badge-closed {
    color: #ffffff !important;
    background-color: #6c757d !important;
}

.badge.badge-rejected {
    color: #ffffff !important;
    background-color: #dc3545 !important;
}

/* ============================================
   ADDITIONAL CUSTOM STYLES
   ============================================ */

/* Example: Customize table row hover */
.table tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.02) !important;
}

/* Example: Customize button styles */
.btn-primary {
    font-weight: 500 !important;
}

/* Example: Customize card shadows */
.card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

/* Example: Improve form input focus */
.form-control:focus {
    border-color: var(--tblr-primary, #cf513f) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--tblr-primary-rgb, 207, 81, 63), 0.15) !important;
}

/* ============================================
   BACKPACK CRUD SPECIFIC OVERRIDES
   ============================================ */

/* Make action buttons more visible */
.btn-sm {
    font-size: 0.875rem !important;
    padding: 0.375rem 0.75rem !important;
}

/* Improve spacing in datatable */
#crudTable td {
    padding: 0.75rem !important;
    vertical-align: middle !important;
}

/* Make filters more prominent */
.dataTables_filter input {
    border: 2px solid #dee2e6 !important;
    border-radius: 0.375rem !important;
}

.dataTables_filter input:focus {
    border-color: var(--tblr-primary, #cf513f) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--tblr-primary-rgb, 207, 81, 63), 0.15) !important;
}

/* ============================================
   DARK MODE SUPPORT (Optional)
   ============================================ */

[data-bs-theme="dark"] .badge.bg-light,
[data-bs-theme="dark"] .badge.badge-light {
    color: #ffffff !important;
    background-color: #495057 !important;
    border-color: #6c757d !important;
}

[data-bs-theme="dark"] .badge.bg-warning,
[data-bs-theme="dark"] .badge.badge-warning {
    color: #ffffff !important;
    background-color: #d97706 !important;
}


/* ============================================
   RESPONSIVE IMPROVEMENTS
   ============================================ */

@media (max-width: 768px) {
    .badge {
        font-size: 0.75rem !important;
        padding: 0.35em 0.65em !important;
    }

    .btn-sm {
        font-size: 0.8rem !important;
        padding: 0.3rem 0.6rem !important;
    }
}


/* ============================================
   ADD YOUR CUSTOM STYLES BELOW
   ============================================ */

/* Your custom styles here... */