/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

a {
	color: #fc8d21;
}

.auth-wrapper.auth-basic .auth-inner:before {
	background: none;
}

.auth-wrapper.auth-basic .auth-inner:after {
	background: none;
}

.main-menu .navbar-header .navbar-brand .brand-text {
	padding-left: 0;
	color: #fc8d21;
}

.main-menu.menu-dark .navigation > li.active > a {
	background: #fc8d21;
	box-shadow: none;
}

.btn-outline-primary {
	border: 1px solid #fc8d21 !important;
	color: #fc8d21;
}

.btn-primary {
	background: #fc8d21 !important;
	border: 1px solid #fc8d21 !important;
}

.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
	background: #fc8d21 !important;
	color: #FFF !important;
}

.btn-check:active+.btn-outline-primary, .btn-check:checked+.btn-outline-primary {
	background: #fc8d21 !important;
	color: #FFF;
}

.file-manager-application .sidebar-file-manager .sidebar-inner .sidebar-list .active {
	color: #fc8d21;
	border-color: #fc8d21;
}

.card .card-image {
	background: #fc8d21;
	color: #FFF;
	padding: 2rem;
}

.card .card-image svg {
	height: auto;
	width: 5rem;
}

.dropzone {
	border: 2px dashed #fc8d21;
}

.dropzone .dz-message {
	color: #fc8d21;
}

.dropzone .dz-message:before {
	color: #fc8d21;
}

.form-check-input:checked {
	background-color: #fc8d21;
	border-color: #fc8d21;
	}

	.highlighted {
		color: #fc8d21;
	}

.page-item.active .page-link {
	background-color: #fc8d21;
}

.auth-wrapper.auth-basic {
	background: url('../images/bg.png');
	background-size: cover;
	background-position: center center;
}

.alert,
.badge {
	padding: 0.5rem;
}

.flatpickr-calendar .flatpickr-day.selected, .flatpickr-calendar .flatpickr-day.selected:hover {
	background-color: #fc8d21;
	border-color: #fc8d21;
}

.flatpickr-calendar .flatpickr-day.today {
	border-color: #fc8d21;
}

/* Additional Orange Theme Styles */
a:hover, a:focus {
	color: #e07a1a !important;
}

.breadcrumb-item a {
	color: #fc8d21 !important;
}

.breadcrumb-item a:hover {
	color: #e07a1a !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
	background-color: #e07a1a !important;
	border-color: #e07a1a !important;
	box-shadow: 0 0 0 0.2rem rgba(252, 141, 33, 0.25) !important;
}

.form-control:focus {
	border-color: #fc8d21 !important;
	box-shadow: 0 0 0 0.2rem rgba(252, 141, 33, 0.25) !important;
}

.form-select:focus {
	border-color: #fc8d21 !important;
	box-shadow: 0 0 0 0.2rem rgba(252, 141, 33, 0.25) !important;
}

.dropdown-item:hover, .dropdown-item:focus {
	background-color: rgba(252, 141, 33, 0.1) !important;
	color: #fc8d21 !important;
}

.table-hover tbody tr:hover {
	background-color: rgba(252, 141, 33, 0.05) !important;
}

.nav-link:hover, .nav-link:focus {
	color: #fc8d21 !important;
}

.main-menu .navigation .nav-item .nav-link:hover {
	background: rgba(252, 141, 33, 0.1) !important;
	color: #fc8d21 !important;
}

.card:hover {
	box-shadow: 0 4px 24px 0 rgba(252, 141, 33, 0.15) !important;
}

.btn:focus, .btn.focus {
	box-shadow: 0 0 0 0.2rem rgba(252, 141, 33, 0.25) !important;
}

.text-primary {
	color: #fc8d21 !important;
}

.border-primary {
	border-color: #fc8d21 !important;
}

.bg-primary {
	background-color: #fc8d21 !important;
}

.page-link {
	color: #fc8d21 !important;
}

.page-link:hover, .page-link:focus {
	color: #e07a1a !important;
	background-color: rgba(252, 141, 33, 0.1) !important;
	border-color: #fc8d21 !important;
}

.flatpickr-day:hover {
	background-color: rgba(252, 141, 33, 0.1) !important;
}

.progress-bar {
	background-color: #fc8d21 !important;
}

/* Force Override All Blue/Purple Colors */
:root {
	--bs-primary: #fc8d21 !important;
	--bs-primary-rgb: 252, 141, 33 !important;
}

