.tab {
    display: none; 
  }
  .tab.active {
    display: block;
  }

.selected {
    border: 2px solid rgb(4, 4, 5);
}

input[type="checkbox"]:disabled {
    opacity: 0.5;
}

#app-overview{
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#ticket-table {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.9rem;
    background-color: #fff; /* Or a light grey background for the page */
    padding: 15px;
}

/* Filter Row Styling */
.filters-row1, .filters-row2 {
    padding: 8px 12px;
    margin-bottom: 10px;
    background-color: #f8f9fa; /* Light grey background for filter area */
    border-radius: 4px;
    border: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 10px;
}
 .filters-row1 {
    justify-content: space-between;
 }

.filters-row1 .btn-group .btn,
.filters-row1 .dropdown .btn,
.filters-row1 .btn {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
}
 .filters-row1 .form-control-sm {
     font-size: 0.8rem;
 }

.filters-row2 .btn {
    font-size: 0.85rem;
    padding: 0.2rem 0.5rem;
    border: none;
    background: none;
    color: #6c757d; /* Grey text */
    font-weight: 500;
}
.filters-row2 .btn.active,
.filters-row2 .btn:hover {
    color: #0d6efd; /* Blue for active/hover */
    text-decoration: none;
    background-color: #e7f1ff; /* Light blue background */
    border-radius: 4px;
}
 .filters-row2 .badge {
     font-size: 0.7em;
     vertical-align: middle;
     margin-left: 4px;
 }


/* Table Styling */
#ticket-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

#ticket-table th,
#ticket-table td {
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid #dee2e6;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

 #ticket-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #495057;
 }
 #ticket-table th.sortable {
     cursor: pointer;
 }
 #ticket-table th.sortable:hover {
     background-color: #e9ecef;
 }
 #ticket-table th .bi { /* Sort icons */
     font-size: 0.8em;
     margin-left: 4px;
     color: #6c757d;
 }
  #ticket-table th.active-sort .bi {
      color: #000;
  }


#ticket-table tbody tr:hover {
    background-color: #f1f1f1;
}

#ticket-table .form-check-input {
    margin: 0;
    vertical-align: middle;
}

/* Status Styling */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2em 0.6em;
    border-radius: 0.25rem;
    font-size: 0.9em;
    line-height: 1;
    /* background-color: #e9ecef; /* Default background */
    /* color: #495057; /* Default text */
    border: 1px solid transparent;
}

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

.status-resolved .status-dot { background-color: #198754; } /* Green */
.status-resolved { color: #198754; }

.status-in-progress .status-dot { background-color: #0d6efd; } /* Blue */
.status-in-progress { color: #0d6efd; }

.status-closed .status-dot { background-color: #6c757d; } /* Grey */
.status-closed { color: #6c757d; }

/* Add more status styles if needed */
.status-default .status-dot { background-color: #adb5bd; }
.status-default { color: #495057; }


/* SLA Status Styling */
.sla-status {
    display: flex;
    align-items: center;
    gap: 5px;
}
.sla-bar {
    width: 60px; /* Adjust width as needed */
    height: 6px;
    background-color: #e9ecef; /* Default bar background */
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}
.sla-bar-inner {
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 3px;
}
.sla-text {
    font-size: 0.9em;
}

/* SLA Colors - Approximate based on image */
.sla-on-time .sla-bar-inner { background-color: #28a745; width: 100%; } /* Green */
.sla-on-time .sla-text { color: #28a745; }

.sla-due-soon .sla-bar-inner { background: linear-gradient(to right, #ffc107, #dc3545); width: 60%; } /* Yellow to Red gradient */
.sla-due-soon .sla-text { color: #ffc107; } /* Yellow/Orange text */

.sla-overdue .sla-bar-inner { background-color: #dc3545; width: 100%; } /* Red */
.sla-overdue .sla-text { color: #dc3545; }

/* Priority Styling */
.priority-badge {
    display: inline-flex;
    align-items: center;
}
.priority-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

.priority-low .priority-dot { background-color: #6c757d; } /* Grey */
.priority-low { color: #6c757d; }

.priority-medium .priority-dot { background-color: #ffc107; } /* Yellow */
.priority-medium { color: #ffc107; }

.priority-urgent .priority-dot { background-color: #dc3545; } /* Red */
.priority-urgent { color: #dc3545; }

.priority-high .priority-dot { background-color: #fd7e14; } /* Orange - if needed */
.priority-high { color: #fd7e14; }

.priority-default .priority-dot { background-color: #adb5bd; }
.priority-default { color: #495057; }

/* Utility */
.text-muted { color: #6c757d !important; }
.small { font-size: 0.8em; }
.fw-bold { font-weight: 600 !important; }
.d-flex { display: flex !important; }
.align-items-center { align-items: center !important; }
.justify-content-between { justify-content: space-between !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.p-2 { padding: 0.5rem !important; }
.ps-2 { padding-left: 0.5rem !important; }
.bg-light { background-color: #f8f9fa !important; }
.border { border: 1px solid #dee2e6 !important; }
.rounded { border-radius: 0.25rem !important; }
.text-decoration-none { text-decoration: none !important; }
.text-dark { color: #212529 !important; }
.bg-secondary { background-color: #6c757d !important; }
.btn-link { background: none; border: none; color: #0d6efd; text-decoration: underline; padding: 0; }
.btn-outline-secondary { border: 1px solid #6c757d; color: #6c757d; }
.btn-outline-secondary:hover { background-color: #6c757d; color: white; }
.form-control { display: block; width: 100%; padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; appearance: none; border-radius: 0.25rem; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
.form-control-sm { min-height: calc(1.5em + 0.5rem + 2px); padding: 0.25rem 0.5rem; font-size: .875rem; border-radius: 0.2rem; }
.dropdown-menu { display: none; position: absolute; z-index: 1000; background-color: #fff; border: 1px solid rgba(0,0,0,.15); border-radius: .25rem; box-shadow: 0 .5rem 1rem rgba(0,0,0,.175); }
.dropdown:hover .dropdown-menu { display: block; } /* Simple hover dropdown */
.dropdown-item { display: block; width: 100%; padding: .25rem 1rem; clear: both; font-weight: 400; color: #212529; text-align: inherit; white-space: nowrap; background-color: transparent; border: 0; font-size:0.8rem;}
.dropdown-item:hover { background-color: #f8f9fa; }