.cc-ranking-item {
    cursor: grab;
    user-select: none;
}

.cc-ranking-item:active {
    cursor: grabbing;
}

.cc-ranking-dragging {
    opacity: 0.4;
}

.cc-ranking-dropzone {
    outline: 2px dashed var(--bs-primary, #0d6efd);
    outline-offset: -2px;
}

/* Print stylesheet — hides action chrome (buttons, filter bar, navigation)
   and tightens spacing so the results page renders cleanly via the browser's
   "Save as PDF" destination. Goals: ~3 question cards on an A4 page, charts
   never sliced across a page break. Sizes were tuned with the standard browser
   margins (~1.5cm); users with custom margins may see slightly different fit. */
@media print {
    @page { margin: 1.2cm; }
    .cc-print-hidden { display: none !important; }
    body { background: #fff !important; font-size: 11pt; }
    .container-fluid { padding: 0 !important; }

    /* Hide ModernMainLayout chrome (top bar + sidebar) so only the survey
       content prints. These classes are defined in CenCoCo.Core.Blazor's
       layout — kept in this file because survey.css already loads globally
       via index.html, and a survey-specific layout override is the cleanest
       place to silence them for the PDF-export flow. */
    .top-bar, .side-nav { display: none !important; }
    .layout-body { display: block !important; }
    .modern-layout, .layout-body, .main-content, .content-container {
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Cards stay together across page breaks. Tightened margins so consecutive
       cards stack closer than the on-screen 1rem gap. */
    .card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        break-inside: avoid;
        page-break-inside: avoid;
        margin-bottom: 0.5rem !important;
    }
    .card-body { padding: 0.5rem 0.75rem !important; }
    .card-title { margin-bottom: 0.35rem !important; }
    h2 { font-size: 1.2rem; margin-bottom: 0.25rem; }
    h4 { font-size: 1.05rem; }
    h5 { font-size: 1rem; }
    .small, small { font-size: 9pt !important; }

    /* Shrink Syncfusion charts (column / line / bar). The beforeprint hook
       in survey-ranking.js dispatches a resize event so each chart redraws
       its SVG at the new container size — only the container height needs to
       be overridden here; leave the SVG dimensions to Syncfusion's own resize
       handler so the axes and labels recompute correctly. */
    .e-chart {
        max-width: 100% !important;
        height: 160px !important;
        min-height: 0 !important;
    }

    /* Heatmap needs a bit more vertical room for row labels. */
    .e-heatmap {
        max-width: 100% !important;
        height: 200px !important;
        min-height: 0 !important;
    }

    /* Word-cloud sizes scale by frequency on screen (12-32px) via inline style.
       Override with !important so the largest words don't blow up a card past
       the chart-height budget; tighter line-height keeps the cluster compact. */
    .cc-word-cloud { padding: 0.5rem !important; line-height: 1.3 !important; }
    .cc-word-cloud span { font-size: 9pt !important; }

    /* The Einzelantworten table is wide and consumes the most vertical space
       per row. Tighten cell padding and shrink text so it stays usable in PDF. */
    .table-sm td, .table-sm th { padding: 0.2rem 0.35rem !important; font-size: 9pt !important; }
}