/* Stronger Breadcrumb Override */
.breadcrumb a, .breadcrumb-item a, .breadcrumb .breadcrumb-item a {
	color: #fc8d21 !important;
}

.breadcrumb a:hover, .breadcrumb-item a:hover, .breadcrumb .breadcrumb-item a:hover,
.breadcrumb a:focus, .breadcrumb-item a:focus, .breadcrumb .breadcrumb-item a:focus {
	color: #e07a1a !important;
	text-decoration: none !important;
}

/* All Link States - Exclude buttons */
a:not(.btn), a:not(.btn):link, a:not(.btn):visited {
	color: #fc8d21 !important;
}

a:not(.btn):hover, a:not(.btn):focus, a:not(.btn):active {
	color: #e07a1a !important;
}

/* Navigation Links */
.nav-link, .navbar-nav .nav-link {
	color: #fc8d21 !important;
}

.nav-link:hover, .nav-link:focus, .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus {
	color: #e07a1a !important;
}

/* Sidebar Menu Links */
.main-menu .navigation .nav-item a, .main-menu .navigation .nav-item .nav-link {
	color: inherit !important;
}

.main-menu .navigation .nav-item a:hover, .main-menu .navigation .nav-item .nav-link:hover {
	background: rgba(252, 141, 33, 0.1) !important;
	color: #fc8d21 !important;
}

/* Bootstrap Primary Color Override */
.text-primary, .link-primary {
	color: #fc8d21 !important;
}

.text-primary:hover, .link-primary:hover {
	color: #e07a1a !important;
}

/* Button Focus States */
.btn-primary:focus, .btn-primary.focus, .btn-primary:not(:disabled):not(.disabled):active:focus {
	box-shadow: 0 0 0 0.2rem rgba(252, 141, 33, 0.5) !important;
}

.btn-outline-primary:focus, .btn-outline-primary.focus {
	box-shadow: 0 0 0 0.2rem rgba(252, 141, 33, 0.5) !important;
}

/* Form Focus States */
.form-control:focus, .form-select:focus {
	border-color: #fc8d21 !important;
	box-shadow: 0 0 0 0.25rem rgba(252, 141, 33, 0.25) !important;
}

/* Modal and Dropdown */
.modal-header .btn-close:focus {
	box-shadow: 0 0 0 0.25rem rgba(252, 141, 33, 0.25) !important;
}

.dropdown-item.active, .dropdown-item:active {
	background-color: #fc8d21 !important;
}

/* Table and List Group */
.list-group-item.active {
	background-color: #fc8d21 !important;
	border-color: #fc8d21 !important;
}

/* Alert Primary */
.alert-primary {
	background-color: rgba(252, 141, 33, 0.1) !important;
	border-color: rgba(252, 141, 33, 0.2) !important;
	color: #fc8d21 !important;
}

/* Badge Primary */
.badge.bg-primary, .badge-primary {
	background-color: #fc8d21 !important;
}

/* Override any remaining blue/purple */
.text-info, .link-info {
	color: #fc8d21 !important;
}

/* Feather Icons */
[data-feather].text-primary {
	color: #fc8d21 !important;
}

/* Custom Orange Badge Styling */
.badge-warning {
    background-color: #fc8d21 !important;
    color: white !important;
    border: none !important;
}

.badge-warning:hover {
    background-color: #e07a1a !important;
}

/* Ensure rounded pill styling */
.badge.rounded-pill {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Dashboard badge specific styling */
.card-title .badge {
    font-size: 0.7rem;
    min-width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
		background: #293046;
		position: absolute;
		top: 1rem;
		right: 1rem;
}

/* Breadcrumb buttons styling */
.breadcrumb-right {
    margin-bottom: 1rem;
}

.breadcrumb-right .btn {
    margin-bottom: 0.5rem;
}

/* Mobile responsive spacing for breadcrumb buttons */
@media (max-width: 767.98px) {
    .breadcrumb-right {
        margin-bottom: 1.5rem;
        text-align: center;
    }
    
    .breadcrumb-right .btn {
        display: block;
        width: 100%;
        margin-bottom: 0.75rem;
        margin-right: 0 !important;
    }
    
    .breadcrumb-right .btn:last-child {
        margin-bottom: 0;
    }
}

/* Tablet and small desktop spacing */
@media (min-width: 768px) and (max-width: 991.98px) {
    .breadcrumb-right .btn {
        margin-bottom: 0.5rem;
    }
}

/* Knowledge Base Search Styling */
#searchInput {
    border-color: #fc8d21 !important;
}

