/* css/monitor-panel.css */
/* Styles for the enhanced System Process Monitor panel */

/* Main clickable panel */
#payoutTerminalPanel {
    padding: 0; /* Remove default padding to allow header to be full-width */
    display: flex; /* Use flexbox to structure header and body */
    flex-direction: column;
}

.monitor-header {
    background: linear-gradient(135deg, rgba(0, 26, 0, 0.7) 0%, rgba(0, 51, 0, 0.5) 100%);
    padding: 8px 15px; /* Reduced padding for smaller panel */
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 1rem; /* Adjusted from 1.1rem */
    font-weight: 700;
    text-align: center;
    color: var(--text-bright);
    text-shadow: var(--shadow-glow);
    flex-shrink: 0; /* Prevent header from shrinking */
}

.status-indicator-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-green);
    animation: pulse 2s infinite;
    box-shadow: 0 0 8px var(--primary-green-glow);
}

.monitor-body {
    flex-grow: 1; /* Allow body to fill remaining space */
    padding: 10px;
    overflow-y: auto; /* Enable scrolling if content overflows */
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 11px; /* Match new design's font size */
    line-height: 1.4;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-green) rgba(0, 20, 0, 0.5);
}
.monitor-body::-webkit-scrollbar { width: 6px; }
.monitor-body::-webkit-scrollbar-track { background: rgba(0, 20, 0, 0.3); }
.monitor-body::-webkit-scrollbar-thumb { background: var(--primary-green); border-radius: 3px; }


.log-row-item {
    padding: 6px 4px;
    margin-bottom: 8px;
    border-left: 2px solid transparent;
    opacity: 0;
    animation: fadeInRow 0.5s ease-out forwards;
}
@keyframes fadeInRow { to { opacity: 1; } }

.log-row-main {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 11px;
}

.log-row-main .user {
    color: #0099ff;
    font-weight: 500;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.log-row-main .status {
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    border: 1px solid;
    text-align: center;
}
.log-row-main .status.processed { background: rgba(0, 255, 65, 0.1); color: #00ff41; border-color: #00ff41; }
.log-row-main .status.manual { background: rgba(255, 170, 0, 0.1); color: #ffaa00; border-color: #ffaa00; }
.log-row-main .status.error { background: rgba(255, 51, 51, 0.1); color: #ff3333; border-color: #ff3333; }


.log-row-details {
    font-size: 10px;
    color: #888;
    padding-left: 5px;
    margin-top: 5px;
    line-height: 1.5;
    border-left: 1px dotted #00ff4130;
}
.log-row-details .highlight-green { color: #00ff41; font-weight: 500; }
.log-row-details .highlight-orange { color: #ffaa00; font-weight: 500; }
.log-row-details .highlight-blue { color: #0099ff; font-weight: 500; }