/*
================================================================================
| CUSTOM ADMINLTE THEME - Projectworlds Brand
================================================================================
| This file provides a consistent, professional theme based on the Projectworlds logo.
*/

/* --- 1. Global & Typography --- */
body {
    font-family: 'Source Sans Pro', 'Poppins', sans-serif;
}
.content-wrapper {
    background-color: #f8f9fa;
}

/* --- Projectworlds Orange Links --- */
a {
    color: #f37021; /* Projectworlds Orange */
}
a:hover {
    color: #d8641c; /* A slightly darker orange for hover */
}
.card-primary.card-outline {
    border-top: 3px solid #f37021;
}

/* --- 2. Main Sidebar Theme --- */
body .main-sidebar {
    background-color: #2c2f33 !important; /* A dark charcoal from the logo */
}
body .main-sidebar .nav-sidebar .nav-link {
    transition: all 0.2s ease-in-out;
    border-left: 3px solid transparent !important;
}
/* Active PARENT Menu Item */
body .main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link,
body .main-sidebar .nav-sidebar > .nav-item > .nav-link.active {
    background-color: transparent !important;
    color: #ffffff !important;
    border-left: 3px solid #f37021 !important; /* Projectworlds Orange */
}
/* Hide default submenu icons */
.nav-treeview .nav-icon {
    display: none !important;
}
/* Add custom "»" submenu symbol */
.nav-treeview .nav-link::before {
    content: '»';
    margin-right: 0.75rem;
    color: #8aa4af;
}
/* Active SUBMENU Item Styling */
.nav-treeview > .nav-item > .nav-link.active {
    background-color: #3e4146 !important; /* A slightly lighter background */
    color: #f37021 !important;            /* Projectworlds Orange text */
    font-weight: bold;
}
body .main-sidebar .nav-sidebar .nav-link:hover {
    background-color: #3e4146 !important;
}

/* --- 3. Navbar Theme --- */
.main-header {
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

/* --- 4. Card & Box Styling --- */
.card {
    border: none;
    box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
    border-radius: 0.35rem;
}
.card-header {
    background-color: #ffffff;
    border-bottom: 1px solid #e9ecef;
}
.card-title {
    font-weight: 600;
    font-size: 1.1rem;
}

/* --- 5. Button Styling --- */
.btn {
    border-radius: 0.35rem;
    box-shadow: none !important;
    font-weight: 600;
    transition: all 0.15s ease-in-out;
}
.btn:hover {
    transform: translateY(-1px);
}
.btn-primary {
    background-color: #f37021;
    border-color: #f37021;
}
.btn-primary:hover {
    background-color: #d8641c;
    border-color: #d8641c;
}

/* --- 6. Form Control Styling --- */
.form-control, .select2-container--default .select2-selection--single {
    border-radius: 0.35rem;
    box-shadow: none !important;
}
.form-control:focus, .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #f37021;
    box-shadow: 0 0 0 2px rgba(243, 112, 33, 0.25) !important;
}

/* --- 7. Table & DataTables Styling --- */
.table thead.thead-light th {
    background-color: #f8f9fa;
    font-weight: 600;
    border-bottom-width: 1px;
}
.dataTables_wrapper .dt-buttons .btn {
    background-color: #f8f9fa;
    color: #333;
    border-color: #ddd;
}
.table-hover tbody tr:hover {
    background-color: rgba(243, 112, 33, 0.075); /* Subtle orange hover for table rows */
}

/* --- 8. Miscellaneous (Badges, etc.) --- */
.badge {
    font-weight: 500;
    font-size: 85%;
    padding: 0.4em 0.6em;
}
.page-item.active .page-link {
    background-color: #f37021; /* Pagination active color */
    border-color: #f37021;
}

/* --- 9. Enhanced Select2 Theme (Corrected) --- */
/* Adjust the main selection box to match other form inputs */
.select2-container--default .select2-selection--single {
    height: calc(2.25rem + 2px);
    border: 1px solid #ced4da;
    padding: 0; /* Remove padding from the main container */
}

/* Vertically center the selected text */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #495057;
    line-height: calc(2.25rem + 2px); /* Make line-height equal to the container's height */
    padding-left: 0.75rem; /* Add horizontal padding here */
    padding-right: 25px; /* Add padding to prevent text from overlapping the arrow */
}

/* Style the dropdown arrow */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(2.25rem - 2px);
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #555 transparent transparent transparent;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #555 transparent;
    border-width: 0 4px 5px 4px;
}

/* Style the dropdown panel that opens */
.select2-dropdown {
    border: 1px solid #f37021;
    border-radius: 0.35rem;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* Style the search box inside the dropdown */
.select2-search--dropdown .select2-search__field {
    border-radius: 0.25rem;
    border: 1px solid #ced4da;
}
.select2-search--dropdown .select2-search__field:focus {
    border-color: #f37021;
    box-shadow: 0 0 0 2px rgba(243, 112, 33, 0.25) !important;
    outline: none;
}

/* Style the options in the results list */
.select2-results__option--highlighted {
    background-color: #f37021 !important;
    color: white !important;
}
.select2-results__option[aria-selected=true] {
    background-color: #f8f9fa !important;
    color: #333 !important;
    font-weight: 600;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-search__field {
    min-width: 150px;
}

/* Limit the width of the brand text in the main sidebar */
.brand-link .brand-text {
    max-width: 180px; /* Adjust this value as needed */
}

/* Limit the width of the text in the top navigation bar */
.navbar .nav-item .font-weight-bold {
    max-width: 250px; /* Adjust this value as needed for the top nav */
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}