#searchInput:focus {
    border-color: #fc8d21 !important;
    box-shadow: 0 0 0 0.25rem rgba(252, 141, 33, 0.25) !important;
}

#clearSearch {
    border-color: #fc8d21 !important;
    color: #fc8d21 !important;
}

#clearSearch:hover {
    background-color: #fc8d21 !important;
    border-color: #fc8d21 !important;
    color: white !important;
}

.input-group-text {
    border-color: #fc8d21 !important;
    background-color: rgba(252, 141, 33, 0.1) !important;
    color: #fc8d21 !important;
}

/* Search highlighting */
mark.bg-warning {
    background-color: rgba(252, 141, 33, 0.3) !important;
    color: #333 !important;
    padding: 0.1rem 0.2rem;
    border-radius: 0.25rem;
    font-weight: 600;
}

/* Search results animation */
.col-12.col-md-6.col-lg-4 {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.col-12.col-md-6.col-lg-4[style*="display: none"] {
    opacity: 0;
    transform: scale(0.95);
}

/* No results message styling */
#noSearchResults .card {
    border: 2px dashed #fc8d21;
    background-color: rgba(252, 141, 33, 0.05);
}

#noSearchResults .text-muted {
    color: #fc8d21 !important;
}

/* Mobile search bar optimization */
@media (max-width: 767.98px) {
    #searchInput {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .input-group {
        flex-wrap: nowrap;
    }
    
    #clearSearch {
        min-width: 44px; /* Touch-friendly size */
    }
}

/* Search input placeholder styling */
#searchInput::placeholder {
    color: rgba(252, 141, 33, 0.6) !important;
    font-style: italic;
}

.nav-tabs .nav-link.active {
	color: #fc8d21;
}

.nav-tabs .nav-link:after {
	background: #fc8d21 !important;
}

/* Fix for dropdown menus in tables */
.table-responsive {
	overflow-x: auto !important;
	overflow-y: visible !important;
}

/* Dropdown menus in modals need higher z-index */
.modal .dropdown-menu,
.modal-dialog .dropdown-menu {
	z-index: 1060 !important; /* Higher than modal z-index (1050) */
}

/* Dropdown menus in tables within modals */
.modal .table .dropdown-menu,
.modal-dialog .table .dropdown-menu {
	z-index: 1060 !important;
	position: absolute !important;
	/* Let Bootstrap handle the direction automatically */
}

/* Regular table dropdowns (not in modals) */
.table .dropdown-menu {
	z-index: 1050 !important;
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Ensure dropdown toggle button is properly styled */
.dropdown-toggle.hide-arrow::after {
	display: none !important;
}

.dropdown-toggle.hide-arrow {
	border: none !important;
	background: transparent !important;
	padding: 0.25rem !important;
}

.dropdown-toggle.hide-arrow:focus {
	box-shadow: none !important;
	outline: none !important;
}

/* Ensure dropdowns in modals can overflow properly */
.modal-body {
	overflow-y: auto;
	overflow-x: hidden;
	position: relative;
}

/* When dropdown is shown, allow overflow */
.modal-body.dropdown-active {
	overflow: visible !important;
}

/* Lightbox styles for image viewing */
.lightbox {
	display: none;
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.9);
	backdrop-filter: blur(5px);
	overflow-y: auto;
	padding: 60px 20px 20px 20px;
}

.lightbox-content {
	position: relative;
	margin: 0 auto;
	max-width: 90%;
	width: fit-content;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.lightbox img {
	max-width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
}

.lightbox-close {
	position: fixed;
	top: 15px;
	right: 25px;
	color: white;
	font-size: 35px;
	font-weight: bold;
	cursor: pointer;
	z-index: 10000;
	background: rgba(0,0,0,0.5);
	border-radius: 50%;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s ease;
}

.lightbox-close:hover {
	background: rgba(0,0,0,0.8);
}

/* Timeline event content images as thumbnails */
.timeline-event-content img {
	max-width: 150px;
	max-height: 150px;
	cursor: pointer;
	border-radius: 8px;
	margin: 5px;
	transition: transform 0.2s ease;
	object-fit: cover;
}

.timeline-event-content img:hover {
	transform: scale(1.05);
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}