/* om_style.css — O&M Panel Styles */

/* Console Tabs */
.console-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border, #e2e8f0);
    padding-bottom: 0;
}
.console-tab {
    padding: 10px 20px;
    border: none;
    background: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary, #5e6c63);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.15s;
}
.console-tab:hover { color: var(--text-primary, #191c1e); }
.console-tab.active {
    color: var(--accent-cyan, #00d166);
    border-bottom-color: var(--accent-cyan, #00d166);
    font-weight: 600;
}
.console-tab-content { display: none; }
.console-tab-content.active { display: block; }

/* O&M Sub-Tabs */
.om-sub-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.om-tab {
    padding: 7px 14px;
    border-radius: 20px;
    border: 1px solid var(--border, #e2e8f0);
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, #5e6c63);
    cursor: pointer;
    transition: all 0.15s;
}
.om-tab:hover { background: #f7f9fb; color: var(--text-primary); }
.om-tab.active {
    background: rgba(0, 209, 102, 0.1);
    color: #006d32;
    border-color: rgba(0, 209, 102, 0.3);
    font-weight: 600;
}
.om-panel { display: none; }
.om-panel.active { display: block; }

/* Alert Banner */
.om-alert-banner {
    margin-bottom: 16px;
}
.om-alert-item {
    padding: 10px 16px;
    border-radius: 10px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}
.om-alert-item.critical {
    background: rgba(239, 68, 68, 0.08);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.2);
}
.om-alert-item.warning {
    background: rgba(245, 158, 11, 0.08);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Node Status Cards */
.om-node-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.om-node-card {
    padding: 20px;
    border-radius: 14px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #e2e8f0);
}
.om-node-card h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.om-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.om-status-dot.online { background: #10b981; }
.om-status-dot.offline { background: #ef4444; }
.om-status-dot.unknown { background: #9ca3af; }

.om-disk-bar {
    height: 6px;
    border-radius: 3px;
    background: #e5e7eb;
    margin-top: 6px;
    overflow: hidden;
}
.om-disk-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}
.om-disk-bar-fill.ok { background: #10b981; }
.om-disk-bar-fill.warn { background: #f59e0b; }
.om-disk-bar-fill.crit { background: #ef4444; }

/* Process Cards */
.om-proc-group {
    margin-bottom: 16px;
}
.om-proc-group h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.om-proc-card {
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #e2e8f0);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.om-proc-card .proc-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.om-proc-badge {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}
.om-proc-badge.capture { background: rgba(0, 209, 102, 0.12); color: #006d32; }
.om-proc-badge.sync { background: rgba(46, 91, 255, 0.12); color: #1d4ed8; }
.om-proc-badge.enrich { background: rgba(139, 92, 246, 0.12); color: #5b21b6; }
.om-proc-badge.snapshot { background: rgba(245, 158, 11, 0.12); color: #92400e; }
.om-proc-badge.api { background: rgba(107, 114, 128, 0.12); color: #374151; }
.om-proc-badge.other { background: rgba(156, 163, 175, 0.12); color: #6b7280; }

.om-proc-meta {
    font-size: 12px;
    color: var(--text-secondary);
}
.om-proc-pid {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-secondary);
}

/* Guild Table */
.om-guild-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.om-guild-table th {
    text-align: left;
    padding: 8px 10px;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border);
    font-weight: 600;
}
.om-guild-table td {
    padding: 10px;
    border-bottom: 1px solid #f2f4f6;
}

/* Log Viewer */
.om-log-viewer {
    background: #1a1a2e;
    color: #e0e0e0;
    border-radius: 10px;
    padding: 16px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    line-height: 1.6;
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Actions Panel */
.om-action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.om-action-btn {
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
}
.om-action-btn:hover { background: #f7f9fb; border-color: var(--accent-cyan); }
.om-action-btn.danger { border-color: rgba(239, 68, 68, 0.3); }
.om-action-btn.danger:hover { background: rgba(239, 68, 68, 0.04); }

/* Freshness indicator */
.om-freshness {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
}
.om-freshness.stale { color: #f59e0b; }

/* Toast notifications */
.om-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    z-index: 9999;
    animation: om-toast-in 0.3s ease;
}
.om-toast.success { background: #10b981; color: #fff; }
.om-toast.error { background: #ef4444; color: #fff; }
@keyframes om-toast-in {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}