/* Usage Report Enterprise Styling */

/* Main Container */
.usage-report-container {
    background: #ffffff;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin: 0px;
    overflow: hidden;
}

/* Reduce white space between Usage Report header and banner */
.page_title_box {
    padding-bottom: 10px !important;
}

/* Header Section */
.usage-report-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px 30px;
    position: relative;
}

.usage-report-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
}

.usage-report-header h2 {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 8px 0;
    position: relative;
    z-index: 1;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 12px;
}

.usage-report-header h2 i {
    font-size: 24px;
    opacity: 0.9;
}

.usage-report-header p {
    font-size: 14px;
    opacity: 0.95;
    margin: 0;
    position: relative;
    z-index: 1;
    color: #f8f9fa;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

/* Filter Section */
.usage-report-filters {
    background: #f8f9fa;
    padding: 25px 30px;
    border-bottom: 1px solid #e9ecef;
}



.filter-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.filter-group {
    flex: 1;
    min-width: 200px;
}

.filter-group label {
    display: block;
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
    font-size: 14px;
}

.filter-group select,
.filter-group input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: white;
}

.filter-group select:focus,
.filter-group input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.filter-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 40px;
}

/* Date validation styling */
.filter-group input.date-error {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

.filter-group input.date-error:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
}

/* Disabled button styling */
.btn-generate.btn-disabled {
    background: #6c757d;
    cursor: not-allowed;
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

.btn-generate.btn-disabled:hover {
    transform: none;
    box-shadow: none;
}

.filter-actions {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    margin-top: 28px; /* Add margin to align with bottom of dropdowns (accounting for labels) */
}

.btn-generate {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-generate:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.btn-generate:active {
    transform: translateY(0);
}

.btn-reset {
    background: #f8f9fa;
    color: #6c757d;
    border: 2px solid #e9ecef;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-reset:hover {
    background: #e9ecef;
    color: #495057;
    border-color: #dee2e6;
}

/* Loading Overlay - Now using standard spinner-overlay from _header.html */
/* The spinner-overlay and loader--roller classes are defined in _header.html and style.css */

/* Results Section */
.usage-report-results {
    padding: 30px;
}

.results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f8f9fa;
}

.results-title {
    font-size: 24px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0;
}

.results-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.view-toggle {
    display: flex;
    gap: 8px;
}

.view-toggle .btn {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.view-toggle .btn.active {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

.results-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.summary-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}

.summary-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.summary-card h4 {
    font-size: 32px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0 0 8px 0;
}

.summary-card p {
    font-size: 14px;
    color: #6c757d;
    margin: 0;
    font-weight: 600;
}

/* Table Styles */
.usage-table-container {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}

.usage-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.usage-table thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.usage-table th {
    padding: 16px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.usage-table td {
    padding: 14px 12px;
    border-bottom: 1px solid #f8f9fa;
    font-weight: 500;
}

.usage-table tbody tr:hover {
    background: #f8f9fa;
    transition: background 0.3s ease;
}

.usage-table tbody tr:last-child td {
    border-bottom: none;
}

/* Value Styling */
.value-positive {
    color: #28a745;
    font-weight: 600;
}

.value-negative {
    color: #dc3545;
    font-weight: 600;
}

.value-neutral {
    color: #6c757d;
    font-weight: 600;
}

/* Chart View Styles */
.chart-view {
    background: white;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.chart-controls {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 2px solid #f8f9fa;
    flex-wrap: wrap;
}

.chart-type-selector,
.metric-selector {
    flex: 1;
    min-width: 200px;
}

.chart-type-selector label,
.metric-selector label {
    display: block;
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
    font-size: 14px;
}

.chart-type-selector select,
.metric-selector select {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: white;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 40px;
}

.chart-type-selector select:focus,
.metric-selector select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.chart-container {
    position: relative;
    height: 400px;
    margin-top: 20px;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

.empty-state i {
    font-size: 64px;
    color: #dee2e6;
    margin-bottom: 20px;
}

.empty-state h3 {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: #495057;
}

.empty-state p {
    font-size: 16px;
    margin: 0;
    color: #6c757d;
}

/* Responsive Design */
@media (max-width: 768px) {
    .filter-row {
        flex-direction: column;
        gap: 15px;
    }

    .filter-group {
        min-width: 100%;
    }

    .filter-actions {
        flex-direction: column;
        width: 100%;
    }

    .btn-generate,
    .btn-reset {
        width: 100%;
    }

    .results-summary {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .usage-table {
        font-size: 12px;
    }

    .usage-table th,
    .usage-table td {
        padding: 10px 8px;
    }

    .chart-controls {
        flex-direction: column;
        gap: 15px;
    }

    .chart-type-selector,
    .metric-selector {
        min-width: 100%;
    }

    .chart-container {
        height: 300px;
    }
}

@media (max-width: 480px) {
    .usage-report-header {
        padding: 20px;
    }

    .usage-report-header h2 {
        font-size: 24px;
    }

    .usage-report-filters {
        padding: 20px;
    }

    .usage-report-results {
        padding: 20px;
    }

    .results-summary {
        grid-template-columns: 1fr;
    }

    .summary-card {
        padding: 20px;
    }

    .summary-card h4 {
        font-size: 28px;
    }
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.slide-in {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from { transform: translateX(-20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Alert Messages */
.alert {
    margin-bottom: 20px;
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 500;
    position: relative;
}

.alert-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-warning {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.alert-danger {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* General close button styling */
.btn-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.btn-close:hover {
    opacity: 1;
}

/* Modal close button styling - override general styling */
.modal-header .btn-close {
    position: static;
    right: auto;
    top: auto;
    transform: none;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/0.8em auto no-repeat;
    border: 0;
    border-radius: 0.25rem;
    opacity: 0.5;
    padding: 0.2em 0.2em;
    width: 0.8em;
    height: 0.8em;
    box-sizing: content-box;
    margin: -0.5rem -0.5rem -0.5rem auto;
}

.modal-header .btn-close:hover {
    opacity: 0.75;
}

.modal-header .btn-close:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
    opacity: 1;
}

/* White close button for modal headers with gradient background */
.modal-header .btn-close-white {
    /* Ensure the close button is white */
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/0.8em auto no-repeat !important;
    filter: none !important;
}

/* Dashboard Header Styles - Used across multiple pages */
.dashboard-container {
    margin-top: 0px;
}

.dashboard-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px 30px;
    position: relative;
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
}

.dashboard-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
    border-radius: 8px 8px 0 0;
}

.dashboard-header h2 {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 8px 0;
    position: relative;
    z-index: 1;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 12px;
}

.dashboard-header h2 i {
    font-size: 24px;
    opacity: 0.9;
}

.dashboard-header p {
    font-size: 14px;
    opacity: 0.95;
    margin: 0;
    position: relative;
    z-index: 1;
    color: #f8f9fa;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.dashboard-filters {
    background: #ffffff;
    padding: 25px 30px;
    border-bottom: 1px solid #e9ecef;
    border-radius: 0 0 8px 8px;
}

@media (max-width: 480px) {
    .dashboard-header {
        padding: 15px 20px;
    }

    .dashboard-header h2 {
        font-size: 18px;
    }
}

/* Add Account Button Style */
.btn-add-account {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-add-account:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.btn-add-account:active {
    transform: translateY(0);
}

/* Override modal button styling for btn-add-account */
.cs_modal .modal-body .btn-add-account,
.modal-content .modal-body .btn-add-account {
    width: auto !important;
    display: inline-flex !important;
    margin-top: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
    align-items: center !important;
    gap: 8px !important;
}

.cs_modal .modal-body .btn-add-account:hover,
.modal-content .modal-body .btn-add-account:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4) !important;
}

/* Enterprise Status Badges for Admin List */
.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: help;
    position: relative;
}

.status-badge i {
    font-size: 16px;
}

.status-active {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border-color: #28a745;
}

.status-active:hover {
    background: linear-gradient(135deg, #218838 0%, #1ea085 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

.status-inactive {
    background: linear-gradient(135deg, #dc3545 0%, #fd7e14 100%);
    color: white;
    border-color: #dc3545;
}

.status-inactive:hover {
    background: linear-gradient(135deg, #c82333 0%, #e8590c 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

.status-allowed {
    background: linear-gradient(135deg, #007bff 0%, #6610f2 100%);
    color: white;
    border-color: #007bff;
}

.status-allowed:hover {
    background: linear-gradient(135deg, #0056b3 0%, #520dc2 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}

.status-blocked {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
    border-color: #6c757d;
}

.status-blocked:hover {
    background: linear-gradient(135deg, #545b62 0%, #343a40 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}

.status-admin {
    background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
    color: white;
    border-color: #ffc107;
}

.status-admin:hover {
    background: linear-gradient(135deg, #e0a800 0%, #e8590c 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(255, 193, 7, 0.3);
}

.status-user {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
    border-color: #6c757d;
}

.status-user:hover {
    background: linear-gradient(135deg, #545b62 0%, #343a40 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}

/* Enhanced tooltip styling */
.status-badge[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 1000;
    margin-bottom: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.status-badge[title]:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
    margin-bottom: 1px;
    z-index: 1000;
}

/* Responsive adjustments for status badges */
@media (max-width: 768px) {
    .status-badge {
        width: 28px;
        height: 28px;
    }

    .status-badge i {
        font-size: 14px;
    }
}

/* Govern value styling - plain text without background */
.govern-value {
    font-weight: 600;
    color: #495057;
    font-size: 14px;
    display: inline-block;
    padding: 2px 0;
}

/* Center status badges in table cells */
.status-badge {
    margin: 0 auto;
}

/* Ensure table cells with status badges are centered */
td:has(.status-badge) {
    text-align: center;
}

/* Fallback for browsers that don't support :has() */
.status-badge-container {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Admin List Table Column Sizing - Updated for 9 columns */
#adminListTable th:nth-child(1), /* Account column */
#adminListTable td:nth-child(1) {
    width: 25% !important;
    min-width: 175px !important;
    max-width: 250px !important;
    padding-left: 16px; /* Add left margin */
    text-align: left;
}

#adminListTable th:nth-child(2), /* Display Name column */
#adminListTable td:nth-child(2) {
    width: 10% !important;
    min-width: 80px !important;
    max-width: 120px !important;
    text-align: left;
}

#adminListTable th:nth-child(3), /* Role column */
#adminListTable td:nth-child(3) {
    width: 7% !important;
    min-width: 60px !important;
    max-width: 80px !important;
    text-align: center;
}

#adminListTable th:nth-child(4), /* Active Status column */
#adminListTable td:nth-child(4) {
    width: 7% !important;
    min-width: 65px !important;
    max-width: 75px !important;
    text-align: center;
}

#adminListTable th:nth-child(5), /* Login Allowed column */
#adminListTable td:nth-child(5) {
    width: 7% !important;
    min-width: 65px !important;
    max-width: 75px !important;
    text-align: center;
}

#adminListTable th:nth-child(6), /* Create Keys Allowed column */
#adminListTable td:nth-child(6) {
    width: 10% !important;
    min-width: 70px !important;
    max-width: 90px !important;
    text-align: center;
}

#adminListTable th:nth-child(7), /* Create Accounts Allowed column */
#adminListTable td:nth-child(7) {
    width: 10% !important;
    min-width: 70px !important;
    max-width: 90px !important;
    text-align: center;
}

#adminListTable th:nth-child(8), /* Govern column */
#adminListTable td:nth-child(8) {
    width: 12% !important;
    min-width: 60px !important;
    max-width: 100px !important;
    text-align: center;
}

#adminListTable th:nth-child(9), /* Update column */
#adminListTable td:nth-child(9) {
    width: 6% !important;
    min-width: 50px !important;
    max-width: 70px !important;
    text-align: center;
}

/* Ensure table fits within container with horizontal scroll when needed */
.table-responsive {
    overflow-x: auto !important; /* Allow horizontal scroll for wide tables */
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    max-width: 100%;
}

#adminListTable {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    min-width: 800px; /* Ensure minimum width to prevent squishing */
    border: 1px solid #dee2e6; /* Add complete border to match left side */
}

/* Ensure all columns are visible and properly spaced */
#adminListTable thead th {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    padding: 8px 4px;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#adminListTable tbody td {
    padding: 8px 4px;
    vertical-align: middle;
    border-bottom: 1px solid #dee2e6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#adminListTable tbody tr:hover {
    background-color: #f8f9fa;
}

/* Ensure status badges are clearly visible and properly spaced */
.status-badge-container {
    padding: 2px 0;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Optimize status badge size for smaller columns */
.status-badge {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid;
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
}

.status-badge i {
    font-size: 12px;
    line-height: 1;
}

/* Govern value styling with better spacing */
.govern-value {
    font-weight: 600;
    color: #495057;
    font-size: 14px;
    display: inline-block;
    padding: 4px 8px;
    background-color: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #e9ecef;
}

/* Action button optimization */
.action_btns {
    display: flex;
    justify-content: center;
    align-items: center;
}

.action_btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    font-size: 14px;
}

.action_btn:hover {
    background-color: #0056b3;
    color: white;
    transform: scale(1.1);
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    #adminListTable th:nth-child(1),
    #adminListTable td:nth-child(1) {
        width: 35% !important;
        min-width: 180px !important;
        max-width: 250px !important;
        padding-left: 12px; /* Slightly less margin on mobile */
    }

    #adminListTable th:nth-child(3),
    #adminListTable td:nth-child(3),
    #adminListTable th:nth-child(4),
    #adminListTable td:nth-child(4),
    #adminListTable th:nth-child(5),
    #adminListTable td:nth-child(5),
    #adminListTable th:nth-child(6),
    #adminListTable td:nth-child(6),
    #adminListTable th:nth-child(7),
    #adminListTable td:nth-child(7) {
        width: 8% !important;
        min-width: 40px !important;
    }

    #adminListTable .status-badge {
        width: 20px;
        height: 20px;
    }

    #adminListTable .status-badge i {
        font-size: 10px;
    }

    .action_btn {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
}

/* Ensure proper text wrapping for account IDs */
#adminListTable td:nth-child(1) {
    word-break: break-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Optimize status badges for admin list table columns */
#adminListTable .status-badge {
    width: 24px;
    height: 24px;
    font-size: 12px;
}

#adminListTable .status-badge i {
    font-size: 12px;
}

/* DataTables Footer Layout - Fixed with proper positioning */
.dataTables_wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background-color: transparent;
    border-top: none;
    margin: 0;
    border-radius: 0;
    position: relative;
    clear: both;
}

/* DataTables Length (Page size selector) - Move to bottom */
.dataTables_wrapper .dataTables_length,
.dataTables_length {
    float: none !important;
    margin: 0 !important;
    padding: 8px 20px 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background-color: #f8f9fa !important;
    border-top: 1px solid #dee2e6 !important;
    border-radius: 0 0 8px 8px !important;
    clear: none !important;
    position: relative !important;
    z-index: 1 !important;
    order: 2; /* Move to bottom */
}

/* DataTables Info and Pagination Container - Move to top */
.dataTables_wrapper .dataTables_info,
.dataTables_info {
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    padding: 16px 20px 8px 20px !important;
    background-color: #f8f9fa !important;
    border-top: 1px solid #dee2e6 !important;
    border-radius: 8px 8px 0 0 !important;
    font-size: 14px !important;
    color: #415094 !important;
    font-weight: 400 !important;
    text-align: left !important;
    order: 1; /* Move to top */
}

.dataTables_wrapper .dataTables_paginate,
.dataTables_paginate {
    float: none !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 16px 20px 8px 20px !important;
    background-color: #f8f9fa !important;
    border-top: 1px solid #dee2e6 !important;
    border-radius: 8px 8px 0 0 !important;
    padding-top: 8px !important;
    order: 1; /* Same order as info */
    /* Ensure proper spacing for all buttons */
    min-width: 0 !important;
    overflow: visible !important;
}

/* Pagination Buttons - Fixed styling with proper spacing */
.dataTables_paginate .paginate_button {
    width: 32px !important;
    height: 32px !important;
    background: #FFFFFF !important;
    border-radius: 3px !important;
    text-align: center !important;
    line-height: 32px !important;
    padding: 0 !important;
    margin: 0 2px !important;
    border: 1px solid #dee2e6 !important;
    color: #415094 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    /* Ensure buttons are fully visible */
    min-width: 32px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

/* Previous/Next buttons need more space for text */
.dataTables_paginate .paginate_button.previous,
.dataTables_paginate .paginate_button.next {
    width: auto !important;
    min-width: 60px !important;
    padding: 0 8px !important;
    font-size: 14px !important;
}

.dataTables_paginate .paginate_button.current {
    background: #884FFB !important;
    border: 1px solid #884FFB !important;
    color: #fff !important;
    box-shadow: 0px 5px 10px rgba(136, 79, 251, 0.04) !important;
}

.dataTables_paginate .paginate_button:hover {
    background: #884FFB !important;
    border: 1px solid #884FFB !important;
    color: #fff !important;
    box-shadow: 0px 5px 10px rgba(136, 79, 251, 0.04) !important;
}

.dataTables_paginate .paginate_button.disabled {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

.dataTables_paginate .paginate_button.disabled:hover {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    color: #6c757d !important;
    box-shadow: none !important;
}

/* Make sure the select element is visible */
.dataTables_length select {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 6px 12px !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 4px !important;
    background: white !important;
    font-size: 14px !important;
    color: #415094 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-left: 8px !important;
}

.dataTables_length select:focus {
    outline: none !important;
    border-color: #884FFB !important;
    box-shadow: 0 0 0 2px rgba(136, 79, 251, 0.1) !important;
}

/* Ensure the label is visible */
.dataTables_length label {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 14px !important;
    color: #415094 !important;
    font-weight: 400 !important;
    margin: 0 !important;
    margin-right: 8px !important;
}

/* Responsive adjustments for pagination */
@media (max-width: 768px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_length {
        padding: 12px 16px 6px 16px !important;
        justify-content: center !important;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_info,
    .dataTables_wrapper .dataTables_paginate,
    .dataTables_paginate {
        padding: 6px 16px 12px 16px !important;
    }

    .dataTables_info {
        text-align: center !important;
        padding-bottom: 6px !important;
    }

    .dataTables_paginate {
        justify-content: center !important;
        padding-top: 6px !important;
    }

    .dataTables_paginate .paginate_button {
        width: 28px !important;
        height: 28px !important;
        line-height: 28px !important;
        font-size: 12px !important;
        min-width: 28px !important;
    }

    /* Previous/Next buttons on mobile */
    .dataTables_paginate .paginate_button.previous,
    .dataTables_paginate .paginate_button.next {
        width: auto !important;
        min-width: 50px !important;
        padding: 0 6px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 480px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_length {
        padding: 10px 12px 5px 12px !important;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_info,
    .dataTables_wrapper .dataTables_paginate,
    .dataTables_paginate {
        padding: 5px 12px 10px 12px !important;
    }

    .dataTables_info {
        font-size: 12px !important;
    }

    .dataTables_paginate .paginate_button {
        width: 24px !important;
        height: 24px !important;
        line-height: 24px !important;
        font-size: 11px !important;
        margin: 0 1px !important;
        min-width: 24px !important;
    }

    /* Previous/Next buttons on small mobile */
    .dataTables_paginate .paginate_button.previous,
    .dataTables_paginate .paginate_button.next {
        width: auto !important;
        min-width: 40px !important;
        padding: 0 4px !important;
        font-size: 11px !important;
    }

    .dataTables_length label {
        font-size: 12px !important;
    }

    .dataTables_length select {
        font-size: 12px !important;
        padding: 4px 8px !important;
    }
}

/* Usage Report Table Tooltips and Icons */
.usage-table th[data-bs-toggle="tooltip"],
.usage-table td[data-bs-toggle="tooltip"] {
    cursor: help;
    position: relative;
}

.usage-table .metric-icon {
    margin-right: 8px;
    color: #6c757d;
    font-size: 0.9em;
}

.usage-table .metric-value {
    font-weight: 500;
}

.usage-table td {
    vertical-align: middle;
    padding: 12px 8px;
}

.usage-table th {
    padding: 15px 8px;
    font-weight: 600;
    color: #495057;
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

/* Tooltip styling */
.tooltip {
    font-size: 0.875rem;
    z-index: 9999 !important;
    position: absolute !important;
}

.tooltip-inner {
    max-width: 500px;
    padding: 8px 12px;
    background-color: #212529;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    word-wrap: break-word;
    white-space: normal;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.4;
}

/* Ensure tooltips are not constrained by parent containers */
.usage-table-container {
    overflow: visible !important;
    position: relative;
}

.usage-table {
    overflow: visible !important;
    position: relative;
}

.usage-table th,
.usage-table td {
    overflow: visible !important;
    position: relative;
}

/* Additional container fixes */
.table-responsive {
    overflow: visible !important;
}

.usage-report-results {
    overflow: visible !important;
}

/* Ensure tooltips can escape any clipping */
.tooltip {
    pointer-events: none;
    z-index: 99999 !important;
    position: fixed !important;
}

.tooltip-inner {
    pointer-events: auto;
    max-width: 250px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Force tooltips to appear above everything */
.tooltip.show {
    z-index: 99999 !important;
    position: fixed !important;
}

/* Additional fixes for table containers */
.QA_table,
.white_card_body,
.dashboard-filters {
    overflow: visible !important;
}

/* Ensure tooltips don't get clipped by any parent */
.tooltip-arrow {
    z-index: 99999 !important;
}

/* Specific fixes for admin list table tooltips */
#adminListTable {
    overflow: visible !important;
}

#adminListTable th,
#adminListTable td {
    overflow: visible !important;
    position: relative;
}

.status-badge-container {
    overflow: visible !important;
    position: relative;
}

.status-badge {
    overflow: visible !important;
    position: relative;
}

/* Force tooltips to break out of any container constraints */
.tooltip {
    position: fixed !important;
    z-index: 999999 !important;
}

.tooltip.show {
    position: fixed !important;
    z-index: 999999 !important;
}

/* Metric-specific styling */
.usage-table .value-positive .metric-icon {
    color: #28a745;
}

.usage-table .value-neutral .metric-icon {
    color: #6c757d;
}

/* Hover effects for better UX */
.usage-table td:hover {
    background-color: #f8f9fa;
    transition: background-color 0.2s ease;
}

.usage-table th:hover {
    background-color: #e9ecef;
    transition: background-color 0.2s ease;
}

/* Govern tooltip styling - comprehensive fix for all pages */
.govern-value[data-bs-toggle="tooltip"] {
    cursor: help;
    position: relative;
    z-index: 1;
}

/* Force all Govern tooltips to use fixed positioning and high z-index */
.govern-value[data-bs-toggle="tooltip"] + .tooltip,
.govern-value[data-bs-toggle="tooltip"] ~ .tooltip,
th[data-bs-toggle="tooltip"] + .tooltip,
th[data-bs-toggle="tooltip"] ~ .tooltip,
input[data-bs-toggle="tooltip"] + .tooltip,
input[data-bs-toggle="tooltip"] ~ .tooltip,
h3[data-bs-toggle="tooltip"] + .tooltip,
h3[data-bs-toggle="tooltip"] ~ .tooltip,
div[data-bs-toggle="tooltip"] + .tooltip,
div[data-bs-toggle="tooltip"] ~ .tooltip {
    position: fixed !important;
    z-index: 999999 !important;
    pointer-events: none;
}

/* Ensure tooltips show correctly when visible */
.govern-value[data-bs-toggle="tooltip"] + .tooltip.show,
.govern-value[data-bs-toggle="tooltip"] ~ .tooltip.show,
th[data-bs-toggle="tooltip"] + .tooltip.show,
th[data-bs-toggle="tooltip"] ~ .tooltip.show,
input[data-bs-toggle="tooltip"] + .tooltip.show,
input[data-bs-toggle="tooltip"] ~ .tooltip.show,
h3[data-bs-toggle="tooltip"] + .tooltip.show,
h3[data-bs-toggle="tooltip"] ~ .tooltip.show,
div[data-bs-toggle="tooltip"] + .tooltip.show,
div[data-bs-toggle="tooltip"] ~ .tooltip.show {
    position: fixed !important;
    z-index: 999999 !important;
}

/* Ensure all table cells containing Govern values allow tooltips */
td:has(.govern-value[data-bs-toggle="tooltip"]),
th[data-bs-toggle="tooltip"],
td[data-bs-toggle="tooltip"] {
    overflow: visible !important;
    position: relative;
}

/* Force tooltips to break out of any container constraints for all Govern elements */
.govern-value[data-bs-toggle="tooltip"] .tooltip,
.govern-value[data-bs-toggle="tooltip"] .tooltip.show,
th[data-bs-toggle="tooltip"] .tooltip,
th[data-bs-toggle="tooltip"] .tooltip.show,
input[data-bs-toggle="tooltip"] .tooltip,
input[data-bs-toggle="tooltip"] .tooltip.show,
h3[data-bs-toggle="tooltip"] .tooltip,
h3[data-bs-toggle="tooltip"] .tooltip.show,
div[data-bs-toggle="tooltip"] .tooltip,
div[data-bs-toggle="tooltip"] .tooltip.show {
    position: fixed !important;
    z-index: 999999 !important;
}

/* Ensure tooltips work in all table contexts for all Govern elements */
.QA_table td:has(.govern-value[data-bs-toggle="tooltip"]),
.QA_table th[data-bs-toggle="tooltip"],
.white_card_body td:has(.govern-value[data-bs-toggle="tooltip"]),
.white_card_body th[data-bs-toggle="tooltip"],
.dashboard-filters td:has(.govern-value[data-bs-toggle="tooltip"]),
.dashboard-filters th[data-bs-toggle="tooltip"],
.table-responsive td:has(.govern-value[data-bs-toggle="tooltip"]),
.table-responsive th[data-bs-toggle="tooltip"],
.small-box h3[data-bs-toggle="tooltip"],
.small-box div[data-bs-toggle="tooltip"] {
    overflow: visible !important;
    position: relative;
}

/* Override any conflicting tooltip styles */
.tooltip[data-bs-popper="static"] {
    position: fixed !important;
    z-index: 999999 !important;
}

/* Ensure tooltip content is properly displayed */
.tooltip-inner {
    max-width: 300px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-wrap: break-word !important;
    line-height: 1.4 !important;
    padding: 8px 12px !important;
}

/* Global tooltip positioning fix for all pages */
.tooltip {
    position: fixed !important;
    z-index: 999999 !important;
    pointer-events: none;
}

.tooltip.show {
    position: fixed !important;
    z-index: 999999 !important;
}

/* Ensure tooltips are not clipped by any container */
body {
    overflow-x: visible !important;
}

/* Force all containers to allow tooltip overflow */
.table-responsive,
.QA_table,
.white_card_body,
.dashboard-filters,
.small-box,
.card,
.container,
.row,
.col,
[class*="col-"] {
    overflow: visible !important;
    position: relative;
}

/* Account tooltip styling for admin list table */
#adminListTable td:first-child span[data-bs-toggle="tooltip"] {
    cursor: help;
    border-bottom: 1px dotted #6c757d;
    transition: color 0.2s ease;
    font-family: 'Courier New', monospace;
    font-size: 13px;
}

#adminListTable td:first-child span[data-bs-toggle="tooltip"]:hover {
    color: #007bff;
}

/* Ensure tooltips work properly in table context */
#adminListTable td:first-child {
    overflow: visible !important;
    position: relative;
}

/* Govern value tooltip styling and positioning */
.govern-value[data-bs-toggle="tooltip"] {
    cursor: help;
    position: relative;
    z-index: 1;
}

/* Ensure Govern value tooltips are not clipped */
.govern-value[data-bs-toggle="tooltip"] + .tooltip,
.govern-value[data-bs-toggle="tooltip"] ~ .tooltip {
    position: fixed !important;
    z-index: 999999 !important;
    pointer-events: none;
}

.govern-value[data-bs-toggle="tooltip"] + .tooltip.show,
.govern-value[data-bs-toggle="tooltip"] ~ .tooltip.show {
    position: fixed !important;
    z-index: 999999 !important;
}

/* Ensure all table cells containing Govern values allow tooltips */
td:has(.govern-value[data-bs-toggle="tooltip"]) {
    overflow: visible !important;
    position: relative;
}

/* Force tooltips to break out of any container constraints for Govern values */
.govern-value[data-bs-toggle="tooltip"] .tooltip,
.govern-value[data-bs-toggle="tooltip"] .tooltip.show {
    position: fixed !important;
    z-index: 999999 !important;
}

/* Ensure tooltips work in all table contexts for Govern values */
.QA_table td:has(.govern-value[data-bs-toggle="tooltip"]),
.white_card_body td:has(.govern-value[data-bs-toggle="tooltip"]),
.dashboard-filters td:has(.govern-value[data-bs-toggle="tooltip"]) {
    overflow: visible !important;
    position: relative;
}

/* Specific tooltip styling for admin list account IDs */
#adminListTable .tooltip-inner {
    max-width: 600px !important;
    word-break: break-all;
    white-space: pre-wrap;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.3;
    padding: 10px 12px;
    background-color: #212529 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Ensure tooltips are visible and not clipped */
.tooltip {
    z-index: 99999 !important;
    position: fixed !important;
}

.tooltip.show {
    z-index: 99999 !important;
    position: fixed !important;
}

/* Account ID container and copy button styling */
.account-id-container {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.copy-account-id-btn {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-size: 12px;
    min-width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.copy-account-id-btn:hover {
    background-color: #e9ecef;
    color: #495057;
    transform: scale(1.1);
}

.copy-account-id-btn:active {
    transform: scale(0.95);
}

.copy-account-id-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.25);
}

.copy-account-id-btn.copying {
    pointer-events: none;
    opacity: 0.7;
}

.copy-account-id-btn:not(.copying):hover {
    background-color: #e9ecef;
    color: #495057;
    transform: scale(1.1);
}

/* Update Account Modal Enterprise Styling */

/* Modal Header Gradient */
.bg-gradient-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

/* Ensure modal header text is white */
.bg-gradient-primary .modal-title,
.bg-gradient-primary .modal-title h5,
.bg-gradient-primary h5 {
  color: #ffffff !important;
}

.bg-gradient-primary .modal-title i,
.bg-gradient-primary h5 i {
  color: #ffffff !important;
}

/* Additional specificity for modal headers with gradient background */
.modal-header.bg-gradient-primary .modal-title,
.modal-header.bg-gradient-primary h5,
.modal-header.bg-gradient-primary .modal-title h5 {
  color: #ffffff !important;
}

.modal-header.bg-gradient-primary .modal-title i,
.modal-header.bg-gradient-primary h5 i {
  color: #ffffff !important;
}

/* Modal title container and subtitle styling */
.modal-header .modal-title-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.modal-header .modal-subtitle {
  color: #ffffff !important;
  font-size: 12px;
  opacity: 0.9;
  font-weight: 400;
  margin: 0;
  line-height: 1.2;
}

/* Form Controls */
#updateAccountModal .form-control {
  border: 2px solid #e9ecef;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14px;
  transition: all 0.3s ease;
}

#updateAccountModal .form-control:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

#updateAccountModal .form-control-lg {
  font-size: 16px;
}

/* Form Checkboxes - Match update_account.html styling */
#updateAccountModal .form-check-input {
  width: 1em;
  height: 1em;
  margin-top: 0.25em;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 0.25em;
  transition: all 0.3s ease;
}

#updateAccountModal .form-check-input:checked {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
}

#updateAccountModal .form-check-input[type=checkbox]:indeterminate {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e") !important;
}

#updateAccountModal .form-check-input:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}



/* Tooltip styling for modal */
#updateAccountModal .tooltip {
  font-size: 12px;
}

