{% extends 'emptybase.html.twig' %}

{% block title %}{% endblock %}
{% block stylesheets %}
    {{ encore_entry_link_tags('planned') }}
    <style>
        /* --- A4 layout (screen + print) --- */
        :root {
            --gap: 10px;
            --fg-muted: #6c757d;
            --fg-strong: #323a46;
        }
        @page { size: A4; margin: 12mm; }
        @media print {
            .no-print { display: none !important; }
            .sheet-A4 { box-shadow: none !important; }
            /* Print only the A4 sheet */
            body * { visibility: hidden !important; }
            .sheet-A4, .sheet-A4 * { visibility: visible !important; }
            /* Optional: explicitly hide common chrome */
            nav, aside, header, footer, .sidebar, .breadcrumb, .action-bar { display: none !important; }
        }
        .sheet-A4 {
            width: 210mm;
            /* Removed min-height to allow multi-page flow */
            margin: 0 auto; background: #fff;
            box-shadow: 0 2px 8px rgba(0,0,0,.06);
            padding: 12mm; border-radius: 8px;
        }
        .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
        .kpi-box { border:1px solid #e9ecef; border-radius: 8px; padding: 8px 10px; display:flex; align-items:center; gap:8px; }
        .kpi-box .icon { padding:6px; border-radius:8px; background:#f5f7fb; color:#4a81d4; }
        .kpi-box .label { font-size:11px; color: var(--fg-muted); }
        .kpi-box .value { font-weight:600; color: var(--fg-strong); }
        .section { margin-top: 10px; }
        .section > .section-title { font-size: 12px; font-weight: bolder; letter-spacing:.4px; text-transform:uppercase; color: var(--fg-muted); margin-bottom:6px; display:flex; align-items:center; gap:6px; }
        .hr { height:1px; background:#eef0f4; margin:6px 0 8px; }
        .progress.slim { height:8px; }
        .list-v { margin:0; padding:0; list-style:none; display:grid; gap:6px; }
        .list-v li { display:flex; gap:8px; }
        .list-v li i { color:#10b981; }
        .desc { font-size: 12px; color: #4f5b66; }
        .truncate-8 { display:-webkit-box; -webkit-line-clamp:8; -webkit-box-orient:vertical; overflow:hidden; }
        .tiny { font-size: 11px; color: var(--fg-muted); }
        .badge-chip { border:1px solid #e9ecef; background:#f8f9fb; }
        .card-soft { border:1px solid #eef0f4; border-radius: 10px; }
        .doc-row { display:flex; align-items:center; gap:8px; border:1px solid #eef0f4; border-radius:8px; padding:6px 8px; }
        .doc-row .name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .stake-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:8px; }
        .avoid-break { break-inside: avoid; }
        .mini { font-size: 12px; }
        .actions-stick { position: sticky; bottom: 0; background: #fff; padding-top: 8px; }
        .page-break { break-after: page; }
        /* --- Table-driven layout for readability --- */
        .part-title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin: 8px 0 6px; color:#323a46; display:flex; align-items:center; gap:8px; }
        .part-title .num { display:inline-flex; width:22px; height:22px; border-radius:50%; align-items:center; justify-content:center; font-size:12px; background:#e9f0ff; color:#3366cc; }
        .table-simple { width:100%; border-collapse: collapse; }
        .table-simple th, .table-simple td { border:1px solid #e9ecef; padding:6px 8px; font-size:12px; vertical-align: top; }
        .table-simple th { background:#f7f9fc; text-align:left; color:#495057; font-weight:600; }
        .table-simple tr:nth-child(even) td { background:#fcfdff; }
        .table-compact td, .table-compact th { padding:5px 6px; font-size:11.5px; }
        .caption-mini { font-size:11px; color:#6c757d; margin:4px 0 6px; }
        /* Tone down card visuals when present */
        .card-soft { border-color:#f1f3f5; background:#fff; }
        /* Hide heavy grids in this view */
        .grid-2, .grid-3 { display:block; }
    </style>
{% endblock %}

{% block javascripts %}{% endblock %}

{% block main %}

    {% block content %}{% endblock %}

{% endblock %}