/* 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: 0;
    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;
    inset: 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;
    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;
    flex-wrap: wrap;
}

.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(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

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

.summary-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

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

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

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

.usage-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-bottom: 0;
}

.usage-table thead th {
    background: #f8f9fa;
    color: #495057;
    font-weight: 600;
    border: none;
    border-bottom: 1px solid #e5ecff;
}

.usage-table tbody tr:hover {
    background-color: #f8f9fa;
}

.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;
    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 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: 12px 10px;
    }

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

/* Profile Description - Access & Permissions */
.profile-description-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.permission-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

.permission-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.permission-card .permission-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.permission-card .permission-icon.granted {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
}

.permission-card .permission-icon.denied {
    background: rgba(220, 53, 69, 0.15);
    color: #dc3545;
}

.permission-card .permission-info {
    flex: 1;
    min-width: 0;
}

.permission-card .permission-info .permission-label {
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
}

.permission-card .permission-info .permission-status {
    font-size: 11px;
    color: #6c757d;
    margin: 0;
}

/* 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;
    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: 0;
}

.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;
    inset: 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;
    pointer-events: none;
}

.dashboard-header h2 {
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 8px;
    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), /* Display Name column */
#adminListTable td:nth-child(1) {
    width: 15% !important;
    min-width: 80px !important;
    max-width: 120px !important;
    text-align: left;
}

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

#adminListTable th:nth-child(3), /* Account column */
#adminListTable td:nth-child(3) {
    width: 25% !important;
    min-width: 175px !important;
    max-width: 250px !important;
    padding-left: 16px; /* Add left margin */
    text-align: left;
}

#adminListTable th:nth-child(4), /* Update column */
#adminListTable td:nth-child(4) {
    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(3),
    #adminListTable td:nth-child(3) {
        width: 35% !important;
        min-width: 180px !important;
        max-width: 250px !important;
        padding-left: 12px; /* Slightly less margin on mobile */
    }

    #adminListTable th:nth-child(1),
    #adminListTable td:nth-child(1),
    #adminListTable th:nth-child(2),
    #adminListTable td:nth-child(2),
    #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(3) {
    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 !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 !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 !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 - Bootstrap 5 DataTables structure:
   <li class="paginate_button page-item"> <a class="page-link">1</a> </li>
   Styles target the <li> for layout and the <a class="page-link"> for appearance. */

/* Reset the <li> wrapper — layout only, no visual styling */
.dataTables_paginate .paginate_button {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 2px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    list-style: none !important;
    box-shadow: none !important;
}