#updateAccountModal .tooltip-inner {
  background-color: #212529;
  color: white;
  border-radius: 6px;
  padding: 8px 12px;
  max-width: 250px;
}

/* Modal footer buttons */
#updateAccountModal .modal-footer .btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
}

#updateAccountModal .modal-footer .btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

#updateAccountModal .modal-footer .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

#updateAccountModal .modal-footer .btn-secondary {
  background: #6c757d;
  border: none;
  box-shadow: 0 4px 15px rgba(108, 117, 125, 0.3);
}

#updateAccountModal .modal-footer .btn-secondary:hover {
  background: #5a6268;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(108, 117, 125, 0.4);
}



/* Validation Messages Container Styling */
.validation-messages-container {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.validation-messages-container .alert-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 0;
}

.validation-message-item {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    padding: 4px 0;
}

.validation-message-item:not(:last-child) {
    border-bottom: 1px solid rgba(220, 53, 69, 0.2);
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.validation-message-item i {
    color: #dc3545;
}

.validation-message-item strong {
    color: #721c24;
    font-weight: 600;
}

/* Filter Visibility Classes */
.show-filter {
    display: flex !important;
}

.hide-filter {
    display: none !important;
}



/* Table Row Highlight Effect */
.table-row-highlight {
    background-color: #d4edda !important;
    border-color: #c3e6cb !important;
    box-shadow: 0 0 0 1px #c3e6cb;
}

#updateAccountDetailsContainer {
    background: #ffffff;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
    border: 1px solid #e9ecef;
}

