:root {
    --daily-report-page-height: calc(100vh - 180px);
    --report-secondary-color: color-mix(in srgb, var(--bs-secondary-color) 65%, transparent);
}

.report-table {
    --action-label-min-w: 8rem;
}

    .report-table,
    .report-table td,
    .report-table th {
        vertical-align: middle;
        white-space: nowrap;
        border: none;
    }

.report-table {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}

    .report-table thead {
        position: relative;
        z-index: 1;
        transition: box-shadow .15s ease;
    }

        .report-table thead th {
            font-weight: 600;
            color: var(--bs-body-color);
            background: var(--bs-tertiary-bg);
        }

    /* === machine block striping === */

    .report-table tbody tr.machine-start:nth-child(4n-3) td,
    .report-table tbody tr.machine-start:nth-child(4n-3) + tr td {
        background-color: color-mix(in srgb, var(--bs-secondary-bg) 100%, transparent);
    }

/* === sticky header for daily report === */

.daily-report-page.report-table-sticky-top {
    height: var(--daily-report-page-height);
    display: flex;
    flex-direction: column;
}

.report-table-sticky-top .report-table-container {
    overflow-y: auto;
}

.report-table-sticky-top .report-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.report-table-sticky-top.scrolled .report-table thead {
    --report-table-shadow-color: color-mix(in srgb, var(--bs-body-color) 10%, transparent);
    box-shadow: 0 .125rem .25rem var(--report-table-shadow-color);
}

.daily-report-page .card {
    flex: 0 0 auto;
}

/* Machine label cell */

.report-table th.item-cell,
.report-table td.item-cell {
    /*color: var(--report-secondary-color);*/
}

.report-table td.createdby-cell,
.report-table td.createdat-cell {
    color: var(--report-secondary-color);
    font-size: .95rem;
}

.report-table td .action-ok-cell,
.report-table td .action-pending-cell,
.report-table td.product-cell {
    color: var(--report-secondary-color);
    font-size: .95rem;
    text-transform: uppercase;
}

.report-table td.machine-cell {
    text-align: center;
    font-weight: 500;
    font-size: 1.1rem;
    letter-spacing: .1px;
}

/* subline */

.report-table .spec-cell {
    position: relative;
}

.report-table .sub-text-1 {
    font-size: .9rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--bs-secondary-text-emphasis) 75%, transparent);
}

.report-table .sub-text-2 {
    font-size: .725rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--bs-secondary-text-emphasis) 60%, transparent);
    position: absolute;
    bottom: 0;
    right: 0;
    margin: .125rem;
    padding: 0 .25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
}

/* table element styles */

.report-table-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .5rem .5rem;
    border-radius: var(--bs-border-radius-sm);
    min-width: 6rem;
    letter-spacing: 0.25px;
}

    .report-table-badge.judge {
        padding: 1.9rem .5rem;
        min-width: 8.75rem;
        font-weight: 500;
        font-size: 1.2rem;
        font-family: system-ui, 'Segoe UI';
        text-transform: uppercase;
    }

.action-btn {
    min-width: 180px;
}

    .action-btn .badge {
        font-size: 1rem;
        font-weight: 400;
        min-width: 150px;
    }

/* Option B (True full fill padding – more aggressive) */

/*td {
    padding: 0;
}

.particle-chart-group {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 8px 10px;
    border-radius: 10px;
}*/

/* ---- Action Column ---- */

.report-table #actionLabel {
    padding: .775rem .65rem;
    min-width: var(--action-label-min-w);
    font-size: 1rem;
    font-weight: 400;
    width: 100%;
    height: 100%;
    color: var(--bs-body-color);
    transition: background .25s;
}

.report-table #actionLabel:hover {
    background-color: var(--bs-tertiary-bg);
}

.report-table #actionBtn {
    padding: .5rem .65rem;
    min-width: calc(var(--action-label-min-w) + 30px);
    font-size: 1rem;
    font-weight: 500;
    border-radius: var(--bs-border-radius);
    border: 1px dashed;
}

    .report-table #actionBtn:has(#actionLabel) {
        background-color: transparent;
        border: none;
        box-shadow: none;
    }

    .report-table #actionBtn:has(#actionLabel) {
        background-color: none;
        border: none;
        box-shadow: none;
        padding: unset;
    }

    .report-table #actionBtn.dropdown-toggle::after {
        display: none;
    }

.action-dropdown .dropdown-menu {
    min-width: unset;
    /*width: 100%;*/
}
/* ---- #reportSummary ---- */

#reportSummary {
    display: flex;
    gap: .5rem;
    padding: .5rem 1rem;
    min-height: 50px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg);
    transition: min-width 250ms ease-in-out
}

.particle-chart-group-td {
    display: flex;
    justify-content: center;
}
/* 🔥 clickable group base */
.particle-chart-group {
    display: flex; /* 🔥 change from block */
    width: 100%;
    max-width: 6.5rem;
    justify-content: center; /* 🔥 horizontal center */
    align-items: center; /* 🔥 vertical center */
    gap: .35rem; /* optional: space between text + icon */
    cursor: pointer;
    padding: .4rem .75rem;
    border-radius: var(--bs-border-radius-sm);
    transition: background-color .12s ease, transform .05s ease;
}
/* 🔥 TD hover → expand highlight to almost full cell */
td:hover .particle-chart-group {
    background-color: rgba(var(--bs-primary-rgb), 0.10);
}
/* 🔥 subtle press feedback */
.particle-chart-group:active {
    opacity: .65;
    transform: scale(0.95);
}
/* 🔥 keep inner layout (row style) */
.particle-chart-group.d-inline-flex {
    display: flex !important;
}
/* 🔥 text default */
.particle-chart-text {
    display: inline-block;
    text-decoration: none;
    color: inherit;
}
/* 🔥 keep button behavior intact */
.particle-chart-icon {
    pointer-events: auto;
}
/* 🔥 Option A: make hover area feel bigger vertically */

.report-table td {
    position: relative;
}
/* === table frame with frames + highlight === */
/*.report-table thead th {
    border-bottom: 1px solid var(--bs-border-color);
}*/
/*.report-table {
    border-left: 1px solid var(--bs-border-color-translucent);
    border-right: 1px solid var(--bs-border-color-translucent);
}*/
/*    .report-table tr:last-child {
        border-bottom: 1px solid var(--bs-border-color-translucent);
    }*/
/*    .report-table th {
        border-left: 1px solid var(--bs-border-color-translucent);
        border-top: 1px solid var(--bs-border-color-translucent);
    }*/
/*        .report-table th:last-child,
        .report-table td:last-child {
            border-right: 1px solid var(--bs-border-color-translucent);
        }*/
/* === machine divider (Metal / Non-Metal block) === */
/*    .report-table tr.machine-end td,
    .report-table tr.machine-start .machine-cell {
        border-bottom: 1px solid var(--bs-border-color);
    }*/