/* ============================================================
   auto-generate-report.css
   Styles for AutoGenerateReport.razor
   Layout: A4 width on screen, full A4 on print
   Print: strips Radzen shell, repeats footer on every page
   ============================================================ */

/* ── CSS Variables ──────────────────────────────────────────── */
:root {
    --rpt-blue-600: #111111;
    --rpt-blue-400: #444444;
    --rpt-blue-100: #cccccc;
    --rpt-blue-50: #f2f2f2;
    --rpt-blue-800: #000000;
    --rpt-green-600: #222222;
    --rpt-green-50: #eeeeee;
    --rpt-amber-600: #333333;
    --rpt-amber-50: #f5f5f5;
    --rpt-red-600: #222222;
    --rpt-red-50: #eeeeee;
    --rpt-gray-600: #555555;
    --rpt-gray-50: #f0f0f0;
    --rpt-surface: #ffffff;
    --rpt-bg: #f5f5f5;
    --rpt-border: #cccccc;
    --rpt-text: #111111;
    --rpt-text-2: #444444;
    --rpt-text-3: #777777;
    --rpt-radius: 8px;
    --rpt-radius-lg: 12px;
}

/* ── Report wrapper (A4 width, centred) ─────────────────────── */
.report {
    display: flex;
    flex-direction: column;
    width: 270mm;
    max-width: 100%;
    margin: 0 auto;
    background: #ffffff;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: var(--rpt-text);
    box-shadow: 0 4px 32px rgba(0,0,0,0.14), 0 1px 4px rgba(0,0,0,0.08);
}

    /* ── HEADER ─────────────────────────────────────────────────── */
    .report .header {
        background: #ffffff;
        border-bottom: 2px solid #111111;
        padding: 0 28px;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        top: 0;
        z-index: 100;
    }

    .report .header-left {
        display: flex;
        align-items: center;
        gap: 14px;
        flex: 0 0 auto;
    }

    .report .header-center {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .report .logo-mark {
        width: 38px;
        height: 38px;
        background: rgba(255,255,255,0.15);
        border-radius: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .report .icon-logo {
        width: 28px;
        height: 28px;
        display: block;
    }

    .report .icon-btn {
        width: 13px;
        height: 13px;
        flex-shrink: 0;
    }

    .report .icon-filter {
        width: 13px;
        height: 13px;
    }

    .report .report-meta {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .report .report-title-input {
        font-size: 16px;
        font-weight: 600;
        color: #111111;
        line-height: 1.2;
        cursor: text;
        outline: none;
        border: none;
        border-bottom: 1px solid transparent;
        background: transparent;
        transition: border-color 0.15s;
        min-width: 120px;
        text-align: center;
        font-family: 'DM Sans', sans-serif;
        box-shadow: none;
    }

        .report .report-title-input:focus {
            border-bottom-color: rgba(0,0,0,0.3);
        }

    .report .report-title-bottomline {
        display: block;
        width: 100%;
        max-width: 260px;
        margin-top: 4px;
        border-bottom: 1px solid rgba(17, 17, 17, 0.75);
    }

    .report .report-date {
        font-size: 11px;
        color: var(--rpt-blue-100);
        margin-top: 1px;
    }

    .report .header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* ── Buttons ────────────────────────────────────────────────── */
    .report .btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        border: none;
        border-radius: var(--rpt-radius);
        padding: 7px 14px;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        font-family: inherit;
        white-space: nowrap;
        transition: background 0.15s;
    }

    .report .btn-white {
        background: #111111;
        color: #ffffff;
    }

        .report .btn-white:hover {
            background: #333333;
        }

    .report .btn-primary {
        background: var(--rpt-blue-400);
        color: #fff;
    }

        .report .btn-primary:hover {
            background: var(--rpt-blue-600);
        }

    .report .btn-default {
        background: var(--rpt-surface);
        color: var(--rpt-text);
        border: 1px solid var(--rpt-border);
    }

        .report .btn-default:hover {
            background: var(--rpt-bg);
        }

    /* ── Stats bar ──────────────────────────────────────────────── */
    .report .stats-bar {
        background: var(--rpt-surface);
        border-bottom: 1px solid var(--rpt-border);
        padding: 14px 28px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    .report .stat {
        background: var(--rpt-bg);
        border-radius: var(--rpt-radius);
        padding: 11px 14px;
        border: 1px solid var(--rpt-border);
    }

    .report .stat-label {
        font-size: 11px;
        color: var(--rpt-text-2);
        margin-bottom: 4px;
        font-weight: 500;
    }

    .report .stat-value {
        font-size: 22px;
        font-weight: 600;
        line-height: 1;
    }

        .report .stat-value.c-blue {
            color: var(--rpt-blue-600);
        }

        .report .stat-value.c-green {
            color: var(--rpt-green-600);
        }

        .report .stat-value.c-amber {
            color: var(--rpt-amber-600);
        }

        .report .stat-value.c-gray {
            color: var(--rpt-text-2);
        }

    /* ── Filter panel ───────────────────────────────────────────── */
    .report .filter-wrap {
        background: var(--rpt-surface);
        border-bottom: 1px solid var(--rpt-border);
    }

    .report .filter-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 11px 15px;
        cursor: pointer;
        user-select: none;
    }

        .report .filter-head:hover {
            background: var(--rpt-bg);
        }

    .report .filter-head-left {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 12px;
        font-weight: 500;
        color: var(--rpt-text-2);
    }

    .report .filter-chevron {
        font-size: 9px;
        color: var(--rpt-text-3);
        transition: transform 0.2s;
    }

    .report .filter-body {
        display: none;
        padding: 0 28px 16px;
        grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
        gap: 10px;
        animation: rptFadeIn 0.15s ease;
    }

        .report .filter-body.open {
            display: grid;
        }

@keyframes rptFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.report .fg {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .report .fg label {
        font-size: 10px;
        font-weight: 600;
        color: var(--rpt-text-3);
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

.report .filter-actions {
    display: flex;
    gap: 7px;
    align-items: flex-end;
}

/* request-type field spans 2 cols */
.report .filter-body.open > .request-type-field {
    grid-column: span 2;
}

@media (max-width: 667px) {
    .report .filter-body.open > .request-type-field {
        grid-column: auto;
    }
}

/* ── Radzen input overrides ─────────────────────────────────── */
.report .rpt-input .rz-textbox {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 12px !important;
    padding: 7px 10px !important;
    border: 1px solid var(--rpt-border) !important;
    border-radius: var(--rpt-radius) !important;
    background: var(--rpt-bg) !important;
    color: var(--rpt-text) !important;
    outline: none !important;
    width: 100% !important;
    height: auto !important;
    min-height: unset !important;
    box-shadow: none !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}

    .report .rpt-input .rz-textbox:focus {
        border-color: var(--rpt-blue-400) !important;
        box-shadow: 0 0 0 3px var(--rpt-blue-50) !important;
    }

.report .rpt-select .rz-dropdown {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 12px !important;
    border: 1px solid var(--rpt-border) !important;
    border-radius: var(--rpt-radius) !important;
    background: var(--rpt-bg) !important;
    height: auto !important;
    min-height: unset !important;
    box-shadow: none !important;
    width: 100% !important;
}

    .report .rpt-select .rz-dropdown .rz-dropdown-label {
        font-family: 'DM Sans', sans-serif !important;
        font-size: 12px !important;
        padding: 7px 10px !important;
        color: var(--rpt-text) !important;
        background: transparent !important;
        line-height: 1.4 !important;
    }

    .report .rpt-select .rz-dropdown .rz-dropdown-trigger {
        padding: 7px 8px !important;
    }

.report .rpt-input .rz-datepicker,
.report .rpt-input .rz-calendar {
    width: 100% !important;
}

    .report .rpt-input .rz-datepicker .rz-inputtext,
    .report .rpt-input .rz-inputtext {
        font-family: 'DM Sans', sans-serif !important;
        font-size: 12px !important;
        padding: 7px 10px !important;
        border: 1px solid var(--rpt-border) !important;
        border-radius: var(--rpt-radius) !important;
        background: var(--rpt-bg) !important;
        color: var(--rpt-text) !important;
        height: auto !important;
        min-height: unset !important;
        box-shadow: none !important;
        width: 100% !important;
    }

        .report .rpt-input .rz-datepicker .rz-inputtext:focus,
        .report .rpt-input .rz-inputtext:focus {
            border-color: var(--rpt-blue-400) !important;
            box-shadow: 0 0 0 3px var(--rpt-blue-50) !important;
        }

/* ── Active filter bar ──────────────────────────────────────── */
.report .filter-selected-bar {
    background: #f2f2f2;
    border-bottom: 1px solid var(--rpt-border);
    padding: 8px 15px;
    font-size: 12px;
    color: var(--rpt-text);
}

/* ── Table area ─────────────────────────────────────────────── */
.report .table-area {
    padding: 18px 28px;
    flex: 1;
}

.report .table-card {
    background: var(--rpt-surface);
    border: 1px solid var(--rpt-border);
    border-radius: var(--rpt-radius-lg);
    overflow: hidden;
}

.report .table-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--rpt-border);
}

.report .table-bar-left {
    display: flex;
    align-items: center;
    gap: 9px;
}

.report .table-bar-title {
    font-size: 13px;
    font-weight: 600;
}

.report .count-pill {
    background: var(--rpt-bg);
    border: 1px solid var(--rpt-border);
    border-radius: 20px;
    padding: 2px 9px;
    font-size: 11px;
    color: var(--rpt-text-2);
}

.report .table-bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.report .tbl-scroll {
    overflow-x: auto;
}

/* ── Screen / Print visibility ──────────────────────────────── */
.report .screen-only {
    display: block;
}

.report .print-only {
    display: none;
}

/* ── RadzenDataGrid (.report-grid) ─────────────────────────── */
.report .report-grid {
    font-family: 'DM Sans', sans-serif !important;
    font-size: 12px !important;
    border: none !important;
    box-shadow: none !important;
}

    .report .report-grid .rz-column-header {
        background: var(--rpt-bg) !important;
        padding: 9px 14px !important;
        border-bottom: 1px solid var(--rpt-border) !important;
        border-right: none !important;
        white-space: nowrap;
    }

    .report .report-grid .rz-column-header-content {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: var(--rpt-text-2) !important;
    }

    .report .report-grid .rz-data-row td,
    .report .report-grid .rz-data-row .rz-cell {
        padding: 9px 14px !important;
        border-bottom: 1px solid var(--rpt-border) !important;
        border-right: none !important;
        color: var(--rpt-text) !important;
        font-size: 12px !important;
    }

    .report .report-grid .rz-data-row:last-child td,
    .report .report-grid .rz-data-row:last-child .rz-cell {
        border-bottom: none !important;
    }

    .report .report-grid .rz-data-row:hover td,
    .report .report-grid .rz-data-row:hover .rz-cell {
        background: #f0f0f0 !important;
    }

    .report .report-grid .rz-no-data {
        text-align: center !important;
        padding: 36px !important;
        color: var(--rpt-text-3) !important;
        font-size: 13px !important;
    }

.report .col-hdr {
    font-size: 11px;
    font-weight: 600;
    color: var(--rpt-text-2);
}

.report .cell-text {
    font-size: 12px;
    color: var(--rpt-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    max-width: 200px;
}

/* ── Monospace ──────────────────────────────────────────────── */
.report .mono {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 11px;
    color: var(--rpt-text-2);
}

/* ── Badges ─────────────────────────────────────────────────── */
.report .badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
}

.report .b-blue {
    background: var(--rpt-blue-50);
    color: var(--rpt-blue-800);
}

.report .b-green {
    background: var(--rpt-green-50);
    color: var(--rpt-green-600);
}

.report .b-amber {
    background: var(--rpt-amber-50);
    color: var(--rpt-amber-600);
}

.report .b-red {
    background: var(--rpt-red-50);
    color: var(--rpt-red-600);
}

.report .b-gray {
    background: var(--rpt-gray-50);
    color: var(--rpt-gray-600);
}

    .report .empty-row td {
        text-align: center;
        padding: 36px;
        color: var(--rpt-text-3);
        font-size: 13px;
}

/* ── Score bar ──────────────────────────────────────────────── */
.report .score-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 90px;
}

.report .score-bar-bg {
    flex: 1;
    height: 5px;
    background: var(--rpt-border);
    border-radius: 3px;
    overflow: hidden;
}

.report .score-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}

