.fault-page { color:#334155; min-width:0; padding:24px; } .fault-page-header { position:relative; z-index:30; margin:-24px -24px 24px; padding:18px 24px 12px; background:rgb(255 255 255 / .95); border-bottom:1px solid #f1f5f9; text-align:center; } .fault-page-header h1 { font-size:16px; font-weight:600; letter-spacing:.04em; color:#1f2937; } .fault-page-header>div { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:12px; margin-top:9px; font-size:10px; color:#94a3b8; } .fault-page-header button { display:inline-flex; align-items:center; gap:4px; color:#64748b; cursor:pointer; padding:4px; } .fault-summary { background:white; border:1px solid #f1f5f9; border-radius:16px; padding:20px; box-shadow:0 1px 3px rgb(15 23 42 / .02); } .fault-summary-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; } .fault-summary-heading h2 { font-size:14px; font-weight:600; color:#1e293b; } .fault-summary-heading>span { color:#94a3b8; font-size:11px; } .fault-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; align-items:start; } .fault-metric { text-align:left; padding:0; border:1px solid #e2e8f0; background:#fff; border-radius:12px; transition:border-color .15s,box-shadow .15s; min-width:0; } .fault-metric:hover:not(:disabled) { border-color:#93c5fd; box-shadow:0 4px 12px rgb(37 99 235 / .06); } .fault-metric-main:focus-visible { outline:2px solid #2563eb; outline-offset:3px; } .fault-metric-main:disabled { cursor:default; opacity:.6; } .fault-metric-label { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:500; } .fault-metric-label>svg { margin-left:auto; color:#94a3b8; } .fault-metric-icon { display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:9px; background:#eff6ff; color:#2563eb; flex-shrink:0; } .fault-metric-closed .fault-metric-icon { background:#ecfdf5; color:#059669; } .fault-metric-open .fault-metric-icon { background:#fff7ed; color:#d97706; } .fault-metric-ledger .fault-metric-icon { background:#f5f3ff; color:#7c3aed; } .fault-metric-count { display:flex; align-items:baseline; gap:8px; margin:18px 0 10px; } .fault-metric-count strong { font-size:32px; line-height:1.15; font-weight:650; color:#0f172a; font-variant-numeric:tabular-nums; } .fault-metric-count>span { font-size:11px; color:#94a3b8; } .fault-metric p { font-size:11px; color:#94a3b8; line-height:1.6; min-height:35px; } .fault-metric-link { display:block; font-size:11px; color:#3b82f6; margin-top:12px; } .fault-message { margin:12px 0; padding:14px; border:1px solid #fecaca; background:#fef2f2; border-radius:8px; color:#b91c1c; font-size:12px; } .fault-message button { margin-left:12px; text-decoration:underline; cursor:pointer; } .fault-parent-total,.fault-detail-table small { display:block; margin-top:5px; font-size:11px; color:#94a3b8; } .fault-detail-table table { min-width:1100px; } .fault-detail-table td:first-child { white-space:nowrap; } .fault-detail-table td:first-child strong { color:#1e293b; font-weight:600; } .fault-detail-table td:nth-child(2) { min-width:100px; max-width:180px; white-space:normal; overflow-wrap:anywhere; } .fault-detail-table td:nth-child(3) { min-width:180px; max-width:320px; white-space:normal; overflow-wrap:anywhere; } .fault-detail-search { display:flex; gap:6px; border:1px solid #e2e8f0; padding:8px; border-radius:6px; } .fault-detail-search input { min-width:0; width:220px; outline:none; } .fault-empty { text-align:center; padding:32px; color:#94a3b8; } .fault-analysis-note { margin-top:16px; color:#94a3b8; font-size:11px; line-height:1.7; } .fault-analysis-dialog .analysis-dimension-options { align-items:flex-start; } .fault-more { display:flex; margin:16px auto; } @media(max-width:1100px) { .fault-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:767px) { .fault-page { padding:12px; } .fault-page-header { position:relative; z-index:30; margin:-12px -12px 16px; padding:14px 12px 10px; } .fault-page-header h1 { font-size:15px; } .fault-summary { padding:14px; border-radius:12px; } .fault-summary-heading { align-items:flex-start; flex-direction:column; gap:6px; margin-bottom:14px; } .fault-metrics { gap:10px; } .fault-metric { padding:0; border-radius:10px; } .fault-metric-label { font-size:12px; gap:6px; } .fault-metric-icon { width:28px; height:28px; } .fault-metric-label>svg { display:none; } .fault-metric-count strong { font-size:29px; } .fault-metric p { font-size:10px; } .fault-detail-search { width:100%; } .fault-detail-search input { width:100%; } } .fault-metric-main { display:block; width:100%; padding:18px; text-align:left; cursor:pointer; border-radius:12px; } /* Fixed compact height keeps every metric aligned, including the open-work breakdown. */ .fault-metric { height:164px; display:flex; flex-direction:column; } .fault-metric-main { flex:1; min-height:0; display:flex; flex-direction:column; padding:12px 14px; } .fault-metric-label { width:100%; } .fault-metric-icon { width:28px; height:28px; border-radius:7px; } .fault-metric-count { margin:8px 0 5px; } .fault-metric-count strong { font-size:28px; } .fault-metric p { min-height:0; font-size:10px; } .fault-metric-link { margin-top:auto; padding-top:6px; font-size:10px; } .fault-metric-open { position:relative; } .fault-metric-open .fault-metric-main>p,.fault-metric-open .fault-metric-link { display:none; } .fault-open-breakdown { display:flex; align-items:center; gap:4px; margin:0 12px 12px; padding-top:8px; border-top:1px solid #f1f5f9; } .fault-submetric { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 2px; border-radius:5px; font-size:10px; cursor:pointer; color:#64748b; } .fault-submetric:hover { background:#eff6ff; color:#2563eb; } .fault-submetric:focus-visible { outline:2px solid #2563eb; outline-offset:1px; } .fault-submetric:disabled { opacity:.6; cursor:default; } .fault-submetric strong { font-variant-numeric:tabular-nums; font-size:16px; line-height:1.2; color:#334155; } .fault-submetric svg { display:none; } .fault-composition-plus { color:#94a3b8; font-size:18px; font-weight:400; } .fault-submetric-waiting { background:#fffbeb; color:#b45309; } .fault-submetric-processing { background:#eff6ff; color:#2563eb; } .fault-overdue-subset { position:absolute; right:14px; top:51px; display:flex; align-items:baseline; gap:4px; padding:5px 8px; border:1px solid #fee2e2; border-radius:6px; background:#fef2f2; color:#dc2626; cursor:pointer; } .fault-overdue-subset span,.fault-overdue-subset small { font-size:10px; } .fault-overdue-subset strong { font-size:16px; line-height:1.2; font-variant-numeric:tabular-nums; } .fault-overdue-subset:hover { background:#fee2e2; } .fault-overdue-subset:focus-visible { outline:2px solid #dc2626; outline-offset:2px; } .fault-overdue-subset:disabled { opacity:.6; cursor:default; } .fault-summary-note { margin-top:12px; font-size:10px; color:#94a3b8; line-height:1.6; } @media(max-width:767px) { .fault-metric { height:172px; } .fault-metric-main { padding:12px; } .fault-open-breakdown { margin:0 8px 10px; gap:2px; } .fault-submetric { min-height:40px; } .fault-overdue-subset { right:8px; top:53px; gap:3px; padding:5px; } .fault-overdue-subset span,.fault-overdue-subset small { font-size:9px; } } .fault-trend { margin-top:20px; } .fault-trend-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; } .fault-trend-heading h2 { display:flex; align-items:center; gap:7px; font-size:14px; font-weight:600; } .fault-trend-heading h2 svg { color:#2563eb; } .fault-trend-heading [role=group] { display:flex; padding:3px; border-radius:8px; background:#f1f5f9; } .fault-trend-heading button { padding:6px 12px; border-radius:6px; font-size:11px; color:#64748b; cursor:pointer; } .fault-trend-heading button[aria-pressed=true] { color:#2563eb; background:#fff; box-shadow:0 1px 3px #e2e8f0; } .fault-trend-definition { margin-top:7px; font-size:11px; line-height:1.7; color:#94a3b8; } .fault-trend-totals { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:14px 0; padding:10px; border:1px solid #f1f5f9; border-radius:10px; background:#f8fafc; } .fault-trend-totals button { display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; border-right:1px solid #e2e8f0; padding:4px; } .fault-trend-totals button:last-child { border-right:0; } .fault-trend-totals strong { font-size:21px; line-height:1.2; font-weight:650; font-variant-numeric:tabular-nums; } .fault-trend-totals span { font-size:11px; } .fault-trend-all { color:#2563eb; }.fault-trend-closed { color:#059669; }.fault-trend-unclosed { color:#d97706; } .fault-trend button:disabled { cursor:default; opacity:.5; } .fault-trend button:focus-visible { outline:2px solid #2563eb; outline-offset:2px; } .fault-trend-chart { width:100%; min-width:0; height:240px; } .fault-trend-loading { min-height:120px; display:flex; align-items:center; justify-content:center; gap:8px; color:#94a3b8; font-size:12px; } .fault-trend-expand { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; margin-top:12px; padding:12px; border:1px solid #bfdbfe; border-radius:8px; color:#2563eb; background:#eff6ff; font-size:12px; cursor:pointer; text-align:left; } .fault-trend-table { max-height:400px; overflow:auto; margin-top:12px; border:1px solid #e2e8f0; border-radius:8px; } .fault-trend-table table { width:100%; border-collapse:collapse; font-size:12px; white-space:nowrap; } .fault-trend-table th { text-align:right; padding:10px 12px; position:sticky; top:0; background:#f8fafc; color:#64748b; z-index:1; } .fault-trend-table td { padding:5px 12px; text-align:right; border-top:1px solid #f1f5f9; font-variant-numeric:tabular-nums; } .fault-trend-table th:first-child,.fault-trend-table td:first-child { text-align:left; } .fault-trend-table button { min-height:32px; min-width:32px; color:#2563eb; cursor:pointer; } @media(max-width:767px) { .fault-trend { margin-top:14px; }.fault-trend-heading h2 { font-size:12px; }.fault-trend-heading button { padding:7px 10px; }.fault-trend-table th,.fault-trend-table td { padding-left:6px; padding-right:6px; font-size:10px; }.fault-trend-table button { min-height:40px; }.fault-trend-expand { font-size:11px; } } .fault-weekly .fault-trend-totals { grid-template-columns:repeat(2,minmax(0,1fr)); } .fault-weekly-unit { font-size:11px; color:#94a3b8; } .fault-weekly-reported,.fault-weekly-table button.fault-weekly-reported { color:#2563eb; } .fault-weekly-received,.fault-weekly-table button.fault-weekly-received { color:#d97706; } .fault-weekly-closed,.fault-weekly-table button.fault-weekly-closed { color:#059669; } .fault-weekly-table td small { display:inline-block; margin-left:8px; color:#94a3b8; font-size:10px; } .fault-weekly-table tfoot th { position:static; border-top:1px solid #e2e8f0; background:#f8fafc; padding-top:4px; padding-bottom:4px; } .fault-weekly-empty { margin-top:10px; font-size:12px; color:#94a3b8; text-align:center; } @media(max-width:767px) { .fault-weekly-table td small { display:block; margin:0; }.fault-weekly .fault-trend-totals span { font-size:10px; } } .fault-weekly-chart { height:auto; padding:16px 12px 4px; border:1px solid #edf2f7; border-radius:12px; background:#fff; } .fault-chart-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:0 4px 4px; font-size:12px; color:#334155; font-weight:600; } .fault-chart-heading small { margin-left:10px; font-size:10px; color:#94a3b8; font-weight:400; } .fault-chart-legend { display:flex; align-items:center; gap:18px; font-size:11px; color:#64748b; font-weight:400; } .fault-chart-legend>span { display:flex; align-items:center; gap:7px; } .fault-chart-legend i { position:relative; width:20px; height:2px; background:#2563eb; } .fault-chart-legend i::after { content:''; position:absolute; left:7px; top:-3px; width:8px; height:8px; border:2px solid #2563eb; border-radius:50%; background:#fff; } .fault-chart-key-closed i { background:#059669; } .fault-chart-key-closed i::after { border-color:#059669; background:#059669; } @media(max-width:767px) { .fault-weekly-chart { padding:14px 6px 2px; }.fault-chart-heading { gap:10px; }.fault-chart-legend { gap:12px; font-size:10px; } } /* Compact mobile summary: preserve equal card heights and all drill-down targets. */ @media(max-width:767px) { .fault-page-header { margin-bottom:10px; padding:10px 12px 6px; } .fault-page-header>div { gap:8px; margin-top:3px; } .fault-page-header button { min-height:32px; } .fault-page>.fault-summary:first-of-type { padding:12px; } .fault-summary-heading { flex-direction:row; flex-wrap:wrap; align-items:center; gap:4px 8px; margin-bottom:10px; } .fault-summary-heading h2 { font-size:13px; } .fault-summary-heading>span { font-size:10px; } .fault-metrics { gap:8px; } .fault-metric { height:132px; } .fault-metric-main { padding:10px; } .fault-metric-label { gap:6px; } .fault-metric-icon { width:24px; height:24px; border-radius:6px; } .fault-metric-icon svg { width:17px; height:17px; } .fault-metric-count { gap:5px; margin:5px 0 3px; } .fault-metric-count strong { font-size:26px; } .fault-metric-link { padding-top:4px; } .fault-open-breakdown { margin:0 8px 8px; padding-top:6px; gap:3px; } .fault-submetric { flex-direction:row; justify-content:center; gap:4px; min-height:32px; padding:4px 2px; } .fault-submetric strong { font-size:14px; } .fault-composition-plus { font-size:14px; } .fault-overdue-subset { top:41px; right:8px; min-height:32px; padding:4px; gap:3px; align-items:center; } .fault-overdue-subset .fault-overdue-prefix { display:none; } .fault-overdue-subset strong { font-size:14px; } .fault-page>.fault-summary:first-of-type>.fault-summary-note { margin-top:8px; font-size:10px; line-height:1.5; } } @media(max-width:359px) { .fault-open-breakdown { margin-right:6px; margin-left:6px; gap:2px; } .fault-submetric { gap:2px; padding-right:0; padding-left:0; font-size:9px; white-space:nowrap; } .fault-submetric strong { font-size:13px; } .fault-composition-plus { font-size:12px; } } .fault-weekly-date { display:inline-flex; align-items:center; gap:6px; } .fault-weekly-table tr.fault-weekly-today { background:#f5f8ff; } .fault-weekly-today td:first-child { box-shadow:inset 2px 0 #bfd0ee; } .fault-today-label { padding:1px 5px; border-radius:4px; background:#e8effb; color:#536d96; font-size:10px; line-height:1.6; font-weight:500; } @media(max-width:767px) { .fault-weekly-date { gap:4px; }.fault-today-label { padding:1px 4px; font-size:9px; } } /* Short, single-pass entrance: no bounce, list staggering, or animated blur. */ .fault-analysis-overlay { animation:fault-backdrop-enter 160ms ease-out backwards; } .fault-analysis-dialog { --fault-enter-y:12px; --fault-enter-scale:.985; transform-origin:50% 60%; animation:fault-dialog-enter 260ms cubic-bezier(.16,1,.3,1) backwards; } @keyframes fault-backdrop-enter { from { opacity:0; } to { opacity:1; } } @keyframes fault-dialog-enter { from { opacity:0; transform:translateY(var(--fault-enter-y)) scale(var(--fault-enter-scale)); } to { opacity:1; transform:none; } } @media(max-width:767px) { .fault-analysis-dialog { --fault-enter-y:8px; --fault-enter-scale:1; animation-duration:220ms; } } @media(prefers-reduced-motion:reduce) { .fault-analysis-overlay,.fault-analysis-dialog { animation:none; } } /* Scoped Apple-style semantic grays; keep the surrounding BI theme unchanged. */ .fault-analysis-loading { --loading-label:rgba(60,60,67,.72); --loading-fill:rgba(118,118,128,.09); --loading-line:rgba(60,60,67,.08); --loading-radius:12px; padding:8px 0 4px; min-height:340px; } .fault-loading-status { display:flex; align-items:center; justify-content:center; gap:10px; min-height:40px; margin-bottom:20px; color:var(--loading-label); font-size:12px; letter-spacing:.01em; } .fault-loading-spinner { width:24px; height:24px; flex-shrink:0; } .fault-loading-spinner rect { opacity:.2; animation:fault-spinner-tick 1s linear infinite; } @keyframes fault-spinner-tick { from { opacity:1; } to { opacity:.15; } } .fault-loading-skeleton { animation:fault-skeleton-breathe 1.8s ease-in-out infinite; } @keyframes fault-skeleton-breathe { 0%,100% { opacity:.65; } 50% { opacity:1; } } .fault-loading-block { display:block; height:10px; border-radius:5px; background:var(--loading-fill); } .fault-loading-controls { padding:16px; border:1px solid var(--loading-line); border-radius:var(--loading-radius); } .fault-loading-title { width:84px; margin-bottom:14px; } .fault-loading-controls>div { display:flex; flex-wrap:wrap; gap:8px; } .fault-loading-controls>div>span { width:88px; height:28px; border-radius:7px; } .fault-loading-controls>div>span:nth-child(2n) { width:106px; } .fault-loading-summary { display:flex; align-items:center; gap:16px; padding:20px 0; } .fault-loading-summary>span:first-child { width:128px; height:18px; }.fault-loading-summary>span:last-child { width:66px; } .fault-loading-table { border:1px solid var(--loading-line); border-radius:var(--loading-radius); overflow:hidden; } .fault-loading-table-head,.fault-loading-row { display:grid; grid-template-columns:2fr 1fr 1fr; align-items:center; gap:24px; padding:16px; } .fault-loading-table-head { background:var(--loading-fill); } .fault-loading-row { border-top:1px solid var(--loading-line); } .fault-loading-table .fault-loading-block { width:60%; max-width:130px; } .fault-loading-row:nth-child(2n)>.fault-loading-block:first-child { width:80%; } @media(max-width:767px) { .fault-loading-status { margin-bottom:16px; }.fault-loading-controls { padding:12px; }.fault-loading-controls>div { flex-wrap:nowrap; overflow:hidden; }.fault-loading-controls>div>span { flex-shrink:0; width:76px; }.fault-loading-table-head,.fault-loading-row { padding:16px 12px; gap:16px; } } @media(prefers-reduced-motion:reduce) { .fault-loading-spinner rect,.fault-loading-skeleton { animation:none; }.fault-loading-spinner rect:nth-child(3n) { opacity:.65; } } @media(prefers-contrast:more) { .fault-analysis-loading { --loading-label:#334155; --loading-line:#94a3b8; --loading-fill:rgba(118,118,128,.18); } } .fault-report-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; } .fault-report-actions .analysis-export-action { display:flex; flex-direction:column; align-items:flex-end; gap:4px; } .fault-report-actions .analysis-export-action button { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:32px; border:1px solid #dbe4f0; border-radius:7px; background:#fff; color:#475569; padding:6px 10px; white-space:nowrap; } .fault-report-actions .analysis-export-action button:hover:not(:disabled) { color:#2563eb; border-color:#93c5fd; background:#eff6ff; } .fault-report-actions .analysis-export-action small { font-size:10px; color:#dc2626; } @media(max-width:767px) { .fault-trend-heading { flex-wrap:wrap; gap:8px; }.fault-report-actions { gap:6px; margin-left:auto; }.fault-report-actions .analysis-export-action button { min-height:40px; padding:7px 8px; font-size:10px; }.fault-report-actions .fault-weekly-unit { display:none; } }