/* ===== CONSERVATIVE MODERN DESIGN FOR STISLA TEMPLATE ===== */

/* Import Modern Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Base Typography */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: 14px;
    line-height: 1.6;
}

/* Navbar Header */
.navbar.active,
.navbar-bg {
    background-color: #3C83F6 !important;
}

/* Navbar text and icon visibility */
.navbar .nav-link,
.navbar .nav-link i,
.navbar .nav-link div,
.navbar .navbar-nav .nav-link {
    color: #fff !important;
}

.navbar .nav-link:hover {
    color: #f0f0f0 !important;
}

/* Sidebar - Modern Clean Design */
.main-sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    box-shadow: 2px 0 15px rgba(0, 0, 0, 0.1) !important;
    border-right: 1px solid rgba(226, 232, 240, 0.5) !important;
}

/* Sidebar Brand */
.main-sidebar .sidebar-brand {
    padding: 20px 15px !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.3) !important;
    height: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.main-sidebar .sidebar-brand img {
    max-height: 45px !important;
    width: auto !important;
}

/* Show/Hide logos based on sidebar state */
.main-sidebar .sidebar-brand-sm {
    display: none !important;
}

/* Show small logo only in sidebar mini mode */
body.sidebar-mini .main-sidebar .sidebar-brand {
    display: none !important;
}

body.sidebar-mini .main-sidebar .sidebar-brand-sm {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 15px !important;
    height: 70px !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.3) !important;
}

body.sidebar-mini .main-sidebar .sidebar-brand-sm img {
    max-height: 35px !important;
    width: auto !important;
}

/* Sidebar Menu Container */
.main-sidebar .sidebar-menu {
    margin-top: 10px !important;
    padding-top: 0 !important;
}

