/* Bootstrap Theme Customization for HR System */
/* Using the site's existing color scheme from base.css */

/* Import base CSS variables */
@import url('base.css');

/* Bootstrap Primary Color Customization */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--secondary);
    --bs-btn-border-color: var(--secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #155545;
    --bs-btn-hover-border-color: #124a3d;
    --bs-btn-focus-shadow-rgb: 1, 56, 48;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary);
    --bs-btn-active-border-color: var(--primary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--secondary);
    --bs-btn-disabled-border-color: var(--secondary);
}

/* Bootstrap Secondary Color Customization */
.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #4f7a4d;
    --bs-btn-hover-border-color: #476e45;
    --bs-btn-focus-shadow-rgb: 94, 145, 92;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #476e45;
    --bs-btn-active-border-color: #3f623d;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
}

/* Outline Button Customization */
.btn-outline-primary {
    --bs-btn-color: var(--secondary);
    --bs-btn-border-color: var(--secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--secondary);
    --bs-btn-hover-border-color: var(--secondary);
    --bs-btn-focus-shadow-rgb: 1, 56, 48;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--secondary);
    --bs-btn-active-border-color: var(--secondary);
    --bs-btn-disabled-color: var(--secondary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--secondary);
}

.btn-outline-secondary {
    --bs-btn-color: var(--neutral-700);
    --bs-btn-border-color: var(--neutral-cool-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--neutral-cool-dark);
    --bs-btn-hover-border-color: var(--neutral-cool-dark);
    --bs-btn-focus-shadow-rgb: 126, 138, 151;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--neutral-cool-dark);
    --bs-btn-active-border-color: var(--neutral-cool-dark);
    --bs-btn-disabled-color: var(--neutral-cool-dark);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--neutral-cool-dark);
}

/* Badge Customization */
.badge.bg-primary {
    background-color: var(--primary) !important;
}

.badge.bg-secondary {
    background-color: var(--secondary) !important;
}

.badge.text-bg-primary {
    color: #fff !important;
    background-color: var(--primary) !important;
}

.badge.text-bg-secondary {
    color: #fff !important;
    background-color: var(--secondary) !important;
}

/* Alert Customization */
.alert-primary {
    --bs-alert-color: var(--secondary);
    --bs-alert-bg: var(--primary-10);
    --bs-alert-border-color: var(--primary-20);
}

.alert-secondary {
    --bs-alert-color: var(--neutral-700);
    --bs-alert-bg: var(--neutral-150);
    --bs-alert-border-color: var(--neutral-200);
}

/* Card Customization */
.card {
    border-color: var(--neutral-300);
}

.card-header {
    background-color: var(--neutral-150);
    border-bottom-color: var(--neutral-300);
}

/* Form Control Customization */
.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.25rem var(--primary-20);
}

.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

.form-check-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.25rem var(--primary-20);
}

/* Link Customization */
a {
    color: var(--primary);
}

a:hover {
    color: var(--secondary);
}

/* Pagination Customization */
.pagination .page-link {
    color: var(--primary);
}

.active>.page-link, .page-link.active {
    color: var(--bs-pagination-active-color);
}

.pagination .page-link:hover {
    color: var(--secondary);
    background-color: var(--neutral-150);
    border-color: var(--neutral-300);
}

.pagination .page-item.active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* Progress Bar Customization */
.progress-bar {
    background-color: var(--primary);
}

.progress-bar.bg-primary {
    background-color: var(--primary) !important;
}

.progress-bar.bg-secondary {
    background-color: var(--secondary) !important;
}

