.mix-data-page { width: 100%; }
.mix-data-page > .dashboard-page { max-width: none; width: 100%; }
.mix-data-page .metric-grid { gap: .75rem; }
.mix-data-page .metric-grid article { border-left: 4px solid #07805c; min-height: 6rem; padding: .85rem 1rem; }
.mix-data-page .metric-grid strong { color: #0c2038; font-size: 1.45rem; }
.mix-data-page .panel { padding: 1rem; }
.mix-data-page .inline-filter-bar input { min-width: 19rem; }
.mix-table-wrap { border: 1px solid #d8e1ea; border-radius: 8px; max-height: calc(100vh - 23rem); min-height: 22rem; overflow: auto; }
.mix-data-table { min-width: 980px; }
.exception-detail-table { min-width: 3200px; }
.risk-management-table { min-width: 8500px; }
.mix-data-table th { background: #f5f8fb; top: 0; }
.mix-data-table td { max-width: 24rem; overflow: hidden; text-overflow: ellipsis; }
.mix-data-table .id-cell { color: #52697d; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .76rem; }
.data-empty, .data-error { align-items: center; border: 1px dashed #c7d4df; border-radius: 8px; color: #617086; display: flex; justify-content: center; min-height: 16rem; padding: 2rem; text-align: center; }
.data-error { background: #fff1f1; border-color: #e7b4b4; color: #9f2820; }
.data-note { color: #617086; font-size: .78rem; padding-top: .7rem; }
.event-panel-title { align-items: end; }
.event-controls { align-items: end; display: flex; flex-wrap: wrap; gap: .55rem; }
.event-controls label { display: grid; gap: .3rem; }
.event-controls span { color: #657384; font-size: .68rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.event-controls input, .event-controls select, .event-controls button, .event-pager button { border: 1px solid #bdcad8; border-radius: 7px; min-height: 2.55rem; padding: .48rem .7rem; }
.event-controls button, .event-pager button { background: #123f60; color: #fff; cursor: pointer; font-weight: 800; }
.event-pager { align-items: center; border-top: 1px solid #d8e1ea; display: flex; justify-content: space-between; margin-top: .8rem; padding-top: .8rem; }
.event-pager > span { color: #617086; font-size: .82rem; font-weight: 800; }
.event-pager > div { display: flex; gap: .5rem; }
.event-pager button.secondary-action { background: #fff; color: #123f60; }
.event-pager button:disabled, .event-controls button:disabled { cursor: wait; opacity: .55; }

@media (max-width: 760px) {
    .mix-data-page .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mix-data-page .panel-title, .event-panel-title { align-items: stretch; flex-direction: column; }
    .mix-data-page .inline-filter-bar, .event-controls { align-items: stretch; display: grid; grid-template-columns: 1fr; width: 100%; }
    .mix-data-page .inline-filter-bar input { min-width: 0; width: 100%; }
    .mix-table-wrap { border: 0; max-height: none; min-height: 0; overflow: visible; }
    .mix-data-table { min-width: 0; }
    .mix-data-table thead { display: none; }
    .mix-data-table, .mix-data-table tbody, .mix-data-table tr, .mix-data-table td { display: block; width: 100%; }
    .mix-data-table tr { border: 1px solid #d8e1ea; border-radius: 8px; margin-bottom: .75rem; overflow: hidden; }
    .mix-data-table td { align-items: baseline; border-right: 0; display: grid; gap: .75rem; grid-template-columns: 8rem minmax(0, 1fr); max-width: none; white-space: normal; }
    .mix-data-table td::before { color: #657384; content: attr(data-label); font-size: .68rem; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; }
    .event-pager { align-items: stretch; flex-direction: column; gap: .7rem; }
    .event-pager > div { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .mix-data-page .metric-grid { grid-template-columns: 1fr; }
    .mix-data-table td { grid-template-columns: 6.5rem minmax(0, 1fr); }
}