@charset "utf-8";
    /* CSS Document */
    /* Global       */
    /*##############*/
    a {
    color: #24BDDB !important; /* Overrides Bootstrap's default color */
    }
    a:link {
        text-decoration: none !important;
        color: #24BDDB !important;
    }
    a:hover {
        text-decoration: underline !important;
    }
    a:visited {
        text-decoration: none !important;
        color: #24BDDB !important;
    }
    .nav-link {
        color: #24BDDB !important;
        text-decoration: none !important;
    }
    .nav-link:hover {
        text-decoration: underline !important;
    }
    /* Global END */
    /*############*/
    .custom-container {
        border: 1px solid #007bff;
        border-radius: 5px;
        padding: 15px;
    }
    .Status-Content {
        display: table;
        text-align: center;
        width: 100%;
    }
    #login_container {
        border: 9px solid rgba(0,0,0,0.50);
        padding: 8px;
        width: 300px;
        margin-top: 10px;
        margin-right: auto;
        margin-bottom: auto;
        margin-left: auto;
        border-radius: 15px; /* Adjust the value for more or less curve */
    }
    .autocomplete-item {
        padding: 8px;
        border-bottom: 1px solid #e0e0e0;
        background-color: #fff;
        cursor: pointer;
    }
    .autocomplete-item:hover,
    .autocomplete-item.highlight {
        background-color: #007bff; /* Highlighted background */
        color: #fff; /* Highlighted text */
    }
    .autocomplete-suggestions {
        border: 1px solid #999;
        background: #fff;
        overflow: auto;
    }
    .autocomplete-suggestion {
        padding: 8px;
        cursor: pointer;
    }
    .autocomplete-suggestion:hover {
        background: #f0f0f0;
    }
    .autocomplete-selected {
        background: #e0e0e0;
    }
    .dropdown-menu .dropdown-item {
        color: inherit;
        text-decoration: none;
    }
    .dropdown-menu .dropdown-item:hover {
        text-decoration: underline;
    }
    /* General Reset for Unordered Lists */
    ul {
        padding: 0;
        margin: 0;
        list-style: none; /* Removes bullet points */
    }
    /* No Wrapping for List Items */
    .nowrap-item {
        white-space: nowrap; /* Prevents text wrapping */
        overflow: hidden;    /* Hides overflowing text */
        text-overflow: ellipsis; /* Adds "..." for overflowing text */
        display: block;      /* Ensures block-level display */
        padding: 5px 0;      /* Adds spacing between list items */
    }
    /* Styling for Larger Screen Popups */
    .details-popup {
        position: absolute;
        top: 100%; /* Positions popup below the category link */
        left: 0;
        background: #fff;
        border: 1px solid #ccc;
        padding: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        display: none; /* Initially hidden */
        z-index: 1000;
    }
    .category-item:hover .details-popup {
        display: block; /* Show popup on hover */
    }
    /* Styling for Category Buttons */
    .btn-link {
        text-decoration: none;
        color: #007bff;
        font-weight: bold;
        cursor: pointer;
    }
    .btn-link:hover {
        color: #0056b3; /* Darker color on hover */
        text-decoration: underline;
    }
    /* Dropdown Styling for Mobile */
    .dropdown-menu {
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    .dropdown-item {
        font-size: 1rem;
        padding: 5px 10px;
        color: #212529;
        text-decoration: none;
        display: block;
    }
    .dropdown-item:hover {
        background-color: #f8f9fa;
        color: #007bff;
    }
    /* Mobile List Items */
    .ms-3 {
        margin-left: 1rem; /* Adds left margin for nested lists */
    }
    /* For Inline Lists in Mobile Dropdown (Optional) */
    .list-inline {
        padding: 0;
        margin: 0;
        list-style: none; /* Removes bullets */
    }
    .list-inline-item {
        display: inline-block; /* Makes items inline */
        margin-right: 15px; /* Spacing between inline items */
    }
        .customer_header_body {
        border: 8px solid #000;
        }
        .customer_name {
        font-size: 20px;
        text-align: center;
        color: #FFFFFF;
        background-color: #000000;
        padding: 10px 0;
        }
        .account_status {
        font-size: 18px;
        color: #F00;
        text-align: center;
        font-weight: bold;
        }


/*################*/
/* Ticket Styling */
/*################*/

/* Apply Age Color Indicators to Both List View (Table) and Card View */
tr.age_Today, 
.card.age_Today,
tr.age_Today + .details-row {
    border-left: 6px solid black !important;
    background-color: rgba(0, 0, 0, 0.05) !important; /* Very light hint */
}

tr.age_Week, 
.card.age_Week,
tr.age_Week + .details-row {
    border-left: 6px solid gray !important;
    background-color: rgba(128, 128, 128, 0.05) !important;
}

tr.age_Month, 
.card.age_Month,
tr.age_Month + .details-row {
    border-left: 6px solid orange !important;
    background-color: rgba(255, 165, 0, 0.08) !important;
}

tr.age_Year, 
.card.age_Year,
tr.age_Year + .details-row {
    border-left: 6px solid red !important;
    background-color: rgba(205, 10, 10, 0.1) !important;
}

tr.age_Years, 
.card.age_Years,
tr.age_Years + .details-row {
    border-left: 6px solid darkred !important;
    background-color: rgba(205, 10, 10, 0.08) !important;
}

/* ✅ Ensure Ticket Detail Background Remains White */
tr.details-row, .card-footer {
    background-color: white !important;
}

/* ✅ Ensure Table Row Styles Are Consistently Applied */
.table tbody tr.age_Today td,
.table tbody tr.age_Week td,
.table tbody tr.age_Month td,
.table tbody tr.age_Year td,
.table tbody tr.age_Years td {
    background-color: inherit !important;
    color: inherit !important;
}

/* ✅ Prevent .table-striped from Overriding Age Classes */
.table-striped tbody tr.age_Today:nth-child(odd),
.table-striped tbody tr.age_Week:nth-child(odd),
.table-striped tbody tr.age_Month:nth-child(odd),
.table-striped tbody tr.age_Year:nth-child(odd),
.table-striped tbody tr.age_Years:nth-child(odd) {
    background-color: inherit !important;
    color: inherit !important;
}

/* ✅ Prevent .table-hover from Overriding on Hover */
.table-hover tbody tr.age_Today:hover,
.table-hover tbody tr.age_Week:hover,
.table-hover tbody tr.age_Month:hover,
.table-hover tbody tr.age_Year:hover,
.table-hover tbody tr.age_Years:hover {
    background-color: rgba(0, 0, 0, 0.07) !important;
}

    /* Sticky header */
    .sticky-header {
        position: sticky;
        top: 0;
        z-index: 2;
        background-color: #343a40;
        color: white;
    }
    /* Prevent wrapping */
    .text-nowrap {
        white-space: nowrap;
    }
    /* Ellipsis for overflow */
    .text-ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        max-width: 100%;
    }
    /* Hover effect */
    .hover-row:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }
    .collapse {
        display: none !important;
    }
    .collapse.show {
        display: table-row !important;
    }
    /* Sticky header for better alignment */
    .sticky-header {
        position: sticky;
        top: 0;
        z-index: 2;
        background-color: #343a40;
        color: white;
    }
    /* Prevent wrapping of header and row content */
    .text-nowrap {
        white-space: nowrap;
    }
    /* Adjust overflow with ellipsis */
    .text-ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        max-width: 100%;
    }
    /* Add hover effect for clarity */
    .hover-row:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }
    /*##################*/
    .pagination-info { /* does not seem to used!!! */
        position: relative; /* Prevents overlap */
        background: white; /* Ensures it's visible */
        margin-bottom: 100px
    }
    .pagination {
        margin-bottom: 5px; /* Adjust if necessary */
    }
    #ticket-list-view {
        margin-bottom: 10px; /* Adjust for footer */
    }
    .pagination-container {
        margin-bottom: 40px; /* Adjust as needed */
    }
    /* ---------------------- */
    /* Common Footer Styles   */
    /* ---------------------- */
    #footer_Guest,
    #footer_Tech {
        position: fixed;
        width: 100%;
        height: 30px;
        bottom: 0;
        border: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;
        font-size: 14px;
    }
    /* Guest Footer Styling */
    #footer_Guest {
        background-color: #DFE6E7;
        color: #335500;
    }
    /* Tech Footer Styling */
    #footer_Tech {
        background-color: #FF6600;
        color: #FFFFFF;
    }
    /* Checkbox Container */
    .checkbox-container {
        display: flex;
        align-items: center;
        gap: 10px;
        position: relative;
    }
    /* Small Checkbox Styling */
    .checkbox-wrapper input {
        width: 14px;
        height: 14px;
        cursor: pointer;
    }
    /* Tooltip (Appears on Hover) */
    .tooltip-text {
        display: block; /* Ensures it takes up space */
        min-height: 20px; /* Prevents collapsing when empty */
        background-color: black;
        color: white;
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 12px;
        position: absolute;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
    }
    .checkbox-container:hover .tooltip-text {
        visibility: visible;
        opacity: 1;
    }
    /* ---------------------- */
    /* Modal Styling - Auto Resize */
    /* ---------------------- */
    .modal-dialog {
        max-width: 90%;
    }
    .modal-content {
        max-height: 90vh;
        overflow-y: auto;
    }