/* Common Table Search Section */
#commonTableSearchSection {
    background: #ffffff;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
    border: 1px solid #e9ecef;
}

#commonTableSearchSection .white_box_tittle {
    margin-bottom: 0;
}

#commonTableSearchSection h5 {
    color: #495057;
    font-weight: 600;
    margin-bottom: 15px;
}

#commonTableSearchSection h5 i {
    color: #17a2b8;
    margin-right: 8px;
}

/* Sortable column styling */
.sortable-column {
    cursor: pointer;
    position: relative;
    user-select: none;
}

.sortable-column:hover {
    background-color: #f8f9fa;
}

.sortable-column i.fas.fa-sort {
    margin-left: 8px;
    color: #6c757d;
    font-size: 12px;
    opacity: 0.7;
}

.sortable-column:hover i.fas.fa-sort {
    opacity: 1;
    color: #495057;
}

/* Completely disable DataTables built-in sorting indicators for all columns */
table.dataTable thead .sorting::before,
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting_desc::after {
    display: none !important;
}

/* Remove cursor pointer from non-sortable columns */
table.dataTable thead th:not(.sortable-column) {
    cursor: default;
}

/* Password Override Section in Modal */
#updateAccountModal #modalNewPasswordField {
    border: 2px solid #e9ecef;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#updateAccountModal #modalNewPasswordField:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