/* List Group Customization */
.list-group-item.active {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* Nav Pills Customization */
.nav-pills .nav-link.active {
    background-color: var(--primary);
}

.nav-pills .nav-link:hover:not(.active) {
    background-color: var(--primary-10);
    color: var(--primary);
}

/* Dropdown Customization */
.dropdown-item:active {
    background-color: var(--primary);
}

.dropdown-item:hover {
    background-color: var(--neutral-150);
}

/* Modal Customization */
.modal-header {
    background-color: var(--neutral-150);
    border-bottom-color: var(--neutral-300);
}

.modal-footer {
    border-top-color: var(--neutral-300);
}

/* Navbar Customization */
.navbar-light .navbar-nav .nav-link:hover {
    color: var(--primary);
}

.navbar-light .navbar-nav .nav-link.active {
    color: var(--secondary);
}

/* Toast Customization */
.toast-header {
    background-color: var(--neutral-150);
    border-bottom-color: var(--neutral-300);
}

/* Spinner/Loading Customization */
.spinner-border.text-primary {
    color: var(--primary) !important;
}

.spinner-border.text-secondary {
    color: var(--secondary) !important;
}

/* Text Colors */
.text-primary {
    color: var(--primary) !important;
}

.text-secondary {
    color: var(--secondary) !important;
}

/* Background Colors */
.bg-primary {
    background-color: var(--primary) !important;
}

.bg-secondary {
    background-color: var(--secondary) !important;
}

/* Border Colors */
.border-primary {
    border-color: var(--primary) !important;
}

.border-secondary {
    border-color: var(--secondary) !important;
}

/* Table Customization */
.table-primary {
    --bs-table-bg: var(--primary-10);
    --bs-table-border-color: var(--primary-20);
}

/* Accordion Customization */
.accordion-button:not(.collapsed) {
    background-color: var(--primary-10);
    color: var(--secondary);
}

.accordion-button:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.25rem var(--primary-20);
}

/* Breadcrumb Customization */
.breadcrumb-item.active {
    color: var(--neutral-700);
}

.breadcrumb-item a {
    color: var(--primary);
}

.breadcrumb-item a:hover {
    color: var(--secondary);
}

/* Close Button Customization */
.btn-close:focus {
    box-shadow: 0 0 0 0.25rem var(--primary-20);
}

/* Offcanvas Customization */
.offcanvas-header {
    background-color: var(--neutral-150);
    border-bottom: 1px solid var(--neutral-300);
}

/* Popover Customization */
.popover-header {
    background-color: var(--neutral-150);
    border-bottom: 1px solid var(--neutral-300);
}

/* Switch/Toggle Customization */
.form-switch .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* Range Input Customization */
.form-range::-webkit-slider-thumb {
    background-color: var(--primary);
}

.form-range::-moz-range-thumb {
    background-color: var(--primary);
}

.form-range::-webkit-slider-thumb:active {
    background-color: var(--secondary);
}

.form-range::-moz-range-thumb:active {
    background-color: var(--secondary);
}

/* Tabs Customization */
.nav-tabs .nav-link {
    color: var(--neutral-700);
    border-color: transparent;
}

.nav-tabs .nav-link:hover {
    color: var(--primary);
    border-color: var(--neutral-300) var(--neutral-300) var(--neutral-200);
}

.nav-tabs .nav-link.active {
    color: var(--secondary);
    background-color: var(--neutral-100);
    border-color: var(--neutral-300) var(--neutral-300) var(--neutral-100);
}

.nav-tabs {
    border-bottom-color: var(--neutral-300);
}

/* Nav Tabs Pills Alternative */
.nav-tabs.nav-tabs-pills .nav-link {
    border-radius: 0.5rem;
    margin: 0 0.25rem;
}

.nav-tabs.nav-tabs-pills .nav-link.active {
    background-color: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* Input Group Customization */
.input-group-text {
    background-color: var(--neutral-150);
    border-color: var(--neutral-300);
    color: var(--neutral-700);
}

.input-group:focus-within .input-group-text {
    border-color: var(--primary);
    background-color: var(--primary-10);
}

/* Button Group Customization */
.btn-group .btn-primary:not(:disabled):not(.disabled).active,
.btn-group-vertical .btn-primary:not(:disabled):not(.disabled).active {
    background-color: var(--secondary);
    border-color: var(--secondary);
}

/* Tooltip Customization */
.tooltip-inner {
    background-color: var(--secondary);
    color: #fff;
}

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: var(--secondary);
}

.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
    border-right-color: var(--secondary);
}

.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: var(--secondary);
}

.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
    border-left-color: var(--secondary);
}

/* Popover Additional Customization */
.popover {
    border-color: var(--neutral-300);
}

