/* Ο viewer ενός αρχείου, όπως τον βλέπει κόσμος ΕΞΩ από εμάς.
 *
 * Δεν φοράει το /shared/base.css, με πρόθεση, και είναι η μόνη σελίδα του
 * εργαλείου που δεν το φοράει μαζί με το closed.html. Δύο λόγοι:
 *
 * 1. Ζει μέσα σε iframe ΞΕΝΗΣ σελίδας (manifest.gr). Το κέλυφος της
 *    πλατφόρμας, με το σκούρο φόντο, τον header και το κινούμενο canvas, θα
 *    έμπαινε σαν δεύτερο site μέσα στο πρώτο.
 * 2. Ο αναγνώστης δεν έχει session, άρα δεν πρέπει να εξαρτάται από τίποτα
 *    πίσω από το forward_auth.
 *
 * Ουδέτερη επιφάνεια, όπως κάθε viewer εγγράφου: το έγγραφο είναι το χρώμα,
 * ο viewer είναι το πλαίσιο. Ακολουθεί το θέμα της συσκευής, ώστε να μη
 * φωτίζει ένα σκοτεινό site και το αντίστροφο.
 */

:root {
    --pv-bg: #eef0f3;
    --pv-bar: #ffffff;
    --pv-line: #d6dae1;
    --pv-ink: #1c2030;
    --pv-dim: #5a6274;
    --pv-brand: #263067;
    /* Το γέμισμα του δεύτερου κουμπιού: ξεχωρίζει από την μπάρα χωρίς να
       διεκδικεί την προσοχή του «Download». */
    --pv-fill: #e7eaf0;
    --pv-shadow: 0 1px 3px rgba(20, 26, 45, .14), 0 6px 18px rgba(20, 26, 45, .10);
}

@media (prefers-color-scheme: dark) {
    :root {
        --pv-bg: #14161d;
        --pv-bar: #1d2029;
        --pv-line: #2e3340;
        --pv-ink: #e9ebf2;
        --pv-dim: #a2a9ba;
        --pv-brand: #aab4ea;
        --pv-fill: #2b313e;
        --pv-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .35);
    }
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
}

body {
    background: var(--pv-bg);
    color: var(--pv-ink);
    font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
}

.pv {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* --- η μπάρα ---------------------------------------------------------- */

.pv__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    padding: 8px 12px;
    background: var(--pv-bar);
    border-bottom: 1px solid var(--pv-line);
}

.pv__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.pv__count {
    flex: 0 0 auto;
    color: var(--pv-dim);
    font-variant-numeric: tabular-nums;
}

/* Γεμάτα κουμπιά, ποτέ διάφανα: ένα διάφανο κουμπί διαβάζεται ως
   απενεργοποιημένο και δεν το πατά κανείς (CLAUDE.md). Η ιεραρχία βγαίνει από
   το ΒΑΡΟΣ του γεμίσματος: το «Download» φοράει το χρώμα της μάρκας, το
   «Full screen» διακριτικό γέμισμα πάνω στην μπάρα. */
.pv__dl,
.pv__open {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}

.pv__dl { background: var(--pv-brand); color: #ffffff; }

.pv__open {
    background: var(--pv-fill);
    color: var(--pv-ink);
    border: 1px solid var(--pv-line);
}

.pv__dl:hover,
.pv__open:hover { filter: brightness(1.12); }
.pv__dl:focus-visible,
.pv__open:focus-visible { outline: 2px solid var(--pv-brand); outline-offset: 2px; }
.pv__dl svg,
.pv__open svg { width: 15px; height: 15px; }

@media (prefers-color-scheme: dark) {
    .pv__dl { color: #10131b; }
    /* Στο σκοτεινό θέμα το hover δεν μπορεί να είναι «πιο φωτεινό» πάνω σε
       σκούρο γέμισμα χωρίς να χάσει το περίγραμμά του: το ανεβάζουμε λίγο
       παραπάνω, ώστε η αλλαγή να φαίνεται. */
    .pv__open:hover { filter: brightness(1.35); }
}

/* --- το έγγραφο ------------------------------------------------------- */

.pv__doc {
    flex: 1 1 auto;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 14px 10px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* Η σελίδα κρατά τη θέση της ΠΡΙΝ αποδοθεί: το ύψος έρχεται από τις
   διαστάσεις του PDF (`aspect-ratio`), οπότε η μπάρα κύλισης έχει το σωστό
   μήκος από το πρώτο δευτερόλεπτο και δεν πηδά κάτω από το δάχτυλο. */
/* `flex: 0 0 auto` και ΟΧΙ η προεπιλογή: το `.pv__doc` είναι flex column, και
   ένα flex item συρρικνώνεται από μόνο του για να χωρέσει στο δοχείο. Με
   δεκατέσσερις σελίδες των 1.000px μέσα σε παράθυρο 400px, και οι δεκατέσσερις
   πλακώθηκαν σε λωρίδες δέκα pixel: το `aspect-ratio` έδινε το σωστό ύψος και
   το flex το έπαιρνε πίσω. Μετρημένο 19/09/2026, με το μάτι, γιατί κανένα test
   δεν μετρά ύψος. */
.pv__page {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    background: #ffffff;
    border-radius: 3px;
    box-shadow: var(--pv-shadow);
    overflow: hidden;
}

.pv__page canvas {
    display: block;
    width: 100%;
    height: auto;
}

/* --- μηνύματα --------------------------------------------------------- */

.pv__msg {
    margin: auto;
    max-width: 460px;
    padding: 24px 16px;
    text-align: center;
    color: var(--pv-dim);
}

.pv__msg a {
    color: var(--pv-brand);
    font-weight: 600;
}

.pv__msg--bad { color: var(--pv-ink); }

/* Ένα αρχείο που δεν είναι PDF: εικόνα όπως είναι, ή κάρτα με κουμπί. */
.pv__img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    border-radius: 3px;
    box-shadow: var(--pv-shadow);
}

@media (max-width: 520px) {
    .pv__bar { gap: 8px; padding: 7px 9px; }
    .pv__count { display: none; }
    /* Σε 375px το όνομα του αρχείου, δύο κουμπιά με κείμενο και τα κενά τους
       δεν χωρούν: το δεύτερο κουμπί κρατά το εικονίδιό του και χάνει τη λέξη.
       Το `aria-label` του <a> μένει, ώστε να μη χάσει το όνομά του όποιος δεν
       βλέπει το εικονίδιο. */
    .pv__lbl { display: none; }
    .pv__open { padding: 7px 9px; }
    .pv__doc { padding: 10px 7px 18px; gap: 10px; }
}