#updateAccountModal #modalNewPasswordField.is-valid {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

#updateAccountModal #modalNewPasswordField.is-invalid {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

/* Info icon styling in modal */
#updateAccountModal .fa-info-circle {
    color: #17a2b8;
    font-size: 14px;
}

#updateAccountModal .fa-info-circle:hover {
    color: #138496;
}

/* Usage Report Sort Icon Styling - Fixed for DataTables compatibility */
.usage-report-container .sortable-column {
    cursor: pointer;
    position: relative;
    white-space: nowrap; /* Prevent text wrapping */
}

.usage-report-container .sortable-column i.fas.fa-sort {
    color: #6c757d;
    font-size: 12px;
    margin-left: 2px; /* Small gap between text and icon */
    display: inline-block; /* Ensure icon stays inline with text */
    vertical-align: middle; /* Align with text */
}

.usage-report-container .sortable-column:hover i.fas.fa-sort {
    color: #495057;
}

/* DataTables specific overrides for usage report */
.usage-report-container table.dataTable {
    width: 100% !important;
    overflow-x: auto; /* Enable horizontal scroll if needed */
}

.usage-report-container table.dataTable thead th {
    white-space: nowrap; /* Prevent header text wrapping */
    min-width: 120px; /* Minimum width for columns */
    position: relative; /* For proper icon positioning */
}

