/* ═══════════════════════════════════════════════════════════════
   document-viewer.css — DOCUMENT-VIEWER-CANONICAL-COMPONENT-V1
   (2026-05-26)

   Chrome for the canonical document viewer facade. Backing PDF /
   image / fallback renderers are owned by
   admin-dashboard/js/components/documents/documentModal.js — the
   styles here cover ONLY the documentViewerCore-specific layers:
   permission-denied modal, error modal, and an inline loading
   skeleton shown before the underlying modal opens.

   Tokens prefer the existing design-system custom properties when
   defined (D2 design-language pack); each var() includes a literal
   fallback so the chrome renders consistently before / after D2.
   ═══════════════════════════════════════════════════════════════ */

.document-viewer-core-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  padding: var(--space-6, 24px);
  color: var(--text2, #cbd5e1);
  font-size: 12px;
  font-weight: 600;
}
.document-viewer-core-loading::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--text3, #94a3b8);
  border-right-color: transparent;
  animation: dvc-spin 0.8s linear infinite;
}
@keyframes dvc-spin { to { transform: rotate(360deg); } }

.document-viewer-core-denied,
.document-viewer-core-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3, 12px);
  padding: var(--space-8, 32px) var(--space-6, 24px);
  text-align: center;
  min-width: 320px;
  background: var(--bg1, #0b1220);
  color: var(--text, #fff);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
}
.document-viewer-core-denied__icon,
.document-viewer-core-error__icon {
  font-size: 40px;
  line-height: 1;
}
.document-viewer-core-denied__title,
.document-viewer-core-error__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #fff);
}
.document-viewer-core-denied__hint,
.document-viewer-core-error__hint {
  font-size: 12px;
  font-weight: 500;
  color: var(--text3, #94a3b8);
  max-width: 320px;
  line-height: 1.4;
}
.document-viewer-core-denied__close,
.document-viewer-core-error__close {
  margin-top: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-4, 16px);
  background: var(--accent, #3b82f6);
  color: #fff;
  border: 0;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}