/* Style the visible <a> element */
.dataTables_paginate .paginate_button .page-link {
    width: 32px !important;
    height: 32px !important;
    background: #ffffff !important;
    border-radius: 3px !important;
    text-align: center !important;
    line-height: 32px !important;
    padding: 0 !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;
    min-width: 32px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

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

/* Active page */
.dataTables_paginate .paginate_button.active .page-link {
    background: #884ffb !important;
    border: 1px solid #884ffb !important;
    color: #fff !important;
    box-shadow: 0 5px 10px rgba(136, 79, 251, 0.04) !important;
}

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

/* Disabled (e.g. Previous on first page) */
.dataTables_paginate .paginate_button.disabled .page-link {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

.dataTables_paginate .paginate_button.disabled .page-link: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 !important;
        justify-content: center !important;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_info,
    .dataTables_wrapper .dataTables_paginate,
    .dataTables_paginate {
        padding: 6px 16px 12px !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 .page-link {
        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 .page-link,
    .dataTables_paginate .paginate_button.next .page-link {
        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 !important;
    }

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

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

    .dataTables_paginate .paginate_button .page-link {
        width: 24px !important;
        height: 24px !important;
        line-height: 24px !important;
        font-size: 11px !important;
        min-width: 24px !important;
    }

    .dataTables_paginate .paginate_button {
        margin: 0 1px !important;
    }

    /* Previous/Next buttons on small mobile */
    .dataTables_paginate .paginate_button.previous .page-link,
    .dataTables_paginate .paginate_button.next .page-link {
        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;
}

/* 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 tbody tr:hover td {
    background-color: #f8f9fa;
}

/* 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;
    white-space: nowrap;
}

.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;
}

/* 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: normal !important; /* Allow header text wrapping */
    word-wrap: break-word !important;
    min-width: 120px; /* Minimum width for columns */
    position: relative; /* For proper icon positioning */
    line-height: 1.3 !important;
    vertical-align: top !important;
    padding: 16px 12px !important; /* Consistent padding */
    text-align: center !important;
    font-size: 13px !important;
}

.usage-report-container table.dataTable thead th.sortable-column {
    padding: 16px 12px !important; /* Maintain consistent padding for sortable columns */
}

/* 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: 4px; /* Small gap between text and icon */
    display: inline-block;
    vertical-align: middle;
    font-size: 11px; /* Slightly smaller icon */
    opacity: 0.7; /* Make icon less prominent */
}

/* Better spacing for wrapped text with sort icon */
.usage-report-container table.dataTable thead th.sortable-column {
    word-break: break-word; /* Better word breaking */
    hyphens: auto; /* Enable hyphenation for long words */
}

/* Ensure table container has proper scrolling and responsive layout */
.usage-report-container .table-view {
    overflow: auto visible;
    max-height: none;
    width: 100%;
}

.usage-report-container .usage-table-container {
    overflow: auto visible;
    width: 100%;
    min-width: 100%;
}

/* Override global scrollbar hiding (* { scrollbar-width: none } in style.css)
   so the horizontal scrollbar is visible on wide usage-report DataTables */
.usage-report-container .dataTables_scrollBody {
    scrollbar-width: auto;
}
.usage-report-container .dataTables_scrollBody::-webkit-scrollbar {
    display: block;
    height: 10px;
}
.usage-report-container .dataTables_scrollBody::-webkit-scrollbar-thumb {
    background: #b0b8c4;
    border-radius: 5px;
}
.usage-report-container .dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
    background: #8a95a5;
}
.usage-report-container .dataTables_scrollBody::-webkit-scrollbar-track {
    background: #f0f2f5;
    border-radius: 5px;
}

/* Ensure table columns have appropriate width management */
.usage-table {
    width: 100%;
    table-layout: auto;
    min-width: 800px; /* Increased minimum width for API metric names */
}

/* Table headers - match standard table styling */
.usage-table th {
    white-space: normal !important;
    word-wrap: break-word !important;
    line-height: 1.3;
    vertical-align: middle;
    padding: 12px 15px !important;
    overflow: visible !important;
    text-overflow: unset !important;
    max-width: 180px;
    min-width: 120px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: #495057;
    background: #f8f9fa;
    border-bottom: 1px solid #e5ecff !important;
}

/* Table data cells - match standard table styling */
.usage-table td {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 12px 15px;
    max-width: 180px;
    min-width: 120px;
    border-bottom: 1px solid #e9ecef;
    font-weight: 400;
    vertical-align: middle;
}

.usage-table th:first-child,
.usage-table td:first-child {
    min-width: 100px;
    max-width: 120px;
    text-align: left !important;
}

/* Special handling for API Analysis headers - override all conflicting styles */
#apiUsageTable th {
    min-width: 150px !important; /* Extra space for API metric names */
    max-width: 220px !important;
    white-space: normal !important; /* Allow text wrapping in headers */
    word-wrap: break-word !important;
    line-height: 1.3 !important; /* Match other headers */
    padding: 16px 12px !important; /* Consistent padding with other tables */
    vertical-align: top !important;
    overflow: visible !important;
    text-overflow: unset !important;
    height: auto !important;
    text-align: center !important; /* Center align for consistency */
    font-size: 13px !important; /* Match other headers */
}

#apiUsageTable td {
    min-width: 150px !important;
    max-width: 220px !important;
    white-space: nowrap !important; /* Keep data cells on one line */
}

/* 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;
}

/* Timezone toggle styling */
#timezoneToggleContainer {
    flex-shrink: 0;
}

