/* 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;
}

/* Keep all table header cells on a single line and show ellipsis when too long */
table th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
    vertical-align: middle;
}

/* Allow full header text to show on hover via title attribute (optional) */
table th[title] {
    cursor: help;
}

.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 {
    z-index: 100 !important;
}

.header {
    background: linear-gradient(90deg, #f47e49 0%, #ff9971 100%) !important;
    z-index: 99 !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;
}

/* Dashboard Card - Default Orange (Upcoming Invoice) */
.dashboard-page .card-orange-primary {
    background-image: linear-gradient(123deg, #f47e49 0%, #f78553 25%, #f98c5d 50%, #fc9267 75%, #ff9971 100%) !important;
    background-color: #f47e49 !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(244, 126, 73, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dashboard-page .card-orange-primary,
.dashboard-page .card-orange-primary div,
.dashboard-page .card-orange-primary h3,
.dashboard-page .card-orange-primary small,
.dashboard-page .card-orange-primary span,
.dashboard-page .card-orange-primary a {
    color: #fff !important;
}

.dashboard-page .card-orange-primary .avatar {
    background-color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.dashboard-page .card-orange-primary .avatar svg,
.dashboard-page .card-orange-primary .avatar svg path,
.dashboard-page .card-orange-primary .avatar svg g {
    fill: #222222 !important;
}

.dashboard-page .card-orange-primary:hover {
    background-image: linear-gradient(123deg, #f47e49 0%, #f78553 25%, #f98c5d 50%, #fc9267 75%, #ff9971 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(244, 126, 73, 0.4) !important;
}

.page-title .breadcrumb li.active {
    color: #000;
    font-weight: 500;
    max-width: 450px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.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;
}

.btn-view-full-details {
    background: #000 !important;
    color: #fff !important;
    border: 0px !important;
    border-radius: 24px !important;
    transition: all 0.2s ease;
}

.btn-view-full-details:hover {
    background: linear-gradient(90deg, #f47e49 0%, #ff9971 100%) !important;
    color: #fff !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;
}

.bootstrap-select .dropdown-menu li a span.text {
    font-size: 12px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.ltool-dropdown-items {
    padding: 0 !important;
}

.localizationTool li {
    margin: 5px;
    border-radius: 12px;
}

.select2-container--bootstrap-5 .select2-selection{
    border-radius: 24px !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus{
    border-color: none !important;
    box-shadow: none !important;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection, 
.select2-container--bootstrap-5.select2-container--open .select2-selection{
    border-color: none !important;
    box-shadow: none !important;
}


.select2-container--bootstrap-5 .select2-dropdown--below{
    border-radius: 12px !important;
    margin: 10px 0 0 0 !important;
}

.select2-container--bootstrap-5 .select2-dropdown.select2-dropdown--below{
    border-radius: 12px !important;
}

.select2-container--bootstrap-5 .select2-dropdown.select2-dropdown--below{
    border-top: 1px solid #86b7fe !important;
}

.select2-container--bootstrap-5.select2-container--open.select2-container--below .select2-selection{
    border-bottom: 1px solid #86b7fe !important;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search{
    padding: 0.5rem !important;
}


.custom-select-type .bootstrap-select.dropdown .dropdown-toggle.btn-light {
    border-radius: 0 24px 24px 0 !important;
}

/* ===== SIDEBAR MENU STYLES (JT1 THEME) ===== */
/* Active menu item: dark orange text, light orange background */
.deznav .metismenu > li.mm-active > a,
.deznav .metismenu > li.mm-active > a.mm-active {
    color: #ea580c !important;
    background-color: rgba(244, 126, 73, 0.12) !important;
    font-weight: 500 !important;
}

.deznav .metismenu > li.mm-active > a .nav-text {
    color: #ea580c !important;
}

.deznav .metismenu > li.mm-active > a i {
    color: #ea580c !important;
}

.deznav .metismenu > li.mm-active > a .menu-icon svg,
.deznav .metismenu > li.mm-active > a .menu-icon svg path,
.deznav .metismenu > li.mm-active > a .menu-icon svg line,
.deznav .metismenu > li.mm-active > a .menu-icon svg circle,
.deznav .metismenu > li.mm-active > a .menu-icon svg ellipse,
.deznav .metismenu > li.mm-active > a .menu-icon svg rect,
.deznav .metismenu > li.mm-active > a .menu-icon svg polygon {
    stroke: #ea580c !important;
}

.deznav .metismenu > li.mm-active > a g [fill],
.deznav .metismenu > li.mm-active > a svg[fill]:not([fill="none"]),
.deznav .metismenu > li.mm-active > a svg path[fill]:not([fill="none"]) {
    fill: #ea580c !important;
}

.deznav .metismenu > li.mm-active > a:after {
    border-top-color: #ea580c !important;
    border-left-color: #ea580c !important;
}

/* Hover & Focus state */
.deznav .metismenu > li:hover > a,
.deznav .metismenu > li:focus > a {
    color: #ea580c !important;
    background-color: rgba(244, 126, 73, 0.06) !important;
}

.deznav .metismenu > li:hover > a .nav-text,
.deznav .metismenu > li:focus > a .nav-text {
    color: #ea580c !important;
}

.deznav .metismenu > li:hover > a i,
.deznav .metismenu > li:focus > a i {
    color: #ea580c !important;
}

.deznav .metismenu > li:hover > a .menu-icon svg,
.deznav .metismenu > li:hover > a .menu-icon svg path,
.deznav .metismenu > li:hover > a .menu-icon svg line,
.deznav .metismenu > li:hover > a .menu-icon svg circle,
.deznav .metismenu > li:hover > a .menu-icon svg ellipse,
.deznav .metismenu > li:hover > a .menu-icon svg rect,
.deznav .metismenu > li:hover > a .menu-icon svg polygon,
.deznav .metismenu > li:focus > a .menu-icon svg,
.deznav .metismenu > li:focus > a .menu-icon svg path,
.deznav .metismenu > li:focus > a .menu-icon svg line,
.deznav .metismenu > li:focus > a .menu-icon svg circle {
    stroke: #ea580c !important;
}

.deznav .metismenu > li:hover > a g [fill],
.deznav .metismenu > li:focus > a g [fill] {
    fill: #ea580c !important;
}

.deznav .metismenu > li:hover > a:after,
.deznav .metismenu > li:focus > a:after {
    border-top-color: #ea580c !important;
    border-left-color: #ea580c !important;
}

/* Submenu items */
.deznav .metismenu ul a:hover,
.deznav .metismenu ul a:focus,
.deznav .metismenu ul a.mm-active {
    color: #ea580c !important;
}

.deznav .metismenu ul a.mm-active {
    background-color: rgba(244, 126, 73, 0.08) !important;
    font-weight: 500 !important;
}

.deznav .metismenu ul a:hover {
    background-color: rgba(244, 126, 73, 0.04) !important;
}

[data-sidebar-style=full] .deznav .metismenu ul a:before {
    background: rgba(244, 126, 73, 0.5) !important;
}

[data-sidebar-style=full] .deznav .metismenu ul a.mm-active:before,
[data-sidebar-style=full] .deznav .metismenu ul a:hover:before {
    background: #ea580c !important;
}

.deznav .metismenu .menu-title {
    color: #ea580c !important;
}

/* Compact and Mini sidebar styles */
[data-sidebar-style=compact] .deznav .metismenu > li.mm-active > a i {
    background: #ea580c !important;
    color: #fff !important;
}

[data-sidebar-style=compact] .deznav .metismenu > li.mm-active > a,
[data-sidebar-style=mini] .deznav .metismenu > li.mm-active > a {
    background-color: rgba(244, 126, 73, 0.12) !important;
    color: #ea580c !important;
}

/* Orange Utility Classes */
.text-orange-main {
    color: #f47e49 !important;
}

.bg-orange-main {
    background-color: #f47e49 !important;
    color: #ffffff !important;
}

.border-orange-light {
    border: 1px solid #ffd8c2 !important;
}

.btn-orange-main {
    background-color: #f47e49 !important;
    border-color: #f47e49 !important;
    color: #ffffff !important;
}

.btn-orange-main:hover {
    background-color: #e04f00 !important;
    border-color: #e04f00 !important;
    color: #ffffff !important;
}

.hover-text-orange,
.text-orange-hover {
    transition: color 0.2s ease;
}

.hover-text-orange:hover,
.text-orange-hover:hover,
a.hover-text-orange:hover,
a.text-orange-hover:hover {
    color: #f47e49 !important;
}

/* Profile Gallery candidate name */
.page-profile-followers .card h4 a {
    color: #f47e49 !important;
    transition: color 0.2s ease;
}

.page-profile-followers .card h4 a:hover {
    color: #e04f00 !important;
}

/* SweetAlert2 3 Actions / Save Confirm Button */
.swal2-popup .swal2-actions .swal2-confirm {
    background: linear-gradient(90deg, #f47e49 0%, #ff9971 100%) !important;
    background-color: #f47e49 !important;
    border-color: #f47e49 !important;
    color: #ffffff !important;
    border-radius: 0.5rem !important;
    font-weight: 500 !important;
    box-shadow: none !important;
}

.swal2-popup .swal2-actions .swal2-confirm:hover {
    background: #000000 !important;
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

.swal2-popup .swal2-actions .swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(244, 126, 73, 0.5) !important;
}

.swal2-popup .swal2-actions .swal2-deny {
    background-color: #e70000 !important;
    border-color: #e70000 !important;
    color: #ffffff !important;
    border-radius: 0.5rem !important;
    box-shadow: none !important;
}

.swal2-popup .swal2-actions .swal2-deny:hover {
    background-color: #c40000 !important;
    border-color: #c40000 !important;
}

.swal2-popup .swal2-actions .swal2-cancel {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
    border-radius: 0.5rem !important;
    box-shadow: none !important;
}

.swal2-popup .swal2-actions .swal2-cancel:hover {
    background-color: #5a6268 !important;
    border-color: #5a6268 !important;
}

/* Summernote WYSIWYG List Styling Fix */
.note-editor .note-editable ul,
.note-editable ul {
    list-style-type: disc !important;
    padding-left: 25px !important;
    margin: 8px 0 !important;
}

.note-editor .note-editable ol,
.note-editable ol {
    list-style-type: decimal !important;
    padding-left: 25px !important;
    margin: 8px 0 !important;
}

.note-editor .note-editable ul li,
.note-editable ul li {
    list-style-type: disc !important;
    list-style: disc !important;
    display: list-item !important;
}

.note-editor .note-editable ol li,
.note-editable ol li {
    list-style-type: decimal !important;
    list-style: decimal !important;
    display: list-item !important;
}

.note-editor .note-editable ul ul,
.note-editable ul ul {
    list-style-type: circle !important;
}

.note-editor .note-editable ul ul li,
.note-editable ul ul li {
    list-style-type: circle !important;
    list-style: circle !important;
    display: list-item !important;
}

.note-editor .note-editable ul ul ul,
.note-editable ul ul ul {
    list-style-type: square !important;
}

.note-editor .note-editable ul ul ul li,
.note-editable ul ul ul li {
    list-style-type: square !important;
    list-style: square !important;
    display: list-item !important;
}