/* ============================================================================
   QUDS — shared application components (Phase 2A).
   CALCOBASE-UI-FINALIZATION-01
   ----------------------------------------------------------------------------
   Access-state bands, blocked screens, tenant chip, and the accessible
   confirmation dialog used by quds-app.js. Consumes semantic tokens from
   quds-tokens.css only — no raw palette values here.
   ========================================================================== */

/* --- Access-state bands ------------------------------------------------------ */

.quds-access-band {
  border-radius: var(--quds-radius-sm);
  padding: var(--quds-space-3) var(--quds-space-4);
  margin: var(--quds-space-3) 0;
  font-size: var(--quds-text-small);
  border: 1px solid var(--quds-border);
}
.quds-access-band strong { font-weight: 700; }

.quds-access-readonly {
  background: var(--quds-warning-surface);
  border-color: var(--quds-warning-border);
  color: var(--quds-warning);
}
.quds-access-blocked,
.quds-access-denied {
  background: var(--quds-danger-surface);
  border-color: var(--quds-danger-border);
  color: var(--quds-danger);
}
.quds-access-trial {
  background: var(--quds-info-surface);
  border-color: var(--quds-info-border);
  color: var(--quds-info);
}

/* --- Blocked / no-tenant screens -------------------------------------------- */

.quds-blocked-screen {
  border-inline-start: 5px solid var(--quds-danger-border);
}
.quds-blocked-screen h2 { color: var(--quds-danger-strong); }

/* --- Tenant chip -------------------------------------------------------------- */

.quds-tenant-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--quds-radius-pill);
  background: var(--quds-info-surface);
  border: 1px solid var(--quds-info-border);
  color: var(--quds-info);
  font-weight: 600;
  font-size: var(--quds-text-small);
}
.quds-tenant-chip-readonly {
  background: var(--quds-warning-surface);
  border-color: var(--quds-warning-border);
  color: var(--quds-warning);
}
.quds-tenant-chip-blocked {
  background: var(--quds-danger-surface);
  border-color: var(--quds-danger-border);
  color: var(--quds-danger);
}

/* --- Confirmation dialog ------------------------------------------------------ */

.quds-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(14, 53, 59, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--quds-gutter-mobile);
  z-index: var(--quds-z-overlay);
}
.quds-dialog {
  background: var(--quds-surface);
  border-radius: var(--quds-radius);
  box-shadow: var(--quds-shadow-3);
  padding: var(--quds-space-5);
  max-width: 440px;
  width: 100%;
}
.quds-dialog-title {
  font-size: var(--quds-text-section);
  margin: 0 0 var(--quds-space-2);
}
.quds-dialog-message {
  color: var(--quds-text-secondary);
  margin: 0 0 var(--quds-space-3);
}
.quds-dialog-facts {
  margin: 0 0 var(--quds-space-3);
  padding: var(--quds-space-3);
  background: var(--quds-surface-inset);
  border: 1px solid var(--quds-border);
  border-radius: var(--quds-radius-sm);
  display: grid;
  grid-template-columns: minmax(110px, auto) 1fr;
  gap: 2px var(--quds-space-3);
  font-size: var(--quds-text-small);
}
.quds-dialog-facts dt { color: var(--quds-text-muted); font-weight: 600; margin: 0; }
.quds-dialog-facts dd { margin: 0; overflow-wrap: anywhere; }
.quds-dialog-typed { display: block; margin: 0 0 var(--quds-space-3); }
.quds-dialog-typed textarea,
.quds-dialog-typed select {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--quds-control-height);
  padding: var(--quds-space-2) var(--quds-space-3);
  border: 1px solid var(--quds-border-strong);
  border-radius: var(--quds-radius-sm);
  font: inherit;
}
.quds-dialog-typed span {
  display: block;
  font-size: var(--quds-text-small);
  color: var(--quds-text-muted);
  margin-bottom: 2px;
}
.quds-dialog-typed input {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--quds-control-height);
  padding: var(--quds-space-2) var(--quds-space-3);
  border: 1px solid var(--quds-border-strong);
  border-radius: var(--quds-radius-sm);
  font: inherit;
}
.quds-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--quds-space-2);
}

/* .quds-error / .quds-empty live in quds-components.css — not redefined here. */

/* --- Skeleton loading --------------------------------------------------------- */

.quds-skeleton {
  display: block;
  height: 14px;
  border-radius: var(--quds-radius-xs);
  background: linear-gradient(90deg,
    var(--quds-surface-inset) 25%,
    var(--quds-brand-100) 50%,
    var(--quds-surface-inset) 75%);
  background-size: 200% 100%;
  animation: quds-skeleton-shimmer 1.4s var(--quds-ease) infinite;
  margin: var(--quds-space-2) 0;
}
@keyframes quds-skeleton-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .quds-skeleton { animation: none; }
}

/* --- Member picker (Phase 2C) -------------------------------------------------- */

.quds-member-picker {
  display: block;
  max-width: 420px;
  margin: var(--quds-space-2) 0;
}
.quds-member-picker .quds-picker-field { display: block; margin: 0 0 var(--quds-space-2); }
.quds-member-picker .quds-picker-field > span {
  display: block;
  font-size: var(--quds-text-small);
  color: var(--quds-text-muted);
  margin-bottom: 2px;
}
.quds-member-picker input,
.quds-member-picker select {
  width: 100%;
  box-sizing: border-box;
  min-height: var(--quds-control-height);
  padding: var(--quds-space-2) var(--quds-space-3);
  border: 1px solid var(--quds-border-strong);
  border-radius: var(--quds-radius-sm);
  font: inherit;
  background: var(--quds-surface);
}
.quds-member-picker select[size] { min-height: auto; }
.quds-member-picker .quds-picker-status { margin: var(--quds-space-1) 0; font-size: var(--quds-text-small); }
@media (max-width: 640px) {
  .quds-member-picker { max-width: none; }
  .quds-member-picker input, .quds-member-picker select { min-height: var(--quds-control-height-lg, 44px); }
}