/* Copied SUBSET of packages/design-system/components.css for the admin-web
   demo console — the same copy-in pattern the Keycloak theme uses
   (docs/design/keycloak-theme.md). The build context of this image is
   apps/admin-web alone, so the package cannot be linked at runtime.
   Copied verbatim, not edited: :focus-visible, .topbar, .btn, .card,
   .tablewrap/.table, .msg. Re-sync from the source when it changes; see
   README.md. Load order: fonts.css, tokens.css, components.css, app.css. */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

.topbar {
  flex: none;
  min-height: var(--chrome-title);
  display: flex;
  align-items: center;
  flex-wrap: wrap;               /* a German title and its action do not fit
                                    one line at 360px: the action moves down */
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.topbar__title {
  flex: 1 1 auto;
  margin: 0;
  font-size: var(--size-screen-title);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  min-width: min(100%, max-content);  /* whole words; it never shrinks to let
                                       the action in */
  overflow-wrap: break-word;     /* only a title wider than the screen breaks */
}

.topbar__actions { flex: none; display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  min-width: var(--size-touch-min);
  padding: 0 var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-ui);
  font-size: var(--size-button);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-instant) var(--ease),
              border-color var(--duration-instant) var(--ease);
}

.btn svg { width: 20px; height: 20px; flex: none; }

.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover { background: var(--color-primary-hover); }

.btn--secondary {
  background: var(--color-surface);
  color: var(--color-secondary);
  border-color: var(--color-border-strong);
}
.btn--secondary:hover { background: var(--color-surface-hover); }

.btn--text {
  background: none;
  color: var(--color-tertiary);
  padding: 0 var(--space-2);
  min-height: var(--size-touch-min);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn--danger { background: var(--color-error); color: var(--color-on-error); }

.btn--icon {
  padding: 0;
  width: var(--size-touch-row);
  height: var(--size-touch-row);
  min-height: 0;
  background: none;
  color: var(--color-secondary);
  border-radius: var(--radius-md);
}
.btn--icon:hover { background: var(--color-surface-hover); }


.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--color-surface-sunken);
  color: var(--color-text-disabled);
  border-color: var(--color-border);
  cursor: not-allowed;
  text-decoration: none;
}

.btn--block { width: 100%; }

.card {
  flex: none;                    /* a card states its own height; the CONTENT
                                    scrolls. Never let flex shrink a table. */
  background: var(--color-surface);
  border: var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.card--flush { padding: 0; overflow: hidden; }

.tablewrap {
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--color-border-subtle);
}

.tablewrap--tall { max-height: 260px; overflow-y: auto; }   /* blocks that scroll inside */

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--size-table);
  font-stretch: var(--font-stretch-table, 100%);
}

.table th, .table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-border-subtle);
  white-space: nowrap;
}

.table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  font-size: var(--size-table-head);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  white-space: normal;             /* a two-line column header is normal here */
  vertical-align: bottom;
  line-height: var(--leading-tight);
}

.table tbody tr { min-height: var(--row-table); }
.table tbody td { height: var(--row-table); }

.msg {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid;
  border-radius: var(--radius-md);
  font-size: var(--size-help);
  line-height: var(--leading-loose);
}

.msg svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.msg strong { display: block; font-size: var(--size-body); line-height: var(--leading-tight); margin-bottom: 2px; }

.msg--error   { background: var(--color-error-bg);   border-color: var(--color-error);   color: var(--color-error); }
.msg--warning { background: var(--color-warning-bg); border-color: var(--color-warning); color: var(--color-warning); }
.msg--success { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success); }
.msg--info    { background: var(--color-info-bg);    border-color: var(--color-info);    color: var(--color-info); }