/**
 * @file        ambl-pdf-viewer.css
 * @location    /assets/css/ambl-pdf-viewer.css
 * @description PDF-Viewer Styles für Amtsblatt Hessen.
 *
 * @version     1.2.0
 * @changelog
 *   1.0.0  2026-03-11  Erste Version.
 *   1.1.0  2026-03-11  Zoom-Buttons hinzugefügt.
 *   1.2.0  2026-03-11  WCAG 2.2 AA Farbkorrektur + Scroll-Zoom-Indicator.
 *                      Kontrastverhältnisse (alle Texte >= 5:1, UI >= 3:1):
 *                        --pdf-text    (#e6edf3) / --pdf-bg        = 16.02:1
 *                        --pdf-text    (#e6edf3) / --pdf-surface-2 = 12.88:1
 *                        --pdf-text-muted (#9ca3af) / --pdf-bg     =  7.45:1
 *                        --pdf-primary (#5B9EFF)  / --pdf-surface-2=  5.64:1
 *                        --pdf-border  (#6e7a84)  / --pdf-bg       =  4.31:1  UI
 *                        --pdf-border  (#6e7a84)  / --pdf-surface-2=  3.46:1  UI
 *                        Hover-Text white / --pdf-primary-hover     =  6.70:1
 *                        Focus-Ring (#5B9EFF) / --pdf-surface-2     =  5.64:1
 *                      WCAG 2.2 erfüllt:
 *                        1.4.3  Kontrast (Minimum) AA  >= 4.5:1 Text
 *                        1.4.11 Non-text contrast       >= 3:1  UI
 *                        2.4.7  Focus sichtbar
 *                        2.4.11 Focus Appearance        >= 2px, offset 2px
 *                        2.5.8  Target Size (Minimum)   >= 24x24 (Btns 36-44px)
 *                        2.3.3  Animation from Interactions (prefers-reduced-motion)
 *                        1.4.11 forced-colors Unterstützung
 *                      NEU: .pdf-zoom-indicator, .pdf-scroll-hint
 */

/* ══════════════════════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES — WCAG-konforme Palette
══════════════════════════════════════════════════════════════════════════ */
.pdf-viewer-modal {
    --pdf-bg             : #0d1117;
    --pdf-surface        : #161b22;
    --pdf-surface-2      : #21262d;
    --pdf-surface-3      : #2d333b;
    --pdf-border         : #6e7a84;   /* 4.31:1/bg  3.46:1/surface-2 >= 3:1 UI ✓ */
    --pdf-primary        : #5B9EFF;   /* 5.64:1/surface-2  6.41:1/surface      ✓ */
    --pdf-primary-hover  : #1d4ed8;   /* Hover-BG; white 6.70:1                ✓ */
    --pdf-text           : #e6edf3;   /* 16.02:1/bg  12.88:1/surface-2         ✓ */
    --pdf-text-muted     : #9ca3af;   /* 7.45:1/bg   6.81:1/surface            ✓ */
    --pdf-text-on-primary: #ffffff;   /* 6.70:1/primary-hover                  ✓ */
    --pdf-focus          : #5B9EFF;
    --pdf-focus-width    : 3px;
    --pdf-focus-offset   : 2px;
    --pdf-sidebar-w      : 280px;
    --pdf-header-h       : 60px;
    --pdf-footer-h       : 70px;
    --pdf-radius         : 8px;
    --pdf-shadow         : 0 8px 32px rgba(0, 0, 0, 0.7);
    --pdf-transition     : 0.2s ease;
}

/* ══════════════════════════════════════════════════════════════════════════
   MODAL OVERLAY
══════════════════════════════════════════════════════════════════════════ */
.pdf-viewer-modal {
    display          : none;
    position         : fixed;
    inset            : 0;
    z-index          : 9999;
    background       : var(--pdf-bg);
    color            : var(--pdf-text);
    font-family      : system-ui, -apple-system, sans-serif;
}
.pdf-viewer-modal.show {
    display          : flex;
    flex-direction   : column;
}

/* ══════════════════════════════════════════════════════════════════════════
   CLOSE BUTTON (Desktop) — w Toolbar, nicht mehr position:fixed
══════════════════════════════════════════════════════════════════════════ */
/* Alte .pdf-close-btn entfernt — ersetzt durch .pdf-close-desktop im Toolbar */

.pdf-control-group--close {
    margin-left      : auto;   /* schiebt X ans rechte Ende */
    border-right     : none;
    padding-right    : 0;
    margin-right     : 0;
}

