/* Dense Radzen data grids (deliveries, purchasing shipments, work orders): toolbar, quick filters,
   compact rows, status pills and expandable detail tables. Shared by the components
   that wrap their grid in .dgrid-host. */

/* Same frame as the invoice grid: Radzen re-pointed at the Mud teal inside this wrapper only. */
.dgrid-host {
    --rz-primary: var(--mud-palette-primary);
    --rz-primary-light: color-mix(in srgb, var(--mud-palette-primary) 70%, white);
    --rz-primary-lighter: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    --rz-primary-dark: color-mix(in srgb, var(--mud-palette-primary) 82%, black);
    --rz-primary-darker: color-mix(in srgb, var(--mud-palette-primary) 65%, black);
    --rz-on-primary: #fff;
    --rz-link-color: var(--mud-palette-primary);
    --rz-link-hover-color: var(--rz-primary-dark);
}

.dgrid-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: .35rem;
    min-height: 30px;
}

.dgrid-heading,
.dgrid-toolbar-actions {
    display: flex;
    align-items: center;
    gap: .35rem;
}

.dgrid-toolbar-actions { margin-left: auto; }

.dgrid-title {
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
}

.dgrid-count {
    padding: .1rem .4rem;
    border-radius: 999px;
    background: var(--rz-base-200);
    color: var(--rz-text-secondary-color);
    font-size: .72rem;
    line-height: 1.25;
    white-space: nowrap;
}

/* The interval picker keeps its Mud look, it only loses the extra top margin. */
.dgrid-toolbar .mud-input-control { margin-top: 0; }
.dgrid-interval { max-width: 300px; }

.dgrid-search {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    width: 240px;
    height: 30px;
    padding: 0 .3rem 0 .55rem;
    border: 1px solid var(--rz-base-300, var(--mud-palette-lines-default));
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--rz-text-secondary-color);
    cursor: text;
}
.dgrid-search:focus-within {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
}
.dgrid-search .rzi { font-size: 1.05rem; }
.dgrid-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: none;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: .82rem;
}
.dgrid-search input::-webkit-search-cancel-button { display: none; }

.dgrid-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--rz-base-300, var(--mud-palette-lines-default));
    border-radius: 8px;
    background: var(--mud-palette-surface);
    color: var(--rz-text-secondary-color);
    cursor: pointer;
    text-decoration: none;
}
.dgrid-icon-btn.is-bare { width: 22px; height: 22px; border: 0; border-radius: 50%; background: none; }
.dgrid-icon-btn .rzi { font-size: 1.05rem; }
.dgrid-icon-btn:hover:not(:disabled) { background: var(--rz-base-200); color: var(--mud-palette-text-primary); }
.dgrid-icon-btn:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 1px; }
.dgrid-icon-btn:disabled { opacity: .55; cursor: progress; }
.dgrid-icon-btn.is-on {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    color: var(--mud-palette-primary);
}

.rzi.is-spinning { animation: dgrid-spin .9s linear infinite; }
@keyframes dgrid-spin { to { transform: rotate(360deg); } }

/* Second row: the row colours of the old grid, now counted and clickable. One at a time. */
.dgrid-quick-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin-bottom: .45rem;
}

