/* Reusable component foundations. Consume after tokens.css and identity.css. */
* { box-sizing: border-box; }
body { margin: 0; font-size: 14px; line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button, summary { cursor: pointer; }
button, .button { min-height: 44px; border: 1px solid var(--su-border); border-radius: var(--su-radius-control); padding: 10px 16px; font-weight: 650; }
button:disabled { opacity: .48; cursor: not-allowed; }
.primary { background: var(--su-action); color: white; }
.secondary { background: white; color: var(--su-text); }
.danger { background: var(--su-danger); border-color: var(--su-danger); color: white; }
.quiet { background: transparent; border-color: transparent; color: var(--su-link); }
.hidden, [hidden] { display: none !important; }
.muted { color: var(--su-muted); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.af-field { display: grid; gap: 6px; min-width: 0; font-weight: 600; }
.af-field small { font-weight: 400; color: var(--su-muted); }
.af-field input, .af-field select, .af-field textarea, .standard-filter-bar input, .standard-filter-bar select { width: 100%; min-height: 44px; background: white; color: var(--su-text); border: 1px solid var(--su-border); border-radius: var(--su-radius-control); padding: 10px 12px; }
.af-field textarea { min-height: 96px; resize: vertical; }
.af-field input[readonly] { background: var(--su-neutral-surface); }
[aria-invalid="true"] { border-color: var(--su-danger) !important; background: var(--su-danger-surface) !important; }
.field-error { color: var(--su-danger); font-size: 12px; font-weight: 500; }
.af-choice { display: flex; gap: 10px; align-items: center; min-height: 44px; }
.af-choice input { width: 18px; height: 18px; accent-color: var(--su-action); }
input[role="switch"] { appearance: none; width: 40px; height: 24px; border-radius: 20px; background: var(--su-border); position: relative; cursor: pointer; }
input[role="switch"]::after { content: ''; position: absolute; width: 18px; height: 18px; top: 3px; left: 3px; border-radius: 50%; background: white; transition: transform .15s; }
input[role="switch"]:checked { background: var(--su-action); }
input[role="switch"]:checked::after { transform: translateX(16px); }
.af-panel { border: 1px solid var(--su-border); border-radius: var(--su-radius-surface); background: white; padding: 24px; }
.af-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 20px; font-size: 12px; font-weight: 650; border: 1px solid transparent; }
.status-neutral { background: var(--su-neutral-surface); color: var(--su-neutral-text); }
.status-active { background: var(--su-success-surface); color: var(--su-success); }
.status-revoked { background: var(--su-danger-surface); color: var(--su-danger); }
.message { padding: 14px 16px; border: 1px solid; border-radius: var(--su-radius-control); }
.standard-filter-bar { display: grid; gap: 12px; align-items: end; grid-template-columns: minmax(160px, 2fr) minmax(130px, 1fr) auto; margin-bottom: 16px; }
.standard-filter-bar label { display: grid; gap: 6px; font-size: 12px; font-weight: 650; }
.filter-actions { display: flex; gap: 8px; }
.compact-export-menu { position: relative; }
.compact-export-trigger { list-style: none; border: 1px solid var(--su-border); border-radius: var(--su-radius-control); background: white; }
.compact-export-trigger::-webkit-details-marker { display: none; }
.compact-export-options { position: absolute; z-index: 5; right: 0; top: 50px; width: 160px; padding: 6px; border: 1px solid var(--su-border); background: white; border-radius: 10px; box-shadow: var(--su-shadow); }
.compact-export-options button { border: 0; text-align: left; width: 100%; background: white; }
.table-wrap { overflow: auto; border: 1px solid var(--su-border); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--su-border); }
th { background: var(--su-canvas); font-size: 12px; color: var(--su-muted); font-weight: 650; }
tbody tr:last-child td { border-bottom: 0; }
.table-sort-button { padding: 0; border: 0; display: flex; align-items: center; gap: 8px; color: inherit; background: transparent; }
.table-pagination-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; }
.compact-page-size, .compact-page-jump, .compact-pagination { display: inline-flex; gap: 8px; align-items: center; }
.compact-page-size select, .compact-page-jump input { width: 64px; min-height: 44px; border: 1px solid var(--su-border); border-radius: 9px; padding: 8px; }
.compact-pagination button { background: white; }
.table-state-message { text-align: center; padding: 36px; color: var(--su-muted); }
dialog { max-height: 80vh; max-width: calc(100vw - 32px); width: 520px; padding: 24px; border: 1px solid var(--su-border); border-radius: var(--su-radius-dialog); color: var(--su-text); box-shadow: 0 24px 80px #102b4a44; }
dialog::backdrop { background: #102b4a88; }
.confirmation-heading { display: flex; gap: 12px; align-items: center; padding-right: 56px; min-height: 44px; }
.confirmation-heading h2 { margin: 0; font-size: 20px; }
.confirmation-icon { color: var(--su-warning); }
dialog[data-tone="danger"] #confirmation-submit { background: var(--su-danger); border-color: var(--su-danger); }
.dialog-close-x { position: absolute; top: 16px; right: 16px; border: 0; background: transparent; }
.dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.confirmation-question { font-weight: 650; margin-top: 20px; }
.af-toast { position: fixed; z-index: 30; bottom: 24px; right: 24px; max-width: min(420px, calc(100vw - 32px)); box-shadow: var(--su-shadow); }
.af-progress { width: 100%; accent-color: var(--su-action); height: 12px; }
.af-skeleton { background: linear-gradient(90deg, var(--su-neutral-surface), white, var(--su-neutral-surface)); background-size: 200%; border-radius: 6px; height: 16px; margin: 12px 0; animation: af-load 1.5s infinite; }
@keyframes af-load { to { background-position: -200% 0; } }
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media(max-width:650px) { .standard-filter-bar { grid-template-columns: 1fr; } .af-panel { padding: 16px; } .table-pagination-footer { flex-wrap: wrap; } .dialog-actions button { flex: 1; } }