#timezoneToggleContainer.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* 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;
}

/* Tab Navigation Styles */
.results-tabs {
    margin-bottom: 20px;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
    padding: 0 20px;
}

.results-tabs .nav-tabs {
    border-bottom: none;
    margin-bottom: 0;
}

.results-tabs .nav-tabs .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    color: #6c757d;
    font-weight: 500;
    padding: 12px 20px;
    margin-right: 10px;
    border-radius: 0;
    transition: all 0.3s ease;
    background: transparent;
}

.results-tabs .nav-tabs .nav-link:hover {
    border-bottom-color: #007bff;
    color: #007bff;
    background-color: transparent;
}

.results-tabs .nav-tabs .nav-link.active {
    color: #007bff;
    background-color: transparent;
    border-bottom-color: #007bff;
    font-weight: 600;
}

.results-tabs .nav-tabs .nav-link i {
    margin-right: 8px;
    font-size: 14px;
}

/* Tab Content Styles */
/* .tab-content {
    margin-top: 20px;
    padding: 0 20px 20px;
} */

.tab-section-content {
    min-height: 400px;
}

/* Section-specific summary cards */
.total-keys-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
}

.total-keys-card h4 {
    color: white;
}

.total-keys-card p {
    color: rgba(255, 255, 255, 0.9);
}

.total-api-calls-card {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    border: none;
}

.total-api-calls-card h4 {
    color: white;
}

.total-api-calls-card p {
    color: rgba(255, 255, 255, 0.9);
}

/* Successful API calls — green gradient. */
.total-api-calls-card--success {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}
/* Failed API calls — red/amber gradient to signal attention. */
.total-api-calls-card--failed {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.total-governance-card {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    border: none;
}

.total-governance-card h4 {
    color: white;
}

.total-governance-card p {
    color: rgba(255, 255, 255, 0.9);
}

.total-degovernance-card {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    color: white;
    border: none;
}

.total-degovernance-card h4 {
    color: white;
}

.total-degovernance-card p {
    color: rgba(255, 255, 255, 0.9);
}

/* No data message styling */
.no-data-message {
    text-align: center;
    color: #6c757d;
    font-style: italic;
    padding: 40px 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 2px dashed #dee2e6;
}

/* Responsive tab styles */
@media (max-width: 768px) {
    .results-tabs {
        padding: 0 10px;
    }

    .results-tabs .nav-tabs .nav-link {
        padding: 10px 15px;
        margin-right: 5px;
        font-size: 14px;
    }

    .results-tabs .nav-tabs .nav-link i {
        margin-right: 5px;
        font-size: 12px;
    }

    .tab-content {
        padding: 0 10px 20px;
    }
}

/* Date Picker Clear Button Styling */
.date-clear-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: #6c757d;
    color: white;
    border-radius: 50%;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.date-clear-btn:hover {
    background: #dc3545;
    transform: translateY(-50%) scale(1.1);
}

.date-clear-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
}

.date-clear-btn i {
    font-size: 10px;
    line-height: 1;
}

/* Ensure date input has proper padding to accommodate clear button */
.datepicker-here {
    padding-right: 35px !important;
}

/* Ensure datepicker popup appears above Bootstrap modals (z-index: 1055) */
.datepicker {
    z-index: 1060 !important;
}

.datepickers-container {
    z-index: 1060 !important;
}

/* Debug Button Styling */
.debug-toggle-btn {
    background: #6c757d;
    color: white;
    border: none;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.debug-toggle-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

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

.debug-toggle-btn.debug-enabled {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.debug-toggle-btn.debug-enabled:hover {
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
}

.debug-toggle-btn.debug-disabled {
    background: #6c757d;
}

.debug-toggle-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(108, 117, 125, 0.25);
}

.debug-toggle-btn.debug-enabled:focus {
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.25);
}

.header_debug_button {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 10;
    margin-right: 15px; /* Add spacing between debug button and date */
}

/* Hide debug button when disabled */
.header_debug_button--hidden {
    display: none !important;
}