.dgrid-quick {
    --tone: var(--mud-palette-error);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .6rem;
    border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--tone) 10%, transparent);
    color: color-mix(in srgb, var(--tone) 80%, black);
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.dgrid-quick .rzi { font-size: 1.05rem; }
.dgrid-quick:hover { background: color-mix(in srgb, var(--tone) 18%, transparent); }
.dgrid-quick:focus-visible { outline: 2px solid var(--tone); outline-offset: 1px; }
.dgrid-quick.is-active { border-color: var(--tone); background: var(--tone); color: #fff; }
.dgrid-quick.is-active:hover { filter: brightness(.94); }
.dgrid-quick__close { font-size: .95rem !important; opacity: .8; }

/* One tone per row state, shared by the quick filters, the row stripe and the row tint. */
.dgrid-host {
    --tone-overdue: #e53935;
    --tone-today: #43a047;
    --tone-tomorrow: #1e88e5;
    --tone-ship: #f9a825;
    --tone-production: #7e57c2;
    --tone-planned: #fb8c00;
}
.dgrid-host .is-overdue { --tone: var(--tone-overdue); }
.dgrid-host .is-today { --tone: var(--tone-today); }
.dgrid-host .is-tomorrow { --tone: var(--tone-tomorrow); }
.dgrid-host .is-ship { --tone: var(--tone-ship); }
.dgrid-host .is-production { --tone: var(--tone-production); }
.dgrid-host .is-planned { --tone: var(--tone-planned); }

.dgrid-table .rz-group-header { display: none; }

/* Work orders keep the drag-to-group panel: the start-date period is one group, any column can be another. */
.wo-grid-host .dgrid-table .rz-group-header {
    display: flex;
    min-height: 34px;
    padding: .2rem .45rem;
    font-size: .76rem;
}

.dgrid-table .rz-grid-table {
    table-layout: auto;
    width: 100%;
}

.dgrid-table .rz-grid-table thead th,
.dgrid-table .rz-data-grid-data td {
    padding: .2rem .42rem;
}

.dgrid-table .rz-data-grid-data td {
    height: 30px;
    font-size: .8rem;
    line-height: 1.15;
}

.dgrid-table .rz-column-title {
    font-size: .76rem;
    font-weight: 600;
}

.dgrid-table .rz-rowgroup-header td,
.dgrid-table .rz-group-row td {
    padding-top: .25rem;
    padding-bottom: .25rem;
    font-size: .78rem;
}

.dgrid-table th.dgrid-col-tight,
.dgrid-table td.dgrid-col-tight {
    width: 1%;
    white-space: nowrap;
}

.dgrid-table td.dgrid-col-text .rz-cell-data {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Row state: a thin stripe on the first cell plus a light tint, instead of a solid colour
   across the whole row - the row stays readable and the state still reads at a glance. */
.dgrid-table tr[data-state] > td { background: color-mix(in srgb, var(--tone) 9%, var(--mud-palette-surface)); }
.dgrid-table tr[data-state] > td:first-child { box-shadow: inset 3px 0 0 var(--tone); }
.dgrid-table tr[data-state="overdue"] { --tone: var(--tone-overdue); }
.dgrid-table tr[data-state="today"] { --tone: var(--tone-today); }
.dgrid-table tr[data-state="tomorrow"] { --tone: var(--tone-tomorrow); }
.dgrid-table tr[data-state="ship"] { --tone: var(--tone-ship); }
.dgrid-table tr[data-state="production"] { --tone: var(--tone-production); }
.dgrid-table tr[data-state="planned"] { --tone: var(--tone-planned); }

.dgrid-table .dgrid-figure { font-variant-numeric: tabular-nums lining-nums; }

.dgrid-link {
    color: var(--mud-palette-primary);
    font-weight: 500;
    text-decoration: none;
}
.dgrid-link:hover { text-decoration: underline; }

.dgrid-plain-link {
    color: inherit;
    text-decoration: none;
}
.dgrid-plain-link:hover { color: var(--mud-palette-primary); text-decoration: underline; }

.dgrid-late {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--mud-palette-error);
    font-weight: 600;
}
.dgrid-late__days {
    padding: 0 .35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    font-size: .68rem;
    line-height: 1.5;
    white-space: nowrap;
}

.dgrid-status {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: var(--rz-base-200);
    color: var(--rz-text-secondary-color);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}
.dgrid-status__dot {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: currentColor;
}
.dgrid-status.is-confirmed { background: color-mix(in srgb, var(--mud-palette-info) 14%, transparent); color: color-mix(in srgb, var(--mud-palette-info) 78%, black); }
.dgrid-status.is-planned { background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent); color: color-mix(in srgb, var(--mud-palette-primary) 75%, black); }
.dgrid-status.is-inproduction { background: color-mix(in srgb, #7e57c2 14%, transparent); color: #5e35b1; }
.dgrid-status.is-ready { background: color-mix(in srgb, var(--mud-palette-warning) 18%, transparent); color: color-mix(in srgb, var(--mud-palette-warning) 70%, black); }
.dgrid-status.is-shipped { background: color-mix(in srgb, var(--mud-palette-success) 16%, transparent); color: color-mix(in srgb, var(--mud-palette-success) 70%, black); }
.dgrid-status.is-stopped { background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent); color: var(--mud-palette-error); }

.dgrid-actions {
    display: inline-flex;
    align-items: center;
    gap: .1rem;
}
.dgrid-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--rz-text-secondary-color);
    cursor: pointer;
}
.dgrid-action:hover:not(:disabled) { background: var(--rz-base-200); color: var(--mud-palette-primary); }
.dgrid-action:focus-visible { outline: 2px solid var(--mud-palette-primary); }
.dgrid-action:disabled { opacity: .35; cursor: default; }
.dgrid-action .rzi { font-size: 1.1rem; }

/* Expanded row: two compact sub-tables, production first, then what is being shipped. */
.dgrid-detail {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .35rem .25rem .5rem 1.5rem;
}
.dgrid-detail__title {
    margin-bottom: .2rem;
    color: var(--rz-text-secondary-color);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.dgrid-sub {
    width: 100%;
    border-collapse: collapse;
    font-size: .78rem;
}
.dgrid-sub th {
    padding: .2rem .45rem;
    border-bottom: 1px solid var(--rz-base-300, var(--mud-palette-lines-default));
    color: var(--rz-text-secondary-color);
    font-size: .72rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}
.dgrid-sub td {
    padding: .2rem .45rem;
    border-bottom: 1px solid var(--rz-base-200);
    vertical-align: top;
}
.dgrid-sub tr:last-child td { border-bottom: 0; }
.dgrid-sub .is-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dgrid-sub__empty { color: var(--rz-text-secondary-color); font-size: .78rem; font-style: italic; }
.dgrid-lots { display: flex; flex-wrap: wrap; gap: .1rem .5rem; }
.dgrid-flag { display: inline-flex; align-items: center; gap: .2rem; font-weight: 600; }
.dgrid-flag.is-yes { color: var(--mud-palette-primary); }
.dgrid-flag .rzi { font-size: .95rem; color: var(--mud-palette-warning); }
.dgrid-sub .wo-res-group td { font-weight: 600; background: var(--rz-base-100, transparent); }
.dgrid-sub .wo-res-lot { padding-left: 1.2rem; }

@media (prefers-reduced-motion: reduce) {
    .rzi.is-spinning { animation: none; }
    .dgrid-quick { transition: none; }
}

@media (max-width: 760px) {
    .dgrid-toolbar-actions { margin-left: 0; width: 100%; }
    .dgrid-search { flex: 1; width: auto; height: 36px; }
    .dgrid-icon-btn { width: 36px; height: 36px; }
    .dgrid-interval { max-width: none; width: 100%; }
    .dgrid-quick-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
    }
    .dgrid-quick-row > * { flex: none; }
}