/*
 * Single-page A4 FB-style kompaktan spisak za grouped-by-code album-e (FIFA WC 2026 i sl.).
 * Prikazuje SAMO timove gde user ima want ili duplicate.
 *
 * Koristi se za:
 *   - Browser HTML print view (route `album_print?view=compact`) — sa screen toolbar-om
 *   - Gotenberg PDF render (route `album_pdf?view=compact`) — bez toolbar-a (@media print)
 *   - Gotenberg PNG screenshot (route `album_image?view=compact`)
 *
 * Format: 14pt readable, optimizovan za FB screenshot share.
 */

@page {
    size: A4 portrait;
    margin: 8mm;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #0f172a;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    background: #f1f5f9;
}

/* ── Screen-only toolbar ────────────────────────────────────────────── */

.compact-toolbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    background: #1e293b;
    color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    flex-wrap: wrap;
}

.compact-toolbar__views {
    display: flex;
    gap: 2px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 2px;
}

.compact-toolbar__tab {
    padding: 6px 14px;
    color: #cbd5e1;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-radius: 4px;
    transition: background 0.15s;
}

.compact-toolbar__tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.compact-toolbar__tab--active {
    background: #3b82f6;
    color: #fff;
}

.compact-toolbar__actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.compact-toolbar__btn {
    background: #3b82f6;
    color: #fff;
    padding: 6px 14px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
}

.compact-toolbar__btn:hover {
    background: #2563eb;
}

.compact-toolbar__back {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 13px;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.compact-toolbar__back:hover {
    color: #fff;
}

@media print {
    .compact-toolbar { display: none; }
}

/* ── Stranica ──────────────────────────────────────────────────────── */

.compact-page {
    width: 210mm;
    min-height: 297mm;
    padding: 12mm 14mm;
    margin: 16px auto;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
}

@media print {
    .compact-page {
        width: auto;
        min-height: auto;
        padding: 0;
        margin: 0;
        box-shadow: none;
    }
}

/* ── Brand header ──────────────────────────────────────────────────── */

.compact-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8pt;
    margin-bottom: 12pt;
    border-bottom: 2px solid #1e293b;
    font-size: 11pt;
}

.compact-header__brand {
    display: flex;
    align-items: center;
    gap: 6pt;
    flex-wrap: wrap;
}

.compact-header__logo {
    color: #2563eb;
    font-weight: 700;
    font-size: 14pt;
    letter-spacing: -0.01em;
}

.compact-header__sep {
    color: #94a3b8;
}

.compact-header__album {
    color: #0f172a;
    font-weight: 600;
    font-size: 12pt;
}

.compact-header__user {
    color: #475569;
    font-weight: 500;
}

.compact-header__date {
    color: #64748b;
    font-size: 10pt;
}

/* ── Body / Sekcije ────────────────────────────────────────────────── */

.compact-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 14pt;
}

.compact-empty {
    text-align: center;
    color: #64748b;
    font-size: 12pt;
    padding: 24pt 0;
}

.compact-section {
    padding: 8pt 0 8pt 12pt;
    border-left: 4px solid;
}

.compact-section--want {
    border-left-color: #3b82f6;
}

.compact-section--duplicate {
    border-left-color: #facc15;
}

.compact-section__title {
    font-size: 13pt;
    font-weight: 700;
    margin: 0 0 8pt 0;
    color: #0f172a;
    letter-spacing: 0.02em;
    display: flex;
    align-items: baseline;
    gap: 8pt;
}

.compact-section__count {
    color: #64748b;
    font-size: 10pt;
    font-weight: 500;
}

/* ── Red po timu ───────────────────────────────────────────────────── */

.compact-row {
    display: grid;
    grid-template-columns: 24pt 60pt 1fr;
    align-items: baseline;
    gap: 6pt;
    padding: 3pt 0;
    font-size: 12pt;
    line-height: 1.4;
}

.compact-row__flag {
    font-size: 14pt;
    line-height: 1;
}

.compact-row__code {
    font-weight: 700;
    color: #0f172a;
    font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
    font-size: 11pt;
    letter-spacing: 0.02em;
}

.compact-row__numbers {
    color: #1e293b;
    font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
    font-size: 11pt;
    letter-spacing: 0.02em;
}

/* ── Brand footer ──────────────────────────────────────────────────── */

.compact-footer {
    display: grid;
    grid-template-columns: 60pt 1fr;
    gap: 12pt;
    align-items: center;
    padding-top: 10pt;
    margin-top: 12pt;
    border-top: 2px solid #1e293b;
}

.compact-footer__qr img {
    display: block;
    width: 60pt;
    height: 60pt;
}

.compact-footer__cta {
    display: flex;
    flex-direction: column;
    gap: 4pt;
}

.compact-footer__cta-line {
    color: #0f172a;
    font-size: 13pt;
    font-weight: 600;
}

.compact-footer__cta-line strong {
    color: #2563eb;
}

.compact-footer__url {
    color: #2563eb;
    font-size: 10pt;
    font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
}

/*
 * Auto-shrink za edge case kad ima previše timova (>30) — smanji font
 * da bi sve stalo na A4. CSS-only fallback bez JS-a.
 */
@media print {
    .compact-row {
        padding: 2pt 0;
        font-size: 11pt;
    }
}