.system-logs-page { display: grid; gap: 20px; }
.system-logs-page .page-heading { margin-bottom: 0; }
.logs-filters { display: flex; align-items: end; flex-wrap: wrap; gap: 16px; padding: 20px; }
.logs-filters > label { display: flex; flex-direction: column; gap: 8px; color: #596f8b; font-size: 12px; min-width: 140px; }
.logs-filters input, .logs-filters select { width: 100%; min-width: 0; height: 40px; }
.logs-filters .logs-query { flex: 1; min-width: 180px; }
.logs-date-presets, .logs-filter-actions { display: flex; gap: 8px; }
.logs-filters .btn { height: 40px; white-space: nowrap; }
.logs-date-presets .active { color: #2166cf; background: #eef5ff; border-color: #aac8f2; }
#logs-filter-error { flex-basis: 100%; margin: 0; }
#logs-filter-error:empty { display: none; }
.logs-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.logs-stat { padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; border-top: 3px solid #3b82f6; }
.logs-stat > span { color: #596f8b; font-size: 14px; }
.logs-stat > strong { color: #244d82; font-size: 30px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.logs-stat-green { border-top-color: #2f9c76; }.logs-stat-red { border-top-color: #dc6570; }.logs-stat-yellow { border-top-color: #d5a332; }
.logs-charts { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(0,1fr) minmax(0,.8fr); gap: 20px; }
.logs-charts > section { padding: 20px; min-width: 0; }
.system-logs-page h2 { font-size: 16px; margin: 0 0 18px; color: #244d82; }
.logs-trend-card .section-heading { gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.logs-trend-card .section-heading h2 { margin: 0; }
.logs-trend-card .section-heading > span { font-size: 12px; }
.logs-trend-scroll { overflow-x: auto; max-width: 100%; }
.logs-trend { display: block; width: 100%; height: 220px; }
.logs-trend text { fill: #596f8b; font-size: 11px; }
.logs-chart-axis { stroke: #dce5f1; stroke-width: 1; }
.logs-fill-success { fill: #5088df; background: #5088df; }
.logs-fill-failure { fill: #d9616e; background: #d9616e; }
.logs-fill-pending { fill: #d5a332; background: #d5a332; }
.logs-chart-legend { display: flex; gap: 20px; justify-content: center; margin-top: 12px; font-size: 12px; color: #596f8b; }
.logs-chart-legend > span { display: inline-flex; gap: 7px; align-items: center; }
.logs-chart-legend i { width: 9px; height: 9px; border-radius: 2px; }
.logs-chart-empty { min-height: 245px; display: grid; place-items: center; color: #74869e; }
.logs-distribution { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.logs-distribution li > div:first-child { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: #526984; margin-bottom: 7px; }
.logs-distribution strong { color: #244d82; font-variant-numeric: tabular-nums; }
.logs-meter { height: 6px; border-radius: 4px; overflow: hidden; background: #eef3f9; }
.logs-meter > span { display: block; height: 100%; background: #5088df; }
.logs-meter > .logs-fill-failure { background: #d9616e; }.logs-meter > .logs-fill-pending { background: #d5a332; }
.logs-results-card .logs-distribution { padding-top: 8px; gap: 35px; }
.logs-list { min-width: 0; overflow: hidden; }
.logs-list > .section-heading { padding: 20px 22px 0; margin-bottom: 16px; }
.logs-list > .section-heading h2 { margin: 0; }
.logs-table-wrap { overflow-x: auto; }
.logs-table { width: 100%; min-width: 940px; border-collapse: collapse; font-size: 13px; }
.logs-table th { text-align: left; font-weight: 500; color: #596f8b; background: #f5f8fc; }
.logs-table > thead > tr > th, .logs-table > tbody > tr > td { padding: 15px 18px; border-top: 1px solid #e4ebf4; vertical-align: top; }
.logs-table time { display: block; width: 142px; color: #596f8b; }
.logs-table strong { color: #244d82; font-weight: 500; }
.logs-table .log-summary { min-width: 220px; max-width: 520px; overflow-wrap: anywhere; line-height: 1.65; }
.log-result { display: inline-block; padding: 3px 9px; border-radius: 5px; white-space: nowrap; font-size: 12px; }
.log-result-success { background: #e9f5ef; color: #257654; }.log-result-failure { background: #fceef0; color: #a13c48; }.log-result-pending { background: #fff5df; color: #8c6514; }
.logs-table .text-button { white-space: nowrap; }
.logs-pager { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 16px; padding: 18px 22px; border-top: 1px solid #e4ebf4; font-size: 13px; color: #596f8b; }
.logs-pager > label { display: inline-flex; align-items: center; gap: 8px; }
.logs-pager select { width: 75px; height: 36px; }
.logs-empty { text-align: center; padding: 45px !important; color: #74869e; }
.log-detail-row > td { padding: 0 !important; }
.log-expanded { padding: 20px 24px; background: #f8fbff; }
.log-detail-meta { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 30px; margin: 0 0 20px; }
.log-detail-meta dt { font-size: 12px; color: #6f819a; margin-bottom: 6px; }
.log-detail-meta dd { margin: 0; color: #365371; overflow-wrap: anywhere; }
.log-changes { width: 100%; table-layout: fixed; border-collapse: collapse; }
.log-changes th:first-child { width: 20%; }
.log-changes td,.log-changes th { text-align: left; vertical-align: top; padding: 12px; border: 1px solid #e0e8f2; overflow-wrap: anywhere; }
.log-changes pre,.log-metadata pre { margin: 0; font-size: 12px; font-family: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.log-metadata { margin-top: 16px; }.log-metadata summary { cursor: pointer; color: #596f8b; margin-bottom: 10px; }
.logs-detail-loading, .log-detail-row .error-box, .log-detail-row .btn { margin: 18px 24px; }
.logs-load-error { padding: 28px; }
@media(max-width:1100px) { .logs-charts { grid-template-columns: repeat(2,minmax(0,1fr)); }.logs-trend-card { grid-column: 1/-1; } }
@media(max-width:650px) {
  .system-logs-page { gap: 16px; }.logs-filters { padding: 16px; gap: 14px; }.logs-date-presets { width: 100%; }
  .logs-filters > label { flex: 1; min-width: 130px; }.logs-filters .logs-query { flex-basis: 100%; }
  .logs-stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }.logs-stat { padding: 18px; }.logs-stat > strong { font-size: 26px; }
  .logs-charts { grid-template-columns: minmax(0,1fr); gap: 16px; }.logs-pager { padding: 16px; justify-content: space-between; }.logs-pager > .actions { width: 100%; justify-content: flex-end; }
}