.usage-report-container table.dataTable thead th.sortable-column {
    padding-right: 8px; /* Reduced padding */
}

/* Remove absolute positioning - let icon flow naturally with text */
.usage-report-container table.dataTable thead th.sortable-column i.fas.fa-sort {
    position: static; /* Remove absolute positioning */
    margin-left: 2px; /* Small gap between text and icon */
    display: inline-block;
    vertical-align: middle;
}

/* Ensure table container has proper scrolling - REMOVED VERTICAL SCROLL */
.usage-report-container .table-view {
    overflow-x: auto;
    overflow-y: visible; /* Changed from auto to visible to remove vertical scroll */
    max-height: none; /* Removed height limit */
}

.usage-report-container .usage-table-container {
    overflow-x: auto;
    overflow-y: visible; /* Ensure no vertical scroll */
    min-width: 100%;
}

/* Remove any flexbox styling that might interfere */
.usage-report-container table.dataTable thead th,
.usage-report-container table.dataTable thead td {
          display: table-cell !important;
      flex: none !important;
}

/* Export button disabled state */
.btn-disabled {
    opacity: 0.6;
    cursor: not-allowed !important;
}

.btn-disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Button group styling for copy and export buttons */
.d-flex.gap-2 .btn {
    transition: all 0.3s ease;
}

