:root {
            --primary-color: #10B981;
            /* Emerald 500 */
            --secondary-color: #3B82F6;
            /* Blue 500 */
            --warning-color: #F59E0B;
            /* Amber 500 */
            --danger-color: #EF4444;
            /* Red 500 */
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Noto Sans Thai', sans-serif;
            background-color: #f4f7f9;
            padding: 1rem;
        }

        .card {
            background-color: white;
            border-radius: 1rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s;
        }

        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
        }

        .pdf-desktop-capture {
            width: 1200px !important;
            padding: 30px !important;
            margin: 0 auto !important;
            box-sizing: border-box !important;
        }

        .text-xs-white {
            font-size: 0.75rem;
            line-height: 1rem;
            position: relative !important;
            top: -4px !important;
        }

        /* Donut Chart Styling */
        .donut-chart-container {
            display: flex;
            justify-content: center;
            align-items: center;
            max-width: 200px;
            margin: 0 auto;
            height: 200px;
        }

        .donut-chart-container canvas {
            max-width: 100% !important;
            max-height: 100% !important;
            width: 200px !important;
            height: 200px !important;
        }

        @media print {
            .flex-grow>span {
                font-size: 11px !important;
                font-weight: bold !important;
            }

            #filterControlsSection {
                display: none !important;
            }

            /* Ensure summary texts never overlap in PDF */
            #summarySection p {
                line-height: 1.65 !important;
                white-space: normal !important;
                word-break: break-word !important;
            }

            #summarySection span {
                position: static !important;
                /* avoid any inherited relative/absolute offsets */
            }

            #summarySection {
                page-break-inside: avoid;
                break-inside: avoid;
                position: relative !important;
                z-index: 2 !important;
                overflow: hidden;
                /* clip any stray absolutely-positioned artifacts from previous sections */
            }

            /* Prevent splitting of cards that contain absolutely positioned labels */
            .card {
                break-inside: avoid;
                page-break-inside: avoid;
            }

            .donut-chart-container {
                position: relative;
            }

            /* Chart Legend Box Styling */
            .chartjs-legend {
                border: 1px solid #e5e7eb !important;
                border-radius: 6px !important;
                padding: 12px 15px !important;
                display: inline-block;
                background-color: #ffffff;
                margin-top: 12px;
            }

            .chartjs-legend ul {
                display: flex;
                flex-wrap: wrap;
                gap: 15px;
                justify-content: center;
                margin: 0;
                padding: 0;
                list-style: none;
            }

            .chartjs-legend li {
                display: flex;
                align-items: center;
                gap: 6px;
                font-family: 'Noto Sans Thai', sans-serif;
            }

            /* Reduce spacing in PDF */
            section {
                margin-bottom: 0.5rem !important;
            }

            .card {
                padding: 1rem !important;
                margin-bottom: 0.5rem !important;
            }

            /* Hide shadows in PDF */
            .pdf-desktop-capture .card,
            .pdf-desktop-capture .bg-white {
                box-shadow: none !important;
            }

            .mb-4 {
                margin-bottom: 0.5rem !important;
            }

            .mt-4 {
                margin-top: 0.5rem !important;
            }

            h2 {
                margin-bottom: 0.75rem !important;
            }

            .space-y-3>*+* {
                margin-top: 0.5rem !important;
            }
        }

        /* Loading spinner */
        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #10B981;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            animation: spin 1s linear infinite;
            display: inline-block;
            margin-right: 8px;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

/* Page-level base styles and declarations extracted from the markup. */
body.m-0.p-0 { background-color: #f4f7f9; font-family: 'Noto Sans Thai', 'Inter', sans-serif; }
.pdf-logo-hidden { display: none; height: 70px; width: auto; position: relative; top: -20px; }
.is-hidden { display: none; }
.filter-text-input { width: 100%; padding: .75rem; border: 1px solid #d1d5db; border-radius: .5rem; }
.legend-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: middle; }
.legend-swatch-orange { background: #ea580c; margin-right: 6px; }
.legend-swatch-green { background: #16a34a; margin-right: 4px; }
.legend-swatch-red { background: #dc2626; margin-right: 6px; }
.legend-swatch-blue { background: #2563eb; margin: 0 4px; }
.legend-swatch-yellow { background: #eab308; margin: 0 4px; }
.legend-swatch-gray { background: #6b7280; margin: 0 4px; }
.legend-swatch-sky { background: #0ea5e9; margin-right: 6px; }
.bar-label-position { right: 12px; top: 50%; transform: translateY(-50%); }
.bar-width-100 { width: 100%; } .bar-width-88 { width: 88%; } .bar-width-78 { width: 78.4%; }
.bar-width-73 { width: 73.6%; } .bar-width-60 { width: 60%; } .bar-width-56 { width: 56%; }
.bar-width-54 { width: 54.4%; } .bar-width-52 { width: 52%; } .bar-width-49 { width: 49.6%; }
.bar-width-48 { width: 48%; } .bar-width-47 { width: 47.2%; } .bar-width-46 { width: 46.4%; }
.bar-width-44 { width: 44%; } .bar-width-40 { width: 40%; } .bar-width-38 { width: 38.4%; }
.bar-width-36 { width: 36%; } .bar-width-0 { width: 0; }
.searchLicense:focus { border-color: #3b82f6 !important; outline: none; box-shadow: 0 0 0 2px rgba(59,130,246,.16); }

/* Dynamic chart values are passed as data attributes and applied by the page runtime. */
.js-dynamic-width { width: var(--runtime-width); }
.js-dynamic-color { background-color: var(--runtime-color); }