/*########################*/
/*# Action buttons       #*/
/*########################*/

/* General Button Styling */
.data-action {
    display: inline-block;
    margin: 8px 10px; /* Adds more spacing between buttons */
}

/* Improve Button Appearance */
.data-action a {
    font-size: 16px; /* Larger font for readability */
    padding: 10px 16px; /* Larger padding for a comfortable click area */
    border: 3px solid transparent; /* Default border size */
    border-radius: 6px; /* Rounded corners */
    font-weight: bold; /* Make text easier to read */
    text-transform: capitalize;
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Space between icon and text */
    background-color: white !important; /* Keep button inside white */
}

/* Apply Button-Specific Border Colors */
.data-action .btn-primary {
    border-color: #007bff !important;
    color: #007bff !important;
}
.data-action .btn-success {
    border-color: #28a745 !important;
    color: #28a745 !important;
}
.data-action .btn-warning {
    border-color: #ffc107 !important;
    color: #ffc107 !important;
}
.data-action .btn-danger {
    border-color: #dc3545 !important;
    color: #dc3545 !important;
}
.data-action .btn-info {
    border-color: #17a2b8 !important;
    color: #17a2b8 !important;
}
.data-action .btn-dark {
    border-color: #343a40 !important;
    color: #343a40 !important;
}
.data-action .btn-secondary {
    border-color: #6c757d !important;
    color: #6c757d !important;
}

/* Hover Effect - Fill Button with Border Color */
.data-action a:hover {
    background-color: inherit !important;
    color: white !important; /* Text turns white */
}

/* On Hover: Change Background to Match Border */
.data-action .btn-primary:hover {
    background-color: #007bff !important;
}
.data-action .btn-success:hover {
    background-color: #28a745 !important;
}
.data-action .btn-warning:hover {
    background-color: #ffc107 !important;
    color: #212529 !important; /* Keep text readable */
}
.data-action .btn-danger:hover {
    background-color: #dc3545 !important;
}
.data-action .btn-info:hover {
    background-color: #17a2b8 !important;
}
.data-action .btn-dark:hover {
    background-color: #343a40 !important;
}
.data-action .btn-secondary:hover {
    background-color: #6c757d !important;
}

/* Make Button Groups More Readable */
.data-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
}