.popover-body {
    color: var(--neutral-700);
}

.bs-popover-top > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::before {
    border-top-color: var(--neutral-300);
}

.bs-popover-end > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::before {
    border-right-color: var(--neutral-300);
}

.bs-popover-bottom > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::before {
    border-top-color: var(--neutral-300);
}

.bs-popover-start > .popover-arrow::before,
.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::before {
    border-left-color: var(--neutral-300);
}

/* Button Success, Warning, Danger, Info Variants */
.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #4f7a4d;
    --bs-btn-hover-border-color: #476e45;
}

.btn-warning {
    --bs-btn-color: var(--neutral-800);
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-color: var(--neutral-800);
    --bs-btn-hover-bg: #ffe44d;
    --bs-btn-hover-border-color: #ffdf29;
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: #dc3545;
    --bs-btn-border-color: #dc3545;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #bb2d3b;
    --bs-btn-hover-border-color: #b02a37;
}

.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--secondary);
    --bs-btn-border-color: var(--secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #012c27;
    --bs-btn-hover-border-color: #01251f;
}

/* Outline Button Variants */
.btn-outline-success {
    --bs-btn-color: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary);
    --bs-btn-hover-border-color: var(--primary);
}

.btn-outline-warning {
    --bs-btn-color: var(--neutral-800);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-color: var(--neutral-800);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--accent);
}

.btn-outline-info {
    --bs-btn-color: var(--secondary);
    --bs-btn-border-color: var(--secondary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--secondary);
    --bs-btn-hover-border-color: var(--secondary);
}

/* Alert Variants */
.alert-success {
    --bs-alert-color: var(--primary);
    --bs-alert-bg: var(--primary-10);
    --bs-alert-border-color: var(--primary-20);
}

.alert-warning {
    --bs-alert-color: var(--neutral-700);
    --bs-alert-bg: rgba(255, 233, 113, 0.3);
    --bs-alert-border-color: rgba(255, 233, 113, 0.4);
}

.alert-info {
    --bs-alert-color: var(--secondary);
    --bs-alert-bg: rgba(1, 56, 48, 0.1);
    --bs-alert-border-color: rgba(1, 56, 48, 0.2);
}

/* Badge Variants */
.badge.bg-success,
.badge.text-bg-success {
    background-color: var(--primary) !important;
    color: #fff !important;
}

.badge.bg-warning,
.badge.text-bg-warning {
    background-color: var(--accent) !important;
    color: var(--neutral-800) !important;
}

.badge.bg-info,
.badge.text-bg-info {
    background-color: var(--secondary) !important;
    color: #fff !important;
}

/* Text Color Variants */
.text-success {
    color: var(--primary) !important;
}

.text-warning {
    color: #d39e00 !important;
}

.text-info {
    color: var(--secondary) !important;
}

.text-muted {
    color: var(--neutral-500) !important;
}

/* Background Color Variants */
.bg-success {
    background-color: var(--primary) !important;
}

.bg-warning {
    background-color: var(--accent) !important;
}

.bg-info {
    background-color: var(--secondary) !important;
}

.bg-light {
    background-color: var(--neutral-200) !important;
}

.bg-dark {
    background-color: var(--neutral-800) !important;
}

/* Border Color Variants */
.border-success {
    border-color: var(--primary) !important;
}

.border-warning {
    border-color: var(--accent) !important;
}

.border-info {
    border-color: var(--secondary) !important;
}

.border-light {
    border-color: var(--neutral-300) !important;
}

.border-dark {
    border-color: var(--neutral-700) !important;
}

/* Table Variants */
.table-secondary {
    --bs-table-bg: rgba(1, 56, 48, 0.1);
    --bs-table-border-color: rgba(1, 56, 48, 0.2);
}

.table-success {
    --bs-table-bg: var(--primary-10);
    --bs-table-border-color: var(--primary-20);
}

.table-warning {
    --bs-table-bg: rgba(255, 233, 113, 0.2);
    --bs-table-border-color: rgba(255, 233, 113, 0.4);
}

.table-info {
    --bs-table-bg: rgba(1, 56, 48, 0.1);
    --bs-table-border-color: rgba(1, 56, 48, 0.2);
}