.debug-toggle-btn {
    position: relative;
    z-index: 10;
    pointer-events: auto !important;
}

/* Inline Debug Panel */
.inline-debug-panel {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 420px;
    height: 320px;
    background: #1e1e1e;
    color: #d4d4d4;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 2000;
    user-select: none;
    transition: width 0.3s ease, height 0.3s ease, bottom 0.3s ease, right 0.3s ease, border-radius 0.3s ease;
    /* Ensure panel stays above sidebar (sidebar z-index is 999) */
}

/* Maximized state */
.inline-debug-panel.maximized {
    width: 90vw;
    height: 90vh;
    bottom: 5vh;
    right: 5vw;
    border-radius: 8px;
    z-index: 10000 !important; /* Ensure it stays above sidebar (z-index: 999) and all other elements */
}

.inline-debug-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #2d2d2d;
    border-bottom: 1px solid #007acc;
    cursor: move;
    user-select: none;
}

.inline-debug-title {
    font-size: 14px;
    font-weight: 600;
    color: #4ec9b0;
}

.inline-debug-actions {
    display: flex;
    gap: 8px;
}

.inline-debug-btn {
    background: #007acc;
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
}

.inline-debug-btn i {
    font-size: 12px;
}

.inline-debug-btn:hover {
    background: #005a9e;
}

.inline-debug-btn-clear {
    background: #d32f2f;
}

.inline-debug-btn-clear:hover {
    background: #b71c1c;
}

.inline-debug-body {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    background: #1e1e1e;
}

.inline-debug-entry {
    padding: 4px 6px;
    margin: 3px 0;
    border-left: 3px solid transparent;
    word-break: break-word;
    white-space: pre-wrap;
}

.inline-debug-entry.log {
    border-left-color: #4ec9b0;
    background: rgba(78, 201, 176, 0.1);
}

.inline-debug-entry.warn {
    border-left-color: #ffc107;
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
}

.inline-debug-entry.error {
    border-left-color: #f44336;
    background: rgba(244, 67, 54, 0.1);
    color: #ff6b6b;
}

.inline-debug-entry.debug {
    border-left-color: #9cdcfe;
    background: rgba(156, 220, 254, 0.1);
    color: #9cdcfe;
}

.inline-debug-timestamp {
    color: #858585;
    margin-right: 8px;
    font-size: 10px;
}

.inline-debug-empty {
    text-align: center;
    color: #858585;
    padding: 20px 0;
    font-style: italic;
}

/* ============================================
   Login, Reset Password, Confirm Reset Pages
   - No scrolling
   - Responsive to screen size
   ============================================ */

/* Override body background when auth page is shown */
body:has(.auth-page) {
    background: #ffffff !important;
}

/* Auth page container - fills viewport without scrolling */
.auth-page {
    min-height: 100vh;
    background: #ffffff;
    overflow: hidden;
    padding-bottom: 60px; /* Space for footer */
}

/* Responsive adjustments for small screens */
@media (max-height: 700px) {
    .auth-page .logo img {
        height: 60px !important;
    }

    .auth-page .logo {
        margin-top: 20px !important;
    }
}

@media (max-height: 550px) {
    .auth-page .logo img {
        height: 50px !important;
    }

    .auth-page .logo {
        margin-top: 10px !important;
    }

    .auth-page .text-center.mb-3 {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }
}


/* =========================================================================
   Collapsible "How to use" / info panel — shared across pages.
   Markup: <details class="howto-panel alert alert-info">
              <summary class="howto-panel__summary">...</summary>
              <div class="howto-panel__body">...</div>
           </details>
   ========================================================================= */
