/* Monitoring Dashboard Specific Styles */

.page-actions {
    display: flex;
    gap: var(--spacing-3);
    align-items: center;
}

.stats-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

.stats-card {
    padding: var(--spacing-4);
    text-align: center;
}

.stats-label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-2);
}

.stats-value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-gray-900);
}

.health-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-6);
    margin-bottom: var(--spacing-8);
}

.health-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    padding: var(--spacing-6);
}

/* Health cards rendered as <button> elements need a browser-default reset
   so they look identical to the non-clickable Total card. */
button.health-card {
    background: var(--color-white);
    border: 1px solid transparent;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    width: 100%;
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast),
                transform var(--transition-fast);
}

button.health-card:hover {
    border-color: var(--color-primary-light, var(--color-primary));
    box-shadow: var(--shadow-md, var(--shadow-sm));
    transform: translateY(-1px);
}

button.health-card:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.health-card--active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-light, var(--color-primary));
    background: var(--color-primary-50, var(--color-white));
}

.health-card--active .card-value {
    color: var(--color-primary);
}

.health-card .card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background-color: var(--color-gray-50);
}

.health-card .card-label {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-1);
}

.health-card .card-value {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-gray-900);
}

/* Checkbox column in scrapers table — dashboard-only.
   The fix-mode page reuses #scrapersTable but has no checkbox column,
   so these rules MUST be scoped to .scrapers-section to avoid clobbering
   the Name column there. */
.scrapers-section #scrapersTable th:first-child,
.scrapers-section #scrapersTable td:first-child {
    text-align: center;
    width: 40px;
    padding-left: var(--spacing-2);
    padding-right: var(--spacing-2);
}

/* Domain (Project name) column — truncate long names with ellipsis so the
   action column stays on a single row. The width cap also keeps the table
   from being dominated by one wide cell. Hover shows the full name via
   the cell's title attribute (set in JS). Scoped to .scrapers-section so
   it doesn't apply to the fix-mode table (which uses #scrapersTable too). */
.scrapers-section #scrapersTable th:nth-child(2),
.scrapers-section #scrapersTable td:nth-child(2) {
    max-width: 240px;
    width: 240px;
}

.scraper-name-cell {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scrapers-section {
    margin-bottom: var(--spacing-8);
}

.filter-bar {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--spacing-4) var(--spacing-5);
    margin-bottom: var(--spacing-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
}

.filter-bar-controls {
    display: flex;
    gap: var(--spacing-3);
    align-items: center;
    flex-wrap: wrap;
}

.filter-select {
    min-width: 160px;
    width: auto;
}

.filter-input {
    min-width: 200px;
    width: auto;
}

.filter-bar-summary {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
    white-space: nowrap;
}

.table th[data-sortable] {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: var(--spacing-6);
}

.table th[data-sortable]:hover {
    background-color: var(--color-gray-100);
}

.table th[data-sortable]::after {
    content: '';
    position: absolute;
    right: var(--spacing-2);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--font-size-xs);
    color: var(--color-gray-400);
}

.table th[data-sortable].sort-asc::after {
    content: '\2191';
    color: var(--color-primary);
}

.table th[data-sortable].sort-desc::after {
    content: '\2193';
    color: var(--color-primary);
}

.dashboard-layout {
    display: block;
    margin-bottom: var(--spacing-8);
}

.events-sidebar {
    position: sticky;
    top: calc(var(--navbar-height) + var(--spacing-8));
    height: fit-content;
    max-height: calc(100vh - var(--navbar-height) - var(--spacing-16));
}

.events-sidebar .card {
    padding: 0;
}

.events-sidebar .card-header {
    padding: var(--spacing-4);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.events-sidebar .card-title {
    font-size: var(--font-size-base);
    margin-bottom: 0;
}

.select-sm {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
}

.events-list {
    max-height: 600px;
    overflow-y: auto;
}

.event-item {
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--color-gray-200);
    transition: background-color var(--transition-fast);
}

.event-item:last-child {
    border-bottom: none;
}

.event-item:hover {
    background-color: var(--color-gray-50);
}

.event-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-2);
}

.event-domain {
    font-weight: 600;
    color: var(--color-gray-900);
    font-size: var(--font-size-sm);
}

.event-time {
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
}

.event-message {
    font-size: var(--font-size-sm);
    color: var(--color-gray-700);
    margin-bottom: var(--spacing-2);
}

.event-type {
    display: inline-block;
    font-size: var(--font-size-xs);
    color: var(--color-gray-500);
    background-color: var(--color-gray-100);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
}

@media (max-width: 1024px) {
    .events-sidebar {
        position: static;
        max-height: 400px;
    }
}

@media (max-width: 768px) {
    .health-cards {
        grid-template-columns: 1fr;
    }
    
    .stats-overview {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-bar-controls {
        flex-direction: column;
    }

    .filter-select,
    .filter-input {
        width: 100%;
        min-width: unset;
    }
    
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-4);
    }
    
    .page-actions {
        width: 100%;
    }
    
    .page-actions .btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .stats-overview {
        grid-template-columns: 1fr;
    }
    
    .health-cards {
        gap: var(--spacing-3);
    }
    
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .table {
        font-size: var(--font-size-sm);
    }
    
    .table th,
    .table td {
        padding: var(--spacing-2);
    }
}