/* Specific Monitoring Styles */
.container-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.container-item { background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border); border-radius: 12px; padding: 12px; transition: var(--transition); position: relative; }
.container-item:hover { border-color: var(--primary); background: rgba(255, 255, 255, 0.04); }

.container-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.container-name { font-weight: 700; font-size: 0.75rem; color: #fff; }
.container-id { font-size: 0.65rem; color: var(--text-dim); font-family: 'Fira Code', monospace; }

.db-totals-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 20px; }

.job-interaction-card { background: rgba(0, 0, 0, 0.2); border: 1px solid var(--border); border-radius: 12px; padding: 15px; margin-bottom: 12px; border-left: 3px solid var(--primary); transition: var(--transition); }
.job-interaction-card:hover { border-left-width: 6px; }

.job-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 8px; }
.job-payload-box { background: #0d1117; border-radius: 8px; padding: 10px; font-family: 'Fira Code', monospace; font-size: 0.7rem; color: var(--primary); border: 1px solid var(--border); overflow-x: auto; max-height: 100px; }

.section-header-compact { grid-column: 1 / -1; font-weight: 700; font-size: 0.85rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; gap: 10px; margin: 25px 0 15px; }
.section-header-compact div { flex-grow: 1; height: 1px; background: var(--border); }

.dashboard-main-split { display: grid; grid-template-columns: 1.8fr 1.2fr; gap: 30px; }
@media (max-width: 1200px) { .dashboard-main-split { grid-template-columns: 1fr; } }

/* Toast Notifications */
.toast { position: fixed; bottom: 30px; right: 30px; background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(10px); color: #fff; padding: 12px 20px; border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 9999; display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 0.9rem; pointer-events: none; }
.toast.error { border-color: var(--danger); background: rgba(248, 81, 73, 0.1); color: var(--danger); }
.toast i { color: var(--primary); }
.toast.error i { color: var(--danger); }
.animate-slide-in { animation: slideInMon 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.animate-slide-out { animation: slideOutMon 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes slideInMon { from { transform: translateX(110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideOutMon { from { transform: translateX(0); opacity: 1; } to { transform: translateX(110%); opacity: 0; } }

/* Utility Classes for Monitoring Dashboard */
.card-monitoring-header { padding: 20px; border-color: var(--secondary-glow); }
.monitoring-last-updated { margin-left: auto; font-size: 0.7rem; color: var(--text-dim); font-weight: 400; text-transform: uppercase; }
.monitoring-section-label { font-size: 0.8rem; font-weight: 700; color: var(--text-dim); text-transform: uppercase; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
.monitoring-queue-header { font-size: 0.8rem; font-weight: 700; color: var(--text-dim); text-transform: uppercase; margin-bottom: 15px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.monitoring-badge-mini { font-size: 0.6rem; background: var(--bg-accent); padding: 2px 8px; border-radius: 4px; font-family: 'Fira Code'; }
.monitoring-scroll-area { overflow-y: auto; max-height: 800px; }
.monitoring-runtime-card { background: linear-gradient(135deg, var(--bg-card) 0%, #1a202c 100%); }
.monitoring-runtime-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.monitoring-runtime-item { padding: 12px; background: rgba(0,0,0,0.2); border-radius: 10px; border: 1px solid var(--border); }
.monitoring-runtime-label { font-size: 0.6rem; color: var(--text-dim); margin-bottom: 4px; }
.monitoring-runtime-val { font-weight: 700; font-family: 'Fira Code'; font-size: 0.9rem; }

.monitoring-modal-cancel { border-left-color: var(--danger); background: rgba(248, 81, 73, 0.05); }
.monitoring-modal-run { border-left-color: #10b981; background: rgba(16, 185, 129, 0.05); }
.monitoring-btn-cancel { background: var(--danger); border-color: var(--danger); padding: 10px 25px; }
.monitoring-btn-run { background: #10b981; border-color: #10b981; padding: 10px 25px; }

/* Phase 5 queue + worker details */
.monitoring-active-job { margin-top: 12px; border-top: 1px solid rgba(255,255,255,0.05); padding-top: 12px; }
.monitoring-active-job-title { font-size: 0.62rem; color: var(--text-dim); text-transform: uppercase; font-weight: 800; letter-spacing: 0.05em; margin-bottom: 8px; }
.monitoring-active-job-grid { display: grid; gap: 6px; font-size: 0.72rem; font-family: 'Fira Code', monospace; }
.monitoring-muted-key { color: var(--text-dim); }
.monitoring-priority-badge { background: rgba(88,166,255,0.12); color: var(--primary); border: 1px solid rgba(88,166,255,0.2); margin-right: 8px; }
.monitoring-priority-controls { display: flex; align-items: center; gap: 6px; margin-right: 4px; }
.monitoring-priority-value { font-size: 0.75rem; font-family: 'Fira Code', monospace; color: #fff; min-width: 22px; text-align: center; }
.monitoring-priority-btn-down { background: rgba(248, 81, 73, 0.1); border-color: rgba(248, 81, 73, 0.2); color: var(--danger); padding: 8px 10px; }
.monitoring-priority-btn-up { background: rgba(16, 185, 129, 0.15); border-color: rgba(16, 185, 129, 0.2); color: #10b981; padding: 8px 10px; }


/* Sync Telemetry Styles */
#sync-telemetry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 20px; }
.sync-channel-card { 
    background: rgba(255, 255, 255, 0.03); 
    border: 1px solid var(--border); 
    border-radius: 12px; 
    padding: 15px; 
    transition: var(--transition);
    backdrop-filter: blur(5px);
}
.sync-channel-card:hover { border-color: var(--secondary); background: rgba(255, 255, 255, 0.05); }
.sync-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.sync-channel-name { font-weight: 700; font-size: 0.85rem; color: #fff; display: flex; align-items: center; gap: 8px; }
.sync-percentage { font-family: 'Fira Code', monospace; font-size: 1.1rem; font-weight: 700; color: var(--secondary); }

.sync-progress-container { 
    height: 10px; 
    background: rgba(255,255,255,0.05); 
    border-radius: 5px; 
    overflow: hidden; 
    display: flex; 
    margin-bottom: 12px;
    border: 1px solid rgba(255,255,255,0.05);
}
.sync-progress-segment { height: 100%; transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.sync-segment-completed { background: linear-gradient(90deg, #10b981, #34d399); }
.sync-segment-processing { background: var(--secondary); opacity: 0.8; animation: pulse-opacity 2s infinite ease-in-out; }
.sync-segment-failed { background: var(--danger); }
.sync-segment-scheduled { background: rgba(255,255,255,0.1); }

@keyframes pulse-opacity {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.9; }
}

.sync-stats-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sync-stat-item { text-align: center; }
.sync-stat-label { font-size: 0.6rem; color: var(--text-dim); text-transform: uppercase; margin-bottom: 2px; }
.sync-stat-val { font-size: 0.75rem; font-family: 'Fira Code', monospace; font-weight: 600; }

/* Business KPIs */
.sync-business-kpi {
    background: rgba(16, 185, 129, 0.05);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 15px;
    border-left: 3px solid #10b981;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.kpi-main { display: flex; flex-direction: column; }
.kpi-value { font-size: 1.2rem; font-weight: 800; color: #fff; line-height: 1; font-family: 'Fira Code'; }
.kpi-value.fully-synced { color: #10b981; text-shadow: 0 0 10px rgba(16, 185, 129, 0.3); }
.kpi-label { font-size: 0.55rem; color: var(--text-dim); font-weight: 700; margin-top: 4px; }
.kpi-sub { font-size: 0.65rem; color: var(--text-dim); text-align: right; }

/* Assets List */
.sync-assets-list {
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 15px;
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,0.03);
}
.sync-asset-item {
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition);
    margin-bottom: 4px;
}
.sync-asset-item:hover { background: rgba(255,255,255,0.05); }
.sync-asset-info { display: flex; justify-content: space-between; margin-bottom: 4px; }
.sync-asset-id { font-size: 0.65rem; color: #fff; font-weight: 600; font-family: 'Fira Code'; }
.sync-asset-p { font-size: 0.6rem; color: var(--text-dim); }
.sync-asset-bar-bg { height: 3px; background: rgba(255,255,255,0.05); border-radius: 2px; overflow: hidden; }
.sync-asset-bar-fill { height: 100%; background: var(--primary); transition: width 0.4s ease; }

/* Account Details & Github Chart */
.sync-details-container {
    margin: 15px -15px -15px -15px;
    padding: 20px 15px;
    background: rgba(0,0,0,0.3);
    border-top: 1px solid var(--border);
    animation: fadeIn 0.3s ease;
}
.details-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.details-header span { font-size: 0.75rem; font-weight: 800; color: var(--secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.btn-close-details { background: none; border: none; color: var(--text-dim); font-size: 1.2rem; cursor: pointer; padding: 0 5px; }
.btn-close-details:hover { color: #fff; }

.github-chart { padding: 10px 0; }
.chart-months { display: flex; justify-content: space-between; margin-bottom: 5px; padding-left: 30px; font-size: 0.6rem; color: var(--text-dim); }
.chart-grid { display: flex; gap: 8px; }
.chart-days { display: flex; flex-direction: column; justify-content: space-between; padding: 10px 0; height: 85px; font-size: 0.55rem; color: var(--text-dim); }
.chart-cells { 
    display: grid; 
    grid-template-rows: repeat(7, 10px); 
    grid-auto-flow: column; 
    gap: 3px; 
}
.chart-cell { width: 10px; height: 10px; border-radius: 2px; background: #161b22; }
.chart-cell.level-0 { background: #161b22; }
.chart-cell.level-1 { background: #0e4429; }
.chart-cell.level-2 { background: #006d32; }
.chart-cell.level-3 { background: #26a641; }
.chart-cell.level-4 { background: #39d353; box-shadow: 0 0 5px rgba(57, 211, 83, 0.3); }
.chart-cell.level-future { opacity: 0.1; }

.chart-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; font-size: 0.6rem; color: var(--text-dim); }
.chart-legend { display: flex; align-items: center; gap: 4px; }

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