/* Official result pages (Phase 9): public result, announcement and the
   printable berita acara. Screen styling reuses the existing design tokens;
   the print rules at the bottom of this file make the document a proper A4 page.
   Loaded by layouts/public only — it never affects the admin shell. */

/* ---------- Shared official heading / facts ---------- */
.official-heading { text-align: center; margin-bottom: var(--space-6); }
.official-institution {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.official-heading h1 { font-size: var(--text-2xl); margin: var(--space-2) 0 0; line-height: var(--leading-tight); }
.official-period, .official-code { margin: var(--space-2) 0 0; color: var(--text-muted); font-size: var(--text-sm); }

.official-section-title { font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-3); }
.card-body > .official-section-title:first-child { margin-top: 0; }
.official-facts { margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); }
.official-facts > div {
    display: grid;
    grid-template-columns: minmax(9rem, 14rem) 1fr;
    gap: var(--space-3);
    align-items: baseline;
}
.official-facts dt { color: var(--text-secondary); font-size: var(--text-sm); }
.official-facts dd { margin: 0; overflow-wrap: anywhere; }
.official-verdict { margin-top: var(--space-5); }

.official-paper {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    margin-bottom: var(--space-5);
}
.official-conclusion { font-size: var(--text-lg); line-height: var(--leading-relaxed); }
.official-note, .official-footnote { color: var(--text-secondary); font-size: var(--text-sm); }
.official-footnote { margin-top: var(--space-5); }

.official-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
}
.official-action-status { color: var(--success-text); font-size: var(--text-sm); }

/* ---------- Official table (announcement + document) ---------- */
.official-table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; }
.official-table th, .official-table td {
    border: 1px solid var(--border);
    padding: var(--space-2) var(--space-3);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}
.official-table th { background: var(--border-subtle); font-weight: var(--font-semibold); }
.official-table td:nth-child(1), .official-table th:nth-child(1) { width: 3.5rem; }

/* ---------- Signature block ---------- */
.signature-block { margin-top: var(--space-8); }
.signature-intro { margin: 0 0 var(--space-4); }
.signature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.signature-title { font-weight: var(--font-semibold); text-align: center; }
.signature-space { height: 4.5rem; border-bottom: 1px solid var(--text); margin-bottom: var(--space-2); }
.signature-line { font-size: var(--text-sm); margin-top: var(--space-1); }

/* ---------- Small screens: keep everything inside the viewport ---------- */
@media (max-width: 640px) {
    .official-paper { padding: var(--space-5) var(--space-4); }
    .official-heading h1 { font-size: var(--text-xl); }
    .official-facts > div { grid-template-columns: 1fr; gap: var(--space-1); }
    .signature-grid { grid-template-columns: 1fr; }
    .official-actions .btn { flex: 1 1 auto; }

    /* The result table becomes one card per candidate rather than a
       sideways-scrolling grid. */
    .official-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .official-table, .official-table tbody, .official-table tr, .official-table td { display: block; width: 100%; }
    .official-table tr { border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: var(--space-3); padding: var(--space-2) 0; }
    .official-table td { border: 0; display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) var(--space-3); }
    .official-table td:nth-child(1) { width: 100%; }
    .official-table td::before { content: attr(data-label); font-weight: var(--font-semibold); color: var(--text-secondary); flex-shrink: 0; }
}

/* ---------- Print: A4 portrait ---------- */
@page { size: A4 portrait; margin: 18mm 16mm; }

@media print {
    html, body { background: #fff !important; }
    body {
        color: #000;
        font-family: Georgia, 'Times New Roman', serif;
        font-size: 11pt;
        line-height: 1.45;
    }

    /* Navigation, controls and every interactive affordance disappear. */
    .no-print, .public-header, .official-actions, button, .btn { display: none !important; }

    .public-shell { display: block; min-height: 0; background: #fff; }
    .public-content { max-width: none; width: auto; margin: 0; padding: 0; animation: none; }

    .official-paper, .card {
        border: 0;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        background: transparent;
    }
    .result-card { border: 1px solid #666; padding: 6pt 8pt; margin-bottom: 6pt; }
    .card, .result-card { break-inside: avoid; page-break-inside: avoid; }
    .progress-bar { display: none; }

    .official-heading { margin-bottom: 12pt; }
    .official-heading h1 { font-size: 14pt; }
    .official-institution { color: #000; font-size: 12pt; }
    .official-facts > div { grid-template-columns: 42mm 1fr; }
    .official-facts dt, .official-period, .official-code, .official-note, .official-footnote { color: #000; }

    .official-table { table-layout: fixed; }
    .official-table th, .official-table td { border: 1px solid #000; padding: 3pt 5pt; }
    .official-table th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .official-table tr { break-inside: avoid; page-break-inside: avoid; }
    .official-table thead { display: table-header-group; }

    .signature-block { break-inside: avoid; page-break-inside: avoid; margin-top: 18pt; }
    .signature-grid { grid-template-columns: repeat(3, 1fr); }
    .signature-space { border-bottom-color: #000; }

    .badge { background: transparent !important; color: #000 !important; border: 1px solid #000; padding: 0 4pt; }
    a { color: inherit; text-decoration: none; }
    h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
}