.dashboard-shell { display: grid; gap: 18px; margin: 0 auto; max-width: 1420px; padding: 24px 24px 60px; } .console-head, .module-table, .quality-panel, .incident-card { background: rgba(255, 255, 255, 0.96); border: 1px solid #e3e8f0; border-radius: 8px; box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06); } .console-head { align-items: center; display: flex; justify-content: space-between; padding: 24px; } .console-head div:first-child, .section-head div { display: grid; gap: 7px; } .eyebrow, .section-head p { color: #1f5fbf; font-size: 13px; font-weight: 900; margin: 0; } h1, h2, p { margin: 0; } h1 { color: #101828; font-size: 30px; line-height: 1.18; } h2 { color: #111827; font-size: 20px; } .console-head span, small, .incident-card p { color: #667085; line-height: 1.55; } .head-actions { display: flex; gap: 10px; } .head-actions a, .data-row a { background: #174ea6; border-radius: 6px; color: #fff; font-weight: 800; padding: 10px 14px; text-decoration: none; } .head-actions .secondary { background: #eaf1ff; color: #174ea6; } .metric-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .dashboard-grid { align-items: start; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr) 380px; } .module-table, .quality-panel { display: grid; gap: 12px; padding: 18px; } .section-head, .data-row, .gate-row { align-items: center; display: grid; gap: 14px; } .section-head { grid-template-columns: 1fr auto; } .table-head, .data-row { grid-template-columns: minmax(320px, 1fr) 110px 100px 76px; } .table-head { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 6px; color: #475467; display: grid; font-size: 13px; font-weight: 900; padding: 10px 12px; } .data-row, .gate-row { border: 1px solid #e5e7eb; border-radius: 8px; padding: 13px 12px; } .data-row div, .gate-row div { display: grid; gap: 5px; } .data-row strong, .gate-row strong, .incident-card strong { color: #101828; } .data-row > span, .gate-row > span { color: #344054; font-weight: 800; } .gate-row { grid-template-columns: 1fr auto auto; } .incident-strip { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .incident-card { display: grid; gap: 8px; padding: 16px; } .incident-card span { color: #1f5fbf; font-size: 13px; font-weight: 900; } @media (max-width: 1100px) { .metric-grid, .dashboard-grid, .incident-strip, .table-head, .data-row { grid-template-columns: 1fr; } } @media (max-width: 760px) { .console-head, .head-actions { align-items: flex-start; flex-direction: column; } }