/* 📂 LOCATION: collector/ui/css/components.css */

/* 🏢 [1층 메인 관제탑 헤더] */
.main-header {
    height: 52px !important;
    padding: 0 20px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

.status-capsule-box, 
.segmented-control-group, 
.main-header .action-btn {
    height: 32px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
}

.status-capsule-box {
    gap: 8px !important;
    background: #f8fafc !important;
    padding: 0 12px !important;
    border-radius: 20px !important;
    border: 1px solid #e2e8f0 !important;
}

.engine-indicator {
    font-size: 11px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}
.engine-indicator.idle { color: #dc2626 !important; }
.engine-indicator.active { color: #059669 !important; animation: ui-pulse 1.5s infinite !important; }
.engine-indicator.stopping { color: #d97706 !important; animation: ui-pulse 1.0s infinite !important; }

.queue-badge { font-size: 11px !important; font-weight: 800 !important; color: #64748b !important; white-space: nowrap !important; }

.segmented-control-group {
    background: #f1f5f9 !important;
    padding: 2px !important;
    border-radius: 20px !important;
    border: 1px solid #cbd5e1 !important;
    gap: 2px !important;
}

.segmented-btn {
    border: none !important;
    background: transparent !important;
    height: 100% !important;
    padding: 0 14px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #475569 !important;
    cursor: pointer !important;
    border-radius: 16px !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
}
.segmented-btn.run:hover { background: #16a34a !important; color: #ffffff !important; }
.segmented-btn.stop:hover { background: #cbd5e1 !important; color: #0f172a !important; }
.segmented-btn.clear:hover { background: #ffe4e6 !important; color: #e11d48 !important; }

/* 🛠️ [2층 툴바 및 서브 네비게이션] */
.inline-nav-zone {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 8px !important;
    margin-bottom: 10px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

.toolbar-group-left, .toolbar-group-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.main-nav-tabs {
    display: flex !important;
    background: #f1f5f9 !important;
    padding: 3px !important;
    border-radius: 8px !important;
    gap: 2px !important;
    border: 1px solid #e2e8f0 !important;
    flex-shrink: 0 !important;
}

.nav-tab-btn {
    background: transparent !important;
    border: none !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    transition: all 0.15s ease !important;
    outline: none !important;
    white-space: nowrap !important;
}
.nav-tab-btn:hover { color: #0f172a !important; }
.nav-tab-btn.active {
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    font-weight: 800 !important;
}

.action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    padding: 6px 12px !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
}
.action-btn:hover { background-color: #f1f5f9 !important; }
.main-header .action-btn { padding: 0 12px !important; }

/* ⚙️ [드롭다운 메뉴] */
.dropdown-menu-wrapper {
    position: relative !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

.dropdown-content-list {
    display: none !important;
    position: absolute !important;
    right: 0 !important;
    top: calc(100% + 4px) !important;
    background-color: #ffffff !important;
    min-width: 180px !important;
    box-shadow: 0 10px 25px -3px rgba(0,0,0,0.15) !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    z-index: 9999 !important;
    padding: 6px 0 !important;
}

.dropdown-menu-wrapper:hover .dropdown-content-list {
    display: block !important;
}

.dropdown-content-list button {
    color: #334155 !important;
    padding: 8px 14px !important;
    text-align: left !important;
    background: none !important;
    border: none !important;
    width: 100% !important;
    font-size: 11px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    display: block !important;
    white-space: nowrap !important;
}
.dropdown-content-list button:hover {
    background-color: #eff6ff !important;
    color: #2563eb !important;
}

/* 📊 [메인 관제 테이블] */
.table-container.full-width {
    width: 100% !important;
    height: calc(100vh - 140px) !important;
    margin-bottom: 0px !important;
    overflow-y: auto !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background: white !important;
}

/* 🎯 [성능 최적화]: contain: content 제거로 스크롤 브라우저 렌더링 충돌 완전 해결 */
.quant-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 12px !important;
    text-align: left !important;
    color: #0f172a !important;
}

.quant-table th {
    background-color: #f1f5f9 !important;
    padding: 8px 12px !important;
    font-weight: 800 !important;
    color: #64748b !important;
    border-bottom: 1px solid #cbd5e1 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    white-space: nowrap !important;
}

.quant-table td {
    padding: 6px 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle !important;
}

.num-col { text-align: right !important; font-family: monospace !important; font-weight: bold !important; font-size: 12px !important; }

.status-badge { padding: 3px 8px !important; border-radius: 12px !important; font-size: 11px !important; font-weight: bold !important; display: inline-block !important; white-space: nowrap !important; }
.status-badge.init { background-color: #f1f5f9 !important; color: #475569 !important; }
.status-badge.queued { background-color: #fef3c7 !important; color: #d97706 !important; }
.status-badge.success { background-color: #e6f4ea !important; color: #137333 !important; }
.status-badge.syncing { background-color: #fff7ed !important; color: #c2410c !important; animation: ui-pulse 1.2s infinite !important; }
.status-badge.failed { background-color: #fce8e6 !important; color: #c5221f !important; }
.status-badge.gap { background-color: #fee2e2 !important; color: #991b1b !important; }

.row-btn-group {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    width: auto !important;
}

.row-btn {
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
}
.row-btn:hover { background-color: #f1f5f9 !important; }
.row-btn.sync { color: #2563eb !important; border-color: #bfdbfe !important; }
.row-btn.clear { color: #d97706 !important; border-color: #fef3c7 !important; }
.row-btn.dereg { color: #dc2626 !important; border-color: #fce8e6 !important; }

@keyframes ui-pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }

/* 🛡️ [모달 헤더 및 레이아웃] */
.modal-overlay {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important;
    background: rgba(15, 23, 42, 0.65) !important;
    backdrop-filter: blur(3px) !important;
    align-items: center !important; 
    justify-content: center !important;
}

div#report-modal { z-index: 10000 !important; }
div#queue-modal { z-index: 10010 !important; }
div#import-modal { z-index: 10020 !important; }

.modal-content {
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3) !important;
    border: 1px solid #cbd5e1 !important;
    overflow: hidden !important;
    opacity: 1 !important;
}

.modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    margin-bottom: 12px !important;
}

.modal-close-x {
    background: none !important;
    border: none !important;
    font-size: 20px !important;
    font-weight: bold !important;
    color: #64748b !important;
    cursor: pointer !important;
    padding: 0 4px !important;
    line-height: 1 !important;
}
.modal-close-x:hover { color: #0f172a !important; }

/* 📋 대기열 모달 */
div#queue-modal.modal-overlay .modal-content {
    width: 85vw !important;
    height: 85vh !important;
    max-width: 1400px !important;
    padding: 20px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

/* 📊 리포트 모달 */
div#report-modal.modal-overlay .modal-content {
    width: 92vw !important;
    height: 88vh !important;
    max-width: 1650px !important;
    padding: 20px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

div#report-modal .report-grid-layout {
    display: grid !important;
    grid-template-columns: 460px 1fr !important;
    gap: 20px !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.report-list-table-wrapper {
    height: 100% !important;
    overflow-y: auto !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
}

#report-detail-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.report-row { cursor: pointer; transition: background 0.15s ease; }
.report-row:hover { background: #f1f5f9; }
.report-row.selected-row { background: #eff6ff !important; font-weight: bold; }

.clickable-error-log {
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
}
.clickable-error-log:hover {
    background-color: #fee2e2 !important;
}

/* 📥 신규 스캔 모달 */
div#import-modal.modal-overlay .modal-content {
    width: 920px !important;
    height: 540px !important;
    padding: 20px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

#modal-zone-us-yahoo { flex: 1 !important; display: flex !important; flex-direction: column !important; min-height: 0 !important; }
#modal-zone-us-yahoo .table-container { flex: 1 !important; height: auto !important; min-height: 0 !important; overflow-y: auto !important; border: 1px solid #cbd5e1 !important; border-radius: 6px !important; }

.modal-tab-wrapper { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid #e2e8f0; padding-bottom: 6px; }
.modal-tab-btn { padding: 6px 14px; font-size: 12px; font-weight: bold; color: #64748b; background: transparent; border: none; border-radius: 6px; cursor: pointer; }
.modal-tab-btn.active { background: #eff6ff; color: #2563eb; }

.queue-progress-wrapper { background: #e2e8f0; border-radius: 8px; height: 10px; width: 100%; overflow: hidden; margin: 6px 0 0 0; position: relative; }
.queue-progress-fill { background: linear-gradient(90deg, #3b82f6, #10b981); height: 100%; width: 0%; transition: width 0.4s ease; }