/* Sidebar Menu Items */
.main-sidebar .sidebar-menu li a {
    color: #64748B !important;
    border-radius: 10px !important;
    margin: 3px 12px !important;
    padding: 12px 16px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-weight: 500 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.main-sidebar .sidebar-menu li a i {
    color: #94A3B8 !important;
    width: 20px !important;
    text-align: center !important;
    margin-right: 12px !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
}

.main-sidebar .sidebar-menu li a span {
    color: #64748B !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
}

/* Sidebar Menu Hover Effects */
.main-sidebar .sidebar-menu li a:hover {
    background: linear-gradient(135deg, rgba(60, 131, 246, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%) !important;
    color: #3C83F6 !important;
    transform: translateX(4px) !important;
    box-shadow: 0 2px 8px rgba(60, 131, 246, 0.15) !important;
}

.main-sidebar .sidebar-menu li a:hover i {
    color: #3C83F6 !important;
    transform: scale(1.1) !important;
}

.main-sidebar .sidebar-menu li a:hover span {
    color: #3C83F6 !important;
    font-weight: 600 !important;
}

/* Active Menu Item */
.main-sidebar .sidebar-menu li.active > a {
    background: linear-gradient(135deg, #3C83F6 0%, #6366F1 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(60, 131, 246, 0.3) !important;
    font-weight: 600 !important;
}

.main-sidebar .sidebar-menu li.active > a i {
    color: #ffffff !important;
}

.main-sidebar .sidebar-menu li.active > a span {
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Dropdown Menu Styling */
.main-sidebar .sidebar-menu li ul.dropdown-menu {
    background-color: rgba(248, 250, 252, 0.8) !important;
    border-radius: 8px !important;
    margin: 4px 12px !important;
    padding: 8px 0 !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

.main-sidebar .sidebar-menu li ul.dropdown-menu li a {
    color: #64748B !important;
    padding: 8px 20px 8px 48px !important;
    margin: 2px 8px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
}

.main-sidebar .sidebar-menu li ul.dropdown-menu li a:hover {
    background-color: rgba(60, 131, 246, 0.1) !important;
    color: #3C83F6 !important;
    transform: translateX(2px) !important;
}

.main-sidebar .sidebar-menu li ul.dropdown-menu li.active > a {
    background-color: rgba(60, 131, 246, 0.15) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

/* Sidebar style-2 active indicator */
body:not(.sidebar-mini) .sidebar-style-2 .sidebar-menu > li.active > a:before {
    display: none !important;
}

/* Remove sidebar mini mode background */
body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a {
    background: linear-gradient(135deg, #3C83F6 0%, #6366F1 100%) !important;
    color: #ffffff !important;
}

/* Primary Buttons */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #3C83F6 !important;
    border-color: #3C83F6 !important;
    box-shadow: 0 2px 6px rgba(60, 131, 246, 0.3) !important;
}

.btn-outline-primary {
    border-color: #3C83F6 !important;
    color: #3C83F6 !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: #3C83F6 !important;
    border-color: #3C83F6 !important;
    color: #fff !important;
}

/* All Buttons - Remove borders and add modern styling */
.btn {
    border: none !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

.btn:hover {
    transform: translateY(-1px) !important;
}

.btn i {
    color: #fff !important;
}

/* Cards - Modern styling */
.card {
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(226, 232, 240, 0.6) !important;
    transition: all 0.3s ease !important;
}

.card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-2px) !important;
}

.card .card-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
    border-radius: 12px 12px 0 0 !important;
}

/* Tables - Modern styling */
.table thead th {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border: none !important;
    font-weight: 600 !important;
    color: #475569 !important;
}

.table tbody tr:hover {
    background-color: rgba(60, 131, 246, 0.05) !important;
}

/* Forms - Modern styling */
.form-control {
    border-radius: 8px !important;
    border: 2px solid #E2E8F0 !important;
    transition: all 0.3s ease !important;
}

.form-control:focus {
    border-color: #3C83F6 !important;
    box-shadow: 0 0 0 3px rgba(60, 131, 246, 0.1) !important;
}

/* Navigation Pills */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.nav-pills .nav-item .nav-link.active {
    background-color: #3C83F6 !important;
    box-shadow: 0 2px 6px rgba(60, 131, 246, 0.3) !important;
    color: #fff !important;
}

.nav-pills .nav-item .nav-link,
.nav-tabs .nav-item .nav-link {
    color: #3C83F6 !important;
}

.nav-pills .nav-item .nav-link:not(.active) {
    color: #6c757d !important;
}

.nav-pills .nav-item .nav-link:hover {
    color: #3C83F6 !important;
    background-color: rgba(60, 131, 246, 0.1) !important;
}

/* Links */
a,
a:hover,
a:focus {
    color: #3C83F6 !important;
}

/* Text and Background Colors */
.text-primary {
    color: #3C83F6 !important;
}

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

/* Form Controls */
.custom-control-input:checked ~ .custom-control-label::before,
.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #3C83F6 !important;
}

.custom-file-input:focus + .custom-file-label {
    border-color: #3C83F6 !important;
}

.custom-switch-input:checked ~ .custom-switch-indicator {
    background: #3C83F6 !important;
}

.custom-switch-input:focus ~ .custom-switch-indicator {
    border-color: #3C83F6 !important;
}

.selectgroup-input:focus + .selectgroup-button,
.selectgroup-input:checked + .selectgroup-button {
    background-color: #3C83F6 !important;
}

/* Pagination */
.page-item.active .page-link {
    background-color: #3C83F6 !important;
    border-color: #3C83F6 !important;
    color: #fff !important;
}

.page-link:hover {
    background-color: #3C83F6 !important;
    border-color: #3C83F6 !important;
    color: #fff !important;
}

.page-item .page-link {
    color: #3C83F6 !important;
}

.page-item.disabled .page-link {
    color: #6c757d !important;
    background-color: #f8f9fa !important;
    border-color: #dee2e6 !important;
}

/* DataTables pagination */
.paginate_button.page-item.active .page-link,
.pagination .page-item.active .page-link {
    background-color: #3C83F6 !important;
    border-color: #3C83F6 !important;
    color: #fff !important;
}

.paginate_button.page-item .page-link:hover {
    background-color: #3C83F6 !important;
    border-color: #3C83F6 !important;
    color: #fff !important;
}

ul.pagination li.paginate_button.page-item.active a.page-link {
    background-color: #3C83F6 !important;
    border-color: #3C83F6 !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: #3C83F6 !important;
    border-color: #3C83F6 !important;
    color: #fff !important;
}

/* Dropdown - Clean styling */
a.dropdown-item:focus,
a.dropdown-item:active,
a.dropdown-item.active {
    background-color: rgba(60, 131, 246, 0.1) !important;
    color: #3C83F6 !important;
}

/* Section Headers - Modern styling */
.section-header {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(226, 232, 240, 0.6) !important;
}

/* Modals - Modern styling */
.modal-content {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
}

.modal-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
    border-radius: 12px 12px 0 0 !important;
}

/* Alerts - Modern styling */
.alert {
    border-radius: 10px !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Badges - Modern styling */
.badge {
    border-radius: 16px !important;
    font-weight: 500 !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .card {
        margin: 0 5px 15px 5px !important;
        border-radius: 10px !important;
    }

    .main-sidebar {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) !important;
    }
}

/* Smooth transitions for all elements */
* {
    transition: all 0.3s ease !important;
}

/* Remove transition from specific elements that shouldn't animate */
.navbar,
.main-sidebar,
.main-content,
.main-footer {
    transition: all 0.5s !important;
}

/* Override Blue Color Text for Better Visibility */
.pricing .pricing-title,
.ranges li,
.weather ul li,
.tickets .ticket-items .ticket-item:hover .ticket-title {
    color: #1F2937 !important;
}

/* Fix all blue text that's hard to see */
*[style*="color: #3C83F6"],
*[style*="color: rgb(60, 131, 246)"] {
    color: #1F2937 !important;
}

/* Ensure dropdown and select elements have dark text */
.dropdown-menu .dropdown-item,
.select2-results__option,
option,
select {
    color: #374151 !important;
}

/* Force override all blue text with higher specificity */
body .pricing .pricing-title,
body .ranges li,
body .weather ul li,
body .tickets .ticket-items .ticket-item:hover .ticket-title,
body .select2-results__option,
body .select2-dropdown .select2-results__option {
    color: #1F2937 !important;
}

/* Complete Select2 Fix - All States */
.select2-container--default .select2-selection--single {
    background-color: #ffffff !important;
    border: 2px solid #E2E8F0 !important;
    border-radius: 8px !important;
    color: #1F2937 !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #1F2937 !important;
    font-weight: 500 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    border-left: 1px solid #E2E8F0 !important;
}

.select2-dropdown {
    background-color: #ffffff !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.select2-container--default .select2-results__option {
    color: #1F2937 !important;
    background-color: #ffffff !important;
    padding: 10px 12px !important;
    font-weight: 500 !important;
}

.select2-container--default .select2-results__option:hover,
.select2-container--default .select2-results__option--highlighted {
    background-color: #3C83F6 !important;
    color: #ffffff !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: rgba(60, 131, 246, 0.1) !important;
    color: #3C83F6 !important;
    font-weight: 600 !important;
}

.select2-search__field {
    color: #1F2937 !important;
    background-color: #ffffff !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
}

.select2-search__field:focus {
    border-color: #3C83F6 !important;
    outline: none !important;
}