/* ==========================================================================
   PICOQUANT - REPORT MANAGER COMPONENT STYLES (FULL CLEAN GLASS THEME)
   ========================================================================== */

/* 1. WORKSPACE RESET & CONTAINER */
#view-report.workspace {
    padding-top: 0px !important;
    margin-top: 0px !important;
    gap: 0px !important;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}

/* 2. KHỐI KPI SUMMARY 3 CARD ĐỘC LẬP (CHUẨN WALLET LIVE) */
.sticky-wallet-panel {
    position: sticky !important;
    top: 0px !important;
    z-index: 950 !important;
    background: var(--bg-panel, #12161c) !important;
    border: 1px solid var(--border-color, #2b3139) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
    margin: 1px 4px 6px 4px !important;
    overflow: visible !important;
}

.report-risk-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 8px 12px 12px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.report-risk-grid .live-risk-card-modern {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid var(--border-color, #2b3139) !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    transition: background-color 0.2s, border-color 0.2s;
    user-select: none;
}

.report-risk-grid .live-risk-card-modern:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: #3b424e !important;
}

.report-risk-grid .live-risk-card-modern .label {
    color: var(--text-muted, #787b86) !important;
    font-size: 9.5px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
}

.report-risk-grid .live-risk-card-modern .value {
    font-size: 16px !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--text-primary, #ffffff) !important;
}

.report-risk-grid .live-risk-card-modern .value.yellow { color: var(--color-yellow, #f0b90b) !important; }
.report-risk-grid .live-risk-card-modern .value.green { color: var(--color-green, #0ecb81) !important; }
.report-risk-grid .live-risk-card-modern .value.red { color: var(--color-red, #f6465d) !important; }

/* 3. THANH FILTER TOOLBAR 1 HÀNG NGANG (CHUẨN QUICK DEPLOY LIVE) */
.quick-deploy-panel {
    padding: 6px 12px !important;
    background: var(--bg-panel, #12161c) !important;
    border: 1px solid var(--border-color, #2b3139) !important;
    border-radius: 8px !important;
    margin: 0px 4px 8px 4px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    box-sizing: border-box !important;
}

.quick-deploy-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.live-qd-cluster {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.qd-group {
    position: relative !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
}

.qd-input, .qd-select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 32px !important;
    background: #181c24 !important;
    color: var(--text-primary, #d1d4dc) !important;
    border: 1px solid var(--border-color, #2b3139) !important;
    border-radius: 4px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s, background 0.2s !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

.qd-input:focus, .qd-select:focus {
    border-color: var(--color-yellow, #f0b90b) !important;
    background: #1c222c !important;
}

.date-input {
    color-scheme: dark !important;
    font-size: 11px !important;
    cursor: pointer;
}

/* NÚT BẤM ACTION GIAO DIỆN GLASS */
.live-qd-btn-deploy {
    height: 32px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--border-color, #2b3139) !important;
    color: var(--color-green, #0ecb81) !important;
    padding: 0 14px !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    width: auto !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
}

.live-qd-btn-deploy:hover {
    background: var(--color-green, #0ecb81) !important;
    color: #000000 !important;
    box-shadow: 0 0 14px rgba(14, 203, 129, 0.4) !important;
}

.live-qd-btn-deploy.btn-pdf {
    color: #38bdf8 !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
    background: rgba(56, 189, 248, 0.06) !important;
}

.live-qd-btn-deploy.btn-pdf:hover {
    background: #38bdf8 !important;
    color: #000000 !important;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.4) !important;
}

/* 4. KHUNG CHỨA TOÀN BỘ CỦA MỖI BLOCK LOG */
.panel-matrix {
    margin: 0px 4px 8px 4px !important;
    border: 1px solid var(--border-color, #2b3139) !important;
    border-radius: 8px !important;
}

.sticky-panel-header {
    background: var(--bg-panel, #12161c) !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 10px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--text-primary, #ffffff) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.funding-card-block {
    background: var(--bg-panel, #12161c) !important;
    border: 1px solid var(--border-color, #2b3139) !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: background-color 0.2s, border-color 0.2s;
}

.funding-card-block:hover {
    background: #141922 !important;
    border-color: #3b424e !important;
}

/* 5. HEADER THÔNG TIN BLOCK LOG */
.funding-card-header {
    border-bottom: 1px dashed var(--border-color, rgba(255, 255, 255, 0.1)) !important;
    padding-bottom: 8px !important;
    margin-bottom: 10px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.funding-card-header .fch-time {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--color-yellow, #f0b90b) !important;
}

.funding-card-header .fch-exchange {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.12) !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.funding-card-header .fch-symbol {
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: var(--text-primary, #ffffff) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    border: 1px solid var(--border-color, #2b3139) !important;
}

.fch-exchange-tag {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.12) !important;
    padding: 1px 5px !important;
    border-radius: 3px !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    margin-right: 5px !important;
    text-transform: uppercase !important;
    display: inline-block !important;
}

.funding-card-header .fch-leverage {
    font-size: 10px !important;
    font-weight: 700 !important;
    background: #1c2026 !important;
    color: var(--color-yellow, #f0b90b) !important;
    border: 1px solid var(--border-color, #2b3139) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

.funding-card-header .fch-info-item {
    font-size: 11px !important;
    color: var(--text-muted, #787b86) !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
}

.funding-card-header .fch-info-item strong {
    font-size: 11.5px !important;
    color: var(--text-primary, #ffffff) !important;
}

/* 6. GRID 2 CỘT: TRÁI (LOGS) - PHẢI (RADAR)
   Dùng fr + minmax(0,…) — KHÔNG dùng 60%+40%+gap (tràn 100% → cột log bị ép ~0px → chữ dọc). */
.funding-card-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}



/* 7. XÓA TRIỆT ĐỂ VIỀN DỌC VÀNG / PSEUDO-ELEMENTS TRÊN LOG PANEL */
.fc-left-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.fc-left-panel::before,
.fc-left-panel::after {
    display: none !important;
    content: none !important;
}

/* 8. THẺ LOG STEP ĐỒNG BỘ HIỆU ỨNG KÍNH TỐI (DARK GLASS) */
.fc-step-row {
    background: rgba(18, 22, 28, 0.75) !important;
    border: 1px solid var(--border-color, #2b3139) !important;
    border-left: 1px solid var(--border-color, #2b3139) !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: background-color 0.2s, border-color 0.2s;
}

.fc-step-row::before,
.fc-step-row::after {
    display: none !important;
    content: none !important;
}

.fc-step-row:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: #3b424e !important;
}

.fc-step-row .log-reason {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.fc-step-row .reason-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    color: var(--text-primary, #e2e8f0) !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    white-space: normal !important;
}

/* 9. BADGE TRẠNG THÁI CỐ ĐỊNH CHỮ NẰM NGANG */
.fc-step-row .badge, .log-grid .badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    width: auto !important;
    min-width: 60px !important;
    text-align: center !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

.badge.success {
    background: rgba(14, 203, 129, 0.15) !important;
    color: var(--color-green, #0ecb81) !important;
    border: 1px solid rgba(14, 203, 129, 0.3) !important;
}

.badge.failed {
    background: rgba(255, 101, 117, 0.15) !important;
    color: var(--color-red, #f6465d) !important;
    border: 1px solid rgba(255, 101, 117, 0.3) !important;
}

.badge.skipped {
    background: rgba(240, 185, 11, 0.15) !important;
    color: var(--color-yellow, #f0b90b) !important;
    border: 1px solid rgba(240, 185, 11, 0.3) !important;
}

/* 10. CỘT PHẢI: RADAR CHART VÀ HUD BẢNG MA TRẬN */
.fc-right-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.fc-panel-title {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: var(--color-yellow, #f0b90b) !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

.radar-chart-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 240px !important;
    background: #0d1117 !important;
    border: 1px solid var(--border-color, #2b3139) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

.radar-chart-container canvas,
.radar-chart-container > div {
    max-width: 100% !important;
}

.radar-hud-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    padding: 6px 8px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-top: 1px solid var(--border-color, #2b3139) !important;
    font-size: 11px !important;
    box-sizing: border-box !important;
}

.radar-pair-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 3px 6px !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.2) !important;
    font-variant-numeric: tabular-nums !important;
}

.radar-pair-row:nth-child(odd) {
    background: rgba(255, 255, 255, 0.015) !important;
}

.radar-mp-row {
    border-top: 1px dashed rgba(255, 255, 255, 0.1) !important;
    margin-top: 2px !important;
    padding-top: 4px !important;
}

.radar-pair-row .pair-title {
    font-weight: 800 !important;
    color: var(--color-yellow, #f0b90b) !important;
    font-size: 10px !important;
    width: 44px !important;
    flex-shrink: 0 !important;
    letter-spacing: 0.5px !important;
}

.radar-pair-row .pair-top {
    color: var(--color-red, #f6465d) !important;
    font-size: 11px !important;
    flex: 1 !important;
    text-align: left !important;
    padding-left: 6px !important;
    font-weight: 600 !important;
}

.radar-pair-row .pair-top small {
    font-size: 9.5px !important;
    opacity: 0.8 !important;
    font-weight: 400 !important;
}

.radar-pair-row .pair-bot {
    color: var(--color-green, #0ecb81) !important;
    font-size: 11px !important;
    flex: 1 !important;
    text-align: right !important;
    font-weight: 600 !important;
}

.radar-pair-row .pair-bot small {
    font-size: 9.5px !important;
    opacity: 0.8 !important;
    font-weight: 400 !important;
}

.radar-pair-row .pair-mp {
    color: var(--color-yellow, #f0b90b) !important;
    font-size: 11px !important;
    flex: 1 !important;
    text-align: left !important;
    padding-left: 6px !important;
    font-weight: 700 !important;
}

.radar-pair-row .pair-truot {
    color: #00f2fe !important;
    font-size: 11px !important;
    flex: 1 !important;
    text-align: right !important;
    font-weight: 700 !important;
}

.radar-pair-row .pair-truot small {
    font-size: 9.5px !important;
    opacity: 0.8 !important;
    font-weight: 400 !important;
}

.radar-empty-placeholder {
    display: flex !important;
    height: 100% !important;
    min-height: 220px !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px dashed var(--border-color, #2b3139) !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.01) !important;
    color: var(--text-muted, #787b86) !important;
    font-size: 11px !important;
    font-style: italic !important;
}

/* 11. STANDALONE LOG FALLBACK (DÒNG KẺ BẢNG GỌN GÀNG) */
.log-grid {
    display: grid !important;
    grid-template-columns: minmax(90px, 140px) minmax(80px, 120px) minmax(70px, 120px) minmax(60px, 80px) minmax(60px, 80px) minmax(70px, 90px) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--bg-panel, #12161c) !important;
    border: 1px solid var(--border-color, #2b3139) !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    margin-bottom: 6px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.log-grid .grid-cell {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}

.log-grid .log-reason {
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

.log-grid:hover {
    background: #14181f !important;
}

/* 12. RESPONSIVE BREAKPOINT CHO MOBILE (MAX-WIDTH 620PX) */
@media (max-width: 620px) {
    .quick-deploy-container {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .live-qd-cluster {
        width: 100% !important;
    }
    .report-risk-grid {
        grid-template-columns: 1fr !important;
    }
    .funding-card-body {
        display: flex !important;
        flex-direction: column-reverse !important;
        flex-wrap: nowrap !important;
        grid-template-columns: none !important;
        gap: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .fc-right-panel {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        box-sizing: border-box !important;
    }
    .fc-left-panel {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        box-sizing: border-box !important;
    }
}