.report .score-num {
    font-size: 11px;
    font-weight: 600;
    min-width: 28px;
    text-align: right;
}

.report .weightage-cell {
    display: block;
    color: var(--rpt-text);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.report .weightage-value {
    color: var(--rpt-text);
    font-weight: 600;
}

/* ── Screen footer (hidden on print) ───────────────────────── */
.report .footer {
    background: var(--rpt-surface);
    border-top: 1px solid var(--rpt-border);
    padding: 12px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.report .footer-left {
    font-size: 11px;
    color: var(--rpt-text-3);
}

.report .footer-center {
    font-size: 11px;
    color: var(--rpt-text-2);
    font-weight: 500;
}

.report .footer-right {
    font-size: 11px;
    color: var(--rpt-text-3);
}

/* ── wpt-footer: hidden on screen ──────────────────────────── */
.report .wpt-footer {
    display: none;
}

/* ── Input with icon ────────────────────────────────────────── */
.input-with-icon {
    display: flex;
    align-items: center;
    gap: 4px;
}

.input-with-icon .rpt-input,
    .input-with-icon .rz-datepicker {
        flex: 1;
        min-width: 0;
    }

.report .date-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.report .input-with-icon .date-input-wrapper {
    flex: 1;
    min-width: 0;
}

.report .date-input-field {
    padding-right: 36px !important;
    cursor: pointer;
}

.report .date-input-icon {
    position: absolute;
    right: 8px;
    cursor: pointer;
    color: var(--rz-primary);
    display: flex;
    align-items: center;
    z-index: 2;
}

.report .calendar-popup {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    background: white;
    margin-top: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 8px;
}

.report .calendar-popup-end {
    left: auto;
    right: 0;
}

.report .report-calendar {
    width: 280px;
    background: #fff;
    border: 1px solid #e8edf3;
    border-radius: 8px;
    padding: 10px;
}

.report .report-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    margin-bottom: 8px;
}

.report .report-calendar-header button {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background: #f0f5fb;
    color: #315d8f;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

.report .report-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.report .report-calendar-weekdays {
    margin-bottom: 6px;
}

.report .report-calendar-day {
    text-align: center;
    padding: 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}

.report .report-calendar-weekday {
    font-weight: 600;
    cursor: default;
}

.report .report-calendar-day:hover {
    background: #f0f5fb;
}

.report .report-calendar-day.selected {
    background: #4071a8;
    color: #fff;
}

.report .report-calendar-day.today {
    border: 1px solid #4071a8;
}

.report .report-calendar-day.disabled {
    color: #ccc;
}

.icon-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 39px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background: #f8f9fa;
    color: #495057;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

    .icon-search-btn:hover {
        background: #0d6efd;
        color: #fff;
        border-color: #0d6efd;
    }

    .icon-search-btn i {
        font-size: 13px;
    }

/* ── Weightage tree (screen) ────────────────────────────────── */
.wtree-wrap {
    width: 100%;
    border-top: 1px solid #e8e8e8;
    background: #fff;
}

.wtree-empty {
    padding: 24px 20px;
    color: #888;
    font-size: 0.875rem;
    margin: 0;
}

.wtree-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;
    padding: 13px 20px;
    background: #fff;
    transition: background 0.12s;
}

    .wtree-row:last-child {
        border-bottom: none;
    }

    .wtree-row:hover {
        background: #fafafa;
    }

.wtree-label-col {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.wtree-chevron {
    font-size: 9px;
    color: #666;
    flex-shrink: 0;
}

.wtree-name {
    font-size: 0.875rem;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wtree-domain {
    padding-left: 20px;
}

.wtree-process {
    padding-left: 44px;
}

.wtree-practice {
    padding-left: 100px;
}

.wtree-domain .wtree-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: #111;
}

.wtree-process .wtree-name {
    font-weight: 600;
    color: #222;
}

.wtree-practice .wtree-name {
    font-weight: 400;
    color: #444;
}

.wtree-practice .wtree-chevron {
    display: none;
}

.wtree-poc {
    padding-left: 9.5rem;
    font-size: 0.8rem;
    color: #555;
}

    .wtree-poc .wtree-name::before {
        content: "• ";
        color: #888;
    }

.wtree-spinner {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    padding: 3px 6px 3px 14px;
    background: #fff;
    min-width: 88px;
    justify-content: space-between;
    gap: 6px;
}

.wtree-val {
    font-size: 0.875rem;
    font-weight: 500;
    color: #111;
    min-width: 40px;
    text-align: right;
}

.wtree-arrows {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.wtree-up,
.wtree-dn {
    font-size: 10px;
    color: #888;
    line-height: 1.3;
    cursor: default;
    user-select: none;
}

    .wtree-up:hover,
    .wtree-dn:hover {
        color: #111;
    }

/* ── pf-wrap (used in Assessment print tfoot) ───────────────── */
.pf-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 9pt;
    color: #555;
}

.pf-left {
    flex: 0 0 auto;
}

.pf-center {
    flex: 1;
    text-align: center;
    font-weight: 600;
    color: #333;
}

.pf-right {
    flex: 0 0 auto;
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {

    /* ── Page setup — extra bottom margin for fixed footer ── */
    @page {
        size: A4;
        margin: 14mm 12mm 22mm 12mm;
    }

    /* ── Strip Radzen layout chrome ── */
    .rz-header,
    .rz-sidebar,
    .radzen-sidebar,
    .rz-footer,
    .rz-sidebar-toggle,
    .rz-layout > .rz-header,
    .rz-layout > .rz-footer {
        display: none !important;
    }

    .rz-layout,
    .rz-body,
    .rz-body > * {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: unset !important;
        overflow: visible !important;
        background: #ffffff !important;
    }

    /* ── Report fills A4 ── */
    .report {
        width: 100% !important;
        max-width: 100% !important;
        box-shadow: none !important;
        margin: 0 !important;
        display: block !important;
        overflow: visible !important;
    }

    /* ── No-print elements ── */
    .no-print {
        display: none !important;
    }

    /* ── Screen vs print visibility ── */
    .report .screen-only {
        display: none !important;
    }

    .report .print-only {
        display: block !important;
    }

    /* ── Header ── */
    .report .header {
        background: #ffffff !important;
        border-bottom: 2px solid #111111;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        position: static;
        height: auto;
        padding: 10px 20px;
    }

    .report .report-title-input {
        color: #111111 !important;
    }

    .report .report-title-bottomline {
        border-bottom-color: rgba(17, 17, 17, 0.85);
        max-width: 280px;
        margin-top: 3px;
    }

    /* ── Hide filter panels and active filter bar on print ── */
    .report .filter-wrap,
    .report .filter-selected-bar {
        display: none !important;
    }

    /* ── Stats ── */
    .report .stats-bar {
        padding: 10px 20px;
        break-inside: avoid;
    }

    /* ── Table area ── */
    .report .table-area {
        padding: 10px 20px;
    }

    .report .table-card {
        border-radius: 0;
    }

    .report .table-bar-right {
        display: none !important;
    }

    /* ── Plain HTML print table ── */
    .report .print-only table {
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
    }

    .report .print-only thead th {
        background: #e8e8e8 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        padding: 9px 14px;
        text-align: left;
        font-size: 11px;
        font-weight: 600;
        color: var(--rpt-text-2);
        border-bottom: 1px solid var(--rpt-border);
        white-space: nowrap;
    }

    .report .print-only tbody td {
        padding: 9px 14px;
        border-bottom: 1px solid var(--rpt-border);
        color: var(--rpt-text);
        font-size: 12px;
    }

    .report .print-only tbody tr:last-child td {
        border-bottom: none;
    }

    .report .print-only tbody tr {
        break-inside: avoid;
    }

    /* ── Assessment tfoot repeats on every page ── */
    .report .print-tbl tfoot {
        display: table-footer-group !important;
    }

        .report .print-tbl tfoot .pf-td {
            padding: 4px 14px !important;
            border-top: 1px solid #cccccc !important;
            background: #ffffff !important;
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
        }

    /* ── Score bar in print ── */
    .report .score-bar-bg {
        background: #cccccc !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* ── Badges in print ── */
    .report .b-blue,
    .report .b-green,
    .report .b-amber,
    .report .b-red,
    .report .b-gray {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* ── Hide screen footer ── */
    .report .footer {
        display: none !important;
    }

    /* ── wpt-footer: fixed to bottom of EVERY page ── */
    .report .wpt-footer {
        display: block !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding: 4px 16px !important;
        background: #ffffff !important;
        border-top: 1px solid #cccccc !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        z-index: 99999 !important;
    }

    .wpt-wrap {
        width: 100%;
        background: #fff;
    }

    .wpt-empty {
        font-size: 10pt;
        color: #666;
        padding: 12px 0;
        margin: 0;
    }

    /* shared print tree row */
    .wpt-row {
        display: flex;
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        border-bottom: 1px solid #e0e0e0;
        padding: 6px 0;
        width: 100%;
        page-break-inside: avoid;
    }

        .wpt-row:last-child {
            border-bottom: none;
        }

    .wpt-domain {
        padding-left: 0px;
    }

    .wpt-process {
        padding-left: 20px;
    }

    .wpt-practice {
        padding-left: 44px;
    }

    .wpt-poc {
        padding-left: 9.5rem;
        font-size: 0.8rem;
        color: #444;
    }

        .wpt-poc .wpt-name::before {
            content: "• ";
        }

    .wpt-domain .wpt-name {
        font-size: 10pt;
        font-weight: 700;
        color: #000;
    }

    .wpt-process .wpt-name {
        font-size: 9.5pt;
        font-weight: 600;
        color: #111;
    }

    .wpt-practice .wpt-name {
        font-size: 9pt;
        font-weight: 400;
        color: #333;
    }

    .wpt-val {
        font-size: 9pt;
        font-weight: 600;
        color: #000;
        white-space: nowrap;
        flex-shrink: 0;
        margin-left: 16px;
        text-align: right;
        min-width: 48px;
    }

    .wpt-name {
        flex: 1;
        word-break: break-word;
    }

    /* ── pf-wrap in tfoot ── */
    .pf-wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 9pt;
        color: #555;
    }

    .pf-left {
        flex: 0 0 auto;
    }

    .pf-center {
        flex: 1;
        text-align: center;
        font-weight: 600;
        color: #333;
    }

    .pf-right {
        flex: 0 0 auto;
    }

    @media print {

        @page {
            size: A4;
            margin: 14mm 12mm 18mm 12mm;
        }

        body {
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }

        .no-print {
            display: none !important;
        }

        .report {
            width: 100% !important;
            margin: 0 !important;
            box-shadow: none !important;
        }

        .print-only {
            display: block !important;
        }

        .screen-only {
            display: none !important;
        }

        /* ✅ TABLE STRUCTURE */
        .print-tbl {
            width: 100%;
            border-collapse: collapse;
            font-size: 12px;
        }

            .print-tbl thead {
                display: table-header-group;
            }

            .print-tbl tfoot {
                display: table-footer-group;
            }

            .print-tbl th {
                background: #e8e8e8 !important;
                padding: 8px;
                text-align: left;
                border-bottom: 1px solid #ccc;
            }

            .print-tbl td {
                padding: 8px;
                border-bottom: 1px solid #ddd;
            }

            .print-tbl tr {
                page-break-inside: avoid;
            }

        /* ✅ FOOTER STYLE */
        .pf-wrap {
            display: flex;
            justify-content: space-between;
            font-size: 10px;
            border-top: 1px solid #ccc;
            padding-top: 4px;
        }
    }
}

.date-range-field {
    grid-column: span 2; /* optional: make it wider */
}

.date-range-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .date-range-row .date-input-wrapper {
        flex: 1;
        min-width: 0;
    }
.calander-date {
    font-family: "Segoe UI", sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    line-height: 19.5px !important;
    letter-spacing: 0px !important;
    color: #111111 !important;
}