/**
 * Styles for the enterprise runtime: masked values, notices and dialogs. Uses the tokens of
 * zeyn.css only, so themes apply here too.
 */

.z-icon-eye { --z-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }

[data-zeyn-masked] { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

.z-masked-field { display: flex; align-items: center; gap: 4px; }
.z-masked-field input { flex: 1; min-width: 0; }

.z-reveal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  margin-inline-start: 4px;
  padding: 2px;
  border: 1px solid transparent;
  border-radius: var(--z-radius);
  background: transparent;
  color: var(--z-text-muted);
  cursor: pointer;
  vertical-align: middle;
}
.z-reveal:hover { background: var(--z-hover); color: var(--z-text); }
.z-reveal:focus-visible { outline: 2px solid var(--z-brand); outline-offset: 1px; }

.z-notice {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--z-gap);
  max-width: min(560px, calc(100vw - 32px));
  padding: calc(var(--z-space) * 3) calc(var(--z-space) * 4);
  border: 1px solid var(--z-border);
  border-left: 3px solid var(--z-info);
  border-radius: var(--z-radius);
  background: var(--z-surface);
  color: var(--z-text);
  box-shadow: var(--z-shadow-2);
}
.z-notice p { flex: 1 1 260px; margin: 0; }

.z-draft-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--z-gap);
  margin-bottom: var(--z-gap);
  padding: calc(var(--z-space) * 2) calc(var(--z-space) * 3);
  border: 1px solid var(--z-border);
  border-left: 3px solid var(--z-info);
  border-radius: var(--z-radius);
  background: var(--z-info-subtle);
}
.z-draft-note span { flex: 1 1 200px; }

.z-transitions { display: grid; gap: var(--z-gap); margin-top: var(--z-gap); }
.z-transitions .z-state { margin: 0; }

@media (forced-colors: active) {
  .z-notice, .z-draft-note { border-left-color: CanvasText; }
}

.z-import { display: grid; gap: var(--z-gap); max-width: 960px; }
.z-import-status { margin: 0; }
.z-import-status.z-import-error { color: var(--z-danger); }
.z-import-preview { border-collapse: collapse; width: 100%; font-size: var(--z-font-size-sm); }
.z-import-preview th, .z-import-preview td { padding: 4px 8px; border: 1px solid var(--z-border); text-align: start; }
.z-import-preview .z-row-danger { background: var(--z-danger-subtle); }
.z-import-errors { margin: var(--z-gap) 0 0; padding-inline-start: 20px; color: var(--z-danger); max-height: 240px; overflow: auto; }
[data-zeyn-import-preview] { overflow-x: auto; }