/* Professional Button Styling - Modern & Accessible */
:root {
    /* Light Professional Color Palette with Bluish-White Gradients */
    --btn-primary: linear-gradient(135deg, #f8fbff 0%, #e3f2fd 50%, #bbdefb 100%);
    --btn-primary-hover: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 50%, #90caf9 100%);
    --btn-primary-active: linear-gradient(135deg, #bbdefb 0%, #90caf9 50%, #64b5f6 100%);
    --btn-primary-text: #1565c0;
    --btn-primary-border: #90caf9;
    
    --btn-secondary: linear-gradient(135deg, #fafafa 0%, #f5f5f5 50%, #eeeeee 100%);
    --btn-secondary-hover: linear-gradient(135deg, #f5f5f5 0%, #eeeeee 50%, #e0e0e0 100%);
    --btn-secondary-active: linear-gradient(135deg, #eeeeee 0%, #e0e0e0 50%, #bdbdbd 100%);
    --btn-secondary-text: #424242;
    --btn-secondary-border: #e0e0e0;
    
    --btn-success: linear-gradient(135deg, #f1f8e9 0%, #dcedc8 50%, #c8e6c9 100%);
    --btn-success-hover: linear-gradient(135deg, #dcedc8 0%, #c8e6c9 50%, #a5d6a7 100%);
    --btn-success-active: linear-gradient(135deg, #c8e6c9 0%, #a5d6a7 50%, #81c784 100%);
    --btn-success-text: #2e7d32;
    --btn-success-border: #a5d6a7;
    
    --btn-warning: linear-gradient(135deg, #fffde7 0%, #fff9c4 50%, #fff176 100%);
    --btn-warning-hover: linear-gradient(135deg, #fff9c4 0%, #fff176 50%, #ffee58 100%);
    --btn-warning-active: linear-gradient(135deg, #fff176 0%, #ffee58 50%, #ffeb3b 100%);
    --btn-warning-text: #f57f17;
    --btn-warning-border: #fff176;
    
    --btn-danger: linear-gradient(135deg, #ffebee 0%, #ffcdd2 50%, #ef9a9a 100%);
    --btn-danger-hover: linear-gradient(135deg, #ffcdd2 0%, #ef9a9a 50%, #e57373 100%);
    --btn-danger-active: linear-gradient(135deg, #ef9a9a 0%, #e57373 50%, #f44336 100%);
    --btn-danger-text: #c62828;
    --btn-danger-border: #ef9a9a;
    
    --btn-info: linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 50%, #80cbc4 100%);
    --btn-info-hover: linear-gradient(135deg, #b2dfdb 0%, #80cbc4 50%, #4db6ac 100%);
    --btn-info-active: linear-gradient(135deg, #80cbc4 0%, #4db6ac 50%, #26a69a 100%);
    --btn-info-text: #00695c;
    --btn-info-border: #80cbc4;
    
    --btn-light: linear-gradient(135deg, #ffffff 0%, #fafafa 50%, #f5f5f5 100%);
    --btn-light-hover: linear-gradient(135deg, #fafafa 0%, #f5f5f5 50%, #eeeeee 100%);
    --btn-light-active: linear-gradient(135deg, #f5f5f5 0%, #eeeeee 50%, #e0e0e0 100%);
    --btn-light-text: #424242;
    --btn-light-border: #e0e0e0;
    
    --btn-dark: linear-gradient(135deg, #eceff1 0%, #cfd8dc 50%, #b0bec5 100%);
    --btn-dark-hover: linear-gradient(135deg, #cfd8dc 0%, #b0bec5 50%, #90a4ae 100%);
    --btn-dark-active: linear-gradient(135deg, #b0bec5 0%, #90a4ae 50%, #78909c 100%);
    --btn-dark-text: #37474f;
    --btn-dark-border: #b0bec5;
    
    /* Professional Shadows */
    --btn-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --btn-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.15);
    --btn-shadow-active: 0 1px 2px rgba(0, 0, 0, 0.1);
    
    /* Border Radius */
    --btn-border-radius: 6px;
    --btn-border-radius-sm: 4px;
    --btn-border-radius-lg: 8px;
    
    /* Transitions */
    --btn-transition: all 0.2s ease-in-out;
}

/* Base Button Styling - Override Bootstrap with maximum specificity */
.btn,
.container-fluid .btn,
.card .btn,
.table .btn,
.modal .btn,
.dropdown .btn,
.navbar .btn,
.sidebar .btn,
.content .btn,
.main-content .btn,
.timesheet .btn,
.dashboard .btn,
.projects .btn,
.resources .btn,
.payments .btn,
.approvals .btn,
.settings .btn,
button.btn,
a.btn,
input[type="button"].btn,
input[type="submit"].btn,
input[type="reset"].btn,
form .btn,
div .btn,
span .btn,
.btn-group .btn,
.btn-toolbar .btn,
.card-body .btn,
.card-header .btn,
.card-footer .btn,
.table-responsive .btn,
.list-group .btn,
.alert .btn,
.jumbotron .btn,
.well .btn,
.panel .btn,
.tab-content .btn,
.tab-pane .btn,
.collapse .btn,
.accordion .btn,
.carousel .btn,
.modal-body .btn,
.modal-footer .btn,
.modal-header .btn,
.offcanvas .btn,
.toast .btn,
.popover .btn,
.tooltip .btn,
.progress .btn,
.breadcrumb .btn,
.pagination .btn,
.nav .btn,
.navbar-nav .btn,
.dropdown-menu .btn {
    font-weight: 500 !important;
    border-radius: var(--btn-border-radius) !important;
    box-shadow: var(--btn-shadow) !important;
    transition: var(--btn-transition) !important;
    border: 1px solid transparent !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    position: relative !important;
    overflow: hidden !important;
    background: none !important; /* Remove gradients */
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    padding: 0.5rem 1rem !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    opacity: 1 !important; /* Ensure buttons are always visible */
    visibility: visible !important; /* Force visibility */
    color: inherit !important; /* Inherit color from parent context */
}

.btn:hover,
.container-fluid .btn:hover,
.card .btn:hover,
.table .btn:hover,
button.btn:hover,
a.btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--btn-shadow-hover) !important;
    text-decoration: none !important;
}

.btn:active,
.btn.active,
.container-fluid .btn:active,
.container-fluid .btn.active,
.card .btn:active,
.card .btn.active,
.table .btn:active,
.table .btn.active {
    transform: translateY(0) !important;
    box-shadow: var(--btn-shadow-active) !important;
}

.btn:focus,
.btn:focus-visible,
.container-fluid .btn:focus,
.container-fluid .btn:focus-visible {
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
    box-shadow: var(--btn-shadow), 0 0 0 3px rgba(0, 102, 204, 0.2) !important;
}

.btn:disabled,
.btn.disabled,
.container-fluid .btn:disabled,
.container-fluid .btn.disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: var(--btn-shadow) !important;
}

/* Primary Button - Maximum Specificity */
.btn-primary,
.container-fluid .btn-primary,
.card .btn-primary,
.table .btn-primary,
.modal .btn-primary,
.dropdown .btn-primary,
.navbar .btn-primary,
.sidebar .btn-primary,
.content .btn-primary,
.main-content .btn-primary,
.timesheet .btn-primary,
.dashboard .btn-primary,
.projects .btn-primary,
.resources .btn-primary,
.payments .btn-primary,
.approvals .btn-primary,
.settings .btn-primary,
button.btn-primary,
a.btn-primary,
input[type="button"].btn-primary,
input[type="submit"].btn-primary,
input[type="reset"].btn-primary,
form .btn-primary,
div .btn-primary,
span .btn-primary,
.btn-group .btn-primary,
.btn-toolbar .btn-primary,
.card-body .btn-primary,
.card-header .btn-primary,
.card-footer .btn-primary,
.table-responsive .btn-primary,
.list-group .btn-primary,
.alert .btn-primary,
.jumbotron .btn-primary,
.well .btn-primary,
.panel .btn-primary,
.tab-content .btn-primary,
.tab-pane .btn-primary,
.collapse .btn-primary,
.accordion .btn-primary,
.carousel .btn-primary,
.modal-body .btn-primary,
.modal-footer .btn-primary,
.modal-header .btn-primary,
.offcanvas .btn-primary,
.toast .btn-primary,
.popover .btn-primary,
.tooltip .btn-primary,
.progress .btn-primary,
.breadcrumb .btn-primary,
.pagination .btn-primary,
.nav .btn-primary,
.navbar-nav .btn-primary,
.dropdown-menu .btn-primary {
    background: var(--btn-primary) !important;
    border-color: var(--btn-primary-border) !important;
    color: var(--btn-primary-text) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.btn-primary:hover,
.container-fluid .btn-primary:hover,
.card .btn-primary:hover,
.table .btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
    background: var(--btn-primary-hover) !important;
    border-color: var(--btn-primary-border) !important;
    color: var(--btn-primary-text) !important;
}

.btn-primary:active,
.btn-primary.active,
.container-fluid .btn-primary:active,
.container-fluid .btn-primary.active {
    background: var(--btn-primary-active) !important;
    border-color: var(--btn-primary-border) !important;
    color: var(--btn-primary-text) !important;
}

.btn-primary:focus,
.container-fluid .btn-primary:focus {
    box-shadow: var(--btn-shadow), 0 0 0 3px rgba(0, 102, 204, 0.25) !important;
}

/* Secondary Button - Maximum Specificity */
.btn-secondary,
.container-fluid .btn-secondary,
.card .btn-secondary,
.table .btn-secondary,
.modal .btn-secondary,
.dropdown .btn-secondary,
.navbar .btn-secondary,
.sidebar .btn-secondary,
.content .btn-secondary,
.main-content .btn-secondary,
.timesheet .btn-secondary,
.dashboard .btn-secondary,
.projects .btn-secondary,
.resources .btn-secondary,
.payments .btn-secondary,
.approvals .btn-secondary,
.settings .btn-secondary,
button.btn-secondary,
a.btn-secondary,
input[type="button"].btn-secondary,
input[type="submit"].btn-secondary,
input[type="reset"].btn-secondary,
form .btn-secondary,
div .btn-secondary,
span .btn-secondary,
.btn-group .btn-secondary,
.btn-toolbar .btn-secondary,
.card-body .btn-secondary,
.card-header .btn-secondary,
.card-footer .btn-secondary,
.table-responsive .btn-secondary,
.list-group .btn-secondary,
.alert .btn-secondary,
.jumbotron .btn-secondary,
.well .btn-secondary,
.panel .btn-secondary,
.tab-content .btn-secondary,
.tab-pane .btn-secondary,
.collapse .btn-secondary,
.accordion .btn-secondary,
.carousel .btn-secondary,
.modal-body .btn-secondary,
.modal-footer .btn-secondary,
.modal-header .btn-secondary,
.offcanvas .btn-secondary,
.toast .btn-secondary,
.popover .btn-secondary,
.tooltip .btn-secondary,
.progress .btn-secondary,
.breadcrumb .btn-secondary,
.pagination .btn-secondary,
.nav .btn-secondary,
.navbar-nav .btn-secondary,
.dropdown-menu .btn-secondary {
    background: var(--btn-secondary) !important;
    border-color: var(--btn-secondary-border) !important;
    color: var(--btn-secondary-text) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.btn-secondary:hover,
.container-fluid .btn-secondary:hover,
.card .btn-secondary:hover,
.table .btn-secondary:hover {
    background: var(--btn-secondary-hover) !important;
    border-color: var(--btn-secondary-border) !important;
    color: var(--btn-secondary-text) !important;
}

.btn-secondary:active,
.btn-secondary.active,
.container-fluid .btn-secondary:active,
.container-fluid .btn-secondary.active {
    background: var(--btn-secondary-active) !important;
    border-color: var(--btn-secondary-border) !important;
    color: var(--btn-secondary-text) !important;
}

/* Success Button - Maximum Specificity */
.btn-success,
.container-fluid .btn-success,
.card .btn-success,
.table .btn-success,
.modal .btn-success,
.dropdown .btn-success,
.navbar .btn-success,
.sidebar .btn-success,
.content .btn-success,
.main-content .btn-success,
.timesheet .btn-success,
.dashboard .btn-success,
.projects .btn-success,
.resources .btn-success,
.payments .btn-success,
.approvals .btn-success,
.settings .btn-success,
button.btn-success,
a.btn-success,
input[type="button"].btn-success,
input[type="submit"].btn-success,
input[type="reset"].btn-success,
form .btn-success,
div .btn-success,
span .btn-success,
.btn-group .btn-success,
.btn-toolbar .btn-success,
.card-body .btn-success,
.card-header .btn-success,
.card-footer .btn-success,
.table-responsive .btn-success,
.list-group .btn-success,
.alert .btn-success,
.jumbotron .btn-success,
.well .btn-success,
.panel .btn-success,
.tab-content .btn-success,
.tab-pane .btn-success,
.collapse .btn-success,
.accordion .btn-success,
.carousel .btn-success,
.modal-body .btn-success,
.modal-footer .btn-success,
.modal-header .btn-success,
.offcanvas .btn-success,
.toast .btn-success,
.popover .btn-success,
.tooltip .btn-success,
.progress .btn-success,
.breadcrumb .btn-success,
.pagination .btn-success,
.nav .btn-success,
.navbar-nav .btn-success,
.dropdown-menu .btn-success {
    background: var(--btn-success) !important;
    border-color: var(--btn-success-border) !important;
    color: var(--btn-success-text) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.btn-success:hover,
.container-fluid .btn-success:hover,
.card .btn-success:hover,
.table .btn-success:hover {
    background: var(--btn-success-hover) !important;
    border-color: var(--btn-success-border) !important;
    color: var(--btn-success-text) !important;
}

.btn-success:active,
.btn-success.active,
.container-fluid .btn-success:active,
.container-fluid .btn-success.active {
    background: var(--btn-success-active) !important;
    border-color: var(--btn-success-border) !important;
    color: var(--btn-success-text) !important;
}

/* Warning Button - Maximum Specificity */
.btn-warning,
.container-fluid .btn-warning,
.card .btn-warning,
.table .btn-warning,
.modal .btn-warning,
.dropdown .btn-warning,
.navbar .btn-warning,
.sidebar .btn-warning,
.content .btn-warning,
.main-content .btn-warning,
.timesheet .btn-warning,
.dashboard .btn-warning,
.projects .btn-warning,
.resources .btn-warning,
.payments .btn-warning,
.approvals .btn-warning,
.settings .btn-warning,
button.btn-warning,
a.btn-warning,
input[type="button"].btn-warning,
input[type="submit"].btn-warning,
input[type="reset"].btn-warning,
form .btn-warning,
div .btn-warning,
span .btn-warning,
.btn-group .btn-warning,
.btn-toolbar .btn-warning,
.card-body .btn-warning,
.card-header .btn-warning,
.card-footer .btn-warning,
.table-responsive .btn-warning,
.list-group .btn-warning,
.alert .btn-warning,
.jumbotron .btn-warning,
.well .btn-warning,
.panel .btn-warning,
.tab-content .btn-warning,
.tab-pane .btn-warning,
.collapse .btn-warning,
.accordion .btn-warning,
.carousel .btn-warning,
.modal-body .btn-warning,
.modal-footer .btn-warning,
.modal-header .btn-warning,
.offcanvas .btn-warning,
.toast .btn-warning,
.popover .btn-warning,
.tooltip .btn-warning,
.progress .btn-warning,
.breadcrumb .btn-warning,
.pagination .btn-warning,
.nav .btn-warning,
.navbar-nav .btn-warning,
.dropdown-menu .btn-warning {
    background: var(--btn-warning) !important;
    border-color: var(--btn-warning-border) !important;
    color: var(--btn-warning-text) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.btn-warning:hover,
.container-fluid .btn-warning:hover,
.card .btn-warning:hover,
.table .btn-warning:hover {
    background: var(--btn-warning-hover) !important;
    border-color: var(--btn-warning-border) !important;
    color: var(--btn-warning-text) !important;
}

.btn-warning:active,
.btn-warning.active,
.container-fluid .btn-warning:active,
.container-fluid .btn-warning.active {
    background: var(--btn-warning-active) !important;
    border-color: var(--btn-warning-border) !important;
    color: var(--btn-warning-text) !important;
}

/* Danger Button - Maximum Specificity */
.btn-danger,
.container-fluid .btn-danger,
.card .btn-danger,
.table .btn-danger,
.modal .btn-danger,
.dropdown .btn-danger,
.navbar .btn-danger,
.sidebar .btn-danger,
.content .btn-danger,
.main-content .btn-danger,
.timesheet .btn-danger,
.dashboard .btn-danger,
.projects .btn-danger,
.resources .btn-danger,
.payments .btn-danger,
.approvals .btn-danger,
.settings .btn-danger,
button.btn-danger,
a.btn-danger,
input[type="button"].btn-danger,
input[type="submit"].btn-danger,
input[type="reset"].btn-danger,
form .btn-danger,
div .btn-danger,
span .btn-danger,
.btn-group .btn-danger,
.btn-toolbar .btn-danger,
.card-body .btn-danger,
.card-header .btn-danger,
.card-footer .btn-danger,
.table-responsive .btn-danger,
.list-group .btn-danger,
.alert .btn-danger,
.jumbotron .btn-danger,
.well .btn-danger,
.panel .btn-danger,
.tab-content .btn-danger,
.tab-pane .btn-danger,
.collapse .btn-danger,
.accordion .btn-danger,
.carousel .btn-danger,
.modal-body .btn-danger,
.modal-footer .btn-danger,
.modal-header .btn-danger,
.offcanvas .btn-danger,
.toast .btn-danger,
.popover .btn-danger,
.tooltip .btn-danger,
.progress .btn-danger,
.breadcrumb .btn-danger,
.pagination .btn-danger,
.nav .btn-danger,
.navbar-nav .btn-danger,
.dropdown-menu .btn-danger {
    background: var(--btn-danger) !important;
    border-color: var(--btn-danger-border) !important;
    color: var(--btn-danger-text) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.btn-danger:hover,
.container-fluid .btn-danger:hover,
.card .btn-danger:hover,
.table .btn-danger:hover {
    background: var(--btn-danger-hover) !important;
    border-color: var(--btn-danger-border) !important;
    color: var(--btn-danger-text) !important;
}

.btn-danger:active,
.btn-danger.active,
.container-fluid .btn-danger:active,
.container-fluid .btn-danger.active {
    background: var(--btn-danger-active) !important;
    border-color: var(--btn-danger-border) !important;
    color: var(--btn-danger-text) !important;
}

/* Info Button - Maximum Specificity */
.btn-info,
.container-fluid .btn-info,
.card .btn-info,
.table .btn-info,
.modal .btn-info,
.dropdown .btn-info,
.navbar .btn-info,
.sidebar .btn-info,
.content .btn-info,
.main-content .btn-info,
.timesheet .btn-info,
.dashboard .btn-info,
.projects .btn-info,
.resources .btn-info,
.payments .btn-info,
.approvals .btn-info,
.settings .btn-info,
button.btn-info,
a.btn-info,
input[type="button"].btn-info,
input[type="submit"].btn-info,
input[type="reset"].btn-info,
form .btn-info,
div .btn-info,
span .btn-info,
.btn-group .btn-info,
.btn-toolbar .btn-info,
.card-body .btn-info,
.card-header .btn-info,
.card-footer .btn-info,
.table-responsive .btn-info,
.list-group .btn-info,
.alert .btn-info,
.jumbotron .btn-info,
.well .btn-info,
.panel .btn-info,
.tab-content .btn-info,
.tab-pane .btn-info,
.collapse .btn-info,
.accordion .btn-info,
.carousel .btn-info,
.modal-body .btn-info,
.modal-footer .btn-info,
.modal-header .btn-info,
.offcanvas .btn-info,
.toast .btn-info,
.popover .btn-info,
.tooltip .btn-info,
.progress .btn-info,
.breadcrumb .btn-info,
.pagination .btn-info,
.nav .btn-info,
.navbar-nav .btn-info,
.dropdown-menu .btn-info {
    background: var(--btn-info) !important;
    border-color: var(--btn-info-border) !important;
    color: var(--btn-info-text) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.btn-info:hover,
.container-fluid .btn-info:hover,
.card .btn-info:hover,
.table .btn-info:hover {
    background: var(--btn-info-hover) !important;
    border-color: var(--btn-info-border) !important;
    color: var(--btn-info-text) !important;
}

.btn-info:active,
.btn-info.active,
.container-fluid .btn-info:active,
.container-fluid .btn-info.active {
    background: var(--btn-info-active) !important;
    border-color: var(--btn-info-border) !important;
    color: var(--btn-info-text) !important;
}

/* Light Button - Maximum Specificity */
.btn-light,
.container-fluid .btn-light,
.card .btn-light,
.table .btn-light,
.modal .btn-light,
.dropdown .btn-light,
.navbar .btn-light,
.sidebar .btn-light,
.content .btn-light,
.main-content .btn-light,
.timesheet .btn-light,
.dashboard .btn-light,
.projects .btn-light,
.resources .btn-light,
.payments .btn-light,
.approvals .btn-light,
.settings .btn-light,
button.btn-light,
a.btn-light,
input[type="button"].btn-light,
input[type="submit"].btn-light,
input[type="reset"].btn-light,
form .btn-light,
div .btn-light,
span .btn-light,
.btn-group .btn-light,
.btn-toolbar .btn-light,
.card-body .btn-light,
.card-header .btn-light,
.card-footer .btn-light,
.table-responsive .btn-light,
.list-group .btn-light,
.alert .btn-light,
.jumbotron .btn-light,
.well .btn-light,
.panel .btn-light,
.tab-content .btn-light,
.tab-pane .btn-light,
.collapse .btn-light,
.accordion .btn-light,
.carousel .btn-light,
.modal-body .btn-light,
.modal-footer .btn-light,
.modal-header .btn-light,
.offcanvas .btn-light,
.toast .btn-light,
.popover .btn-light,
.tooltip .btn-light,
.progress .btn-light,
.breadcrumb .btn-light,
.pagination .btn-light,
.nav .btn-light,
.navbar-nav .btn-light,
.dropdown-menu .btn-light {
    background: var(--btn-light) !important;
    border-color: var(--btn-light-border) !important;
    color: var(--btn-light-text) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.btn-light:hover,
.container-fluid .btn-light:hover,
.card .btn-light:hover,
.table .btn-light:hover {
    background: var(--btn-light-hover) !important;
    border-color: var(--btn-light-border) !important;
    color: var(--btn-light-text) !important;
}

.btn-light:active,
.btn-light.active,
.container-fluid .btn-light:active,
.container-fluid .btn-light.active {
    background: var(--btn-light-active) !important;
    border-color: var(--btn-light-border) !important;
    color: var(--btn-light-text) !important;
}

/* Dark Button - Maximum Specificity */
.btn-dark,
.container-fluid .btn-dark,
.card .btn-dark,
.table .btn-dark,
.modal .btn-dark,
.dropdown .btn-dark,
.navbar .btn-dark,
.sidebar .btn-dark,
.content .btn-dark,
.main-content .btn-dark,
.timesheet .btn-dark,
.dashboard .btn-dark,
.projects .btn-dark,
.resources .btn-dark,
.payments .btn-dark,
.approvals .btn-dark,
.settings .btn-dark,
button.btn-dark,
a.btn-dark,
input[type="button"].btn-dark,
input[type="submit"].btn-dark,
input[type="reset"].btn-dark,
form .btn-dark,
div .btn-dark,
span .btn-dark,
.btn-group .btn-dark,
.btn-toolbar .btn-dark,
.card-body .btn-dark,
.card-header .btn-dark,
.card-footer .btn-dark,
.table-responsive .btn-dark,
.list-group .btn-dark,
.alert .btn-dark,
.jumbotron .btn-dark,
.well .btn-dark,
.panel .btn-dark,
.tab-content .btn-dark,
.tab-pane .btn-dark,
.collapse .btn-dark,
.accordion .btn-dark,
.carousel .btn-dark,
.modal-body .btn-dark,
.modal-footer .btn-dark,
.modal-header .btn-dark,
.offcanvas .btn-dark,
.toast .btn-dark,
.popover .btn-dark,
.tooltip .btn-dark,
.progress .btn-dark,
.breadcrumb .btn-dark,
.pagination .btn-dark,
.nav .btn-dark,
.navbar-nav .btn-dark,
.dropdown-menu .btn-dark {
    background: var(--btn-dark) !important;
    border-color: var(--btn-dark-border) !important;
    color: var(--btn-dark-text) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.btn-dark:hover,
.container-fluid .btn-dark:hover,
.card .btn-dark:hover,
.table .btn-dark:hover {
    background: var(--btn-dark-hover) !important;
    border-color: var(--btn-dark-border) !important;
    color: var(--btn-dark-text) !important;
}

.btn-dark:active,
.btn-dark.active,
.container-fluid .btn-dark:active,
.container-fluid .btn-dark.active {
    background: var(--btn-dark-active) !important;
    border-color: var(--btn-dark-border) !important;
    color: var(--btn-dark-text) !important;
}

/* Outline Button Variants - Maximum Specificity */
.btn-outline-primary,
.container-fluid .btn-outline-primary,
.card .btn-outline-primary,
.table .btn-outline-primary,
.modal .btn-outline-primary,
.dropdown .btn-outline-primary,
.navbar .btn-outline-primary,
.sidebar .btn-outline-primary,
.content .btn-outline-primary,
.main-content .btn-outline-primary,
.timesheet .btn-outline-primary,
.dashboard .btn-outline-primary,
.projects .btn-outline-primary,
.resources .btn-outline-primary,
.payments .btn-outline-primary,
.approvals .btn-outline-primary,
.settings .btn-outline-primary,
button.btn-outline-primary,
a.btn-outline-primary,
input[type="button"].btn-outline-primary,
input[type="submit"].btn-outline-primary,
input[type="reset"].btn-outline-primary,
form .btn-outline-primary,
div .btn-outline-primary,
span .btn-outline-primary,
.btn-group .btn-outline-primary,
.btn-toolbar .btn-outline-primary,
.card-body .btn-outline-primary,
.card-header .btn-outline-primary,
.card-footer .btn-outline-primary,
.table-responsive .btn-outline-primary,
.list-group .btn-outline-primary,
.alert .btn-outline-primary,
.jumbotron .btn-outline-primary,
.well .btn-outline-primary,
.panel .btn-outline-primary,
.tab-content .btn-outline-primary,
.tab-pane .btn-outline-primary,
.collapse .btn-outline-primary,
.accordion .btn-outline-primary,
.carousel .btn-outline-primary,
.modal-body .btn-outline-primary,
.modal-footer .btn-outline-primary,
.modal-header .btn-outline-primary,
.offcanvas .btn-outline-primary,
.toast .btn-outline-primary,
.popover .btn-outline-primary,
.tooltip .btn-outline-primary,
.progress .btn-outline-primary,
.breadcrumb .btn-outline-primary,
.pagination .btn-outline-primary,
.nav .btn-outline-primary,
.navbar-nav .btn-outline-primary,
.dropdown-menu .btn-outline-primary {
    background-color: transparent !important;
    border-color: var(--btn-primary-border) !important;
    color: var(--btn-primary-text) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.btn-outline-primary:hover,
.container-fluid .btn-outline-primary:hover,
.card .btn-outline-primary:hover,
.table .btn-outline-primary:hover {
    background: var(--btn-primary) !important;
    border-color: var(--btn-primary-border) !important;
    color: var(--btn-primary-text) !important;
}

.btn-outline-secondary,
.container-fluid .btn-outline-secondary,
.card .btn-outline-secondary,
.table .btn-outline-secondary {
    background-color: transparent !important;
    border-color: var(--btn-secondary-border) !important;
    color: var(--btn-secondary-text) !important;
}

.btn-outline-secondary:hover,
.container-fluid .btn-outline-secondary:hover,
.card .btn-outline-secondary:hover,
.table .btn-outline-secondary:hover {
    background: var(--btn-secondary) !important;
    border-color: var(--btn-secondary-border) !important;
    color: var(--btn-secondary-text) !important;
}

.btn-outline-success,
.container-fluid .btn-outline-success,
.card .btn-outline-success,
.table .btn-outline-success {
    background-color: transparent !important;
    border-color: var(--btn-success-border) !important;
    color: var(--btn-success-text) !important;
}

.btn-outline-success:hover,
.container-fluid .btn-outline-success:hover,
.card .btn-outline-success:hover,
.table .btn-outline-success:hover {
    background: var(--btn-success) !important;
    border-color: var(--btn-success-border) !important;
    color: var(--btn-success-text) !important;
}

.btn-outline-warning,
.container-fluid .btn-outline-warning,
.card .btn-outline-warning,
.table .btn-outline-warning {
    background-color: transparent !important;
    border-color: var(--btn-warning-border) !important;
    color: var(--btn-warning-text) !important;
}

.btn-outline-warning:hover,
.container-fluid .btn-outline-warning:hover,
.card .btn-outline-warning:hover,
.table .btn-outline-warning:hover {
    background: var(--btn-warning) !important;
    border-color: var(--btn-warning-border) !important;
    color: var(--btn-warning-text) !important;
}

.btn-outline-danger,
.container-fluid .btn-outline-danger,
.card .btn-outline-danger,
.table .btn-outline-danger {
    background-color: transparent !important;
    border-color: var(--btn-danger-border) !important;
    color: var(--btn-danger-text) !important;
}

.btn-outline-danger:hover,
.container-fluid .btn-outline-danger:hover,
.card .btn-outline-danger:hover,
.table .btn-outline-danger:hover {
    background: var(--btn-danger) !important;
    border-color: var(--btn-danger-border) !important;
    color: var(--btn-danger-text) !important;
}

.btn-outline-info,
.container-fluid .btn-outline-info,
.card .btn-outline-info,
.table .btn-outline-info {
    background-color: transparent !important;
    border-color: var(--btn-info-border) !important;
    color: var(--btn-info-text) !important;
}

.btn-outline-info:hover,
.container-fluid .btn-outline-info:hover,
.card .btn-outline-info:hover,
.table .btn-outline-info:hover {
    background: var(--btn-info) !important;
    border-color: var(--btn-info-border) !important;
    color: var(--btn-info-text) !important;
}

.btn-outline-light,
.container-fluid .btn-outline-light,
.card .btn-outline-light,
.table .btn-outline-light {
    background-color: transparent !important;
    border-color: var(--btn-light-border) !important;
    color: var(--btn-light-text) !important;
}

.btn-outline-light:hover,
.container-fluid .btn-outline-light:hover,
.card .btn-outline-light:hover,
.table .btn-outline-light:hover {
    background: var(--btn-light) !important;
    border-color: var(--btn-light-border) !important;
    color: var(--btn-light-text) !important;
}

.btn-outline-dark,
.container-fluid .btn-outline-dark,
.card .btn-outline-dark,
.table .btn-outline-dark {
    background-color: transparent !important;
    border-color: var(--btn-dark-border) !important;
    color: var(--btn-dark-text) !important;
}

.btn-outline-dark:hover,
.container-fluid .btn-outline-dark:hover,
.card .btn-outline-dark:hover,
.table .btn-outline-dark:hover {
    background: var(--btn-dark) !important;
    border-color: var(--btn-dark-border) !important;
    color: var(--btn-dark-text) !important;
}

/* Button Sizes - High Specificity */
.btn-sm,
.container-fluid .btn-sm,
.card .btn-sm,
.table .btn-sm {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.8125rem !important;
    border-radius: var(--btn-border-radius-sm) !important;
}

.btn-lg,
.container-fluid .btn-lg,
.card .btn-lg,
.table .btn-lg {
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
    border-radius: var(--btn-border-radius-lg) !important;
}

/* Extra Small Buttons for Compact Interfaces */
.btn-xs,
.container-fluid .btn-xs,
.card .btn-xs,
.table .btn-xs {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.75rem !important;
    border-radius: var(--btn-border-radius-sm) !important;
    line-height: 1.2 !important;
}

/* Button Groups - High Specificity */
.btn-group .btn,
.container-fluid .btn-group .btn {
    border-radius: 0 !important;
    margin-left: -1px !important;
}

.btn-group .btn:first-child,
.container-fluid .btn-group .btn:first-child {
    border-top-left-radius: var(--btn-border-radius) !important;
    border-bottom-left-radius: var(--btn-border-radius) !important;
    margin-left: 0 !important;
}

.btn-group .btn:last-child,
.container-fluid .btn-group .btn:last-child {
    border-top-right-radius: var(--btn-border-radius) !important;
    border-bottom-right-radius: var(--btn-border-radius) !important;
}

.btn-group .btn:hover,
.container-fluid .btn-group .btn:hover {
    z-index: 2 !important;
}

/* Special Button Variants for Application */
.btn-professional,
.container-fluid .btn-professional {
    background-color: #2c3e50 !important;
    border-color: #2c3e50 !important;
    color: white !important;
}

.btn-professional:hover,
.container-fluid .btn-professional:hover {
    background-color: #34495e !important;
    border-color: #34495e !important;
    color: white !important;
}

.btn-modern,
.container-fluid .btn-modern {
    background-color: #3498db !important;
    border-color: #3498db !important;
    color: white !important;
}

.btn-modern:hover,
.container-fluid .btn-modern:hover {
    background-color: #2980b9 !important;
    border-color: #2980b9 !important;
    color: white !important;
}

/* Icon Buttons */
.btn-icon,
.container-fluid .btn-icon {
    padding: 0.5rem !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-icon.btn-sm,
.container-fluid .btn-icon.btn-sm {
    padding: 0.375rem !important;
    width: 2rem !important;
    height: 2rem !important;
}

.btn-icon.btn-lg,
.container-fluid .btn-icon.btn-lg {
    padding: 0.75rem !important;
    width: 3rem !important;
    height: 3rem !important;
}

/* Loading State */
.btn-loading,
.container-fluid .btn-loading {
    position: relative !important;
    pointer-events: none !important;
}

.btn-loading::after,
.container-fluid .btn-loading::after {
    content: '' !important;
    position: absolute !important;
    width: 1rem !important;
    height: 1rem !important;
    border: 2px solid transparent !important;
    border-top: 2px solid currentColor !important;
    border-radius: 50% !important;
    animation: btn-spin 1s linear infinite !important;
}

@keyframes btn-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 768px) {
    .btn,
    .container-fluid .btn {
        padding: 0.5rem 0.875rem !important;
        font-size: 0.8125rem !important;
    }
    
    .btn-sm,
    .container-fluid .btn-sm {
        padding: 0.375rem 0.625rem !important;
        font-size: 0.75rem !important;
    }
    
    .btn-lg,
    .container-fluid .btn-lg {
        padding: 0.625rem 1.25rem !important;
        font-size: 0.9375rem !important;
    }
}

@media (max-width: 576px) {
    .btn,
    .container-fluid .btn {
        padding: 0.4375rem 0.75rem !important;
        font-size: 0.8rem !important;
    }
    
    .btn-group .btn,
    .container-fluid .btn-group .btn {
        padding: 0.375rem 0.625rem !important;
        font-size: 0.75rem !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .btn,
    .container-fluid .btn {
        border-width: 2px !important;
    }
    
    .btn:focus,
    .container-fluid .btn:focus {
        outline: 3px solid currentColor !important;
        outline-offset: 2px !important;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .btn,
    .container-fluid .btn {
        transition: none !important;
    }
    
    .btn:hover,
    .container-fluid .btn:hover {
        transform: none !important;
    }
    
    .btn-loading::after,
    .container-fluid .btn-loading::after {
        animation: none !important;
    }
}

/* Print Styles */
@media print {
    .btn,
    .container-fluid .btn {
        background: white !important;
        color: black !important;
        border: 1px solid black !important;
        box-shadow: none !important;
    }
}

/* COMPREHENSIVE BUTTON VISIBILITY FIXES - MAXIMUM PRIORITY */
/* This section ensures ALL buttons are visible regardless of context */

/* Force visibility for all button elements */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.btn,
a.btn,
span.btn,
div.btn {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Specific fixes for timesheet module buttons */
.timesheet button,
.timesheet .btn,
.timesheet input[type="button"],
.timesheet input[type="submit"],
.timesheet a.btn,
#timesheetSubmissionForm button,
#timesheetSubmissionForm .btn,
#submitTimesheetBtn,
#confirmDelete,
.btn-group button,
.btn-group .btn,
.btn-group-sm button,
.btn-group-sm .btn,
.modal-footer button,
.modal-footer .btn,
.card-body button,
.card-body .btn,
.table button,
.table .btn,
.alert button,
.alert .btn {
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
    background: var(--btn-primary) !important;
    color: var(--btn-primary-text) !important;
    border: 1px solid var(--btn-primary-border) !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    border-radius: 0.375rem !important;
    text-decoration: none !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    min-width: 60px !important;
}

/* Specific button type overrides */
.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary,
a.btn-primary {
    background: var(--btn-primary) !important;
    border-color: var(--btn-primary-border) !important;
    color: var(--btn-primary-text) !important;
}

.btn-secondary,
button.btn-secondary,
input[type="button"].btn-secondary,
a.btn-secondary {
    background: var(--btn-secondary) !important;
    border-color: var(--btn-secondary-border) !important;
    color: var(--btn-secondary-text) !important;
}

.btn-success,
button.btn-success,
input[type="submit"].btn-success,
a.btn-success {
    background: var(--btn-success) !important;
    border-color: var(--btn-success-border) !important;
    color: var(--btn-success-text) !important;
}

.btn-warning,
button.btn-warning,
input[type="button"].btn-warning,
a.btn-warning {
    background: var(--btn-warning) !important;
    border-color: var(--btn-warning-border) !important;
    color: var(--btn-warning-text) !important;
}

.btn-danger,
button.btn-danger,
input[type="button"].btn-danger,
a.btn-danger {
    background: var(--btn-danger) !important;
    border-color: var(--btn-danger-border) !important;
    color: var(--btn-danger-text) !important;
}

.btn-info,
button.btn-info,
input[type="button"].btn-info,
a.btn-info {
    background: var(--btn-info) !important;
    border-color: var(--btn-info-border) !important;
    color: var(--btn-info-text) !important;
}

.btn-light,
button.btn-light,
input[type="button"].btn-light,
a.btn-light {
    background: var(--btn-light) !important;
    border-color: var(--btn-light-border) !important;
    color: var(--btn-light-text) !important;
}

.btn-dark,
button.btn-dark,
input[type="button"].btn-dark,
a.btn-dark {
    background: var(--btn-dark) !important;
    border-color: var(--btn-dark-border) !important;
    color: var(--btn-dark-text) !important;
}

/* Outline button overrides */
.btn-outline-primary,
button.btn-outline-primary,
a.btn-outline-primary {
    background-color: transparent !important;
    border-color: var(--btn-primary-border) !important;
    color: var(--btn-primary-text) !important;
}

.btn-outline-secondary,
button.btn-outline-secondary,
a.btn-outline-secondary {
    background-color: transparent !important;
    border-color: var(--btn-secondary-border) !important;
    color: var(--btn-secondary-text) !important;
}

.btn-outline-success,
button.btn-outline-success,
a.btn-outline-success {
    background-color: transparent !important;
    border-color: var(--btn-success-border) !important;
    color: var(--btn-success-text) !important;
}

.btn-outline-warning,
button.btn-outline-warning,
a.btn-outline-warning {
    background-color: transparent !important;
    border-color: var(--btn-warning-border) !important;
    color: var(--btn-warning-text) !important;
}

.btn-outline-danger,
button.btn-outline-danger,
a.btn-outline-danger {
    background-color: transparent !important;
    border-color: var(--btn-danger-border) !important;
    color: var(--btn-danger-text) !important;
}

.btn-outline-info,
button.btn-outline-info,
a.btn-outline-info {
    background-color: transparent !important;
    border-color: var(--btn-info-border) !important;
    color: var(--btn-info-text) !important;
}

.btn-outline-light,
button.btn-outline-light,
a.btn-outline-light {
    background-color: transparent !important;
    border-color: var(--btn-light-border) !important;
    color: var(--btn-light-text) !important;
}

.btn-outline-dark,
button.btn-outline-dark,
a.btn-outline-dark {
    background-color: transparent !important;
    border-color: var(--btn-dark-border) !important;
    color: var(--btn-dark-text) !important;
}

/* Button size overrides */
.btn-sm,
button.btn-sm,
a.btn-sm {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.8125rem !important;
    border-radius: var(--btn-border-radius-sm) !important;
    min-height: 32px !important;
}

.btn-lg,
button.btn-lg,
a.btn-lg {
    padding: 0.5rem 1rem !important;
    font-size: 1rem !important;
    border-radius: var(--btn-border-radius-lg) !important;
    min-height: 48px !important;
}

/* Hover states for all buttons */
.btn:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
a.btn:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--btn-shadow-hover) !important;
}

/* Focus states for accessibility */
.btn:focus,
button:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
a.btn:focus {
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
    box-shadow: var(--btn-shadow), 0 0 0 3px rgba(0, 102, 204, 0.2) !important;
}

/* Disabled state overrides */
.btn:disabled,
.btn.disabled,
button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: var(--btn-shadow) !important;
}

/* Emergency fallback for completely invisible buttons */
button[style*="display: none"],
.btn[style*="display: none"],
button[style*="visibility: hidden"],
.btn[style*="visibility: hidden"],
button[style*="opacity: 0"],
.btn[style*="opacity: 0"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: var(--btn-primary) !important;
    color: var(--btn-primary-text) !important;
    border: 1px solid var(--btn-primary-border) !important;
    padding: 0.375rem 0.75rem !important;
    border-radius: 0.375rem !important;
}