/* Shared base for the emulated environment. Each system layers its own theme on top via CSS custom properties set on . */ :root { --radius: 8px; --font: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif; --mono: 'SF Mono', 'Consolas', 'Menlo', monospace; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font); color: var(--ink, #1a1f2e); background: var(--bg, #f4f6fa); font-size: 14px; } a { color: inherit; } /* App chrome */ .app-header { display: flex; align-items: center; gap: 14px; padding: 0 22px; height: 58px; color: #fff; background: var(--brand, #2b3a55); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18); } .app-header .logo-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; font-weight: 800; background: rgba(255, 255, 255, 0.18); } .app-header .titles { line-height: 1.2; } .app-header .titles .product { font-weight: 700; font-size: 15px; } .app-header .titles .sub { font-size: 11px; opacity: 0.8; } .app-header .spacer { flex: 1; } .app-header .env-pill { font-size: 11px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); } .app-header .home-link { font-size: 12px; text-decoration: none; padding: 6px 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.14); } .app-body { padding: 22px; max-width: 1180px; margin: 0 auto; } .section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted, #6b7280); margin: 0 0 12px; } .card { background: #fff; border: 1px solid var(--line, #e2e6ee); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); } .card + .card { margin-top: 18px; } .card-head { padding: 14px 18px; border-bottom: 1px solid var(--line, #e2e6ee); font-weight: 600; display: flex; align-items: center; gap: 10px; } .card-body { padding: 18px; } /* Tables */ table.grid { width: 100%; border-collapse: collapse; } table.grid th, table.grid td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line, #eef1f6); font-size: 13px; } table.grid th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted, #6b7280); background: var(--th-bg, #f8f9fc); } table.grid tbody tr { cursor: pointer; } table.grid tbody tr:hover { background: var(--row-hover, #f5f8ff); } table.grid tbody tr.is-active { background: var(--row-active, #eef4ff); } .num { font-family: var(--mono); text-align: right; } /* Badges */ .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .badge.pending { background: rgba(217, 119, 6, 0.12); color: #b45309; } .badge.reconciled{ background: rgba(22, 163, 74, 0.12); color: #15803d; } .badge.open { background: rgba(37, 99, 235, 0.12); color: #1d4ed8; } .badge.credited { background: rgba(22, 163, 74, 0.12); color: #15803d; } /* Reconciliation outcome variants */ .badge.unreconciled { background: rgba(217, 119, 6, 0.12); color: #b45309; } .badge.partial { background: rgba(217, 119, 6, 0.12); color: #b45309; } .badge.mismatch { background: rgba(220, 38, 38, 0.12); color: #b91c1c; } .badge.sap_only { background: rgba(220, 38, 38, 0.12); color: #b91c1c; } .badge.missing { background: rgba(220, 38, 38, 0.14); color: #991b1b; } .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* Buttons */ .btn { font: inherit; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 7px; cursor: pointer; border: 1px solid transparent; background: var(--brand, #2b3a55); color: #fff; } .btn:hover { filter: brightness(1.06); } .btn:disabled { opacity: 0.5; cursor: not-allowed; filter: none; } .btn.ghost { background: transparent; border-color: var(--line, #d5dae4); color: var(--ink, #1a1f2e); } .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: 12px; font-weight: 600; color: var(--muted, #6b7280); } .field input { font: inherit; padding: 9px 12px; border: 1px solid var(--line, #d5dae4); border-radius: 7px; background: #fff; } .field input:focus { outline: 2px solid var(--brand, #2b3a55); outline-offset: 0; } .toast { position: fixed; right: 20px; bottom: 20px; z-index: 50; padding: 12px 16px; border-radius: 8px; color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); opacity: 0; transform: translateY(8px); transition: opacity 0.2s, transform 0.2s; } .toast.show { opacity: 1; transform: translateY(0); } .toast.ok { background: #15803d; } .toast.err { background: #b91c1c; } .empty { padding: 26px; text-align: center; color: var(--muted, #98a2b3); font-size: 13px; } .kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 16px; font-size: 13px; } .kv dt { color: var(--muted, #6b7280); } .kv dd { margin: 0; font-weight: 600; }