/* * IAM 2.0 admin-surface CSS — canonical source. * * Source: assets/ui/admin.css (this file). * Consumers vendor a synced copy at: * - services/iam-admin-service/internal/ui/admin.css (embedded; served at /admin.css) * - docs/ui-mocks/admin.css (linked from mock HTML) * * Run `make sync-assets` to align mirrors. CI runs `make verify-assets`. * * Loads on top of theme.css; theme.css owns palette, fonts, base resets, * .app-header, default .card, .btn, .badge, input families, .tree-view + * .view-toggle. This file owns admin-surface specifics (tenant table, detail * tabs, JSON viewer, confirm overlay, admin-only badge aliases, etc.). * * @font-face stays inline in each consumer (different src URL between the * prod binary's base64-embedded woff2 and the mock's relative fonts/ path). */ /* Palette, font, base resets, header, card defaults, btn/badge/input families come from /theme.css (synced from assets/ui/theme.css). Admin-specific overrides + components live below. */ *, *::before, *::after { margin: 0; padding: 0; } body { display: flex; flex-direction: column; } .app-main { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 32px 24px; } /* Card — admin override: wider for tenant tables; clipped corners so the sapphire .card-header bleeds to the card edge. Padding is owned by .card-body / .card-header / .card-footer, not the card itself. */ .card { width: 100%; max-width: 1100px; padding: 0; border-radius: var(--radius-lg); overflow: hidden; } /* Per-card header band — neutral, with bottom border. Branding moved to the global .app-header (top of ). Logo + eyebrow that the old per-card-header carried are hidden so existing markup still works. */ .card-header { background: var(--surface-card); border-bottom: 1px solid var(--border-soft); padding: 14px 24px; display: flex; align-items: center; gap: 12px; } .card-header .header-logo { display: none; } .card-header .eyebrow { display: none; } .card-header > .btn { margin-left: auto; } .card-header-text { display: flex; align-items: center; gap: 12px; } .card-header h1 { font-size: var(--fs-lg); font-weight: 600; color: var(--biscay); line-height: 1.2; margin: 0; } .card-body { padding: var(--space-6); } .card-footer { border-top: 1px solid var(--border-soft); padding: 14px 28px; display: flex; justify-content: space-between; align-items: center; background: var(--surface-card-alt); } .card-footer span { font-size: var(--fs-base); color: var(--grey); } /* Tooltip — info icon in card-footer */ .has-tip { position: relative; cursor: default; } .has-tip .tip { display: none; position: absolute; bottom: calc(100% + 8px); right: 0; left: auto; transform: none; background: #2A2A2A; color: #F5F6F5; font-family: monospace; font-size: 11px; font-weight: 400; white-space: pre; padding: 6px 10px; border-radius: 4px; z-index: 200; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,.22); } .has-tip .tip::after { content: ''; position: absolute; top: 100%; right: 6px; left: auto; transform: none; border: 5px solid transparent; border-top-color: #2A2A2A; } .has-tip:hover .tip, .has-tip:focus-within .tip { display: block; } .has-tip[tabindex] { cursor: help; } /* Left-anchored variant: the bubble and its arrow extend to the right. Use on left-column triggers so the tooltip is not clipped at the viewport edge (the default right-anchors for triggers near the right edge, e.g. the footer). */ .has-tip.tip-left .tip { left: 0; right: auto; } .has-tip.tip-left .tip::after { left: 6px; right: auto; } /* Buttons — base .btn / .btn-primary / .btn-ghost / .btn-danger come from /theme.css. Admin-only size variants and modifiers stay here. */ .btn { white-space: nowrap; } .btn-sm { padding: 7px 12px; font-size: var(--fs-sm); } .btn-ghost-sm { padding: 6px 11px; font-size: var(--fs-sm); } .btn-full { width: 100%; } .btn-spinner { display: inline-block; width: 13px; height: 13px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: btn-spin 0.65s linear infinite; vertical-align: middle; margin-right: 7px; } .btn-ghost .btn-spinner, .btn-ghost-sm .btn-spinner { border-color: rgba(0,0,0,0.15); border-top-color: var(--anthracite); } @keyframes btn-spin { to { transform: rotate(360deg); } } /* Badges — domain-specific status badges. Base .badge + tints come from /theme.css; admin-specific status names below alias theme tints. */ .badge-confirmed { background: var(--tint-success-bg); color: var(--tint-success-fg); } .badge-confirmed .dot { background: var(--tint-success-fg); } .badge-onboarded { background: var(--tint-info-bg); color: var(--tint-info-fg); } .badge-onboarded .dot { background: var(--tint-info-fg); } .badge-awaiting-rebootstrap { background: var(--tint-warn-bg); color: var(--tint-warn-fg); } .badge-awaiting-rebootstrap .dot { background: var(--sunglow); animation: pulse 1.2s ease-in-out infinite; } .badge-online { background: var(--tint-success-bg); color: var(--tint-success-fg); } .badge-online .dot { background: var(--tint-success-fg); animation: pulse 1.2s ease-in-out infinite; } .badge-offline { background: var(--neutral); color: var(--grey); } .badge-offline .dot { background: var(--grey); } .tenant-table .tenant-id a { color: var(--stone); text-decoration: none; font-weight: 600; } .tenant-table .tenant-id a:hover { color: var(--sapphire); text-decoration: underline; } /* Table */ .tenant-table { width: 100%; border-collapse: collapse; } .tenant-table th { text-align: left; font-size: 16px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey); padding: 0 15px 15px 0; border-bottom: 1px solid #EDEDEC; } .tenant-table td { padding: 18px 15px 18px 0; border-bottom: 1px solid #F5F5F4; font-size: 20px; vertical-align: middle; } .tenant-table tr:last-child td { border-bottom: none; } .tenant-table .tenant-id { font-weight: 600; color: var(--stone); } .tenant-table .key-id { font-family: 'SFMono-Regular', 'Consolas', monospace; font-size: 18px; color: var(--anthracite); } .tenant-table .actions { display: flex; gap: 8px; align-items: center; } .empty-state { text-align: center; padding: 60px 0; color: var(--grey); font-size: 21px; } .empty-state strong { display: block; font-size: 24px; color: var(--anthracite); margin-bottom: 8px; } /* Form — input/select base styles come from /theme.css; admin-only structural bits (section grouping, hints, error states) live here. */ .form-section { margin-bottom: var(--space-6); } .form-section-title { font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); margin-bottom: var(--space-4); padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); } .form-group { margin-bottom: var(--space-4); } label .optional { font-weight: 400; color: var(--grey); font-size: var(--fs-sm); margin-left: 6px; } input:read-only { background: var(--neutral); color: var(--grey); cursor: default; } .checkbox-row { display: flex; align-items: center; gap: 10px; padding: 2px 0; } .checkbox-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--sapphire); cursor: pointer; flex-shrink: 0; } .checkbox-row label { margin: 0; cursor: pointer; font-weight: 400; } .field-hint { font-size: var(--fs-sm); color: var(--grey); margin-top: 4px; line-height: 1.4; } .field-error { font-size: var(--fs-sm); color: var(--error); margin-top: 4px; display: none; } .field-error.visible { display: block; } label .required { color: var(--error); margin-left: 2px; font-weight: 700; } input.input-error { border-color: var(--error) !important; box-shadow: 0 0 0 3px rgba(192,57,43,.15) !important; } /* Collapsible sections */ .form-section-title { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; } .form-section-title.no-toggle { cursor: default; } .section-chevron { font-size: 14px; color: var(--grey); flex-shrink: 0; transition: transform .15s; } .section-summary { font-size: 15px; font-weight: 400; color: var(--grey); margin-left: 8px; text-transform: none; letter-spacing: 0; } .section-body { overflow: hidden; } .section-body.collapsed { display: none; } .field-readonly-value { font-family: 'SFMono-Regular', 'Consolas', monospace; font-size: 16px; color: var(--anthracite); background: var(--neutral); border: 1px solid #E8E8E8; border-radius: 4px; padding: 10px 15px; word-break: break-all; line-height: 1.5; } hr.section-divider { border: none; border-top: 2px solid #EDEDEC; margin: 40px 0; } .section-group-label { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #B0B8C8; margin: 0 0 24px; } .subsection-label { font-size: 14px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--grey); margin: 28px 0 16px; padding-top: 20px; border-top: 1px dashed #E8E8E8; } /* Alerts — base .alert + variants from /theme.css; admin keeps a stronger left-border accent and a heading style for multi-line callouts. */ .alert { border-radius: var(--radius-md); padding: 12px 16px; font-size: var(--fs-base); line-height: 1.5; margin-bottom: var(--space-4); border: 0; border-left: 4px solid var(--sapphire); } .alert-success { background: #F0F7F7; border-left-color: var(--prismarine); color: var(--stone); } .alert-error { background: var(--tint-error-bg); border-left-color: var(--error); color: var(--stone); } .alert strong { display: block; font-weight: 700; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; } .alert-success strong { color: var(--prismarine); } .alert-error strong { color: var(--error); } .alert p { color: var(--anthracite); margin: 0; } /* Progress steps — compact pill row */ .progress-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; } .step { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; background: #EDF7F5; border-radius: 20px; font-size: 13px; font-weight: 600; color: var(--prismarine); position: relative; cursor: default; } .step-icon { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 11px; } .step-done .step-icon { background: var(--prismarine); color: var(--white); } .step-text strong { font-size: 13px; font-weight: 600; color: var(--prismarine); } /* Result-view card must escape rounded clip so step tooltips can paint above. */ #view-result { overflow: visible; } #view-result .card-body, #view-result .progress-steps { overflow: visible; } .step { position: relative; } .step[title] { cursor: help; } .step-tip { display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #2A2A2A; color: #F5F6F5; font-size: 12px; font-weight: 400; white-space: nowrap; padding: 5px 10px; border-radius: 4px; z-index: 100; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,0.22); } .step-tip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #2A2A2A; } .step:hover .step-tip, .step:focus-within .step-tip { display: block; } /* Summary rows */ hr.divider { border: none; border-top: 1px solid #F0F0F0; margin: 28px 0; } details.result-details { margin-top: 24px; } details.result-details > summary { cursor: pointer; user-select: none; font-size: 15px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); list-style: none; display: flex; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid #F0F0F0; } details.result-details > summary::before { content: '▶'; font-size: 12px; transition: transform .15s; } details.result-details[open] > summary::before { transform: rotate(90deg); } details.result-details > summary::-webkit-details-marker { display: none; } .runtime-grid { display: grid; grid-template-columns: 160px 1fr; gap: 10px 18px; padding: 14px 0 4px; font-size: 18px; } .runtime-grid dt { font-weight: 600; color: var(--grey); font-size: 16px; text-transform: uppercase; letter-spacing: 0.04em; align-self: baseline; } .runtime-grid dd { color: var(--anthracite); word-break: break-all; align-self: baseline; } .runtime-grid dd code { font-family: 'SFMono-Regular','Consolas',monospace; font-size: 15px; background: var(--neutral); padding: 1px 6px; border-radius: 2px; } .runtime-badge { display:inline-block; font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:2px 8px; border-radius:3px; } .runtime-badge.yes { background:#EDF7F5; color:#2A8A7A; } .runtime-badge.no { background:#F5F5F5; color:#999; } .status-pill { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:2px 10px 3px; border-radius:3px; } .pill-green { background:#EAF5EF; color:#1A7A4A; } .pill-amber { background:#FFFBEE; color:#B07D10; } .pill-red { background:#FBF3F2; color:#C0392B; } .pill-grey { background:#F5F5F5; color:#888; } .summary { display: flex; flex-direction: column; gap: 15px; } .summary-row { display: flex; gap: 18px; align-items: baseline; } .summary-row dt { width: 175px; flex-shrink: 0; font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--grey); } .summary-row dd { font-size: 21px; color: var(--anthracite); word-break: break-all; } .summary-row dd code { font-family: 'SFMono-Regular', 'Consolas', monospace; font-size: 18px; background: var(--neutral); padding: 1px 8px; border-radius: 2px; } .detail-table { width:100%; border-collapse:collapse; margin-bottom:30px; } .detail-table th { text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--grey); padding:9px 16px 9px 0; white-space:nowrap; width:1%; } .detail-table td { font-size:16px; color:var(--anthracite); padding:9px 28px 9px 0; } .detail-table td:last-child { padding-right:0; } .detail-table tr { border-bottom:1px solid var(--neutral); } .detail-table tr:last-child { border-bottom:none; } .detail-table code { font-family:'SFMono-Regular','Consolas',monospace; font-size:14px; background:var(--neutral); padding:1px 6px; border-radius:2px; } .wrap-token-box { display: flex; align-items: flex-start; gap: 10px; background: var(--neutral); border: 1px solid #E8E8E8; border-radius: 4px; padding: 12px 15px; } .wrap-token-value { font-family: 'SFMono-Regular', 'Consolas', monospace; font-size: 16px; word-break: break-all; line-height: 1.6; color: var(--stone); } .btn-copy { flex-shrink: 0; background: none; border: none; cursor: pointer; font-size: 20px; padding: 0 2px; line-height: 1; opacity: 0.6; transition: opacity .15s; } .btn-copy:hover { opacity: 1; } .alert-warn { background: var(--neutral); border-left: 4px solid var(--sunglow); color: var(--anthracite); border-radius: 4px; padding: 10px 15px; font-size: 16px; } /* Confirm overlay */ .confirm-overlay { display: none; position: fixed; inset: 0; background: rgba(15,15,15,0.5); z-index: 1000; align-items: center; justify-content: center; } .confirm-overlay.active { display: flex; } .confirm-dialog { background: #FFFFFF; border-radius: 6px; padding: 36px 40px; max-width: 480px; width: 90%; box-shadow: 0 8px 32px rgba(0,0,0,0.18); } .confirm-dialog h2 { font-size: 20px; font-weight: 700; color: var(--error); margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.05em; } .confirm-dialog p { font-size: 17px; color: var(--anthracite); line-height: 1.55; margin-bottom: 10px; } .confirm-dialog .confirm-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 28px; } /* JSON preview */ /* Detail JSON viewer — light theme matching the rest of the admin UI. Subtle background + soft border; colours derived from the Komm.ONE palette. */ .json-preview { background: var(--surface-card-alt); color: var(--stone); font-family: 'SFMono-Regular', 'Consolas', 'Menlo', monospace; font-size: var(--fs-sm); line-height: 1.55; padding: 12px 14px; border: 1px solid var(--border-soft); border-radius: var(--radius-md); overflow-x: auto; margin-bottom: var(--space-4); } .json-preview.empty { background: transparent; border-style: dashed; color: var(--grey); font-family: inherit; font-size: var(--fs-base); font-style: italic; text-align: center; padding: 20px; } .json-preview .jr { padding-left: 20px; } .json-preview .jk { color: var(--sapphire); } .json-preview .jstr{ color: var(--prismarine); } .json-preview .jnum{ color: #A04A00; } .json-preview .jbol{ color: var(--sapphire); font-weight: 600; } .json-preview .jnil{ color: var(--grey); font-style: italic; } .json-preview .jp { color: var(--anthracite); } .json-preview .jci { color: var(--grey); font-style: italic; } .json-preview .jt { display: inline-block; width: 16px; cursor: pointer; color: var(--grey); font-size: 11px; line-height: 1; user-select: none; vertical-align: middle; margin-right: 2px; } .json-preview .jt:hover { color: var(--sapphire); } /* .tree-view + .view-toggle styles come from /theme.css. */ /* Detail tabs */ .tabs { display: flex; gap: 0; border-bottom: 2px solid #EDEDEC; margin-bottom: 28px; } /* Live-state strip — global "fresh data?" indicator in the tabs bar. */ .tabs .live-state { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; padding: 4px 10px 4px 12px; font-size: var(--fs-sm); color: #B0B0B2; white-space: nowrap; align-self: center; } .live-text { color: #B0B0B2; font-weight: 400; } .live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #C8C8CA; margin-right: 6px; } .live-dot[data-state="stale"] { background: #B07D10; } .live-dot.pulse { animation: live-pulse 600ms ease-out; } @keyframes live-pulse { 0% { background: var(--prismarine); box-shadow: 0 0 0 0 rgba(36,144,135,.55); } 100% { background: #C8C8CA; box-shadow: 0 0 0 8px rgba(36,144,135,0); } } .btn-xs { font-size: var(--fs-sm); padding: 4px 10px; border-radius: var(--radius-sm); } .tab-btn { padding: 12px 16px; font-size: 16px; font-weight: 600; color: var(--grey); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; font-family: inherit; transition: color .1s; } .tab-btn:hover { color: var(--anthracite); } .tab-btn.active { color: var(--sapphire); border-bottom-color: var(--sapphire); } .tab-panel { display: none; } .tab-panel.active { display: block; } /* Back link */ .back-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--grey); text-decoration: none; cursor: pointer; } .back-link:hover { color: var(--sapphire); } /* Attribute mapping rows */ .attr-mapping-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .attr-mapping-header span { font-size: 15px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--grey); } .attr-mapping-header span:first-child, .attr-mapping-header span:last-child { flex: 1; } .attr-mapping-header span:nth-child(2) { width: 28px; flex-shrink: 0; } .attr-row { display: flex; align-items: center; gap: 10px; } .attr-row input, .attr-row select, .attr-row .combo { flex: 1; } .attr-row .arrow { flex-shrink: 0; font-size: 20px; color: var(--grey); padding: 0 2px; } /* Search */ .search-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .search-bar input { width: 350px; padding: 10px 15px; font-size: 18px; } .search-count { font-size: 16px; color: var(--grey); } /* State visibility */ .view { display: none; } .view.active { display: block; } /* Group-mapping comboboxes: a text input (free-text) with a clickable chevron that opens a filtered dropdown of discovered groups. Replaces native (no clickable affordance; unreliable in Safari). */ .combo { position: relative; } .combo-input { width: 100%; box-sizing: border-box; padding: 4px 24px 4px 6px; border: 1px solid #ccc; border-radius: 4px; font-size: 0.9rem; } .combo-toggle { position: absolute; top: 0; right: 0; height: 100%; width: 22px; padding: 0; border: 0; background: transparent; color: #8B8B8C; font-size: 0.7rem; line-height: 1; cursor: pointer; } .combo-list { position: absolute; z-index: 50; top: 100%; left: 0; right: 0; margin: 2px 0 0; padding: 0; list-style: none; max-height: 200px; overflow-y: auto; background: #fff; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); display: none; } .combo-list li { padding: 6px 10px; font-size: 0.9rem; cursor: pointer; } .combo-list li:hover, .combo-list li.active { background: #EAEDF4; } /* Aligned key/value layout (e.g. Organization / Tenant Slug). Labels in one column, values aligned in the next. */ .kv-grid { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 0.9rem; align-items: baseline; } .kv-grid .kv-label { color: var(--grey); } .kv-grid .kv-slug { justify-self: start; font-family: monospace; background: rgba(46, 75, 152, .1); padding: 1px 6px; border-radius: 3px; }