.d-flex.gap-2 .btn:hover:not(.btn-disabled) {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* New status badges for Create Keys and Create Accounts */
.status-keys-allowed {
    background: linear-gradient(135deg, #17a2b8 0%, #20c997 100%);
    color: white;
    border-color: #17a2b8;
}

.status-keys-allowed:hover {
    background: linear-gradient(135deg, #138496 0%, #1ea085 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(23, 162, 184, 0.3);
}

.status-keys-blocked {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
    border-color: #6c757d;
}

.status-keys-blocked:hover {
    background: linear-gradient(135deg, #545b62 0%, #343a40 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}

.status-accounts-allowed {
    background: linear-gradient(135deg, #6f42c1 0%, #e83e8c 100%);
    color: white;
    border-color: #6f42c1;
}

.status-accounts-allowed:hover {
    background: linear-gradient(135deg, #5a32a3 0%, #d63384 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(111, 66, 193, 0.3);
}

.status-accounts-blocked {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
    border-color: #6c757d;
}

.status-accounts-blocked:hover {
    background: linear-gradient(135deg, #545b62 0%, #343a40 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
}

/* Display Name Tooltip Styling */
.display-name-cell {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.display-name-cell[data-bs-toggle="tooltip"] {
    cursor: help;
    border-bottom: 1px dotted #6c757d;
}

.display-name-cell[data-bs-toggle="tooltip"]:hover {
    color: #007bff;
}

/* Ensure Display Name tooltips are not clipped */
.display-name-cell[data-bs-toggle="tooltip"] + .tooltip,
.display-name-cell[data-bs-toggle="tooltip"] ~ .tooltip {
    position: fixed !important;
    z-index: 999999 !important;
    pointer-events: none;
}

.display-name-cell[data-bs-toggle="tooltip"] + .tooltip.show,
.display-name-cell[data-bs-toggle="tooltip"] ~ .tooltip.show {
    position: fixed !important;
    z-index: 999999 !important;
}

/* Ensure all table cells containing Display Name values allow tooltips */
td:has(.display-name-cell[data-bs-toggle="tooltip"]) {
    overflow: visible !important;
    position: relative;
}

/* Force tooltips to break out of any container constraints for Display Name values */
.display-name-cell[data-bs-toggle="tooltip"] .tooltip,
.display-name-cell[data-bs-toggle="tooltip"] .tooltip.show {
    position: fixed !important;
    z-index: 999999 !important;
}

/* Ensure tooltips work in all table contexts for Display Name values */
.QA_table td:has(.display-name-cell[data-bs-toggle="tooltip"]),
.white_card_body td:has(.display-name-cell[data-bs-toggle="tooltip"]),
.dashboard-filters td:has(.display-name-cell[data-bs-toggle="tooltip"]),
.table-responsive td:has(.display-name-cell[data-bs-toggle="tooltip"]) {
    overflow: visible !important;
    position: relative;
}

/* Specific tooltip styling for admin list display names */
#adminListTable .display-name-cell[data-bs-toggle="tooltip"] + .tooltip .tooltip-inner,
#adminListTable .display-name-cell[data-bs-toggle="tooltip"] ~ .tooltip .tooltip-inner {
    max-width: 300px !important;
    word-break: break-word;
    white-space: normal;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.3;
    padding: 8px 12px;
    background-color: #212529 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* ==========================================================================
   CONSOLIDATED TOOLTIP STYLES - CONFLICT RESOLUTION
   ========================================================================== */

/* Override previous conflicting tooltip styles - consolidate all tooltip behavior */
body .tooltip {
    font-size: 0.875rem !important;
    z-index: 999999 !important;
    position: fixed !important;
    pointer-events: none !important;
}

body .tooltip.show {
    z-index: 999999 !important;
    position: fixed !important;
    pointer-events: none !important;
}

/* Standardized tooltip inner styling across all pages */
body .tooltip-inner {
    max-width: 400px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow: visible !important;
    text-overflow: unset !important;
    background-color: #212529 !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    pointer-events: auto !important;
}

body .tooltip-arrow {
    z-index: 999999 !important;
}

/* Ensure all containers allow tooltips to be visible - global override */
body .dashboard-container,
body .dashboard-filters,
body .white_card_body,
body .QA_section,
body .color-box,
body .row,
body .col-lg-12,
body .col-lg-6,
body .col-xl-2,
body .QA_table,
body .main_content_iner,
body .overly_inner,
body .container-fluid,
body .table-responsive,
body .usage-report-results {
    overflow: visible !important;
    position: relative;
}

/* Specific override for elements that need hidden overflow */
body .spinner-overlay,
body .loader--roller {
    overflow: hidden !important;
}

/* Ensure tooltips work in all contexts */
body [data-bs-toggle="tooltip"] {
    position: relative;
    overflow: visible !important;
}