/* SPDX-License-Identifier: LicenseRef-PVIR-Proprietary */

@media screen {
    [hidden] {
        display: none !important;
    }

    p,
    ul,
    ol,
    dl,
    pre,
    figure {
        margin: var(--gap-fields) 0;
    }

    ul,
    ol {
        padding-left: var(--space-6);
    }

    dd {
        margin: 0 0 var(--gap-title) var(--space-6);
    }

    blockquote {
        margin: var(--gap-fields) var(--space-6);
    }

    hr {
        margin: var(--gap-fields) 0;
        border: 0;
        border-top: var(--border-width) solid var(--line);
    }

    .modal-backdrop,
    .preview-layer {
        background: var(--overlay-soft);
        padding: var(--space-4);
    }

    .page-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: var(--gap-fields);
        margin: 0 0 var(--gap-panels);
    }

    .page-head h2,
    .panel-title h3,
    .modal-head h3,
    .ui-page-title,
    .ui-section-title,
    .ui-panel-title {
        margin: 0;
    }

    .page-head p,
    .modal-head p {
        margin: var(--gap-title) 0 0;
    }

    .actions,
    .row-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        gap: var(--gap-actions);
    }

    .data-table .row-actions {
        flex-wrap: nowrap;
        width: max-content;
        margin-left: auto;
    }

    .data-table .row-actions>.button {
        flex: 0 0 auto;
    }

    .data-table td[data-col="date"],
    .data-table td.mono,
    .data-table td.numeric {
        white-space: nowrap;
    }

    .data-table td:has(>.primary-cell) {
        min-width: var(--column-name-min-width);
    }

    .document-list-table {
        table-layout: fixed;
        min-width: var(--table-wide-min-width);
    }

    .document-list-table col[data-col="document"] {
        width: var(--column-name-min-width);
    }

    .document-list-table col[data-col="date"] {
        width: var(--column-short-width);
    }

    .document-list-table col[data-col="status"] {
        width: calc(var(--status-control-compact-width) + var(--control-height) + var(--space-4) * 2);
    }

    .document-list-table col[data-col="amount"] {
        width: var(--column-amount-width);
    }

    .document-list-table col[data-col="owner"] {
        width: var(--column-action-width);
    }

    .document-list-table col[data-col="email"] {
        width: calc(var(--control-height) + var(--space-4) * 2);
    }

    .document-list-table col[data-col="actions"] {
        width: calc(var(--column-action-width) * 2 + var(--control-height) + var(--space-2));
    }

    .document-list-table :is(th,td) {
        overflow-wrap: anywhere;
    }

    .document-list-table .row-actions {
        width: auto;
        min-width: 0;
        max-width: 100%;
        flex-wrap: wrap;
    }

    .document-list-table :is(td.numeric,.ui-money) {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .document-list-table .document-status-controls {
        min-width: 0;
        flex-wrap: wrap;
    }

    .document-list-table td .row-actions>.button {
        flex: 0 1 auto;
        max-width: 100%;
    }

    .document-list-table td>.primary-cell {
        min-width: 0;
    }

    .document-reference {
        width: var(--document-reference-width);
        max-width: 100%;
        justify-content: flex-start;
        text-align: left;
    }

    .document-markers,
    .document-status-controls {
        display: flex;
        align-items: center;
        gap: var(--gap-actions);
    }

    .document-markers {
        flex-wrap: wrap;
    }

    .document-status-controls .status-select {
        flex: 0 1 var(--status-control-compact-width);
        min-width: 0;
    }

    .document-status-readonly {
        display: inline-flex;
        align-items: center;
        width: var(--status-control-compact-width);
        min-height: var(--control-height);
        padding: var(--space-1) var(--control-padding);
        border: var(--border-width) solid var(--line);
        border-radius: var(--control-radius);
        background: var(--surface-2);
    }

    .receivable-summary-table {
        min-width: 0;
    }

    .receivable-summary-table :is(th,td):last-child {
        text-align: right;
    }

    .receivable-summary-table :is(th,td):first-child {
        min-width: var(--column-name-min-width);
    }

    .payments-receivables-table :is(th,td)[data-col="state"] {
        padding-left: var(--space-6);
    }

    .email-state-icon {
        width: var(--nav-icon-width);
        height: var(--nav-icon-width);
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .document-email-indicator[data-email-state="accepted"] {
        color: var(--ok);
    }

    .document-email-indicator:is([data-email-state="pending"], [data-email-state="unknown"]) {
        color: var(--accent-strong);
    }

    .email-history-table :is(th, td) {
        overflow-wrap: normal;
        word-break: normal;
    }

    .email-history-table time {
        white-space: nowrap;
    }

    @media (max-width: 760px) {
        .data-table .row-actions {
            width: auto;
            max-width: 100%;
            flex-wrap: wrap;
        }
    }

    .panel,
    .modal,
    .preview-shell,
    .surface-card {
        border: var(--border-width) solid var(--line);
        border-radius: var(--radius);
        background: var(--surface);
        color: var(--ink);
        box-shadow: var(--shadow);
    }

    .surface-card {
        min-width: 0;
        padding: var(--panel-padding);
    }

    .surface-card.soft {
        background: var(--surface-2);
    }

    .surface-card.selectable:has(input:checked),
    .surface-card.selected {
        border-color: var(--accent-border);
        background: var(--accent-soft);
    }

    .media-frame {
        padding: var(--space-3);
        border: var(--border-width) solid var(--line);
        border-radius: var(--control-radius);
        background: var(--surface-pure);
    }

    .media-frame img {
        border: 0;
        border-radius: 0;
        padding: 0;
        background: transparent;
    }

    .status-callout {
        padding: var(--space-3);
        border: var(--border-width) solid var(--line);
        border-left-width: var(--status-border-width);
        border-radius: var(--control-radius);
        background: var(--surface-2);
        color: var(--ink);
    }

    .status-callout.bad {
        border-color: var(--bad);
        background: var(--bad-bg);
        color: var(--bad);
    }

    .panel {
        margin-bottom: var(--gap-panels);
    }

    .chart-grid,
    .dashboard-grid,
    .reports-view,
    .valuation-view,
    .split-grid:has(>.panel) {
        gap: var(--gap-panels);
    }

    .chart-grid>.panel,
    .dashboard-grid>.panel,
    .reports-view>.panel,
    .valuation-view>.panel,
    .split-grid>.panel {
        margin: 0;
    }

    .panel-title {
        gap: var(--gap-fields);
    }

    .toolbar,
    .toolbar-row,
    .document-filter-row,
    .personal-task-filters,
    .pallets-product-filters,
    .audit-search-form {
        align-items: flex-end;
        gap: var(--gap-fields);
    }

    .panel:not(.panel-pad):not(.surface-card)>.panel-title,
    .panel:not(.panel-pad):not(.surface-card)>.toolbar {
        padding: var(--panel-padding);
    }

    @media (min-width:761px) {
        .panel:not(.panel-pad)>.table-wrap>.data-table :is(th,td):first-child {
            padding-inline-start: var(--panel-padding);
        }

        .panel:not(.panel-pad)>.table-wrap>.data-table :is(th,td):last-child {
            padding-inline-end: var(--panel-padding);
        }
    }

    .panel-title {
        flex-wrap: wrap;
    }

    .panel-title>.button {
        flex: 0 1 auto;
        max-width: 100%;
    }

    .form-grid {
        column-gap: var(--gap-fields);
        row-gap: 0;
    }

    .form-grid>.field:has(>label),
    .form-grid>.field-action {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        align-content: start;
        row-gap: 0;
        padding-bottom: var(--gap-fields);
    }

    .form-grid>.field>label {
        align-self: end;
        margin-bottom: var(--gap-label);
    }

    .form-grid>.field>:nth-child(2) {
        align-self: start;
    }

    .form-grid>.field-action>.button {
        grid-row: 2;
        align-self: start;
        justify-self: start;
    }

    .form-grid>.field>:nth-child(3):not(.product-results, .partner-results) {
        margin-top: var(--gap-label);
    }

    .form-grid>.field>label:has(input[type="checkbox"],input[type="radio"]) {
        grid-row: 2;
        align-self: center;
        margin-bottom: 0;
        min-height: var(--control-height);
    }

    .form-grid>.field>label:has(input[type="checkbox"],input[type="radio"])~small {
        grid-row: 3;
    }

    .field>.stack-list {
        gap: var(--gap-label);
    }

    .field>small:empty,
    .field>.field-hint:empty {
        display: none;
    }

    .form-grid>.button {
        align-self: end;
        justify-self: start;
    }

    .content:focus {
        outline: none;
    }

    .modal:focus {
        outline: none;
    }

    .visually-hidden {
        position: absolute;
        width: var(--visually-hidden-size);
        height: var(--visually-hidden-size);
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .field label {
        margin: 0;
    }

    .modal,
    .preview-shell {
        width: min(var(--dialog-medium), calc(100vw - var(--space-8)));
        max-height: calc(100dvh - var(--space-8));
        overflow: auto;
        box-shadow: var(--dialog-shadow);
    }

    .modal.small {
        width: min(var(--dialog-small), calc(100vw - var(--space-8)));
    }

    .modal.large {
        width: min(var(--dialog-large), calc(100vw - var(--space-8)));
    }

    .modal:has(>.modal-body) {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .modal.wide,
    .preview-shell {
        width: min(var(--dialog-workspace), calc(100vw - var(--space-8)));
    }

    .modal-head,
    .modal-body,
    .modal-foot {
        padding: var(--panel-padding);
    }

    .modal-head,
    .modal-foot,
    .preview-head {
        gap: var(--gap-actions);
        background: var(--surface);
        color: var(--ink);
    }

    .modal>.modal-head,
    .modal>.modal-foot {
        position: static;
        flex: 0 0 auto;
    }

    .modal-foot {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .modal-foot>.pagination {
        padding: 0;
    }

    .modal-head,
    .preview-head {
        border-bottom: var(--border-width) solid var(--line);
    }

    .modal-foot {
        border-top: var(--border-width) solid var(--line);
    }

    .preview-head {
        padding: var(--panel-padding);
    }

    .modal-head>div {
        flex: 1;
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: var(--gap-fields);
        overflow-wrap: anywhere;
    }

    .modal-body>*,
    .modal-body>.stack-list>* {
        margin: 0;
        min-width: 0;
        flex: 0 0 auto;
    }

    .modal-body>.stack-list {
        gap: var(--gap-fields);
    }

    @media (max-width: 640px) {
        .modal-backdrop,
        .preview-layer {
            padding: var(--space-2);
        }

        .modal,
        .modal.small,
        .modal.large,
        .modal.wide,
        .preview-shell {
            width: calc(100vw - var(--space-4));
            max-height: calc(100dvh - var(--space-4));
        }

        .page-head>.actions {
            width: 100%;
        }
    }
}

@media screen {
    .content-gap {
        margin-top: var(--space-3);
    }

    .content-gap-sm {
        margin-top: var(--space-2);
    }

    .content-gap-xs {
        margin-top: var(--space-1);
    }

    .callout-gap-bottom {
        margin-bottom: var(--space-2);
    }

    fieldset,
    .reset-fieldset {
        border: 0;
        padding: 0;
        margin: 0;
        min-inline-size: 0;
    }

    .reset-fieldset>legend {
        margin-bottom: var(--gap-label);
    }

    .block-hint {
        display: block;
        margin-top: var(--space-1);
    }

    .embedded-document {
        width: 100%;
        height: 65vh;
        border: 0;
    }

    @media (max-width: 760px) {
        .modal-foot>.pagination {
            grid-column: 1 / -1;
        }

        .table-wrap:has(.responsive-summary-table) {
            overflow: visible;
        }

        .responsive-summary-table {
            display: block;
            min-width: 0;
            width: 100%;
        }

        .document-list-table colgroup {
            display: none;
        }

        .responsive-summary-table thead {
            display: none;
        }

        .responsive-summary-table tr {
            display: grid;
            grid-template-columns: minmax(var(--column-amount-width), 1fr) minmax(0, auto);
            gap: var(--space-2) var(--space-3);
            padding: var(--space-3);
            border: var(--border-width) solid var(--line);
            border-radius: var(--control-radius);
            background: var(--surface);
        }

        .data-table.responsive-summary-table td {
            display: block;
            padding: 0;
            border: 0;
            min-width: 0;
            white-space: normal;
            overflow-wrap: anywhere;
        }
    }
}


@media screen {
    @container document-list (max-width:1180px) {
        .document-list-table {
            display: block;
            min-width: 0;
            width: 100%;
        }

        .document-list-table :is(thead,colgroup) {
            display: none;
        }

        .document-list-table tbody {
            display: grid;
            gap: var(--space-2);
            padding: var(--space-2);
        }

        .document-list-table tr {
            display: grid;
            grid-template-columns: minmax(0,1fr) minmax(0,1fr);
            gap: var(--space-2) var(--space-3);
            padding: var(--space-3);
            border: var(--border-width) solid var(--line);
            border-radius: var(--control-radius);
            background: var(--surface);
        }

        .data-table.document-list-table td {
            display: block;
            padding: 0;
            border: 0;
            min-width: 0;
            white-space: normal;
            overflow-wrap: anywhere;
        }
    }

    @container document-summary (max-width:760px) {
        .document-list-table {
            display: block;
            min-width: 0;
            width: 100%;
        }

        .document-list-table :is(thead,colgroup) {
            display: none;
        }

        .document-list-table tbody {
            display: grid;
            gap: var(--space-2);
            padding: var(--space-2);
        }

        .document-list-table tr {
            display: grid;
            grid-template-columns: minmax(0,1fr) minmax(0,1fr);
            gap: var(--space-2) var(--space-3);
            padding: var(--space-3);
            border: var(--border-width) solid var(--line);
            border-radius: var(--control-radius);
            background: var(--surface);
        }

        .data-table.document-list-table td {
            display: block;
            padding: 0;
            border: 0;
            min-width: 0;
            white-space: normal;
            overflow-wrap: anywhere;
        }
    }
}


@media screen {
    .account-copy,
    .permission-item span,
    .integration-card .row-between>div,
    .automation-row>span:first-child {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
}

@media screen {
    .primary-cell,
    .line-name-wrap,
    .admin-contact-sites dd {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
    }

    .primary-cell > .badge {
        align-self: flex-start;
        max-width: 100%;
    }
}

@media screen {
    .type-grid,
    .diagnostic-grid {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: var(--space-2);
    }
}

@media screen {
    .split-grid,
    .personal-task-dates {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .split-grid:not(:has(>.panel)),
    .personal-task-dates {
        gap: var(--space-3);
    }
}

@media screen {
    .doc-lines,
    .pallets-account-summary>div {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }
}

@media screen {
    .check-row,
    .field>label:has(input[type="checkbox"], input[type="radio"]),
    .automation-days {
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }
}

@media screen and (max-width:760px) {
    .responsive-card-table tbody,
    .responsive-summary-table tbody {
        display: grid;
        gap: var(--space-2);
        padding: var(--space-2);
    }
}

@media screen {
    .field,
    .document-filter-row label,
    .personal-task-filters label,
    .account-detail-grid>div {
        display: flex;
        flex-direction: column;
        gap: var(--gap-label);
        min-width: 0;
    }
}

@media screen and (max-width:760px) {
    .inventory-toolbar .search-input,
    .purchasing-toolbar .search-input {
        min-width: 0;
        max-width: none;
        flex: 1 1 100%;
    }
}

@media screen {
    .pallets-product-filters,
    .audit-search-form {
        display: flex;
        flex-wrap: wrap;
    }
}

@media screen and (max-width:700px) {
    .pallets-link-toolbar,
    .pallets-link-bulk {
        align-items: stretch;
    }
}

@media screen {
    .selected-product-chip,
    .sr-picker-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
    }
}

@media screen {
    .integration-grid,
    .admin-control-grid {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: var(--space-3);
    }
}

@media screen {
    .reports-view,
    .valuation-view {
        display: grid;
        min-width: 0;
    }
}


@media screen and (max-width:760px) {
    .split-grid:not(:has(> .field:first-child:nth-last-child(2) > .ui-date-field)) {
        grid-template-columns: 1fr;
    }
}


@media screen and (max-width:760px) {
    .type-grid {
        grid-template-columns: 1fr 1fr;
    }
}


@media screen and (max-width:480px) {
    .type-grid {
        grid-template-columns: 1fr;
    }
}