/* css/style2.css */

/* Global Styles */
/* Ensure toggler is touch-friendly */
.navbar-toggler {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
}
/* Navbar menu items */
.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-nav .nav-link.dropdown-toggle {
    color: #ff6900 !important; /* Luminous Vivid Orange for top-level menu items */
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link.active {
    color: #e65c00 !important; /* Slightly darker orange for hover/focus/active */
}

/* Dropdown menu items */
.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item-text {
    color: #ff6900 !important; /* Luminous Vivid Orange for dropdown items */
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item.active {
    color: #e65c00 !important; /* Slightly darker orange for hover/focus/active */
    background-color: #2c2c2c !important; /* Dark background to match navbar-dark */
}

/* Ensure dropdown menu background contrasts with orange text */
.dropdown-menu {
    background-color: #1a1a1a !important; /* Darker background for dropdown */
}
/* Mobile navbar styles */
@media (max-width: 991.98px) {
    .navbar-collapse {
        background-color: #343a40;
        padding: 1rem;
        max-height: 80vh; /* Prevent overflow */
        overflow-y: auto; /* Scroll if content is too long */
    }
    .navbar-nav {
        flex-direction: column;
    }
    .nav-link, .dropdown-item {
        font-size: 1.1rem;
        padding: 0.75rem 1rem;
    }
    .dropdown-menu {
        background-color: transparent;
        border: none;
        padding: 0;
        margin-left: 1rem;
    }
    .dropdown-toggle::after {
        margin-left: 0.5rem; /* Ensure dropdown arrow is visible */
    }
}

/* Desktop hover for dropdowns */
@media (min-width: 992px) {
    .dropdown:hover .dropdown-menu {
        display: block;
    }
    .dropdown-menu {
        margin-top: 0;
    }
}
body {
    font-family: 'Roboto', sans-serif;
    background-color: #F8F9FA; /* Light gray from index.php */
    color: #343A40; /* Dark text */
    padding-top: 70px; /* Space for fixed navbar */
    min-height: 100vh;
    margin: 0;
    -webkit-font-smoothing: antialiased; /* Smoother text for iOS */
    -moz-osx-font-smoothing: grayscale;
}

.container {
    width: 100% !important; /* Full viewport width */
    max-width: none !important; /* Remove Bootstrap cap */
    margin-top: 20px;
    margin-bottom: 20px;
    padding-left: 10px; /* Reduced padding */
    padding-right: 10px;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: #343A40;
}

h1 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 576px) {
    h1 {
        font-size: 1.5rem;
    }
}

/* Cards */
.card {
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    background-color: #FFFFFF;
    width: 100% !important; /* Ensure full width */
    margin: 0; /* Remove margins */
}

.card-body {
    padding: 0.5rem; /* Minimize padding */
}

/* Tables */
.table-wrapper {
    width: 100% !important; /* Full width */
    margin: 0;
}

.table {
    background-color: #FFFFFF;
    border-radius: 6px;
    margin-bottom: 0;
    width: 100% !important; /* Full width */
    table-layout: auto; /* Dynamic column sizing */
}

.table-light {
    background-color: #E9ECEF; /* Light gray header */
}

.table th, .table td {
    vertical-align: middle;
    padding: 0.3rem; /* Minimal padding */
    font-size: 0.9rem;
    white-space: nowrap; /* Prevent text wrapping */
    min-width: 0; /* Allow flexible sizing */
    width: auto; /* Adjust based on content */
}

.table-hover tbody tr:hover {
    background-color: #F1F3F5;
    cursor: pointer;
}

.table-responsive {
    width: 100% !important;
    border-radius: 0; /* Simplify */
    overflow-x: visible !important; /* No horizontal scrollbar */
    overflow-y: hidden !important; /* No vertical scrollbar */
}

.filter-row .filter-input {
    width: 100%;
    padding: 0.3rem 0.6rem; /* Reduced padding */
    border-radius: 4px;
    font-size: 0.875rem;
    box-sizing: border-box;
    border: 1px solid #ced4da;
    white-space: nowrap;
    width: auto; /* Match table columns */
}

.clear-filters-btn {
    margin-bottom: 10px;
}

.button-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

/* DataTables wrapper */
.dataTables_wrapper {
    width: 100% !important;
    overflow-x: visible !important;
    overflow-y: hidden !important;
}

@media (max-width: 767px) {
    .container {
        padding-left: 5px;
        padding-right: 5px;
    }
    .card-body {
        padding: 0.3rem;
    }
    .table-responsive {
        overflow-x: auto !important; /* Scroll on mobile */
        overflow-y: hidden !important;
    }
    .table th, .table td {
        font-size: 0.85rem;
        padding: 0.2rem;
        width: auto !important;
    }
    .filter-row .filter-input {
        font-size: 0.8rem;
        padding: 0.2rem 0.4rem;
        width: auto;
    }
}

/* Buttons */
.btn {
    border-radius: 4px;
    transition: all 0.2s ease;
    touch-action: manipulation;
}

.btn-success {
    background-color: #28A745;
    border-color: #28A745;
}

.btn-success:hover {
    background-color: #218838;
    border-color: #1E7E34;
}

.btn-primary {
    background-color: #007BFF;
    border-color: #007BFF;
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #004085;
}

.btn-outline-warning {
    border-color: #FFC107;
    color: #FFC107;
}

.btn-outline-warning:hover {
    background-color: #FFC107;
    color: #343A40;
}

.btn-group .btn {
    margin-right: 0.5rem;
}

.btn-group .btn:last-child {
    margin-right: 0;
}

@media (max-width: 576px) {
    .button-container {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
    }
    .btn-group .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* Navbar */
.custom-navbar {
    background-color: #343A40;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1050;
}

.navbar-brand {
    font-weight: 700;
    color: #FFFFFF;
}

.navbar-brand img {
    max-height: 40px;
}

.navbar-brand:hover {
    color: #28A745;
}

.nav-link {
    color: #FFFFFF;
    font-weight: 500;
    padding: 0.5rem 1rem;
}

.nav-link:hover {
    color: #28A745;
}

.dropdown-menu {
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    background-color: #FFFFFF;
    transition: opacity 0.2s ease-in-out;
}

.dropdown-menu.show {
    opacity: 1;
}

.dropdown-item {
    color: #343A40;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

.dropdown-item:hover {
    background-color: #F1F3F5;
    color: #28A745;
}

@media (min-width: 992px) {
    .dropdown:hover .dropdown-menu {
        display: block;
        opacity: 1;
    }
    .dropdown-toggle::after {
        transition: transform 0.3s;
    }
    .dropdown:hover .dropdown-toggle::after {
        transform: rotate(180deg);
    }
}

@media (max-width: 991px) {
    .nav-item.dropdown.show .dropdown-menu {
        display: block;
    }
    .dropdown-menu {
        width: 100%;
        position: static;
        float: none;
        transition: none;
        opacity: 1;
        background-color: #F8F9FA;
    }
    .nav-link {
        font-size: 1.1rem;
        padding: 0.75rem 1rem;
    }
    .dropdown-item {
        font-size: 1rem;
        padding: 0.75rem 1.5rem;
    }
    .navbar-collapse {
        max-height: 80vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 1rem;
    }
}

/* Autocomplete */
.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #FFFFFF;
    border: 1px solid #CED4DA;
    border-radius: 6px;
    z-index: 1050;
    padding: 0;
}

.ui-autocomplete li {
    padding: 8px;
    cursor: pointer;
    font-size: 0.9rem;
}

.ui-autocomplete li:hover {
    background-color: #F1F3F5;
}

#ticketSearch {
    width: 200px;
}

@media (max-width: 991px) {
    #ticketSearch {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* DataTables Overrides */
.dataTables_filter {
    display: none; /* Hide default search */
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 4px;
    margin: 0 2px;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #28A745;
    border-color: #28A745;
    color: #FFFFFF !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #218838;
    border-color: #1E7E34;
    color: #FFFFFF !important;
}

/* Table Dark Overrides */
.table-dark, .table-dark tbody tr, .table-dark tbody tr:nth-child(even), .table-dark tbody tr:hover {
    background-color: #FFFFFF !important;
}

/* Export Modal */
.export-modal .modal-body {
    max-height: 400px;
    overflow-y: auto;
}

/* Footer */
footer {
    background-color: #343A40;
    color: #FFFFFF;
    padding: 1.5rem 0;
    margin-top: auto;
}

footer p {
    margin: 0;
    font-size: 0.875rem;
}