/* Custom CSS for JT1 */
:root {
    --headerbg: linear-gradient(90deg, #f47e49 0%, #ff9971 100%);
    --color-primary: #FF9971;
    --color-secondary: #F47E49;
    --color-warning: #F7A941;
    --color-success: #3BC976;
}

.badge {
    border-radius: 24px;
    color: #000000;
}

.light.badge-danger,
.light.badge-warning,
.light.badge-secondary {
    background-color: #e70000 !important;
    color: #fff !important;
}

.badge-outline-primary {
    background-color: #f4f4f4;
    border-color: #888888;
    color: #000000;
}

.nav-header {}

.header {
    background: linear-gradient(90deg, #f47e49 0%, #ff9971 100%) !important;
}

.nav-header .brand-logo .header {
    background: linear-gradient(90deg, #f47e49 0%, #ff9971 100%);
}

.menu-toggle .logo-full {
    display: block;
}

[data-sidebar-style=full][data-layout=vertical] .menu-toggle .logo-full {
    display: none;
}

.nav-header .logo-icon {
    display: none;
}

[data-sidebar-style=full][data-layout=vertical] .menu-toggle .logo-icon {
    display: block;
}

.avatar.avatar-sm {
    border-radius: 29px;
    background-color: #ffffff;
}

.avatar {}

.avatar.avatar-sm {
    --avatar-size: 58px;
    border-radius: 29px;
    background-color: #f5f5f5;
}

.avatar.avatar-sm svg {
    width: 28px;
    height: 28px;
}

.dashboard-page .card-hover:hover {
    background-image: linear-gradient(123deg, #f47e49 0%, #f78553 25%, #f98c5d 50%, #fc9267 75%, #ff9971 100%);
    color: #fff;
}

.dashboard-page .card-hover h3 {
    color: #000;
}

.dashboard-page .card-hover:hover h3 {
    color: #fff;
}

.page-title .breadcrumb li.active {
    color: #000;
    font-weight: 500;
}

.page-title .breadcrumb .breadcrumb-item+.breadcrumb-item:before {
    color: #000;
}

/* ===== BUTTON STYLES ===== */
.btn{
    border-radius: 24px !important;
}

/* Regular button (btn-cta) — gradient cam, hover đen */
.btn-cta {
    background: linear-gradient(90deg, #f47e49 0%, #ff9971 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
    border-radius: 24px !important;
}

.btn-cta:hover {
    background: #000000 !important;
    border-color: #000000 !important;
    color: #fff !important;
}

/* Upload button (btn-upload) */
.btn-upload {
    background: #000000 !important;
    border-color: #000000 !important;
    color: #fff !important;
}

.btn-upload:hover {
    background: linear-gradient(90deg, #f47e49 0%, #ff9971 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
}

.btn-add-new {
    background: #000 !important;
    color: #fff !important;
    border: 0px !important;
    border-radius: 24px;
}

.btn-add-new:hover {
    background: linear-gradient(90deg, #f47e49 0%, #ff9971 100%) !important;
}

.btn-back {
    background: #000 !important;
    color: #fff !important;
    border: 0px !important;
    border-radius: 24px !important;
}

.btn-back:hover {
    background: linear-gradient(90deg, #f47e49 0%, #ff9971 100%) !important;
}


/* Pagination buttons */
.paginate_button:not(.disabled):not(.current) {
    color: #000 !important;
    border-color: transparent !important;
}

.paginate_button.next:hover,
.paginate_button.previous:hover {
    background: #000000 !important;
    color: #fff !important;
    border-color: #000000 !important;
}

.paginate_button.current {
    background: #f47e49 !important;
    color: #fff !important;
    border-color: #f47e49 !important;
}

/* Action status buttons */
.btn-status-done,
.btn-status-active {
    background-color: #3bc976 !important;
    border-color: #3bc976 !important;
    color: #fff !important;
}

.btn-status-pending,
.btn-status-inactive {
    background-color: #e70000 !important;
    border-color: #e70000 !important;
    color: #fff !important;
}

.btn-status-ongoing {
    background-color: #f7a941 !important;
    border-color: #f7a941 !important;
    color: #fff !important;
}

/* Action icon buttons — default: xám + icon đen | hover: cam đậm + icon trắng */
.btn-edit,
.btn-delete,
.btn-view,
.btn-add-project,
.btn-open-mail,
.btn-approve-payment,
.btn-mark-paid,
.btn-reupload,
.btn-delete-payment,
.btn-delete-confirm,
.btn-delete-worksheet {
    background-color: #e9ecef !important;
    border-color: #e9ecef !important;
    color: #212529 !important;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.btn-edit i,
.btn-delete i,
.btn-view i,
.btn-add-project i,
.btn-open-mail i,
.btn-approve-payment i,
.btn-mark-paid i,
.btn-reupload i,
.btn-delete-payment i,
.btn-delete-confirm i,
.btn-delete-worksheet i {
    color: #212529 !important;
}

.btn-edit:hover,
.btn-delete:hover,
.btn-view:hover,
.btn-add-project:hover,
.btn-open-mail:hover,
.btn-approve-payment:hover,
.btn-mark-paid:hover,
.btn-reupload:hover,
.btn-delete-payment:hover,
.btn-delete-confirm:hover,
.btn-delete-worksheet:hover {
    background-color: #f47e49 !important;
    border-color: #f47e49 !important;
    color: #fff !important;
}

.btn-edit:hover i,
.btn-delete:hover i,
.btn-view:hover i,
.btn-add-project:hover i,
.btn-open-mail:hover i,
.btn-approve-payment:hover i,
.btn-mark-paid:hover i,
.btn-reupload:hover i,
.btn-delete-payment:hover i,
.btn-delete-confirm:hover i,
.btn-delete-worksheet:hover i {
    color: #fff !important;
}

.btn-cancel {
    border-radius: 24px !important;
}

.btn-sign-in {
    background: linear-gradient(90deg, #f47e49 0%, #ff9971 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
    border-radius: 24px !important;
}

.btn-sign-in:hover {
    background: #000000 !important;
    color: #fff !important;
    border-color: #000000 !important;
}

.bootstrap-select.dropdown .dropdown-toggle {
    border-radius: 24px !important;
}

.page-profile-followers .bootstrap-select.dropdown .dropdown-toggle {
    border-radius: 24px !important;
    border: 0;
    padding: 0;
}