/* ============================================================
   ePaper CMS - Main Stylesheet
   ============================================================ */

* { box-sizing: border-box; }

body {
    font-family: 'Segoe UI', 'Open Sans', Arial, sans-serif;
    font-size: 14px;
    color: #222;
    margin: 0;
    background: #f2f2f2;
}

a { color: #1570a6; text-decoration: none; }
a:hover { color: #083047; }

.container {
    width: 1170px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

/* ---------------- Header ---------------- */
.site-header {
    background: #fff;
    border-bottom: 4px solid #1570a6;
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 15px;
    flex-wrap: wrap;
}
.brand-logo { max-height: 70px; }
.brand-text { font-size: 30px; font-weight: 700; color: #1570a6; }
.tagline { color: #666; font-style: italic; }
.today-date { color: #333; font-weight: 600; }

.main-nav { background: #0c2c45; }
.main-nav ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}
.main-nav li a {
    display: block;
    padding: 12px 18px;
    color: #fff;
    font-weight: 600;
}
.main-nav li a:hover { background: #123a5c; color: #fff; }
.main-nav .nav-right { margin-left: auto; }

/* ---------------- Page body ---------------- */
.page-body {
    background: #fff;
    padding: 25px 15px 40px;
    min-height: 60vh;
}

.section-title {
    font-size: 22px;
    font-weight: 700;
    color: #1570a6;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* ---------------- Edition / page grid ---------------- */
.edition-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}
.date-picker-form { display: flex; gap: 8px; align-items: center; }
.date-picker-form input[type="date"] {
    padding: 8px;
    border: 1px solid #ccc;
}
.btn {
    display: inline-block;
    background: #1570a6;
    color: #fff;
    border: none;
    padding: 9px 18px;
    cursor: pointer;
    font-weight: 600;
}
.btn:hover { background: #0f5989; color: #fff; }
.btn-secondary { background: #6c757d; }
.btn-danger { background: #c0392b; }

.page-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.page-card {
    border: 1px solid #ddd;
    background: #fafafa;
    text-align: center;
    transition: box-shadow .2s;
}
.page-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.15); }
.page-card img {
    width: 100%;
    display: block;
    border-bottom: 1px solid #eee;
}
.page-card .page-label {
    padding: 8px;
    font-weight: 600;
    color: #333;
}

/* ---------------- Archive list ---------------- */
.archive-list {
    list-style: none;
    padding: 0;
}
.archive-list li {
    display: flex;
    justify-content: space-between;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
}
.archive-list li:hover { background: #f7fbff; }

/* ---------------- Page viewer (zoom) ---------------- */
.viewer-wrap {
    text-align: center;
    background: #222;
    padding: 20px;
}
.viewer-toolbar {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}
.viewer-toolbar button {
    background: #1570a6;
    color: #fff;
    border: none;
    padding: 8px 14px;
    cursor: pointer;
    font-weight: 600;
}
.viewer-canvas img {
    max-width: none;
    transition: width .2s;
    margin: 0 auto;
    display: block;
}
.viewer-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}

/* ---------------- Forms ---------------- */
.form-box {
    max-width: 480px;
    margin: 40px auto;
    background: #fafafa;
    border: 1px solid #ddd;
    padding: 30px;
}
.form-box h2 {
    text-align: center;
    color: #1570a6;
    margin-top: 0;
}
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-weight: 600; margin-bottom: 6px; }
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-group input[type="date"],
.form-group input[type="number"],
.form-group input[type="file"],
.form-group textarea {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid #ccc;
    font-family: inherit;
    font-size: 14px;
}
.form-group textarea { min-height: 100px; }

.alert {
    padding: 12px 16px;
    margin-bottom: 18px;
    border-radius: 2px;
}
.alert-success { background: #e6f7ec; color: #1a7a3d; border: 1px solid #b7e4c7; }
.alert-error { background: #fdecea; color: #a3231d; border: 1px solid #f5c2c0; }
.alert-info { background: #e8f2fa; color: #1570a6; border: 1px solid #bcdcf0; }

table.data-table {
    width: 100%;
    border-collapse: collapse;
}
table.data-table th, table.data-table td {
    border: 1px solid #e0e0e0;
    padding: 10px;
    text-align: left;
}
table.data-table th { background: #f1f6fa; }

/* ---------------- Footer ---------------- */
.site-footer { background: #1a1a1a; color: #ccc; margin-top: 30px; }
.footer-inner {
    display: flex;
    justify-content: space-between;
    padding: 30px 15px;
    flex-wrap: wrap;
    gap: 20px;
}
.footer-col h4 { color: #fff; margin-top: 0; }
.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 6px; }
.footer-links a { color: #ccc; }
.footer-links a:hover { color: #1570a6; }
.footer-bottom {
    background: #111;
    padding: 12px 0;
    text-align: center;
    font-size: 12px;
    color: #888;
}
.footer-credit { display: block; margin-top: 4px; color: #666; }

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
    .page-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .page-grid { grid-template-columns: 1fr; }
    .main-nav ul { flex-wrap: wrap; }
    .header-inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Layout tokens (values come from Admin -> Layout & Page Size)
   ============================================================ */
.container { width: var(--content-width, 1170px); }
.page-grid { grid-template-columns: repeat(var(--grid-columns, 4), 1fr); }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------------- Nav extras ---------------- */
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.nav-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav-search { display: flex; }
.nav-search input {
    border: none; padding: 7px 10px; font-size: 13px; width: 190px; max-width: 42vw;
}
.nav-search button { border: none; background: #0f5989; color: #fff; padding: 7px 11px; cursor: pointer; }
.nav-admin { color: #cfe6f5; font-weight: 600; padding: 0 6px; }

/* ---------------- Edition page ---------------- */
.edition-desc {
    background: #f7fbff; border-left: 3px solid #1570a6;
    padding: 10px 14px; margin-bottom: 18px;
}
.supp-tabs { list-style: none; display: flex; gap: 4px; padding: 0; margin: 0 0 20px; flex-wrap: wrap; border-bottom: 2px solid #e3e9ee; }
.supp-tabs a {
    display: block; padding: 9px 16px; background: #f1f4f7;
    color: #2a4a60; font-weight: 600; border: 1px solid #e3e9ee; border-bottom: none;
}
.supp-tabs a.active { background: #1570a6; color: #fff; border-color: #1570a6; }

.edition-layout { display: grid; grid-template-columns: 1fr 290px; gap: 26px; align-items: start; }
.edition-layout.no-aside { grid-template-columns: 1fr; }
.edition-aside { background: #fafcfe; border: 1px solid #e3e9ee; padding: 14px 16px; }
.aside-title { margin: 0 0 10px; font-size: 16px; color: #1570a6; }
.bookmark-list { list-style: none; padding: 0; margin: 0; }
.bookmark-list li { border-bottom: 1px dashed #e3e9ee; }
.bookmark-list a { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; font-size: 13px; }
.bm-page { color: #8a9aa6; font-size: 12px; flex-shrink: 0; }

.page-card { display: block; }
.page-thumb { display: block; overflow: hidden; background: #fff; }
.page-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-bottom: 1px solid #eee; }
.page-card .page-label small { display: block; font-weight: 400; color: #8a9aa6; font-size: 12px; }
.supp-badge {
    font-size: 12px; background: #eaf3fa; color: #1570a6;
    padding: 2px 8px; border-radius: 2px; vertical-align: middle;
}

/* ---------------- Calendar ---------------- */
.calendar { border: 1px solid #e3e9ee; margin-bottom: 24px; }
.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-head span {
    background: #1570a6; color: #fff; text-align: center;
    padding: 7px 0; font-size: 12px; font-weight: 600;
}
.cal-cell {
    min-height: 46px; display: flex; align-items: center; justify-content: center;
    border-right: 1px solid #eef2f5; border-bottom: 1px solid #eef2f5; color: #9aa8b2;
}
.cal-cell.has-edition { background: #eaf6ff; color: #0f5989; font-weight: 700; }
.cal-cell.has-edition:hover { background: #1570a6; color: #fff; }
.cal-cell.empty { background: #fafbfc; }
.month-nav { display: flex; align-items: center; gap: 10px; }

/* ---------------- Page viewer + mapping ---------------- */
.epaper-viewer { background: #14181c; padding: 0; }
.viewer-toolbar { flex-wrap: wrap; align-items: center; }
.viewer-toolbar span#zoomLevel { color: #cfd8de; font-size: 13px; min-width: 48px; text-align: center; }
.viewer-toolbar button.is-on { background: #c0392b; }

/* Full-screen reading canvas: the box is sized to the available
   viewport so the whole page fits on screen at once (like a photo
   viewer) with nothing cropped. The JS fit routine scales the page
   to the smaller of width/height so it always fits both ways; once
   the reader zooms in past 100% the box scrolls normally. Using both
   vh and dvh keeps this identical on every browser, including mobile
   browsers whose address bar changes the usable viewport height. */
.viewer-canvas {
    overflow: auto;
    background: #14181c;
    width: 100%;
    height: calc(100vh - var(--reader-bar-h, 50px));
    height: calc(100dvh - var(--reader-bar-h, 50px));
    min-height: 320px;
}
.viewer-canvas.dragging { cursor: grabbing; }

/* The page is scaled to cover the full canvas (both width and
   height) and centered by scroll offset, so it always fills the
   screen edge to edge with nothing left blank and no scrollbar
   needed at the default zoom. */
.page-stage { position: relative; transition: width .15s; }
.page-stage img { width: 100%; height: auto; display: block; }

.clip-area {
    position: absolute; display: block; cursor: pointer;
    background: transparent; border: 1px solid transparent;
    transition: background .12s, border-color .12s;
}
.page-stage.show-outline .clip-area { border-color: rgba(255,255,255,.45); }
.clip-area:hover {
    background: color-mix(in srgb, var(--highlight-color, #e32b25) 30%, transparent);
    border-color: var(--highlight-color, #e32b25);
    opacity: calc(var(--highlight-opacity, .18) + .6);
}
.page-stage.clips-hidden .clip-area { display: none; }

/* ---------------- Clip modal ---------------- */
body.modal-open { overflow: hidden; }
.clip-modal { position: fixed; inset: 0; z-index: 900; }
.clip-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.62); }
.clip-modal-box {
    position: relative; margin: 3vh auto; width: 92%; max-width: 900px; height: 92vh;
    background: #fff; box-shadow: 0 6px 34px rgba(0,0,0,.45);
}
.clip-modal-box iframe { width: 100%; height: 100%; border: none; display: block; }
.clip-modal-close {
    position: absolute; top: -14px; right: -14px; width: 34px; height: 34px;
    border: none; border-radius: 50%; background: #c0392b; color: #fff;
    font-size: 20px; line-height: 1; cursor: pointer; z-index: 2;
}

/* ---------------- Clip article ---------------- */
.clip-bare { background: #fff; }
.clip-bare .clip-article { padding: 16px; }
.clip-article { max-width: 900px; margin: 0 auto; }
.clip-title { font-size: 22px; margin: 0 0 4px; color: #14304a; line-height: 1.35; }
.clip-sub { color: #7d8b96; font-size: 13px; margin-bottom: 14px; }
.clip-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.clip-toolbar button { background: #1570a6; color: #fff; border: none; padding: 8px 13px; cursor: pointer; font-weight: 600; }
.clip-image-wrap { overflow: auto; border: 1px solid #e3e9ee; background: #f7f8f9; text-align: center; }
.clip-image-wrap img { width: 100%; max-width: none; display: block; }
.clip-text { margin-top: 14px; line-height: 1.75; font-size: 15px; }
.clip-link { margin-top: 12px; font-weight: 600; }
.clip-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.clip-index { list-style: none; padding: 0; }
.clip-index li { border-bottom: 1px solid #eef2f5; padding: 10px 0; }
.clip-index a { font-weight: 600; }
.clip-index p { margin: 4px 0 0; color: #6f7d88; font-size: 13px; }

/* ---------------- Search ---------------- */
.search-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.search-form input[type="text"] { padding: 9px 11px; border: 1px solid #ccc; min-width: 260px; flex: 1; }
.search-form input[type="date"] { padding: 8px; border: 1px solid #ccc; }
.search-count { color: #6f7d88; }
.search-results { list-style: none; padding: 0; }
.search-results li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid #eef2f5; }
.sr-thumb { flex-shrink: 0; width: 160px; }
.sr-thumb img { width: 100%; border: 1px solid #e3e9ee; display: block; }
.sr-title { font-size: 16px; font-weight: 700; }
.sr-meta { color: #8a9aa6; font-size: 12px; margin: 3px 0 6px; }
.sr-body p { margin: 0; color: #5d6a74; font-size: 13px; }
.pagination { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 18px; }
.pagination a { padding: 7px 12px; border: 1px solid #dde3e8; }
.pagination a.active { background: #1570a6; color: #fff; border-color: #1570a6; }

/* ---------------- Print ---------------- */
@media print {
    .site-header, .site-footer, .viewer-toolbar, .viewer-toolbar-float,
    .clip-toolbar, .clip-nav, .clip-modal,
    .edition-toolbar, .page-turn-arrow { display: none !important; }
    .epaper-viewer, .viewer-canvas { background: #fff; padding: 0; max-height: none; height: auto !important; overflow: visible; }
    .page-stage { width: 100% !important; }
    .clip-area { display: none !important; }
    .container { width: 100%; padding: 0; }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1024px) {
    .edition-layout { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .page-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .page-grid { grid-template-columns: 1fr; }
    .search-results li { flex-direction: column; }
    .sr-thumb { width: 100%; }
    .clip-modal-box { width: 100%; height: 100%; margin: 0; }
    .clip-modal-close { top: 6px; right: 6px; }
}

/* ============================================================
   Reader mode — full-screen single-page view
   No page thumbnails, no "news on this page" list: just the
   page, edge to edge, with a slim controls strip. Applied to
   <body> whenever a single page is being shown (index.php in
   Full View, and view-page.php).
   ============================================================ */
body.reader-mode { background: #14181c; }
body.reader-mode .site-header,
body.reader-mode .site-footer,
body.reader-mode .supp-tabs,
body.reader-mode .edition-desc { display: none; }
body.reader-mode .container { width: 100%; padding: 0; }
body.reader-mode .page-body { padding: 0; background: #14181c; min-height: 100vh; min-height: 100dvh; }

/* ============================================================
   Edition toolbar (date nav, regional edition, List/Full toggle)
   ============================================================ */
.edition-toolbar {
    background: #f7fbff;
    border: 1px solid #dfe8f0;
    padding: 10px 14px;
    margin-bottom: 18px;
}
.et-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}
.et-date-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}
.et-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #1570a6;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    border-radius: 3px;
    line-height: 1;
}
.et-arrow:hover { background: #0f5989; color: #fff; }
.et-arrow.disabled { background: #c7d3db; pointer-events: none; }
.et-date-form input[type="date"] {
    padding: 7px 8px;
    border: 1px solid #ccd7de;
    background: #fff;
}
.et-current-date {
    font-weight: 700;
    color: #14304a;
    font-size: 13px;
    white-space: nowrap;
}
.et-cat-form select,
.et-cat-form { display: flex; }
.et-cat-form select {
    padding: 7px 10px;
    border: 1px solid #ccd7de;
    background: #fff;
    font-weight: 600;
    color: #14304a;
}
.et-view-toggle {
    display: flex;
    border: 1px solid #1570a6;
    border-radius: 3px;
    overflow: hidden;
}
.et-view-toggle a {
    padding: 7px 16px;
    background: #fff;
    color: #1570a6;
    font-weight: 600;
    font-size: 13px;
}
.et-view-toggle a.active {
    background: #1570a6;
    color: #fff;
}
.et-view-toggle a:hover { color: #fff; background: #0f5989; }
.et-links {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* ============================================================
   Page-turn arrows (book-style navigation around the viewer)
   Fixed to the viewport edges so they stay put even if the
   reader scrolls a zoomed-in page — identical behaviour in
   every browser since it's plain CSS position:fixed, no
   vendor-specific tricks.
   ============================================================ */
.viewer-fullscreen {
    position: relative;
}
.page-turn-arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 20, 30, 0.55);
    color: #fff;
    font-size: 20px;
    border-radius: 50%;
    z-index: 40;
    transition: background .15s;
}
.page-turn-arrow:hover { background: rgba(21, 112, 166, 0.9); color: #fff; }
.page-turn-arrow.prev { left: 10px; }
.page-turn-arrow.next { right: 10px; }
.page-turn-arrow.disabled { opacity: .25; pointer-events: none; }
@media (max-width: 700px) {
    .page-turn-arrow { width: 36px; height: 36px; font-size: 16px; }
}

/* ============================================================
   Floating zoom toolbar with slider
   ============================================================ */
.viewer-toolbar-float {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding: 10px 14px;
    background: #14181c;
    border-radius: 30px;
    box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.viewer-toolbar-float button {
    background: #1570a6;
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 600;
}
.viewer-toolbar-float button:hover { background: #0f5989; }
.viewer-toolbar-float button.is-on { background: #c0392b; }
#zoomSlider {
    width: 140px;
    accent-color: #1570a6;
}
@media (max-width: 700px) {
    #zoomSlider { width: 90px; }
    .viewer-toolbar-float {
        border-radius: 22px;
        flex-wrap: nowrap;
        overflow-x: auto;
        max-width: calc(100vw - 20px);
        justify-content: flex-start;
        gap: 6px;
        padding: 8px 12px;
    }
    .viewer-toolbar-float button,
    .viewer-toolbar-float .btn { padding: 7px 10px; font-size: 12px; white-space: nowrap; }
    .viewer-toolbar-float #zoomLevel { display: none; }
}

/* In reader mode the zoom/print/PDF bar pins to the bottom edge of
   the screen instead of sitting under the page, so the page itself
   gets the rest of the screen. */
body.reader-mode .viewer-toolbar-float {
    position: fixed;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    margin-top: 0;
    z-index: 50;
    max-width: calc(100% - 20px);
}

/* ============================================================
   Reader-mode edition toolbar — a slim strip (date nav + PDF)
   instead of the full multi-row bar, so the page underneath is
   the star of the screen.
   ============================================================ */
.edition-toolbar-reader {
    margin-bottom: 0;
    background: #0c2c45;
    border: none;
    border-bottom: 1px solid #123a5c;
    padding: 6px 10px;
    position: relative;
    z-index: 45;
}
.edition-toolbar-reader .et-row { gap: 8px; }
.edition-toolbar-reader .et-current-date,
.edition-toolbar-reader .et-arrow { color: #fff; }
.edition-toolbar-reader .et-arrow { background: rgba(255,255,255,.12); }
.edition-toolbar-reader .et-arrow:hover { background: #1570a6; }
.edition-toolbar-reader .et-arrow.disabled { background: rgba(255,255,255,.06); }
.edition-toolbar-reader .et-current-date { color: #dce8f2; }
.edition-toolbar-reader .et-date-form input[type="date"] {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.2);
    color: #fff;
    color-scheme: dark;
}
.edition-toolbar-reader .et-cat-form select {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.2);
    color: #fff;
}
.edition-toolbar-reader .et-view-toggle a {
    background: transparent;
    color: #cfe0ee;
    border-color: rgba(255,255,255,.3);
    padding: 6px 12px;
}
.edition-toolbar-reader .et-view-toggle { border-color: rgba(255,255,255,.3); }
.edition-toolbar-reader .et-view-toggle a.active { background: #1570a6; color: #fff; }
.edition-toolbar-reader .btn-secondary { background: rgba(255,255,255,.14); }
.edition-toolbar-reader .btn-secondary:hover { background: rgba(255,255,255,.24); }
@media (max-width: 700px) {
    .edition-toolbar-reader .et-view-toggle { display: none; }
}

/* ============================================================
   Responsive tweaks for the new toolbar
   ============================================================ */
@media (max-width: 700px) {
    .et-row { justify-content: flex-start; }
    .et-links { margin-left: 0; width: 100%; }
    .et-current-date { display: none; }
}