.howto-panel.alert-info {
    margin: 0 0 0.75rem !important;
    padding: 0.625rem 0.75rem;
    border: none;
    border-radius: 0;
    background: #dfeaff;
    color: #1e3a5f;
}
.howto-panel[open] {
    padding-bottom: 0.75rem;
}
.howto-panel__summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.howto-panel__summary::-webkit-details-marker { display: none; }
.howto-panel__summary::before {
    content: '\f078'; /* fa-chevron-down */
    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', sans-serif;
    font-weight: 900;
    font-size: 0.75rem;
    margin-right: 0.5rem;
    color: #0d6efd;
    transition: transform 0.15s ease;
}
.howto-panel:not([open]) > .howto-panel__summary::before {
    transform: rotate(-90deg);
}
.howto-panel__body {
    padding-left: 1.25rem;
    font-size: 0.9rem;
    line-height: 1.5;
}
.howto-panel__body ul { padding-left: 1.25rem; }
.howto-panel__body code {
    background: rgba(13, 110, 253, 0.08);
    color: #0d6efd;
    padding: 0.1em 0.35em;
    border-radius: 3px;
    font-size: 0.9em;
}
/* Override the portal's global `p { color: #828bb2 }` (in style.css) so the
   panel body text stays the panel's navy color instead of going pale-gray. */
.howto-panel.alert-info .howto-panel__body p { color: #1e3a5f; }

/* When an input inside a field-group is toggled hidden via `.d-none`, hide
   its sibling label too so we don't leave an orphan label dangling. */
.key-id-field:has(> input.d-none) > label { display: none; }

/* Slim "Advanced options" collapsible — small chevron + bold label, no browser
   default triangle. Reusable on any page that wants a <details> options panel. */
.advanced-options > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    color: #495057;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.25rem 0;
    display: inline-flex;
    align-items: center;
}
.advanced-options > summary::-webkit-details-marker { display: none; }
.advanced-options > summary::before {
    content: '\f078'; /* fa-chevron-down */
    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', sans-serif;
    font-weight: 900;
    font-size: 0.7rem;
    margin-right: 0.5rem;
    color: #6c757d;
    transition: transform 0.15s ease;
}
.advanced-options:not([open]) > summary::before {
    transform: rotate(-90deg);
}

.howto-panel > summary:focus,
.howto-panel > summary:focus-visible,
.advanced-options > summary:focus,
.advanced-options > summary:focus-visible {
    outline: none;
    box-shadow: none;
}

#manageKeysTableSection.dashboard-filters {
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}
#manageKeysTableSection > .white_card > .white_card_body {
    padding: 12px;
}

/* Trim padding on the Create Keys "Key Details" section but keep the
   white-card look that `.dashboard-filters` provides. */
#keyDetailsSectionWrapper.dashboard-filters {
    padding: 16px 20px;
}
#keyDetailsSectionWrapper > .white_card_body {
    padding: 0;
}

/* Date inputs are `readonly` so the datepicker owns input, but browser
   default makes them look disabled. Override to keep them clickable-looking. */
#keyStartDateField[readonly],
#keyExpiryDateField[readonly] {
    background-color: #fff;
    cursor: pointer;
}

/* Collapsible form section (wraps the Create Keys form). */
.key-form-section > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    padding: 4px 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #e5ecff;
}
.key-form-section > summary::-webkit-details-marker { display: none; }
.key-form-section > summary::before {
    content: '\f078';
    font-family: 'Font Awesome 5 Free', 'Font Awesome 6 Free', sans-serif;
    font-weight: 900;
    font-size: 0.8rem;
    margin-right: 10px;
    color: #6c757d;
    transition: transform 0.15s ease;
    display: inline-block;
    vertical-align: middle;
}
.key-form-section:not([open]) > summary::before {
    transform: rotate(-90deg);
}
.key-form-section > summary > h4 {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
}
.key-form-section > summary:focus,
.key-form-section > summary:focus-visible {
    outline: none;
}

/* Encrypt/Decrypt result output: monospace block on a success-tinted background.
   Previously 7 inline style properties on the element — moved here. */
.crypto-result-output {
    font-family: monospace;
    font-size: 13px;
    word-break: break-all;
    white-space: pre-wrap;
    padding: 12px;
    background-color: #d4edda;
    border-radius: 4px;
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 80px;
    right: 30px;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.back-to-top:active {
    transform: scale(0.95);
}