/* ============================================================
   BesicEdu — PDF viewer component
   All colors/spacing derive from design tokens in brand.css.
   ============================================================ */

.bedu-pdf {
    display: flex;
    flex-direction: column;
    background: var(--bedu-surface);
    border: 1px solid var(--bedu-border);
    border-radius: var(--bedu-radius);
    box-shadow: var(--bedu-shadow-sm);
    overflow: hidden;
    outline: none;
}

.bedu-pdf:focus-visible {
    box-shadow: var(--bedu-shadow), 0 0 0 3px var(--bedu-primary-100);
}

/* ── Toolbar ─────────────────────────────────────────────── */
.bedu-pdf__toolbar {
    display: flex;
    align-items: center;
    gap: var(--bedu-space-2);
    padding: var(--bedu-space-2) var(--bedu-space-3);
    background: var(--bedu-surface-muted);
    border-bottom: 1px solid var(--bedu-border);
    flex-wrap: wrap;
}

.bedu-pdf__divider {
    width: 1px;
    align-self: stretch;
    background: var(--bedu-border);
    margin: 0 var(--bedu-space-1);
}

.bedu-pdf__page-label {
    display: inline-flex;
    align-items: center;
    gap: var(--bedu-space-1);
    font-family: var(--bedu-font-body);
    color: var(--bedu-text-muted);
    font-size: 0.92rem;
}

.bedu-pdf__page-input {
    width: 56px;
    padding: 4px 8px;
    border: 1px solid var(--bedu-border);
    border-radius: var(--bedu-radius-sm);
    background: var(--bedu-surface);
    color: var(--bedu-text);
    font-family: var(--bedu-font-body);
    font-weight: 600;
    text-align: center;
    -moz-appearance: textfield;
}
.bedu-pdf__page-input::-webkit-outer-spin-button,
.bedu-pdf__page-input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}

.bedu-pdf__page-of b { color: var(--bedu-text); }

/* ── Stage ───────────────────────────────────────────────── */
.bedu-pdf__stage {
    position: relative;
    background: var(--bedu-bg);
    min-height: 480px;
    padding: var(--bedu-space-4);
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.bedu-pdf__canvas {
    background: #fff;             /* PDF page bg is intrinsically white */
    box-shadow: var(--bedu-shadow);
    border-radius: var(--bedu-radius-sm);
    max-width: 100%;
}

.bedu-pdf__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bedu-space-2);
    color: var(--bedu-text-muted);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(2px);
    pointer-events: none;
}

[data-theme="dark"] .bedu-pdf__loading {
    background: rgba(11, 18, 32, 0.6);
}

.bedu-spin {
    display: inline-block;
    animation: bedu-spin 1s linear infinite;
}
@keyframes bedu-spin {
    to { transform: rotate(360deg); }
}

/* ── Fallback ────────────────────────────────────────────── */
.bedu-pdf__fallback {
    padding: var(--bedu-space-6);
    text-align: center;
    color: var(--bedu-text-muted);
}
.bedu-pdf__fallback i {
    font-size: 2.4rem;
    color: var(--bedu-warm);
    display: block;
    margin-bottom: var(--bedu-space-3);
}
.bedu-pdf__fallback p {
    margin: 0 0 var(--bedu-space-3);
}

/* ── Fullscreen ──────────────────────────────────────────── */
.bedu-pdf:fullscreen {
    border-radius: 0;
    border: 0;
}
.bedu-pdf:fullscreen .bedu-pdf__stage {
    min-height: calc(100vh - 56px);
}

/* ── Mobile tweaks ───────────────────────────────────────── */
@media (max-width: 600px) {
    .bedu-pdf__toolbar { padding: var(--bedu-space-2); gap: 4px; }
    .bedu-pdf__page-input { width: 48px; }
    .bedu-pdf__stage { padding: var(--bedu-space-2); min-height: 360px; }
}