.pdf-close-desktop {
    /* Erbt pdf-control-btn — optisch identisch */
    color            : var(--pdf-text);
}
.pdf-close-desktop:hover {
    background       : #b91c1c;   /* Rot-Hover: white 5.96:1 ✓ */
    border-color     : #b91c1c;
    color            : #ffffff;
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE HEADER
══════════════════════════════════════════════════════════════════════════ */
.pdf-mobile-header {
    display          : none;
    align-items      : center;
    justify-content  : space-between;
    padding          : 0 16px;
    height           : var(--pdf-header-h);
    background       : var(--pdf-surface);
    border-bottom    : 2px solid var(--pdf-border);
    flex-shrink      : 0;
}
.pdf-mobile-title {
    font-size        : 0.95rem;
    font-weight      : 600;
    color            : var(--pdf-text);
    overflow         : hidden;
    text-overflow    : ellipsis;
    white-space      : nowrap;
    max-width        : calc(100% - 56px);
    margin           : 0;
}
.pdf-mobile-close-btn {
    background       : transparent;
    border           : 2px solid var(--pdf-border);
    color            : var(--pdf-text);
    width            : 40px;
    height           : 40px;
    border-radius    : var(--pdf-radius);
    cursor           : pointer;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    font-size        : 1.1rem;
    flex-shrink      : 0;
    transition       : background var(--pdf-transition),
                       border-color var(--pdf-transition),
                       color var(--pdf-transition);
}
.pdf-mobile-close-btn:hover {
    background       : var(--pdf-primary-hover);
    border-color     : var(--pdf-primary-hover);
    color            : var(--pdf-text-on-primary);
}

/* ══════════════════════════════════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════════════════════════════════ */
.pdf-viewer-modal.show:not(.mobile-mode) { flex-direction: row; }
.pdf-viewer-modal.show.mobile-mode       { flex-direction: column; }

/* ══════════════════════════════════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════════════════════════════════ */
.pdf-viewer-sidebar {
    width            : var(--pdf-sidebar-w);
    background       : var(--pdf-surface);
    border-right     : 2px solid var(--pdf-border);
    display          : flex;
    flex-direction   : column;
    overflow-y       : auto;
    flex-shrink      : 0;
    transition       : transform var(--pdf-transition);
    z-index          : 1;
}
.pdf-sidebar-section {
    padding          : 20px;
    border-bottom    : 1px solid var(--pdf-border);
}
.pdf-sidebar-section:last-child {
    border-bottom    : none;
    flex             : 1;
    overflow-y       : auto;
}
.pdf-sidebar-title {
    font-size        : 0.75rem;
    font-weight      : 700;
    color            : var(--pdf-primary);   /* 6.41:1/surface ✓ */
    text-transform   : uppercase;
    letter-spacing   : 0.06em;
    margin-bottom    : 14px;
    display          : flex;
    align-items      : center;
    gap              : 8px;
}
.pdf-info-grid {
    display                : grid;
    grid-template-columns  : auto 1fr;
    gap                    : 6px 12px;
    font-size              : 0.85rem;
    align-items            : start;
}
.pdf-info-label { color: var(--pdf-text-muted); white-space: nowrap; }
.pdf-info-value { color: var(--pdf-text); word-break: break-all; }

/* Miniaturen */
.pdf-page-thumbs {
    display          : flex;
    flex-direction   : column;
    gap              : 8px;
}
.pdf-thumb {
    position         : relative;
    cursor           : pointer;
    border           : 2px solid var(--pdf-border);
    border-radius    : var(--pdf-radius);
    overflow         : hidden;
    transition       : border-color var(--pdf-transition),
                       box-shadow var(--pdf-transition);
}
.pdf-thumb:hover  { border-color: var(--pdf-primary); box-shadow: 0 0 0 2px var(--pdf-primary); }
.pdf-thumb.active { border-color: var(--pdf-primary); box-shadow: 0 0 0 3px var(--pdf-primary); }
.pdf-thumb canvas { display: block; width: 100%; }
.pdf-thumb-number {
    position         : absolute;
    bottom           : 4px;
    right            : 4px;
    background       : rgba(13, 17, 23, 0.85);
    color            : var(--pdf-text);
    font-size        : 0.72rem;
    padding          : 2px 6px;
    border-radius    : 3px;
    font-weight      : 600;
}

/* ══════════════════════════════════════════════════════════════════════════
   HAUPTBEREICH
══════════════════════════════════════════════════════════════════════════ */
.pdf-viewer-main {
    flex             : 1;
    display          : flex;
    flex-direction   : column;
    overflow         : hidden;
    min-width        : 0;
}

.pdf-viewer-header {
    display          : flex;
    align-items      : center;
    gap              : 12px;
    padding          : 0 16px;
    height           : var(--pdf-header-h);
    background       : var(--pdf-surface);
    border-bottom    : 2px solid var(--pdf-border);
    flex-shrink      : 0;
}
.pdf-viewer-title {
    flex             : 1;
    font-size        : 0.95rem;
    font-weight      : 600;
    color            : var(--pdf-text);
    overflow         : hidden;
    text-overflow    : ellipsis;
    white-space      : nowrap;
    margin           : 0;
}
.pdf-viewer-controls {
    display          : flex;
    align-items      : center;
    gap              : 6px;
    flex-shrink      : 0;
}
.pdf-control-group {
    display          : flex;
    align-items      : center;
    gap              : 4px;
    padding-right    : 10px;
    margin-right     : 4px;
    border-right     : 1px solid var(--pdf-border);
}
.pdf-control-group:last-child {
    border-right     : none;
    padding-right    : 0;
    margin-right     : 0;
}

/* Seitenzahl-Trenner "/ N" */
.pdf-page-sep {
    color            : var(--pdf-text-muted);
    font-size        : 0.88rem;
    white-space      : nowrap;
    user-select      : none;
}

/* Buttons — WCAG 2.5.8 min 24×24 */
.pdf-control-btn {
    background       : var(--pdf-surface-2);
    border           : 2px solid var(--pdf-border);
    color            : var(--pdf-text);
    width            : 36px;
    height           : 36px;
    min-width        : 36px;
    border-radius    : var(--pdf-radius);
    cursor           : pointer;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    font-size        : 0.95rem;
    transition       : background var(--pdf-transition),
                       border-color var(--pdf-transition),
                       color var(--pdf-transition);
    padding          : 0;
    line-height      : 1;
}
.pdf-control-btn:hover:not(:disabled) {
    background       : var(--pdf-primary-hover);
    border-color     : var(--pdf-primary-hover);
    color            : var(--pdf-text-on-primary);
}
.pdf-control-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.pdf-page-input {
    width            : 54px;
    height           : 36px;
    background       : var(--pdf-surface-2);
    border           : 2px solid var(--pdf-border);
    color            : var(--pdf-text);
    border-radius    : var(--pdf-radius);
    text-align       : center;
    font-size        : 0.88rem;
    padding          : 0 4px;
    transition       : border-color var(--pdf-transition);
}
.pdf-zoom-select {
    height           : 36px;
    background       : var(--pdf-surface-2);
    border           : 2px solid var(--pdf-border);
    color            : var(--pdf-text);
    border-radius    : var(--pdf-radius);
    font-size        : 0.85rem;
    padding          : 0 8px;
    cursor           : pointer;
    transition       : border-color var(--pdf-transition);
}

/* ── Canvas-Bereich ──────────────────────────────────────────────────── */
.pdf-viewer-content {
    flex             : 1;
    overflow         : auto;
    position         : relative;
    background       : #12131a;
}
.pdf-viewer-container {
    min-height       : 100%;
    padding          : 24px;
    box-sizing       : border-box;
    display          : flex;
    flex-direction   : column;
    align-items      : center;
}

.pdf-mobile-loading {
    display          : flex;
    flex-direction   : column;
    align-items      : center;
    justify-content  : center;
    gap              : 16px;
    color            : var(--pdf-text-muted);
    font-size        : 0.95rem;
    min-height       : 200px;
    width            : 100%;
}
.pdf-mobile-loading-spinner {
    width            : 40px;
    height           : 40px;
    border           : 3px solid var(--pdf-surface-3);
    border-top       : 3px solid var(--pdf-primary);
    border-radius    : 50%;
    animation        : pdfSpin 0.8s linear infinite;
}
@keyframes pdfSpin { to { transform: rotate(360deg); } }

.pdf-canvas        { display: block; max-width: 100%; }
.pdf-page-container {
    background       : white;
    box-shadow       : var(--pdf-shadow);
    display          : inline-block;
    max-width        : 100%;
}
.pdf-mobile-page.single          { width: 100%; max-width: 100%; }
.pdf-mobile-page.single .pdf-canvas { width: 100%; height: auto; }
.pdf-mobile-page.double          { flex: 1; max-width: 50%; }
.pdf-mobile-page.double .pdf-canvas { width: 100%; height: auto; }
.pdf-two-page-container {
    display          : flex;
    gap              : 16px;
    align-items      : flex-start;
    justify-content  : center;
    width            : 100%;
}

.flip-animation { animation: pdfFlip 0.2s ease; }
@keyframes pdfFlip {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ══════════════════════════════════════════════════════════════════════════
   SCROLL-ZOOM INDICATOR
   Zeigt aktuellen Zoom beim Ctrl+Scroll an.
   text #e6edf3 auf rgba(13,17,23,0.92) ≈ 15.8:1 ✓
══════════════════════════════════════════════════════════════════════════ */
.pdf-zoom-indicator {
    position         : fixed;
    top              : 50%;
    left             : 50%;
    transform        : translate(-50%, -50%);
    background       : rgba(13, 17, 23, 0.92);
    color            : var(--pdf-text);
    border           : 2px solid var(--pdf-border);
    border-radius    : 12px;
    padding          : 12px 28px;
    font-size        : 1.15rem;
    font-weight      : 700;
    letter-spacing   : 0.01em;
    pointer-events   : none;
    z-index          : 10005;
    display          : flex;
    align-items      : center;
    gap              : 10px;
    backdrop-filter  : blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation        : pdfZoomIn 0.15s ease;
    white-space      : nowrap;
    user-select      : none;
}
.pdf-zoom-indicator i {
    color            : var(--pdf-primary);
    font-size        : 1.25rem;
}
.pdf-zoom-indicator__value {
    min-width        : 3.5ch;
    text-align       : center;
    font-variant-numeric: tabular-nums;
}
@keyframes pdfZoomIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Scroll-Hint — erscheint kurz nach dem Öffnen */
.pdf-scroll-hint {
    position         : absolute;
    bottom           : 16px;
    left             : 50%;
    transform        : translateX(-50%);
    background       : rgba(13, 17, 23, 0.88);
    color            : var(--pdf-text-muted);
    border           : 1px solid var(--pdf-border);
    border-radius    : 20px;
    padding          : 6px 16px;
    font-size        : 0.78rem;
    pointer-events   : none;
    white-space      : nowrap;
    animation        : pdfHintFade 4.5s ease forwards;
    z-index          : 10;
}
@keyframes pdfHintFade {
    0%   { opacity: 0;   transform: translateX(-50%) translateY(4px); }
    12%  { opacity: 1;   transform: translateX(-50%) translateY(0); }
    75%  { opacity: 1; }
    100% { opacity: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE BOTTOM-MENÜ
══════════════════════════════════════════════════════════════════════════ */
.pdf-mobile-bottom-menu {
    display          : none;
    flex-shrink      : 0;
    background       : var(--pdf-surface);
    border-top       : 2px solid var(--pdf-border);
    padding          : 10px 12px;
    min-height       : var(--pdf-footer-h);
}
.pdf-mobile-menu-main {
    display          : flex;
    align-items      : center;
    justify-content  : space-between;
    gap              : 6px;
}
.pdf-mobile-menu-navigation {
    display          : flex;
    align-items      : center;
    gap              : 6px;
}
.pdf-mobile-page-counter {
    background       : var(--pdf-surface-2);
    border           : 2px solid var(--pdf-border);
    color            : var(--pdf-text);
    padding          : 8px 12px;
    border-radius    : var(--pdf-radius);
    font-size        : 0.88rem;
    font-weight      : 600;
    cursor           : pointer;
    min-width        : 68px;
    text-align       : center;
    user-select      : none;
    transition       : background var(--pdf-transition),
                       border-color var(--pdf-transition);
}
.pdf-mobile-page-counter:hover {
    border-color     : var(--pdf-primary);
    background       : var(--pdf-surface-3);
}
.pdf-mobile-menu-btn {
    background       : var(--pdf-surface-2);
    border           : 2px solid var(--pdf-border);
    color            : var(--pdf-text);
    width            : 40px;
    height           : 40px;
    min-width        : 40px;
    border-radius    : var(--pdf-radius);
    cursor           : pointer;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    font-size        : 1rem;
    transition       : background var(--pdf-transition),
                       border-color var(--pdf-transition),
                       color var(--pdf-transition);
    padding          : 0;
}
.pdf-mobile-menu-btn:hover:not(:disabled) {
    background       : var(--pdf-primary-hover);
    border-color     : var(--pdf-primary-hover);
    color            : var(--pdf-text-on-primary);
}
.pdf-mobile-menu-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.pdf-mobile-actions {
    display          : flex;
    align-items      : center;
    gap              : 5px;
}
.pdf-mobile-zoom-select {
    height           : 38px;
    background       : var(--pdf-surface-2);
    border           : 2px solid var(--pdf-border);
    color            : var(--pdf-text);
    border-radius    : var(--pdf-radius);
    font-size        : 0.82rem;
    padding          : 0 6px;
    cursor           : pointer;
    max-width        : 90px;
}

/* ══════════════════════════════════════════════════════════════════════════
   KONTEXT-MENÜ
══════════════════════════════════════════════════════════════════════════ */
.pdf-context-menu {
    display          : none;
    position         : fixed;
    background       : var(--pdf-surface);
    border           : 2px solid var(--pdf-border);
    border-radius    : var(--pdf-radius);
    box-shadow       : var(--pdf-shadow);
    z-index          : 10002;
    min-width        : 190px;
    overflow         : hidden;
}
.pdf-context-menu-item {
    display          : flex;
    align-items      : center;
    gap              : 10px;
    padding          : 12px 16px;
    color            : var(--pdf-text);
    font-size        : 0.9rem;
    cursor           : pointer;
    transition       : background var(--pdf-transition);
}
.pdf-context-menu-item:hover { background: var(--pdf-surface-3); }
.pdf-context-menu-item i     { color: var(--pdf-primary); font-size: 1rem; }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE
══════════════════════════════════════════════════════════════════════════ */
.pdf-viewer-modal.mobile-mode .pdf-mobile-header      { display: flex; }
.pdf-viewer-modal.mobile-mode .pdf-viewer-sidebar     { display: none; }
.pdf-viewer-modal.mobile-mode .pdf-viewer-header      { display: none; }
.pdf-viewer-modal.mobile-mode .pdf-mobile-bottom-menu { display: block; }
.pdf-viewer-modal.mobile-mode .pdf-viewer-main        { flex-direction: column; flex: 1; }
.pdf-viewer-modal.mobile-mode .pdf-viewer-content     { flex: 1; }
.pdf-viewer-modal.mobile-mode .pdf-viewer-container   { padding: 8px; }

.pdf-viewer-modal.show:not(.mobile-mode) .pdf-mobile-header      { display: none; }
.pdf-viewer-modal.show:not(.mobile-mode) .pdf-mobile-bottom-menu { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   FOCUS VISIBLE — WCAG 2.4.7 + 2.4.11
   3px outline, offset 2px, kolor 5.64:1 na surface-2
══════════════════════════════════════════════════════════════════════════ */
.pdf-control-btn:focus-visible,
.pdf-mobile-menu-btn:focus-visible,
.pdf-close-desktop:focus-visible,
.pdf-mobile-close-btn:focus-visible,
.pdf-mobile-page-counter:focus-visible,
.pdf-context-menu-item:focus-visible,
.pdf-thumb:focus-visible,
.pdf-page-input:focus-visible,
.pdf-zoom-select:focus-visible,
.pdf-mobile-zoom-select:focus-visible {
    outline         : var(--pdf-focus-width) solid var(--pdf-focus);
    outline-offset  : var(--pdf-focus-offset);
}

/* ══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — WCAG 2.3.3
══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .flip-animation,
    .pdf-mobile-loading-spinner,
    .pdf-zoom-indicator,
    .pdf-scroll-hint {
        animation   : none !important;
        transition  : none !important;
    }
    .pdf-zoom-indicator { opacity: 1; transform: translate(-50%, -50%); }
    .pdf-scroll-hint    { opacity: 1; transform: translateX(-50%); }
}

/* ══════════════════════════════════════════════════════════════════════════
   HIGH CONTRAST MODE — WCAG 1.4.11
══════════════════════════════════════════════════════════════════════════ */
@media (forced-colors: active) {
    .pdf-control-btn,
    .pdf-mobile-menu-btn,
    .pdf-close-desktop,
    .pdf-mobile-close-btn  { forced-color-adjust: none; border: 2px solid ButtonBorder; }
    .pdf-thumb.active      { outline: 3px solid Highlight; }
    .pdf-zoom-indicator    { border: 2px solid ButtonBorder; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PRINT
══════════════════════════════════════════════════════════════════════════ */
@media print { .pdf-viewer-modal { display: none !important; } }