.table-hover tbody tr:hover {
    background-color: var(--primary-10);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--neutral-150);
}

/* List Group Variants */
.list-group-item-primary {
    background-color: var(--primary-10);
    color: var(--secondary);
}

.list-group-item-secondary {
    background-color: rgba(1, 56, 48, 0.1);
    color: var(--secondary);
}

.list-group-item-success {
    background-color: var(--primary-10);
    color: var(--primary);
}

.list-group-item-warning {
    background-color: rgba(255, 233, 113, 0.2);
    color: var(--neutral-800);
}

.list-group-item-info {
    background-color: rgba(1, 56, 48, 0.1);
    color: var(--secondary);
}

.list-group-item:hover {
    background-color: var(--neutral-150);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--neutral-150);
    color: var(--primary);
}

/* Navbar Additional Variants */
.navbar-dark {
    background-color: var(--secondary);
}

.navbar-dark .navbar-brand {
    color: #fff;
}

.navbar-dark .navbar-brand:hover {
    color: var(--neutral-200);
}

.navbar-dark .navbar-nav .nav-link {
    color: var(--neutral-200);
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: #fff;
}

.navbar-dark .navbar-nav .nav-link.active {
    color: var(--accent);
}

.navbar-light {
    background-color: var(--neutral-100);
}

/* Form Floating Labels */
.form-floating > label {
    color: var(--neutral-500);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    color: var(--primary);
}

/* Form Validation States */
.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--primary);
}

.form-control.is-valid:focus,
.form-select.is-valid:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.25rem var(--primary-20);
}

.valid-feedback {
    color: var(--primary);
}

.invalid-feedback {
    color: #dc3545;
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #dc3545;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* Card Variants */
.card.border-primary {
    border-color: var(--primary);
}

.card.border-primary .card-header {
    background-color: var(--primary-10);
    border-bottom-color: var(--primary);
}

.card.border-secondary {
    border-color: var(--secondary);
}

.card.border-secondary .card-header {
    background-color: rgba(1, 56, 48, 0.1);
    border-bottom-color: var(--secondary);
}

/* Progress Bar Variants */
.progress {
    background-color: var(--neutral-200);
}

.progress-bar.bg-success {
    background-color: var(--primary) !important;
}

.progress-bar.bg-warning {
    background-color: var(--accent) !important;
}

.progress-bar.bg-info {
    background-color: var(--secondary) !important;
}

/* Spinner Variants */
.spinner-border.text-success,
.spinner-grow.text-success {
    color: var(--primary) !important;
}

.spinner-border.text-warning,
.spinner-grow.text-warning {
    color: var(--accent) !important;
}

.spinner-border.text-info,
.spinner-grow.text-info {
    color: var(--secondary) !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--neutral-200);
}

::-webkit-scrollbar-thumb {
    background: var(--neutral-400);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-500);
}

/* Selection Highlight */
::selection {
    background-color: var(--primary);
    color: #fff;
}

::-moz-selection {
    background-color: var(--primary);
    color: #fff;
}

/* Focus Visible Customization */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Custom Todo-specific styling */
.todo-card {
    transition: all 0.3s ease;
}

.todo-card:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.25rem var(--primary-10);
}

.todo-card.completed {
    background-color: var(--neutral-150);
    opacity: 0.8;
}

.subtodo-item {
    border-left: 3px solid var(--primary);
}

.subtodo-item.level-1 {
    border-left-color: var(--primary);
}

.subtodo-item.level-2 {
    border-left-color: var(--secondary);
}

.subtodo-item.level-3 {
    border-left-color: var(--neutral-cool-dark);
}

/* Responsive Media Query Adjustments */
@media (max-width: 768px) {
    .todo-card {
        margin-bottom: 0.75rem;
    }

    .btn-group-sm > .btn,
    .btn-sm {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }
}

/* Print Styles */
@media print {
    .btn,
    .nav,
    .pagination,
    .modal,
    .toast,
    .offcanvas {
        display: none !important;
    }

    .card,
    .table {
        border: 1px solid var(--neutral-700) !important;
    }
}