/*
 * Canonical WAT application visual engine.
 *
 * Loaded by every rendered application shell. Keep route-owned and reusable
 * application styles here; legacy compatibility belongs in style_old.css.
 */

/* #region Admin collection reference */
/* DM Sans variable font, vendored under the SIL Open Font License. */
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
    src: url("/static/fonts/DM-Sans-Variable-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Repairer onboarding and Stripe Connect status */
body:where(.wat-app) .collection-patterns .portal-ui-settings-group {
    display: contents;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-stripe-panel {
    grid-column: 1 / -1;
    margin-top: 0;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-stripe-panel.is-incomplete {
    border-color: #93e8db;
    box-shadow: 0 14px 38px rgba(0, 180, 156, 0.12);
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-stripe-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

body:where(.wat-app) .collection-patterns .portal-ui-stripe-requirements {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

body:where(.wat-app) .collection-patterns .portal-ui-stripe-requirement {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--wat-surface-soft);
}

body:where(.wat-app) .collection-patterns .portal-ui-stripe-requirement p {
    grid-column: 1 / -1;
    margin: 0;
}

body:where(.wat-app) .collection-patterns .portal-ui-stripe-requirement-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 12px;
}

body:where(.wat-app) .collection-patterns .portal-ui-stripe-timeline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 14px;
    color: var(--muted);
    font-size: 12px;
}

body:where(.wat-app).repair-ui-body .status-badge--neutral {
    background: var(--wat-neutral-soft);
    color: var(--muted);
}

body:where(.wat-app).repair-ui-admin .repair-admin-stripe-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 220px));
    gap: 12px;
    margin-bottom: 16px;
}

body:where(.wat-app).repair-ui-admin .repair-admin-stripe-summary__item {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--wat-surface-soft);
}

body:where(.wat-app).repair-ui-admin .repair-admin-stripe-summary__item span,
body:where(.wat-app).repair-ui-admin .repair-admin-stripe-summary__item strong {
    display: block;
}

body:where(.wat-app).repair-ui-admin .repair-admin-stripe-summary__item strong {
    margin-top: 3px;
    color: var(--text);
    font-size: 20px;
}

body:where(.wat-app).repair-ui-admin .repair-admin-stripe-history summary {
    cursor: pointer;
    color: var(--primary);
    font-weight: var(--label-weight);
}

body:where(.wat-app).repair-ui-admin .repair-admin-stripe-history .portal-ui-stripe-requirements {
    min-width: 360px;
}

@media (max-width: 700px) {
    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-stripe-intro {
        flex-direction: column;
    }

    body:where(.wat-app) .collection-patterns .portal-ui-stripe-requirement {
        grid-template-columns: minmax(0, 1fr);
    }

    body:where(.wat-app) .collection-patterns .portal-ui-stripe-requirement > .status-badge {
        justify-self: start;
    }

    body:where(.wat-app).repair-ui-admin .repair-admin-stripe-summary {
        grid-template-columns: minmax(0, 1fr);
    }
}

@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 100 1000;
    font-display: swap;
    src: url("/static/fonts/DM-Sans-Variable-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:where(body.wat-app--collection) {
    --admin-text: #0b263e;
    --admin-text-muted: #667b88;
    --admin-radius: 14px;
}

:where(body.wat-app--collection) {
    min-width: 0;
    background: #f7fbfb;
}

:where(body.wat-app--collection).acd-shell-body {
    min-width: 0;
    margin: 0;
    background:
        linear-gradient(180deg, rgba(0, 127, 222, 0.05), transparent 280px),
        #f7fbfb;
    color: var(--admin-text);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.45;
}

:where(body.wat-app--collection).acd-shell-body *,
:where(body.wat-app--collection).acd-shell-body *::before,
:where(body.wat-app--collection).acd-shell-body *::after {
    box-sizing: border-box;
}

:where(body.wat-app--collection).acd-shell-body [hidden] {
    display: none !important;
}

:where(body.wat-app--collection).acd-shell-body .hidden,
:where(body.wat-app--collection).collection-admin-detail-redesign .hidden {
    display: none !important;
}

:where(body.wat-app--collection).acd-shell-body button,
:where(body.wat-app--collection).acd-shell-body input,
:where(body.wat-app--collection).acd-shell-body select,
:where(body.wat-app--collection).acd-shell-body textarea {
    font: inherit;
}

:where(body.wat-app--collection).acd-shell-body button {
    cursor: pointer;
}

:where(body.wat-app--collection).acd-shell-body a {
    color: #1268f3;
}

:where(body.wat-app--collection).acd-shell-body h1,
:where(body.wat-app--collection).acd-shell-body h2,
:where(body.wat-app--collection).acd-shell-body h3,
:where(body.wat-app--collection).acd-shell-body p,
:where(body.wat-app--collection).acd-shell-body dl,
:where(body.wat-app--collection).acd-shell-body dd {
    margin-top: 0;
}

:where(body.wat-app--collection) .acd-shell {
    display: grid;
    grid-template-columns: 216px minmax(0, 1fr);
    min-height: 100vh;
}

:where(body.wat-app--collection) .acd-shell-sidebar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    height: 100vh;
    min-width: 0;
    flex-direction: column;
    gap: 24px;
    padding: 24px 16px 18px;
    overflow: hidden;
    border-right: 1px solid #dcebea;
    background: rgba(255, 255, 255, 0.93);
}

:where(body.wat-app--collection) .acd-shell-brand {
    display: flex;
    align-items: center;
    height: 42px;
    padding-inline: 4px;
}

:where(body.wat-app--collection) .acd-shell-brand img {
    display: block;
    width: 126px;
    height: auto;
}

:where(body.wat-app--collection) .acd-shell-nav {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    gap: 34px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
}

:where(body.wat-app--collection) .acd-shell-nav-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

:where(body.wat-app--collection) .acd-shell-nav-group h2 {
    margin: 0 0 8px;
    padding-inline: 0;
    color: #71819a;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

:where(body.wat-app--collection) .acd-shell-nav-group-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    padding: 3px 8px;
    text-align: left;
    text-transform: inherit;
    transition: background 0.12s ease, color 0.12s ease;
}

:where(body.wat-app--collection) .acd-shell-nav-group-toggle:hover {
    background: #edf5ff;
    color: #405676;
}

:where(body.wat-app--collection) .acd-shell-nav-group-chevron {
    display: inline-block;
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-bottom: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    opacity: 0.82;
    transform: rotate(45deg) translateY(-1px);
    transition: transform 0.14s ease;
}

:where(body.wat-app--collection) .acd-shell-nav-group.is-collapsed .acd-shell-nav-group-chevron {
    transform: rotate(-45deg);
}

:where(body.wat-app--collection) .acd-shell-nav-group-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

:where(body.wat-app--collection) .acd-shell-nav-link {
    display: flex;
    min-height: 36px;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: #405676;
    font-size: 0.86rem;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
}

:where(body.wat-app--collection) .acd-shell-nav-link:hover {
    background: #edf5ff;
    color: #0029a5;
}

:where(body.wat-app--collection) .acd-shell-nav-link.is-active {
    background: #dcecff;
    color: #0029a5;
    box-shadow: inset 3px 0 0 #007fde;
}

:where(body.wat-app--collection) .acd-shell-nav-link.is-parent-active:not(.is-active) {
    color: #0029a5;
}

:where(body.wat-app--collection) .acd-shell-main {
    min-width: 0;
}

:where(body.wat-app--collection) .acd-shell-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    min-width: 0;
    height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-inline: 32px;
    border-bottom: 1px solid #dcebea;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(10px);
}

:where(body.wat-app--collection) .acd-shell-topbar-title {
    color: #355075;
    font-weight: 700;
}

:where(body.wat-app--collection) .acd-shell-user {
    min-width: 0;
    color: #405676;
    font-size: 0.86rem;
    font-weight: 650;
}

:where(body.wat-app--collection) .acd-shell-user span {
    display: block;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:where(body.wat-app--collection) .acd-shell-mobile-open,
:where(body.wat-app--collection) .acd-shell-mobile-close,
:where(body.wat-app--collection) .acd-shell-backdrop {
    display: none;
}

:where(body.wat-app--collection) .portal_content,
:where(body.wat-app--collection) .acd-shell-content {
    min-width: 0;
}

:where(body.wat-app--collection) .acd-shell-content {
    width: 100%;
    max-width: 1680px;
    margin: 0 auto;
    padding: 30px 28px 42px;
}

:where(body.wat-app--collection) .acd-shell-body .card,
:where(body.wat-app--collection) .acd-shell-body details.card {
    padding: 16px;
}

:where(body.wat-app--collection) .acd-shell-body details.card {
    padding: 0;
}

:where(body.wat-app--collection) .acd-shell-body details.card > :not(summary) {
    margin-inline: 16px;
}

:where(body.wat-app--collection) .acd-shell-body details.card > :last-child {
    margin-bottom: 16px;
}

:where(body.wat-app--collection) .acd-shell-body .card-title {
    margin: 0;
    color: #071e49;
    font-size: 1rem;
    font-weight: 760;
    line-height: 1.2;
}

:where(body.wat-app--collection) .acd-shell-body h2.card-title {
    font-size: 1.05rem;
}

:where(body.wat-app--collection) .acd-shell-body .form,
:where(body.wat-app--collection) .acd-shell-body .flex-column {
    display: flex;
    flex-direction: column;
}

:where(body.wat-app--collection) .acd-shell-body .form {
    gap: 12px;
}

:where(body.wat-app--collection) .acd-shell-body .form-row,
:where(body.wat-app--collection) .acd-shell-body .flex-row,
:where(body.wat-app--collection) .acd-shell-body .buttons-row {
    display: flex;
}

:where(body.wat-app--collection) .acd-shell-body .form-row,
:where(body.wat-app--collection) .acd-shell-body .flex-row {
    align-items: center;
}

:where(body.wat-app--collection) .acd-shell-body .buttons-row {
    align-items: center;
    gap: 10px;
}

:where(body.wat-app--collection) .acd-shell-body .flex-wrap {
    flex-wrap: wrap;
}

:where(body.wat-app--collection) .acd-shell-body .align-items-center {
    align-items: center;
}

:where(body.wat-app--collection) .acd-shell-body .align-items-start {
    align-items: flex-start;
}

:where(body.wat-app--collection) .acd-shell-body .align-items-end {
    align-items: flex-end;
}

:where(body.wat-app--collection) .acd-shell-body .justify-content-space-between {
    justify-content: space-between;
}

:where(body.wat-app--collection) .acd-shell-body .gap-5 {
    gap: 5px;
}

:where(body.wat-app--collection) .acd-shell-body .gap-10 {
    gap: 10px;
}

:where(body.wat-app--collection) .acd-shell-body .gap-15 {
    gap: 15px;
}

:where(body.wat-app--collection) .acd-shell-body .gap-20 {
    gap: 20px;
}

:where(body.wat-app--collection) .acd-shell-body .gap-30 {
    gap: 30px;
}

:where(body.wat-app--collection) .acd-shell-body .m-0 {
    margin: 0;
}

:where(body.wat-app--collection) .acd-shell-body .mt-0 {
    margin-top: 0;
}

:where(body.wat-app--collection) .acd-shell-body .mt-5 {
    margin-top: 5px;
}

:where(body.wat-app--collection) .acd-shell-body .mt-10 {
    margin-top: 10px;
}

:where(body.wat-app--collection) .acd-shell-body .mt-15 {
    margin-top: 15px;
}

:where(body.wat-app--collection) .acd-shell-body .mt-20 {
    margin-top: 20px;
}

:where(body.wat-app--collection) .acd-shell-body .mt-30 {
    margin-top: 30px;
}

:where(body.wat-app--collection) .acd-shell-body .mb-0 {
    margin-bottom: 0;
}

:where(body.wat-app--collection) .acd-shell-body .mb-5 {
    margin-bottom: 5px;
}

:where(body.wat-app--collection) .acd-shell-body .mb-10 {
    margin-bottom: 10px;
}

:where(body.wat-app--collection) .acd-shell-body .mb-15 {
    margin-bottom: 15px;
}

:where(body.wat-app--collection) .acd-shell-body .mb-20 {
    margin-bottom: 20px;
}

:where(body.wat-app--collection) .acd-shell-body .ml-5 {
    margin-left: 5px;
}

:where(body.wat-app--collection) .acd-shell-body .width-auto {
    width: auto;
}

:where(body.wat-app--collection) .acd-shell-body .width-fill {
    width: 100%;
}

:where(body.wat-app--collection) .acd-shell-body .relative {
    position: relative;
}

:where(body.wat-app--collection) .acd-shell-body .muted,
:where(body.wat-app--collection) .acd-shell-body small {
    color: var(--admin-text-muted);
}

:where(body.wat-app--collection) .acd-shell-body .text-align-left {
    text-align: left;
}

:where(body.wat-app--collection) .acd-shell-body .text-align-center {
    text-align: center;
}

:where(body.wat-app--collection) .acd-shell-body .white-space-nowrap {
    white-space: nowrap;
}

:where(body.wat-app--collection) .acd-shell-body label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #233b5c;
    font-weight: 650;
}

:where(body.wat-app--collection) .acd-shell-body .checkbox-label {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    font-weight: 600;
}

:where(body.wat-app--collection) .acd-shell-body .label-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

:where(body.wat-app--collection) .acd-shell-body input,
:where(body.wat-app--collection) .acd-shell-body select,
:where(body.wat-app--collection) .acd-shell-body textarea {
    max-width: 100%;
    min-height: 38px;
    border: 1px solid #d2e2e8;
    border-radius: 9px;
    background: #fff;
    color: #0b263e;
    padding: 8px 10px;
    outline: none;
}

:where(body.wat-app--collection) .acd-shell-body textarea {
    min-height: 96px;
    resize: vertical;
}

:where(body.wat-app--collection) .acd-shell-body input:focus,
:where(body.wat-app--collection) .acd-shell-body select:focus,
:where(body.wat-app--collection) .acd-shell-body textarea:focus {
    border-color: #007fde;
    box-shadow: 0 0 0 3px rgba(0, 127, 222, 0.12);
}

:where(body.wat-app--collection) .acd-shell-body input[type="checkbox"],
:where(body.wat-app--collection) .acd-shell-body input[type="radio"] {
    min-height: 0;
    accent-color: #007fde;
}

:where(body.wat-app--collection) .acd-shell-body fieldset {
    min-width: 0;
    margin-inline: 0;
    padding: 14px;
    border: 1px solid #dcebea;
    border-radius: 12px;
}

:where(body.wat-app--collection) .acd-shell-body legend {
    padding-inline: 6px;
    color: #071e49;
    font-weight: 750;
}

:where(body.wat-app--collection) .acd-shell-body .currency {
    display: inline-flex;
    align-items: center;
    color: #667b88;
    font-weight: 700;
}

:where(body.wat-app--collection) .acd-shell-body button,
:where(body.wat-app--collection) .acd-shell-body .button-blue,
:where(body.wat-app--collection) .acd-shell-body .button-blue-2,
:where(body.wat-app--collection) .acd-shell-body .button-red-2,
:where(body.wat-app--collection) .acd-shell-body .text-button {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 8px 14px;
    font-weight: 750;
    line-height: 1.1;
    text-decoration: none;
}

:where(body.wat-app--collection) .acd-shell-body .button-blue {
    background: linear-gradient(135deg, #007fde, #00a4bf);
    color: #fff;
    box-shadow: 0 12px 26px rgba(0, 164, 191, 0.17);
}

:where(body.wat-app--collection) .acd-shell-body .button-blue-2 {
    border-color: rgba(0, 127, 222, 0.22);
    background: #eef7ff;
    color: #0065c7;
}

:where(body.wat-app--collection) .acd-shell-body .button-red-2 {
    border-color: rgba(217, 50, 75, 0.18);
    background: #fff0f2;
    color: #c32840;
}

:where(body.wat-app--collection) .acd-shell-body .text-button {
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

:where(body.wat-app--collection) .acd-shell-body button.a,
:where(body.wat-app--collection) .acd-shell-body .a {
    display: inline;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #1268f3;
    padding: 0;
    box-shadow: none;
    font-weight: 700;
    line-height: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

:where(body.wat-app--collection) .acd-shell-body .data-destruction-evidence-file-picker {
    position: relative;
    overflow: hidden;
}

:where(body.wat-app--collection) .acd-shell-body .data-destruction-evidence-file-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

:where(body.wat-app--collection) .acd-shell-body .acd-shell-mobile-open,
:where(body.wat-app--collection) .acd-shell-body .acd-shell-mobile-close,
:where(body.wat-app--collection) .acd-shell-body .acd-shell-backdrop {
    display: none;
}

:where(body.wat-app--collection) .acd-shell-body .small {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 0.83rem;
}

:where(body.wat-app--collection) .acd-shell-body button:disabled,
:where(body.wat-app--collection) .acd-shell-body .button-blue:disabled,
:where(body.wat-app--collection) .acd-shell-body .button-blue-2:disabled,
:where(body.wat-app--collection) .acd-shell-body .button-red-2:disabled {
    cursor: not-allowed;
    opacity: 0.55;
    box-shadow: none;
}

:where(body.wat-app--collection) .acd-shell-body .button-delete-row {
    display: inline-grid;
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
    place-items: center;
    border: 1px solid rgba(217, 50, 75, 0.2);
    border-radius: 999px;
    background: #fff0f2;
    color: #d9324b;
    padding: 0;
}

:where(body.wat-app--collection) .acd-shell-body .button-delete-row.--small {
    width: 26px;
    min-width: 26px;
    height: 26px;
    min-height: 26px;
}

:where(body.wat-app--collection) .acd-shell-body .feedback {
    min-height: 0;
    border-radius: 10px;
    padding: 10px 12px;
    background: #eef7ff;
    color: #31536d;
}

:where(body.wat-app--collection) .acd-shell-body .feedback:empty {
    display: none;
}

:where(body.wat-app--collection) .acd-shell-body .feedback.warning,
:where(body.wat-app--collection) .acd-shell-body .alert-warning {
    border: 1px solid #f1d591;
    background: #fff8e7;
    color: #6c4d04;
}

:where(body.wat-app--collection) .acd-shell-body .feedback.error {
    border: 1px solid rgba(217, 50, 75, 0.22);
    background: #fff0f2;
    color: #b72239;
}

:where(body.wat-app--collection) .acd-shell-body .feedback.success {
    border: 1px solid rgba(39, 189, 120, 0.24);
    background: #effcf5;
    color: #137045;
}

:where(body.wat-app--collection) .acd-shell-body .table {
    border-collapse: collapse;
}

:where(body.wat-app--collection) .acd-shell-body th,
:where(body.wat-app--collection) .acd-shell-body td {
    padding: 10px 12px;
    border-bottom: 1px solid #e6eef2;
    text-align: left;
    vertical-align: middle;
}

:where(body.wat-app--collection) .acd-shell-body th {
    color: #667b88;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

:where(body.wat-app--collection) .acd-shell-body .table-sober tr:last-child td {
    border-bottom: 0;
}

:where(body.wat-app--collection) .acd-shell-body .plain-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

:where(body.wat-app--collection) .acd-shell-body blockquote {
    border-left: 3px solid #00b49c;
    margin: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #effff9, #f7fdff);
    padding: 16px;
    color: #0d3953;
}

:where(body.wat-app--collection) .acd-shell-body hr {
    width: 100%;
    border: 0;
    border-top: 1px solid #dcebea;
}

:where(body.wat-app--collection) .acd-shell-body .indicator-overlay {
    display: none;
    position: absolute;
    inset: 0;
    place-items: center;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.62);
}

:where(body.wat-app--collection) .acd-shell-body .htmx-request .indicator-overlay,
:where(body.wat-app--collection) .acd-shell-body .htmx-request.indicator-overlay {
    display: grid;
}

:where(body.wat-app--collection) .acd-shell-body .indicator-spinner {
    width: 20px;
    height: 20px;
}

:where(body.wat-app--collection) .acd-shell-body #modalContainer,
:where(body.wat-app--collection) .acd-shell-body #flashMessageContainer {
    position: fixed;
    z-index: 1000;
}

:where(body.wat-app--collection) .acd-shell-body #modalContainer {
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(5, 24, 43, 0.34);
}

:where(body.wat-app--collection) .acd-shell-body #modalContainer:has(.modal),
:where(body.wat-app--collection) .acd-shell-body #modalContainer:has(.mockup-modal) {
    display: grid;
    place-items: center;
}

:where(body.wat-app--collection) .acd-shell-body #modalContainer > .modal,
:where(body.wat-app--collection) .acd-shell-body #modalContainer > .mockup-modal {
    position: relative;
    grid-area: 1 / 1;
    z-index: 1;
}

:where(body.wat-app--collection) .acd-shell-body #modalContainer > .modal:last-child,
:where(body.wat-app--collection) .acd-shell-body #modalContainer > .mockup-modal:last-child {
    z-index: 2;
}

:where(body.wat-app--collection) .acd-shell-body #modalContainer > .modal:not(:last-child),
:where(body.wat-app--collection) .acd-shell-body #modalContainer > .mockup-modal:not(:last-child) {
    pointer-events: none;
}

:where(body.wat-app--collection) .acd-shell-body .modal {
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow: auto;
    border-radius: 14px;
    background: #fff;
    padding: 20px;
    box-shadow: 0 30px 90px rgba(5, 24, 43, 0.22);
}

:where(body.wat-app--collection) .acd-shell-body .e-waste-value-modal {
    display: grid;
    width: min(460px, calc(100vw - 32px));
    gap: 18px;
}

:where(body.wat-app--collection) .acd-shell-body .e-waste-value-modal h2 {
    margin: 0;
    color: #071e49;
    font-size: 1.15rem;
    font-weight: 760;
    line-height: 1.2;
}

:where(body.wat-app--collection) .acd-shell-body .e-waste-value-modal label {
    display: grid;
    gap: 7px;
    color: var(--admin-text-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

:where(body.wat-app--collection) .acd-shell-body .e-waste-value-modal input {
    width: 100%;
    min-height: 42px;
    border: 1px solid #d4e2ea;
    border-radius: 10px;
    background: #fff;
    color: var(--admin-text);
    padding: 0 12px;
    font: inherit;
}

:where(body.wat-app--collection) .acd-shell-body .e-waste-value-modal .buttons-row {
    justify-content: flex-end;
    margin-top: 2px;
}

:where(body.wat-app--collection) .acd-shell-body .collection-note-modal {
    display: grid;
    width: min(720px, calc(100vw - 32px));
    gap: 18px;
}

:where(body.wat-app--collection) .acd-shell-body .collection-note-modal h2 {
    margin: 0;
    color: #071e49;
    font-size: 1.15rem;
    font-weight: 760;
    line-height: 1.2;
}

:where(body.wat-app--collection) .acd-shell-body .collection-note-modal label {
    display: grid;
    gap: 7px;
    color: var(--admin-text-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

:where(body.wat-app--collection) .acd-shell-body .collection-note-modal textarea {
    width: 100%;
    min-height: 122px;
    border: 1px solid #d4e2ea;
    border-radius: 10px;
    background: #fff;
    color: var(--admin-text);
    padding: 10px 12px;
    font: inherit;
    resize: vertical;
}

:where(body.wat-app--collection) .acd-shell-body .collection-note-modal .note-modal-actions {
    justify-content: space-between;
    margin-top: 2px;
}

:where(body.wat-app--collection) .acd-shell-body .note-modal-actions__save {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

@media (max-width: 480px) {
    :where(body.wat-app--collection) .acd-shell-body .collection-note-modal .note-modal-actions button {
        padding-right: 10px;
        padding-left: 10px;
        white-space: nowrap;
    }
}

:where(body.wat-app--collection).collection-admin-detail-redesign .review-note-item--editable {
    position: relative;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .review-note-item--editable:hover,
:where(body.wat-app--collection).collection-admin-detail-redesign .review-note-item--editable:focus-within {
    border-color: #77c6df;
    background: #f5fbff;
    box-shadow: 0 0 0 3px rgba(0, 127, 222, 0.08);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .note-card-edit-trigger {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    padding: 0;
    box-shadow: none;
    cursor: pointer;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .note-card-edit-trigger:focus-visible {
    outline: none;
}

:where(body.wat-app--collection) .acd-shell-body .processed-item-notes-modal {
    display: grid;
    width: min(620px, calc(100vw - 32px));
    gap: 18px;
}

:where(body.wat-app--collection) .acd-shell-body .processed-item-notes-modal__head {
    padding-right: 32px;
}

:where(body.wat-app--collection) .acd-shell-body .processed-item-notes-modal h2 {
    margin: 0;
    color: #071e49;
    font-size: 1.15rem;
    font-weight: 760;
    line-height: 1.2;
}

:where(body.wat-app--collection) .acd-shell-body .processed-item-notes-form {
    display: grid;
    gap: 12px;
}

:where(body.wat-app--collection) .acd-shell-body .processed-item-notes-form label {
    display: grid;
    gap: 7px;
    color: var(--admin-text-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

:where(body.wat-app--collection) .acd-shell-body .processed-item-notes-form textarea {
    width: 100%;
    min-height: 110px;
    border: 1px solid #d4e2ea;
    border-radius: 10px;
    background: #fff;
    color: var(--admin-text);
    padding: 10px 12px;
    font: inherit;
    resize: vertical;
}

:where(body.wat-app--collection) .acd-shell-body .processed-item-notes-form textarea[readonly] {
    background: #f5f8fb;
}

:where(body.wat-app--collection) .acd-shell-body .processed-item-notes-form .buttons-row {
    justify-content: flex-end;
}

:where(body.wat-app--collection) .acd-shell-body .dispatch-dd-split-modal {
    display: grid;
    width: min(940px, calc(100vw - 32px));
    gap: 14px;
}

:where(body.wat-app--collection) .acd-shell-body .dispatch-dd-split-summary {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid rgba(23, 45, 84, 0.1);
    border-radius: 10px;
    background: #f8fbff;
}

:where(body.wat-app--collection) .acd-shell-body .dispatch-dd-split-table-wrap {
    overflow: auto;
    border: 1px solid rgba(23, 45, 84, 0.12);
    border-radius: 10px;
}

:where(body.wat-app--collection) .acd-shell-body .dispatch-dd-split-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

:where(body.wat-app--collection) .acd-shell-body .dispatch-dd-split-table th,
:where(body.wat-app--collection) .acd-shell-body .dispatch-dd-split-table td {
    padding: 9px;
    border-bottom: 1px solid rgba(23, 45, 84, 0.08);
    text-align: left;
    vertical-align: top;
}

:where(body.wat-app--collection) .acd-shell-body .dispatch-dd-split-table th {
    color: var(--acd-blue-dark);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

:where(body.wat-app--collection) .acd-shell-body .dispatch-dd-split-table tr:last-child td {
    border-bottom: 0;
}

:where(body.wat-app--collection) .acd-shell-body .dispatch-dd-split-table input,
:where(body.wat-app--collection) .acd-shell-body .dispatch-dd-split-table textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid rgba(23, 45, 84, 0.14);
    border-radius: 8px;
    background: #fff;
}

:where(body.wat-app--collection) .acd-shell-body .dispatch-dd-split-table textarea {
    min-height: 58px;
    resize: vertical;
}

:where(body.wat-app--collection) .acd-shell-body .dispatch-dd-split-help {
    font-size: 0.82rem;
}

@media (max-width: 700px) {
    :where(body.wat-app--collection) .acd-shell-body .dispatch-dd-split-modal {
        width: min(520px, calc(100vw - 16px));
        max-height: calc(100vh - 20px);
        overflow: auto;
    }

    :where(body.wat-app--collection) .acd-shell-body .dispatch-dd-split-table-wrap {
        overflow: visible;
    }

    :where(body.wat-app--collection) .acd-shell-body .dispatch-dd-split-table {
        display: block;
        min-width: 0;
    }

    :where(body.wat-app--collection) .acd-shell-body .dispatch-dd-split-table thead {
        display: none;
    }

    :where(body.wat-app--collection) .acd-shell-body .dispatch-dd-split-table tbody,
:where(body.wat-app--collection) .acd-shell-body .dispatch-dd-split-table tr,
:where(body.wat-app--collection) .acd-shell-body .dispatch-dd-split-table td {
        display: block;
    }

    :where(body.wat-app--collection) .acd-shell-body .dispatch-dd-split-table tr {
        padding: 10px 0;
        border-bottom: 1px solid rgba(23, 45, 84, 0.08);
    }

    :where(body.wat-app--collection) .acd-shell-body .dispatch-dd-split-table tr:last-child {
        border-bottom: 0;
    }

    :where(body.wat-app--collection) .acd-shell-body .dispatch-dd-split-table td {
        padding: 6px 0;
        border-bottom: 0;
    }

    :where(body.wat-app--collection) .acd-shell-body .dispatch-dd-split-table td::before {
        display: block;
        margin-bottom: 4px;
        color: var(--acd-blue-dark);
        font-size: 0.72rem;
        font-weight: 800;
        text-transform: uppercase;
    }

    :where(body.wat-app--collection) .acd-shell-body .dispatch-dd-split-table td:nth-child(1)::before {
        content: "Device";
    }

    :where(body.wat-app--collection) .acd-shell-body .dispatch-dd-split-table td:nth-child(2)::before {
        content: "Device serial";
    }

    :where(body.wat-app--collection) .acd-shell-body .dispatch-dd-split-table td:nth-child(3)::before {
        content: "Kg";
    }

    :where(body.wat-app--collection) .acd-shell-body .dispatch-dd-split-table td:nth-child(4)::before {
        content: "Drives";
    }
}

:where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal {
    display: grid;
    width: min(540px, calc(100vw - 32px));
    gap: 16px;
    overflow: visible;
}

:where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal h2 {
    margin: 0;
    color: #071e49;
    font-size: 1.15rem;
    font-weight: 760;
    line-height: 1.2;
}

:where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal label {
    display: grid;
    gap: 8px;
    color: var(--admin-text-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

:where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal-catalog-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

:where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal-select {
    display: grid;
    position: relative;
    width: 100%;
    gap: 0;
}

:where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal-select > select,
:where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal-select > .select-button,
:where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal-select > input[type="text"],
:where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal label > input[type="text"] {
    width: 100%;
    min-height: 42px;
    border: 1px solid #d4e2ea;
    border-radius: 10px;
    background: #fff;
    color: var(--admin-text);
    padding: 0 12px;
    font: inherit;
}

:where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal-select > .select-button {
    display: flex;
    align-items: center;
    text-align: left;
}

:where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal-popup-anchor {
    display: block;
    position: relative;
    width: 100%;
    height: 0;
    z-index: 240;
}

:where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal .e-waste-modal-search-popup,
:where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal .item-type-popup {
    display: grid;
    position: absolute;
    top: 0;
    left: 0;
    width: min(420px, calc(100vw - 32px));
    max-height: none;
    gap: 10px;
    overflow: visible;
    padding: 10px;
    border: 1px solid #d4e2ea;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 22px 54px rgba(5, 56, 84, 0.18);
}

:where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal .e-waste-modal-search-popup label,
:where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal .item-type-popup label {
    display: grid;
    gap: 6px;
}

:where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal .e-waste-modal-search-popup input[type="search"],
:where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal .item-type-popup input[type="search"] {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    border: 1px solid #d4e2ea;
    border-radius: 10px;
    background: #fff;
    color: var(--admin-text);
    padding: 0 10px;
}

:where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal .e-waste-modal-search-popup input[type="search"]:focus,
:where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal .item-type-popup input[type="search"]:focus {
    border-color: var(--wat-blue);
    box-shadow: 0 0 0 3px rgba(0, 127, 222, 0.09);
    outline: 0;
}

:where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal .e-waste-modal-search-popup .popup-list,
:where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal .item-type-popup .popup-list {
    display: grid;
    max-height: min(34vh, 280px);
    gap: 7px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

:where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal .e-waste-modal-search-popup .popup-button,
:where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal .item-type-popup .popup-button {
    display: grid;
    width: 100%;
    gap: 2px;
    padding: 9px 10px;
    border: 1px solid #dbe8f0;
    border-radius: 10px;
    background: #fbfdff;
    color: var(--admin-text);
    text-align: left;
}

:where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal .e-waste-modal-search-popup .popup-button:hover,
:where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal .e-waste-modal-search-popup .popup-button:focus-visible,
:where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal .item-type-popup .popup-button:hover,
:where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal .item-type-popup .popup-button:focus-visible {
    border-color: #9cddf1;
    background: #f0fbff;
    outline: 0;
}

:where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal .item-type-popup .popup-button {
    justify-items: center;
    text-align: center;
}

:where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal .item-type-popup .popup-button small {
    text-align: center;
}

:where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal-popup-empty {
    margin: 0;
    border: 1px dashed #d4e2ea;
    border-radius: 10px;
    color: var(--admin-text-muted);
    padding: 12px;
    font-size: 0.76rem;
    font-weight: 700;
    text-align: center;
}

:where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal-popup-create {
    width: 100%;
    min-height: 36px;
    justify-content: center;
}

:where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal-help {
    display: block;
    color: var(--admin-text-muted);
    line-height: 1.45;
}

:where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal .buttons-row {
    justify-content: flex-end;
    margin-top: 4px;
}

@media screen and (max-width: 640px) {
    :where(body.wat-app--collection) .acd-shell-body .e-waste-product-modal-catalog-row {
        grid-template-columns: 1fr;
    }
}

:where(body.wat-app--collection) .acd-shell-body .processing-add-category-modal {
    width: min(560px, calc(100vw - 32px));
}

:where(body.wat-app--collection) .acd-shell-body .processing-add-category-modal label {
    display: grid;
    gap: 7px;
}

:where(body.wat-app--collection) .acd-shell-body .processing-add-category-modal input {
    width: 100%;
    min-height: 42px;
    border: 1px solid #d4e2ea;
    border-radius: 10px;
    background: #fff;
    color: var(--admin-text);
    padding: 0 12px;
}

:where(body.wat-app--collection) .acd-shell-body .processing-add-category-field {
    margin-top: 18px;
}

:where(body.wat-app--collection) .acd-shell-body .processing-add-category-quantity {
    margin-top: 24px;
}

:where(body.wat-app--collection) .acd-shell-body .processing-add-category-modal .buttons-row {
    margin-top: 24px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-link-button,
:where(body.wat-app--collection) .acd-shell-body .dispatch-link-button {
    border: 0;
    background: transparent;
    color: #1268f3;
    padding: 0;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-pill,
:where(body.wat-app--collection) .acd-shell-body .dispatch-pill {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    gap: 6px;
    border: 1px solid #d8e7ef;
    border-radius: 999px;
    background: #eef6ff;
    color: #2368a7;
    padding: 0 9px;
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-pill.is-success,
:where(body.wat-app--collection) .acd-shell-body .dispatch-pill.is-success {
    border-color: #bdeadd;
    background: #e6f8f3;
    color: #087b63;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-pill.is-warning,
:where(body.wat-app--collection) .acd-shell-body .dispatch-pill.is-warning {
    border-color: #f3d5a0;
    background: #fff5df;
    color: #89520a;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-pill.is-danger,
:where(body.wat-app--collection) .acd-shell-body .dispatch-pill.is-danger {
    border-color: #fecaca;
    background: #fff1f2;
    color: #b3261e;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-pill.is-muted,
:where(body.wat-app--collection) .acd-shell-body .dispatch-pill.is-muted {
    border-color: #d6e0e8;
    background: #eef4f8;
    color: #607287;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-item-notes,
:where(body.wat-app--collection) .acd-shell-body .dispatch-item-notes {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
    margin-top: 5px;
    flex-wrap: wrap;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-location-chip,
:where(body.wat-app--collection) .acd-shell-body .dispatch-location-chip,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-notes-button,
:where(body.wat-app--collection) .acd-shell-body .dispatch-notes-button {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    gap: 5px;
    border: 1px solid #d9e8e8;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 760;
    line-height: 1.1;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-location-chip,
:where(body.wat-app--collection) .acd-shell-body .dispatch-location-chip {
    max-width: min(280px, 100%);
    background: #f5faf8;
    color: #28586a;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-location-chip span,
:where(body.wat-app--collection) .acd-shell-body .dispatch-location-chip span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-notes-button,
:where(body.wat-app--collection) .acd-shell-body .dispatch-notes-button {
    background: #fff;
    color: #526b7a;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-notes-button.has-notes,
:where(body.wat-app--collection) .acd-shell-body .dispatch-notes-button.has-notes {
    border-color: #bdeadd;
    background: #e6f8f3;
    color: #087b63;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-location-chip svg,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-location-chip i[data-lucide],
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-notes-button svg,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-notes-button i[data-lucide],
:where(body.wat-app--collection) .acd-shell-body .dispatch-location-chip svg,
:where(body.wat-app--collection) .acd-shell-body .dispatch-location-chip i[data-lucide],
:where(body.wat-app--collection) .acd-shell-body .dispatch-notes-button svg,
:where(body.wat-app--collection) .acd-shell-body .dispatch-notes-button i[data-lucide] {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    color: currentColor;
    stroke: currentColor;
    stroke-width: 2.35;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-item-cell,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-serial-cell,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-kg-cell,
:where(body.wat-app--collection) .acd-shell-body .dispatch-item-cell,
:where(body.wat-app--collection) .acd-shell-body .dispatch-serial-cell,
:where(body.wat-app--collection) .acd-shell-body .dispatch-kg-cell {
    white-space: nowrap;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-item-cell,
:where(body.wat-app--collection) .acd-shell-body .dispatch-item-cell {
    min-width: 320px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-serial-cell,
:where(body.wat-app--collection) .acd-shell-body .dispatch-serial-cell {
    min-width: 130px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-kg-cell,
:where(body.wat-app--collection) .acd-shell-body .dispatch-kg-cell {
    min-width: 78px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-table .dispatch-product,
:where(body.wat-app--collection) .acd-shell-body .dispatch-table .dispatch-product {
    display: inline-flex !important;
    min-width: max-content;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-table .dispatch-product small,
:where(body.wat-app--collection) .acd-shell-body .dispatch-table .dispatch-product small {
    display: inline !important;
    margin-left: 0;
    white-space: nowrap;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-note-table-cell,
:where(body.wat-app--collection) .acd-shell-body .dispatch-note-table-cell {
    min-width: 150px;
    max-width: 210px;
    white-space: nowrap;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-note-table-cell.is-condition,
:where(body.wat-app--collection) .acd-shell-body .dispatch-note-table-cell.is-condition {
    min-width: 190px;
    max-width: 260px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-note-cell-action,
:where(body.wat-app--collection) .acd-shell-body .dispatch-note-cell-action {
    display: inline-flex;
    width: 100%;
    max-width: 100%;
    min-height: 28px;
    align-items: center;
    gap: 6px;
    justify-content: space-between;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: #263f53;
    padding: 3px 6px;
    text-align: left;
    white-space: nowrap;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-note-cell-action.has-notes,
:where(body.wat-app--collection) .acd-shell-body .dispatch-note-cell-action.has-notes {
    color: #163d4f;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-note-cell-action:hover,
:where(body.wat-app--collection) .acd-shell-body .dispatch-note-cell-action:hover {
    border-color: #bdeadd;
    background: #e6f8f3;
    color: #087b63;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-note-table-value,
:where(body.wat-app--collection) .acd-shell-body .dispatch-note-table-value {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-note-table-value.is-empty,
:where(body.wat-app--collection) .acd-shell-body .dispatch-note-table-value.is-empty {
    color: #8a9aaa;
    font-weight: 600;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-note-cell-action svg,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-note-cell-action i[data-lucide],
:where(body.wat-app--collection) .acd-shell-body .dispatch-note-cell-action svg,
:where(body.wat-app--collection) .acd-shell-body .dispatch-note-cell-action i[data-lucide] {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: currentColor;
    stroke: currentColor;
    stroke-width: 2.35;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-dd-group-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-dd-group-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-dd-group-actions .button {
    min-height: 32px;
    padding: 6px 10px;
    white-space: nowrap;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal {
    width: min(980px, calc(100vw - 32px));
    overflow-x: hidden;
    overflow-y: auto;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-head,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-head {
    display: grid;
    gap: 6px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-grid,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-panel,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-panel {
    display: grid;
    gap: 12px;
    align-content: start;
    min-width: 0;
    border: 1px solid #dbe8f0;
    border-radius: 11px;
    background: #fbfdff;
    padding: 12px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-batches,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-batches {
    grid-column: 1 / -1;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-percentages,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-percentages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-percentages .feedback,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-percentages .feedback {
    grid-column: 1 / -1;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-amount,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-values,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-attachments,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-upload,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-amount,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-values,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-attachments,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-upload {
    display: grid;
    gap: 9px;
    min-width: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-amount label,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-upload label,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-attachment-fields label,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-add-value-row label,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-amount label,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-upload label,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-attachment-fields label,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-add-value-row label {
    display: grid;
    gap: 5px;
    color: var(--admin-text-muted);
    font-size: 12px;
    font-weight: 700;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-amount input,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-upload input,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-upload select,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-attachment-fields input,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-attachment-fields select,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-add-value-row input,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-amount input,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-upload input,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-upload select,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-attachment-fields input,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-attachment-fields select,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-add-value-row input {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    border: 1px solid #d4e2ea;
    border-radius: 8px;
    background: #fff;
    color: var(--admin-text);
    padding: 0 9px;
    font: inherit;
    font-size: 12px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-add-value-row,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-add-value-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(110px, 150px) auto;
    gap: 8px;
    align-items: end;
    min-width: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-upload-controls,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-attachment-fields,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-upload-controls,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-attachment-fields {
    display: grid;
    grid-template-columns: minmax(116px, 135px) auto;
    gap: 8px;
    align-items: end;
    min-width: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-upload-controls.has-certificate,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-attachment-fields.has-certificate,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-upload-controls.has-certificate,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-attachment-fields.has-certificate {
    grid-template-columns: minmax(116px, 135px) minmax(145px, 1fr) auto;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-add-value-row > div,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-upload-controls > label,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-attachment-fields > label,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-add-value-row > div,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-upload-controls > label,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-attachment-fields > label {
    min-width: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-upload-controls > button,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-attachment-fields > button,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-upload-controls > button,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-attachment-fields > button {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    justify-self: end;
    white-space: nowrap;
    min-width: max-content;
    padding-inline: 14px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-upload-controls > button svg,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-upload-controls > button i[data-lucide],
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-upload-controls > button svg,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-upload-controls > button i[data-lucide] {
    width: 16px;
    height: 16px;
    color: currentColor;
    stroke: currentColor;
    stroke-width: 2.4;
    flex: 0 0 auto;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-add-value-row .select-button,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-add-value-row .select-button {
    width: 100%;
    justify-content: flex-start;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-value-picker-cell,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-value-picker-cell,
:where(body.wat-app--collection) .acd-shell-body .invoice-value-picker-cell,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-value-picker-cell {
    position: relative;
    min-width: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-value-add,
:where(body.wat-app--collection) .acd-shell-body .invoice-value-add {
    display: grid;
    grid-template-columns: minmax(180px, 280px) 130px auto;
    gap: 8px;
    align-items: end;
    justify-content: start;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-secondary-panel:has(.invoice-value-picker-cell .popup.visible),
:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-value-section:has(.invoice-value-picker-cell .popup.visible),
:where(body.wat-app--collection) .acd-shell-body .invoice-secondary-panel:has(.invoice-value-picker-cell .popup.visible),
:where(body.wat-app--collection) .acd-shell-body .invoice-value-section:has(.invoice-value-picker-cell .popup.visible) {
    overflow: visible;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-value-add .feedback,
:where(body.wat-app--collection) .acd-shell-body .invoice-value-add .feedback {
    grid-column: 1 / -1;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-value-picker-cell > label,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-value-picker-cell > label,
:where(body.wat-app--collection) .acd-shell-body .invoice-value-picker-cell > label,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-value-picker-cell > label {
    display: grid;
    gap: 6px;
    color: var(--admin-text-muted);
    font-size: 12px;
    font-weight: 700;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-value-add .select-button,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-value-picker-cell .select-button,
:where(body.wat-app--collection) .acd-shell-body .invoice-value-add .select-button,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-value-picker-cell .select-button {
    width: 100%;
    min-height: 34px;
    border: 1px solid #d9e8e8;
    border-radius: 9px;
    background: #fff;
    color: var(--admin-text);
    padding: 0 9px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    justify-content: flex-start;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-value-picker-cell .popup-anchor,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-value-picker-cell .popup-anchor,
:where(body.wat-app--collection) .acd-shell-body .invoice-value-picker-cell .popup-anchor,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-value-picker-cell .popup-anchor {
    position: relative;
    z-index: 650;
    width: 0;
    height: 0;
    overflow: visible;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-value-picker-cell .popup-anchor > .popup,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-value-picker-cell .popup-anchor > .popup,
:where(body.wat-app--collection) .acd-shell-body .invoice-value-picker-cell .popup-anchor > .popup,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-value-picker-cell .popup-anchor > .popup {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 8px;
    left: 0;
    display: none;
    width: min(340px, calc(100vw - 40px));
    max-height: min(42vh, 340px);
    overflow-y: auto;
    border: 1px solid #d4e2ea;
    border-radius: 12px;
    background: #fff;
    padding: 10px;
    box-shadow: 0 20px 48px rgba(5, 24, 43, 0.18);
    z-index: 650;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-value-picker-cell .popup-anchor > .popup.visible,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-value-picker-cell .popup-anchor > .popup.visible,
:where(body.wat-app--collection) .acd-shell-body .invoice-value-picker-cell .popup-anchor > .popup.visible,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-value-picker-cell .popup-anchor > .popup.visible {
    display: block;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-value-picker-cell .popup > label,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-value-picker-cell .popup > label,
:where(body.wat-app--collection) .acd-shell-body .invoice-value-picker-cell .popup > label,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-value-picker-cell .popup > label {
    display: grid;
    gap: 6px;
    color: var(--admin-text-muted);
    font-size: 12px;
    font-weight: 700;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-value-picker-cell .popup input[type="search"],
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-value-picker-cell .popup input[type="search"],
:where(body.wat-app--collection) .acd-shell-body .invoice-value-picker-cell .popup input[type="search"],
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-value-picker-cell .popup input[type="search"] {
    min-height: 38px;
    border: 1px solid #d4e2ea;
    border-radius: 9px;
    background: #fff;
    color: var(--admin-text);
    padding: 0 10px;
    font: inherit;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-value-picker-cell .popup-list,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-value-picker-cell .popup-list,
:where(body.wat-app--collection) .acd-shell-body .invoice-value-picker-cell .popup-list,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-value-picker-cell .popup-list {
    display: grid;
    gap: 5px;
    margin-top: 8px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-value-picker-cell .popup-button,
:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-value-picker-cell .popup .button-blue,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-value-picker-cell .popup-button,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-value-picker-cell .popup .button-blue,
:where(body.wat-app--collection) .acd-shell-body .invoice-value-picker-cell .popup-button,
:where(body.wat-app--collection) .acd-shell-body .invoice-value-picker-cell .popup .button-blue,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-value-picker-cell .popup-button,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-value-picker-cell .popup .button-blue {
    width: 100%;
    min-height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--admin-text);
    padding: 8px 9px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-value-picker-cell .popup .button-blue,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-value-picker-cell .popup .button-blue,
:where(body.wat-app--collection) .acd-shell-body .invoice-value-picker-cell .popup .button-blue,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-value-picker-cell .popup .button-blue {
    background: #eaf5ff;
    color: #1268f3;
    text-align: center;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-value-picker-cell .popup-button:hover,
:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-value-picker-cell .popup-button:focus-visible,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-value-picker-cell .popup-button:hover,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-value-picker-cell .popup-button:focus-visible,
:where(body.wat-app--collection) .acd-shell-body .invoice-value-picker-cell .popup-button:hover,
:where(body.wat-app--collection) .acd-shell-body .invoice-value-picker-cell .popup-button:focus-visible,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-value-picker-cell .popup-button:hover,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-value-picker-cell .popup-button:focus-visible {
    background: #eef6ff;
    color: #0f58d6;
    outline: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-attachment,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-attachment {
    display: grid;
    gap: 7px;
    min-width: 0;
    border: 1px solid #dbe8f0;
    border-radius: 10px;
    background: #fff;
    padding: 10px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-upload input[type="file"],
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-upload input[type="file"] {
    min-height: 42px;
    padding: 7px 10px;
    line-height: 1.6;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-attachment-file,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-attachment-file {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-width: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-attachment-file a,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal-link,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-attachment-file a,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal-link {
    min-width: 0;
    color: #1268f3;
    font-weight: 750;
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal .button-delete-row,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal .button-delete-row {
    display: inline-grid;
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    place-items: center;
    border: 1px solid #ffd2d2;
    border-radius: 999px;
    background: #fff5f5;
    color: #d92d20;
    padding: 0;
    cursor: pointer;
    flex: 0 0 auto;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal .button-delete-row:hover,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal .button-delete-row:hover {
    background: #d92d20;
    color: #fff;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal .button-delete-row svg,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-group-modal .button-delete-row i[data-lucide],
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal .button-delete-row svg,
:where(body.wat-app--collection) .acd-shell-body .dispatch-group-modal .button-delete-row i[data-lucide] {
    width: 15px;
    height: 15px;
    color: currentColor;
    stroke: currentColor;
    stroke-width: 2.5;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-warning-state,
:where(body.wat-app--collection) .acd-shell-body .dispatch-warning-state {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    border: 1px solid #f3d5a0;
    border-radius: 11px;
    background: #fff5df;
    color: #89520a;
    padding: 12px;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.35;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-warning-state svg,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-warning-state i[data-lucide],
:where(body.wat-app--collection) .acd-shell-body .dispatch-warning-state svg,
:where(body.wat-app--collection) .acd-shell-body .dispatch-warning-state i[data-lucide] {
    width: 17px;
    height: 17px;
    color: currentColor;
    stroke: currentColor;
    stroke-width: 2.4;
}

:where(body.wat-app--collection) .acd-shell-body .processing-category-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 0;
    margin-top: 10px;
}

:where(body.wat-app--collection) .acd-shell-body .processing-category-suggestion {
    display: inline-flex;
    min-height: 34px;
    max-width: 100%;
    align-items: center;
    gap: 7px;
    border: 1px solid #b9d7ff;
    border-radius: 999px;
    background: #f5fbff;
    color: #0f3c83;
    padding: 0 12px;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 750;
    cursor: pointer;
}

:where(body.wat-app--collection) .acd-shell-body .processing-category-suggestion:hover,
:where(body.wat-app--collection) .acd-shell-body .processing-category-suggestion:focus-visible {
    border-color: var(--wat-blue);
    background: #eaf5ff;
    color: #0a58ca;
    outline: 0;
}

:where(body.wat-app--collection) .acd-shell-body .processing-category-suggestion span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:where(body.wat-app--collection) .acd-shell-body .processing-category-suggestion small {
    max-width: 220px;
    overflow: hidden;
    color: #58728c;
    font-size: 0.74rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:where(body.wat-app--collection) .acd-shell-body #flashMessageContainer {
    right: 20px;
    bottom: 20px;
    max-width: min(420px, calc(100vw - 32px));
}

:where(body.wat-app--collection).collection-admin-detail-redesign,
:where(body.wat-app--collection).collection-admin-detail-redesign * {
    box-sizing: border-box;
}

:where(body.wat-app--collection).collection-admin-detail-redesign {
    --acd-blue: #1268f3;
    --acd-blue-dark: #071e49;
    --acd-teal: #14b9b8;
    --acd-green: #27bd78;
    --acd-danger: #d9324b;
    --acd-surface: #ffffff;
    --acd-surface-soft: #f7fbff;
    --acd-border: rgba(23, 45, 84, 0.12);
    --acd-shadow-soft: 0 18px 40px rgba(13, 39, 74, 0.08);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    color: var(--admin-text);
}

:where(body.wat-app--collection).collection-admin-detail-redesign > * {
    order: 100;
}

:where(body.wat-app--collection).collection-admin-detail-redesign > .acd-page-header {
    order: 10;
}

:where(body.wat-app--collection).collection-admin-detail-redesign > .acd-timeline {
    order: 20;
}

:where(body.wat-app--collection).collection-admin-detail-redesign > .acd-client-panel {
    order: 30;
}

:where(body.wat-app--collection).collection-admin-detail-redesign > .acd-admin-notes-panel {
    order: 35;
}

:where(body.wat-app--collection).collection-admin-detail-redesign > .acd-request-details-panel {
    order: 36;
}

:where(body.wat-app--collection).collection-admin-detail-redesign > .acd-workflow-panel,
:where(body.wat-app--collection).collection-admin-detail-redesign > #processingEditor,
:where(body.wat-app--collection).collection-admin-detail-redesign > #collection-dispatching-workflow,
:where(body.wat-app--collection).collection-admin-detail-redesign > .collection-invoice-workspace,
:where(body.wat-app--collection).collection-admin-detail-redesign > .acd-payment-workspace,
:where(body.wat-app--collection).collection-admin-detail-redesign > .acd-done-workspace {
    order: 40;
}

:where(body.wat-app--collection).collection-admin-detail-redesign[data-collection-status="0"] > .acd-workflow-panel {
    order: 37;
}

:where(body.wat-app--collection).collection-admin-detail-redesign:not([data-collection-status="0"]):not([data-collection-status="4"]) > .acd-client-panel {
    order: 45;
}

:where(body.wat-app--collection).collection-admin-detail-redesign:not([data-collection-status="0"]) > .acd-admin-notes-panel {
    order: 46;
}

:where(body.wat-app--collection).collection-admin-detail-redesign[data-collection-status="2"] > .acd-admin-notes-panel,
:where(body.wat-app--collection).collection-admin-detail-redesign[data-collection-status="2"] > .acd-request-details-panel,
:where(body.wat-app--collection).collection-admin-detail-redesign[data-collection-status="3"] > .acd-admin-notes-panel,
:where(body.wat-app--collection).collection-admin-detail-redesign[data-collection-status="3"] > .acd-request-details-panel,
:where(body.wat-app--collection).collection-admin-detail-redesign[data-collection-status="4"] > .acd-admin-notes-panel,
:where(body.wat-app--collection).collection-admin-detail-redesign[data-collection-status="4"] > .acd-request-details-panel,
:where(body.wat-app--collection).collection-admin-detail-redesign[data-collection-status="13"] > .acd-admin-notes-panel,
:where(body.wat-app--collection).collection-admin-detail-redesign[data-collection-status="13"] > .acd-request-details-panel,
:where(body.wat-app--collection).collection-admin-detail-redesign[data-collection-status="14"] > .acd-admin-notes-panel,
:where(body.wat-app--collection).collection-admin-detail-redesign[data-collection-status="14"] > .acd-request-details-panel {
    order: 70;
}

:where(body.wat-app--collection).collection-admin-detail-redesign > .acd-batch-values-panel {
    order: 42;
}

:where(body.wat-app--collection).collection-admin-detail-redesign > .acd-final-inventory-panel {
    order: 43;
}

:where(body.wat-app--collection).collection-admin-detail-redesign > .acd-receipt-archive {
    order: 180;
}

:where(body.wat-app--collection).collection-admin-detail-redesign > .acd-developer-area {
    order: 190;
}

:where(body.wat-app--collection).collection-admin-detail-redesign > .acd-activity-log {
    order: 200;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-pre-wrap {
    white-space: pre-wrap;
    font-family: inherit;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .card,
:where(body.wat-app--collection).collection-admin-detail-redesign details.card,
:where(body.wat-app--collection).collection-admin-detail-redesign .acd-client-panel {
    border: 1px solid var(--acd-border);
    border-radius: 14px;
    background: var(--acd-surface);
    box-shadow: var(--acd-shadow-soft);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-client-panel {
    padding: 16px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-client-panel--collapsed {
    padding: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-client-panel--collapsed > :not(summary) {
    margin-inline: 16px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-client-panel--collapsed > :last-child {
    margin-bottom: 16px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign details.card {
    overflow: hidden;
}

:where(body.wat-app--collection).collection-admin-detail-redesign details.card > summary.card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
}

:where(body.wat-app--collection).collection-admin-detail-redesign details.card > summary.card-title::-webkit-details-marker {
    display: none;
}

:where(body.wat-app--collection).collection-admin-detail-redesign details.card > summary.card-title::after {
    content: "";
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: rotate(45deg);
    transition: transform 160ms ease, border-color 160ms ease;
}

:where(body.wat-app--collection).collection-admin-detail-redesign details.card[open] > summary.card-title::after {
    transform: rotate(-135deg);
}

:where(body.wat-app--collection).collection-admin-detail-redesign details.card > summary.card-title:hover::after {
    border-color: var(--wat-blue-deep);
}

:where(body.wat-app--collection).collection-admin-detail-redesign details.card > summary.card-title h2 {
    margin: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .definition-list {
    display: grid;
    grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
    gap: 10px 18px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .definition-list dt {
    color: var(--admin-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .definition-list dd {
    min-width: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-client-panel .definition-list {
    display: block;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-client-panel .definition-list dt {
    margin: 14px 0 4px;
    color: #607588;
    font-size: 0.78rem;
    font-weight: 760;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-client-panel .definition-list dt:first-child {
    margin-top: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-client-panel .definition-list dd {
    margin: 0;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(23, 45, 84, 0.08);
    color: #0b263e;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-client-panel .definition-list dd:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-client-panel .definition-list a {
    font-weight: 650;
    overflow-wrap: anywhere;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .small-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .info-tile {
    display: grid;
    min-height: 84px;
    align-content: center;
    justify-items: center;
    border: 1px solid var(--acd-border);
    border-radius: 8px;
    background: #fbfdff;
    color: var(--admin-text);
    padding: 12px 9px;
    text-align: center;
    text-decoration: none;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .info-tile .mini-icon {
    width: 30px;
    height: 30px;
    margin: 0 auto 8px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .info-tile b {
    display: block;
    margin-top: 3px;
    font-size: 0.84rem;
    font-weight: 750;
    line-height: 1.2;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .info-tile span {
    color: var(--admin-text-muted);
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.2;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .request-assignee-tile {
    width: 100%;
    appearance: none;
    cursor: pointer;
    font-family: inherit;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .request-assignee-tile:hover,
:where(body.wat-app--collection).collection-admin-detail-redesign .request-assignee-tile:focus-visible {
    border-color: #9fc7ff;
    background: #f5fbff;
    outline: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .request-assignee-tile:focus-visible {
    box-shadow: 0 0 0 3px rgba(18, 104, 243, 0.12);
}

:where(body.wat-app--collection).collection-admin-detail-redesign #collectionAssignee button.a {
    cursor: pointer;
}

:where(body.wat-app--collection).collection-admin-detail-redesign #collectionAssignee button.a:hover,
:where(body.wat-app--collection).collection-admin-detail-redesign #collectionAssignee button.a:focus-visible {
    color: #0f58d6;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .collection-location .address-row {
    line-height: 1.5;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .collection-location .address-row > span {
    color: var(--admin-text-muted);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .map {
    min-height: 142px;
    overflow: hidden;
    border: 1px solid #dcebea;
    border-radius: 12px;
    background: #edf5f8;
    color: var(--admin-text-muted);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .map.--short {
    min-height: 142px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-page-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: var(--admin-text-muted);
    font-size: 0.86rem;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-breadcrumb a {
    color: var(--admin-text-muted);
    text-decoration: none;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-breadcrumb a:hover {
    color: var(--acd-blue);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-page-header-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-page-header h1 {
    margin: 0;
    color: var(--acd-blue-dark);
    font-size: clamp(2.4rem, 2.2vw + 1.4rem, 4rem);
    line-height: 1;
    letter-spacing: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-page-header p {
    margin: 10px 0 0;
    color: var(--admin-text-muted);
    font-size: 0.95rem;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-status-pill {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 16px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--acd-blue), #0b7bff);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 12px 24px rgba(18, 104, 243, 0.22);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-status-pill.is-cancelled {
    background: #6b7d90;
    box-shadow: none;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-timeline {
    counter-reset: acd-timeline;
    display: flex;
    align-items: flex-start;
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex-shrink: 1;
    gap: 0;
    margin: 22px 0 28px;
    padding: 10px 10px 18px;
    list-style: none;
    scroll-padding-inline: 48px;
    overscroll-behavior-x: contain;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-timeline-step {
    counter-increment: acd-timeline;
    position: relative;
    display: flex;
    flex: 0 0 126px;
    min-width: 126px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    color: var(--admin-text-muted);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-timeline-step::before {
    content: "";
    position: absolute;
    top: 22px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: #d8e2ee;
    z-index: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-timeline-step:first-child::before {
    display: none;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-timeline-marker {
    position: relative;
    z-index: 1;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 2px solid #d8e2ee;
    border-radius: 999px;
    background: var(--acd-surface);
    box-shadow: 0 8px 18px rgba(11, 43, 82, 0.08);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-timeline-index::before {
    content: counter(acd-timeline);
    font-size: 0.86rem;
    font-weight: 700;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-timeline-label {
    display: block;
    max-width: 112px;
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.2;
    color: var(--admin-text);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-timeline-date {
    display: block;
    margin-top: 7px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-timeline .timeline_cell_details {
    margin: 0;
    font-size: 0.72rem;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-timeline .timeline_cell_details::before {
    display: none;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-timeline-step.is-complete::before,
:where(body.wat-app--collection).collection-admin-detail-redesign .acd-timeline-step.is-active::before {
    background: linear-gradient(90deg, var(--acd-blue), var(--acd-teal));
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-timeline-step.is-complete .acd-timeline-marker {
    border-color: rgba(18, 104, 243, 0.42);
    color: var(--acd-blue);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-timeline-step.is-active {
    scroll-margin-inline: 48px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-timeline-step.is-active .acd-timeline-marker {
    border-color: var(--acd-blue);
    background: linear-gradient(135deg, var(--acd-blue), var(--acd-teal));
    color: #fff;
    box-shadow: 0 12px 26px rgba(18, 104, 243, 0.24);
}

@media (min-width: 1181px) {
    :where(body.wat-app--collection).collection-admin-detail-redesign[data-collection-status="0"] {
        display: grid;
        grid-template-columns: minmax(280px, 0.92fr) minmax(360px, 1.08fr) minmax(330px, 1fr);
        gap: 18px;
        align-items: start;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign[data-collection-status="0"] > .acd-page-header,
:where(body.wat-app--collection).collection-admin-detail-redesign[data-collection-status="0"] > .acd-timeline,
:where(body.wat-app--collection).collection-admin-detail-redesign[data-collection-status="0"] > .acd-developer-area,
:where(body.wat-app--collection).collection-admin-detail-redesign[data-collection-status="0"] > .acd-activity-log,
:where(body.wat-app--collection).collection-admin-detail-redesign[data-collection-status="0"] > .acd-batch-values-panel,
:where(body.wat-app--collection).collection-admin-detail-redesign[data-collection-status="0"] > .acd-final-inventory-panel,
:where(body.wat-app--collection).collection-admin-detail-redesign[data-collection-status="0"] > .acd-receipt-archive,
:where(body.wat-app--collection).collection-admin-detail-redesign[data-collection-status="0"] > .acd-request-details-panel {
        grid-column: 1 / -1;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign[data-collection-status="0"] > .acd-client-panel {
        grid-column: 1;
        order: 30;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign[data-collection-status="0"] > .acd-request-prepare-panel {
        grid-column: 2;
        order: 31;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign[data-collection-status="0"] > .acd-inventory-panel {
        grid-column: 3;
        order: 32;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign[data-collection-status="0"] > .details-types-form,
:where(body.wat-app--collection).collection-admin-detail-redesign[data-collection-status="0"] > form,
:where(body.wat-app--collection).collection-admin-detail-redesign[data-collection-status="0"] > .collection-details-types-form {
        grid-column: 1 / -1;
    }
}

:where(body.wat-app--collection).collection-admin-detail-redesign .table-container,
:where(body.wat-app--collection).collection-admin-detail-redesign .card,
:where(body.wat-app--collection).collection-admin-detail-redesign details.card {
    max-width: 100%;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .table-container {
    overflow-x: auto;
    border-radius: 12px;
    overscroll-behavior-x: contain;
}

:where(body.wat-app--collection).collection-admin-detail-redesign table {
    width: 100%;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-table,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-admin-table {
    min-width: 980px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-workbench {
    display: grid;
    gap: 18px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 14px;
    align-items: stretch;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-kpi {
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(23, 45, 84, 0.1);
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fbff, #fff);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-kpi span {
    color: var(--admin-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-kpi strong {
    color: var(--acd-blue-dark);
    font-size: 1.35rem;
    line-height: 1.1;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-layout {
    display: grid;
    grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-type-rail,
:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-group-panel {
    min-width: 0;
    border: 1px solid rgba(23, 45, 84, 0.1);
    border-radius: 12px;
    background: var(--acd-surface-soft);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-type-rail {
    display: grid;
    gap: 12px;
    padding: 14px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-type-rail-header,
:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-group-header,
:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-table-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-round-action {
    display: inline-grid;
    width: 36px;
    height: 36px;
    min-width: 36px;
    place-items: center;
    padding: 0;
    border-radius: 999px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-type-list {
    display: grid;
    gap: 8px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-type-button {
    display: grid;
    gap: 7px;
    width: 100%;
    padding: 11px 12px;
    border: 1px solid rgba(23, 45, 84, 0.1);
    border-radius: 10px;
    background: #fff;
    color: var(--admin-text);
    text-align: left;
    cursor: pointer;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-type-button.is-active {
    border-color: rgba(20, 185, 184, 0.42);
    background: linear-gradient(135deg, rgba(18, 104, 243, 0.1), rgba(20, 185, 184, 0.14));
    box-shadow: inset 3px 0 0 var(--acd-teal);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-type-main,
:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-type-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-type-main {
    font-weight: 750;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-type-meta {
    color: var(--admin-text-muted);
    font-size: 0.78rem;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-type-dd {
    flex: 0 0 auto;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(18, 104, 243, 0.1);
    color: var(--acd-blue);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-add-category-bottom {
    width: 100%;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-table-area {
    min-width: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-group-panel {
    overflow: hidden;
    background: #fff;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-group-panel[hidden] {
    display: none;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-group-header {
    padding: 15px 16px;
    border-bottom: 1px solid rgba(23, 45, 84, 0.08);
    background: linear-gradient(180deg, #f8fbff, #fff);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-group-header .feedback {
    margin: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-group-panel .processing-form {
    padding: 16px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-table-tools {
    margin-bottom: 12px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-search {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: min(100%, 320px);
    padding: 8px 10px;
    border: 1px solid rgba(23, 45, 84, 0.12);
    border-radius: 10px;
    background: #fff;
    color: var(--admin-text-muted);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-search input {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-col--notes {
    width: 76px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-notes-pill {
    display: inline-flex;
    min-width: 28px;
    min-height: 24px;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: #edf2f7;
    color: var(--admin-text-muted);
    font-size: 0.78rem;
    font-weight: 800;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-notes-pill.is-filled {
    background: rgba(39, 189, 120, 0.12);
    color: #138a53;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-add-row td {
    text-align: center;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-add-row .button-plus {
    min-width: 160px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-mock-table td {
    vertical-align: middle;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-mock-table tbody tr.is-selected td {
    background: #f2fbff;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-mock-table tbody tr.is-warning td {
    background: #fffaf1;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-mock-table tbody tr.is-warning td:first-child {
    box-shadow: inset 3px 0 0 #e8b25b;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-mock-table tbody tr.is-error td {
    background: #fff1f2;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-mock-table tbody tr.is-error td:first-child {
    box-shadow: inset 3px 0 0 #df3d3d;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-cell-input {
    width: 100%;
    min-width: 72px;
    height: 34px;
    border: 1px solid #d4e2ea;
    border-radius: 8px;
    background: #fff;
    color: var(--admin-text);
    padding: 0 9px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-cell-input.is-short {
    max-width: 72px;
    text-align: right;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-cell-input.is-missing {
    border-color: #e8b25b;
    background: #fff9ec;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .note-count-pill,
:where(body.wat-app--collection).collection-admin-detail-redesign .drive-pill {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    gap: 6px;
    border: 1px solid #d8e7ef;
    border-radius: 999px;
    background: #fff;
    color: #38536d;
    padding: 0 9px;
    font-size: 0.75rem;
    font-weight: 750;
    white-space: nowrap;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .drive-pill.is-needed {
    color: #89520a;
    background: #fff5df;
    border-color: #f3d5a0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .drive-pill.is-locked {
    color: #607287;
    background: #eef4f8;
    border-color: #d6e0e8;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .drive-pill.is-error {
    color: #b42332;
    background: #fff1f2;
    border-color: #f3b7be;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-group {
    border: 1px solid rgba(23, 45, 84, 0.1);
    border-radius: 12px;
    background: var(--acd-surface-soft);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-complete-inline {
    margin: 16px 0;
    padding: 14px;
    border: 1px solid rgba(20, 185, 184, 0.24);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(18, 104, 243, 0.08), rgba(20, 185, 184, 0.12));
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-complete-inline .form {
    margin: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-complete-inline .feedback {
    margin-top: 10px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-group > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    cursor: pointer;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-form {
    padding: 0 16px 16px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-feedback {
    flex: 0 0 auto;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-ui .button-danger {
    border-color: #ffd1cc;
    background: #fff1f0;
    color: #b42318;
    box-shadow: none;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-ui .button-danger:not(:disabled):hover,
:where(body.wat-app--collection).collection-admin-detail-redesign .processing-ui .button-danger:not(:disabled):focus-visible {
    border-color: #ffb4ab;
    background: #ffe7e4;
    color: #981b12;
    outline: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-remove-category-button {
    min-width: 0;
    padding-inline: 12px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-ui .processing-form {
    padding: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-ui .button svg.lucide,
:where(body.wat-app--collection).collection-admin-detail-redesign .processing-ui .button i[data-lucide],
:where(body.wat-app--collection).collection-admin-detail-redesign .processing-ui .round-add svg.lucide,
:where(body.wat-app--collection).collection-admin-detail-redesign .processing-ui .round-add i[data-lucide],
:where(body.wat-app--collection).collection-admin-detail-redesign .processing-product-popup .button svg.lucide,
:where(body.wat-app--collection).collection-admin-detail-redesign .processing-product-popup .button i[data-lucide] {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    color: currentColor;
    stroke: currentColor;
    stroke-width: 2.45;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-ui .button-primary svg.lucide,
:where(body.wat-app--collection).collection-admin-detail-redesign .processing-ui .button-primary i[data-lucide],
:where(body.wat-app--collection).collection-admin-detail-redesign .processing-ui .round-add svg.lucide,
:where(body.wat-app--collection).collection-admin-detail-redesign .processing-ui .round-add i[data-lucide] {
    color: #fff;
    stroke: #fff;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-ui .round-add svg.lucide,
:where(body.wat-app--collection).collection-admin-detail-redesign .processing-ui .round-add i[data-lucide] {
    width: 19px;
    height: 19px;
}

:where(body.wat-app--collection) .acd-shell-body .round-delete.button-delete-row,
:where(body.wat-app--collection) .acd-shell-body .round-delete,
:where(body.wat-app--collection).collection-admin-detail-redesign .processing-ui .round-delete.button-delete-row,
:where(body.wat-app--collection).collection-admin-detail-redesign .processing-ui .round-delete {
    display: grid;
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    place-items: center;
    border: 1px solid #fecaca;
    border-radius: 999px;
    background: #fff1f2;
    color: #c93131;
    padding: 0;
}

:where(body.wat-app--collection) .acd-shell-body .round-delete.button-delete-row:hover,
:where(body.wat-app--collection) .acd-shell-body .round-delete:hover,
:where(body.wat-app--collection).collection-admin-detail-redesign .processing-ui .round-delete.button-delete-row:hover,
:where(body.wat-app--collection).collection-admin-detail-redesign .processing-ui .round-delete:hover {
    border-color: #df3d3d;
    background: #df3d3d;
    color: #fff;
}

:where(body.wat-app--collection) .acd-shell-body .round-delete svg.lucide,
:where(body.wat-app--collection) .acd-shell-body .round-delete i[data-lucide],
:where(body.wat-app--collection).collection-admin-detail-redesign .processing-ui .round-delete svg.lucide,
:where(body.wat-app--collection).collection-admin-detail-redesign .processing-ui .round-delete i[data-lucide] {
    width: 15px;
    height: 15px;
    color: currentColor;
    stroke: currentColor;
    stroke-width: 2.5;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-product-select {
    width: 100%;
    min-width: 170px;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    text-align: left;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-product-select:hover [data-processing-product-label],
:where(body.wat-app--collection).collection-admin-detail-redesign .processing-product-select:focus-visible [data-processing-product-label] {
    color: var(--wat-blue);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-product-select.is-missing {
    border: 1px solid #e8b25b;
    border-radius: 10px;
    background: #fff9ec;
    padding: 8px 10px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .drive-pill.is-success {
    color: #087b63;
    background: #e6f8f3;
    border-color: #bdeadd;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .note-count-pill svg.lucide,
:where(body.wat-app--collection).collection-admin-detail-redesign .note-count-pill i[data-lucide] {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: currentColor;
    stroke: currentColor;
    stroke-width: 2.35;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-detail-edit {
    display: grid;
    gap: 6px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-detail-edit textarea {
    width: 100%;
    min-height: 72px;
    resize: vertical;
    border: 1px solid #d4e2ea;
    border-radius: 8px;
    background: #fff;
    color: var(--admin-text);
    padding: 8px 9px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-detail-edit textarea:focus {
    border-color: var(--wat-blue);
    box-shadow: 0 0 0 3px rgba(0, 127, 222, 0.09);
    outline: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .workbench-add-form {
    box-sizing: border-box;
    max-width: 690px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .operator-form-grid {
    display: grid;
    grid-template-columns: minmax(280px, 390px) minmax(170px, 210px);
    gap: 10px;
    align-items: start;
    justify-content: start;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .operator-form-grid .is-wide {
    grid-column: span 2;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .operator-input-card-drives {
    grid-column: auto;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .operator-form-metrics-row,
:where(body.wat-app--collection).collection-admin-detail-redesign .operator-form-drives-row,
:where(body.wat-app--collection).collection-admin-detail-redesign .operator-form-notes-row {
    display: grid;
    grid-column: 1 / -1;
    gap: 10px;
    align-items: start;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .operator-form-metrics-row {
    grid-template-columns: minmax(170px, 210px) 72px 86px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .operator-form-drives-row {
    grid-template-columns: minmax(0, 390px);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .operator-form-notes-row {
    grid-template-columns: repeat(2, minmax(0, 200px));
}

:where(body.wat-app--collection).collection-admin-detail-redesign .operator-input-card {
    display: grid;
    gap: 6px;
    min-width: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .operator-input-card label {
    color: var(--admin-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .operator-input-card input,
:where(body.wat-app--collection).collection-admin-detail-redesign .operator-input-card textarea,
:where(body.wat-app--collection).collection-admin-detail-redesign .operator-input-card select {
    width: 100%;
    min-width: 0;
    border: 1px solid #d4e2ea;
    border-radius: 10px;
    background: #fff;
    color: var(--admin-text);
    padding: 9px 10px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .operator-input-card-qty input,
:where(body.wat-app--collection).collection-admin-detail-redesign .operator-input-card-weight input {
    width: 100%;
    max-width: 72px;
    padding-inline: 8px;
    text-align: right;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .operator-input-card-weight input {
    max-width: 86px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .operator-input-card-product .processing-product-select {
    min-width: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .operator-input-card textarea {
    min-height: 72px;
    height: 72px;
    resize: vertical;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-add-drives {
    display: grid;
    gap: 8px;
    max-width: 390px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-add-drives:empty {
    display: none;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-add-drive-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .operator-input-card-drives [data-new-add-drive] {
    width: fit-content;
    height: 37px;
    min-height: 37px;
    min-width: 0;
    padding: 0 12px;
    justify-self: start;
}

@media (max-width: 1300px) {
    :where(body.wat-app--collection).collection-admin-detail-redesign .operator-form-grid {
        grid-template-columns: minmax(260px, 360px) minmax(165px, 200px);
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .operator-form-metrics-row {
        grid-template-columns: minmax(165px, 200px) 72px 86px;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .operator-form-drives-row {
        grid-template-columns: minmax(0, 360px);
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .operator-form-notes-row {
        grid-template-columns: repeat(2, minmax(0, 190px));
    }
}

@media (max-width: 760px) {
    :where(body.wat-app--collection).collection-admin-detail-redesign .operator-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .operator-form-metrics-row {
        grid-template-columns: minmax(0, 1fr) 72px 86px;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .operator-form-drives-row {
        grid-template-columns: minmax(0, 1fr);
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .operator-form-notes-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-detail-product-button {
    display: grid;
    width: 100%;
    min-height: 0;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    text-align: left;
    box-shadow: none;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-detail-product-button b {
    color: var(--admin-text);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-detail-product-button small {
    color: var(--admin-text-muted);
    font-size: 0.76rem;
    font-weight: 700;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-detail-product-button:hover b,
:where(body.wat-app--collection).collection-admin-detail-redesign .processing-detail-product-button:focus-visible b {
    color: var(--wat-blue);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-detail-panel {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-detail-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-detail-actions .button {
    width: 100%;
    min-height: 38px;
    justify-content: center;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-detail-actions .button:disabled {
    cursor: not-allowed;
    opacity: 0.52;
    box-shadow: none;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .selected-row-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .selected-row-close {
    display: grid;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    place-items: center;
    border: 1px solid #d4e2ea;
    border-radius: 8px;
    background: #fff;
    color: #38536d;
    padding: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .selected-row-close svg,
:where(body.wat-app--collection).collection-admin-detail-redesign .selected-row-close svg.lucide,
:where(body.wat-app--collection).collection-admin-detail-redesign .selected-row-close i[data-lucide] {
    width: 16px;
    height: 16px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .detail-box {
    border: 1px solid #dbe8f0;
    border-radius: 10px;
    background: #fbfdff;
    padding: 10px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .detail-box span {
    display: block;
    margin-bottom: 5px;
    color: var(--admin-text-muted);
    font-size: 0.76rem;
    font-weight: 700;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .detail-box b {
    display: block;
    color: var(--admin-text);
    font-weight: 750;
    line-height: 1.3;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-detail-drive-button {
    width: 100%;
    appearance: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-detail-drive-button:disabled {
    cursor: not-allowed;
    opacity: 0.62;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-detail-drive-button:not(:disabled):hover,
:where(body.wat-app--collection).collection-admin-detail-redesign .processing-detail-drive-button:not(:disabled):focus-visible {
    border-color: #9cddf1;
    background: #f0fbff;
    outline: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-detail-drive-button small {
    display: block;
    margin-top: 5px;
    color: var(--wat-blue);
    font-size: 0.74rem;
    font-weight: 750;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-detail-drive-button:disabled small {
    color: var(--admin-text-muted);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-product-popup {
    display: grid;
    position: fixed;
    width: min(380px, calc(100vw - 36px));
    gap: 10px;
    margin: 0;
    padding: 10px;
    border: 1px solid #d4e2ea;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 22px 54px rgba(5, 56, 84, 0.18);
    z-index: 220;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-product-popup label {
    display: grid;
    gap: 6px;
    color: var(--admin-text-muted);
    font-size: 0.76rem;
    font-weight: 700;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-product-popup input[type="search"] {
    width: 100%;
    min-width: 0;
    height: 38px;
    border: 1px solid #d4e2ea;
    border-radius: 10px;
    background: #fff;
    color: var(--admin-text);
    padding: 0 10px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-product-popup input[type="search"]:focus {
    border-color: var(--wat-blue);
    box-shadow: 0 0 0 3px rgba(0, 127, 222, 0.09);
    outline: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-product-popup .popup-list {
    display: grid;
    max-height: min(42vh, 340px);
    gap: 7px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-product-option {
    display: grid;
    width: 100%;
    gap: 2px;
    padding: 9px 10px;
    border: 1px solid #dbe8f0;
    border-radius: 10px;
    background: #fbfdff;
    color: var(--admin-text);
    text-align: left;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-product-option:hover,
:where(body.wat-app--collection).collection-admin-detail-redesign .processing-product-option:focus-visible {
    border-color: #9cddf1;
    background: #f0fbff;
    outline: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-product-option b {
    color: var(--admin-text);
    font-size: 0.84rem;
    font-weight: 750;
    line-height: 1.25;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-product-option span {
    color: var(--admin-text-muted);
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.25;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-product-popup-empty {
    border: 1px dashed #d4e2ea;
    border-radius: 10px;
    color: var(--admin-text-muted);
    padding: 12px;
    font-size: 0.76rem;
    font-weight: 700;
    text-align: center;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .processing-product-create {
    width: 100%;
    min-height: 36px;
    justify-content: center;
}

:where(body.wat-app--collection).collection-admin-detail-redesign #collection-dispatching-workflow {
    display: grid;
    gap: 18px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dispatch-topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 14px;
    align-items: stretch;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dispatch-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dispatch-kpi {
    display: grid;
    min-width: 0;
    gap: 5px;
    padding: 14px;
    border: 1px solid rgba(23, 45, 84, 0.1);
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fbff, #fff);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dispatch-kpi span {
    color: var(--admin-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dispatch-kpi strong {
    color: var(--acd-blue-dark);
    font-size: 1.35rem;
    line-height: 1.1;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dispatch-completion-card {
    display: grid;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(20, 185, 184, 0.24);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(18, 104, 243, 0.08), rgba(20, 185, 184, 0.12));
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dispatch-completion-controls {
    display: grid;
    gap: 10px;
    align-content: center;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dispatch-completion-controls p {
    margin: 0;
    color: var(--admin-text-muted);
    font-size: 0.85rem;
    line-height: 1.35;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dispatch-completion-controls .button-blue {
    width: 100%;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dispatch-lanes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 16px;
    align-items: start;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dispatch-lane {
    display: grid;
    min-width: 0;
    gap: 16px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dispatch-lane > .card,
:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dispatch-lane > details.card {
    margin: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dispatch-stock-card .form {
    gap: 12px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dispatch-search {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid rgba(23, 45, 84, 0.12);
    border-radius: 10px;
    background: #fff;
    color: var(--admin-text-muted);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dispatch-search input {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dispatch-stock-groups {
    display: grid;
    gap: 10px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dispatch-stock-groups fieldset {
    padding: 12px;
    border: 1px solid rgba(23, 45, 84, 0.1);
    border-radius: 12px;
    background: var(--acd-surface-soft);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dispatch-stock-groups legend {
    padding: 0 5px;
    color: var(--acd-blue-dark);
    font-weight: 700;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dispatch-create-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(160px, 220px);
    gap: 12px;
    align-items: end;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-task-stack,
:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-task-list {
    display: grid;
    gap: 10px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-task-section {
    border: 1px solid rgba(23, 45, 84, 0.1);
    border-radius: 12px;
    background: var(--acd-surface-soft);
    overflow: hidden;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-section-header,
:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-task-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-section-header {
    padding: 12px 14px;
    color: var(--acd-blue-dark);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-section-header > span {
    display: grid;
    gap: 2px;
    min-width: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-section-header small {
    color: var(--admin-text-muted);
    font-weight: 600;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-section-header svg,
:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-task-header svg {
    flex: 0 0 auto;
    transition: transform 0.16s ease;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-task-section[open] > .acd-dd-section-header svg,
:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-task-card[open] > .acd-dd-task-header svg {
    transform: rotate(180deg);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 12px 12px;
    padding: 8px 10px;
    border: 1px solid rgba(23, 45, 84, 0.12);
    border-radius: 10px;
    background: #fff;
    color: var(--admin-text-muted);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-search input {
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-task-list {
    padding: 0 12px 12px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-task-card {
    border: 1px solid rgba(23, 45, 84, 0.1);
    border-radius: 10px;
    background: #fff;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-task-header {
    padding: 10px 12px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-task-title {
    min-width: 0;
    color: var(--acd-blue-dark);
    font-weight: 750;
    overflow-wrap: anywhere;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-status-pill,
:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-evidence-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-status-pill {
    flex: 0 0 auto;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-status-pill.is-pending {
    background: rgba(18, 104, 243, 0.1);
    color: var(--acd-blue);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-status-pill.is-cleared,
:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-evidence-badge.is-complete {
    background: rgba(39, 189, 120, 0.13);
    color: #138a53;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-task-body {
    display: grid;
    gap: 10px;
    padding: 0 12px 12px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-task-meta,
:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-evidence-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    min-width: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-task-meta {
    color: var(--admin-text-muted);
    font-size: 0.78rem;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-evidence-badge {
    background: #edf2f7;
    color: var(--admin-text-muted);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-evidence-badge.is-muted {
    background: #f3f6f9;
    color: #7a8798;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-method-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: end;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-method-form,
:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-no-data-form {
    margin: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-proof-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-proof-grid:has(.acd-dd-proof-slot:only-child) {
    grid-template-columns: 1fr;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-proof-slot {
    display: grid;
    gap: 7px;
    min-width: 0;
    padding: 9px;
    border: 1px solid rgba(23, 45, 84, 0.08);
    border-radius: 9px;
    background: var(--acd-surface-soft);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-proof-slot > span {
    color: var(--admin-text-muted);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-task-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-empty-inline {
    padding: 12px;
    border: 1px dashed rgba(23, 45, 84, 0.16);
    border-radius: 10px;
    background: #fff;
    color: var(--admin-text-muted);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatching-item-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid rgba(23, 45, 84, 0.08);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatching-item-row:first-of-type {
    border-top: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-panel-heading .card-title {
    margin-bottom: 4px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-inventory-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-metric-card {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border: 1px solid rgba(23, 45, 84, 0.1);
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fbff, #fff);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-metric-value {
    color: var(--acd-blue-dark);
    font-size: 1.35rem;
    font-weight: 750;
    line-height: 1.1;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-metric-label {
    color: var(--admin-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-subcategory-bars {
    display: grid;
    gap: 9px;
    margin-bottom: 16px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-subcategory-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(80px, 2fr) max-content max-content;
    gap: 10px;
    align-items: center;
    font-size: 0.88rem;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-subcategory-progress {
    width: 100%;
    height: 8px;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: #e7edf5;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-subcategory-progress::-webkit-progress-bar {
    border-radius: 999px;
    background: #e7edf5;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-subcategory-progress::-webkit-progress-value {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--acd-blue), var(--acd-teal));
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-subcategory-progress::-moz-progress-bar {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--acd-blue), var(--acd-teal));
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-inventory-details summary {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    color: var(--acd-blue);
    cursor: pointer;
    font-weight: 700;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-inventory-search {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    max-width: 420px;
    color: var(--admin-text-muted);
    font-size: 0.82rem;
    font-weight: 650;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-inventory-search input {
    width: 100%;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-inventory-table {
    min-width: 840px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-inventory-table th:first-child,
:where(body.wat-app--collection).collection-admin-detail-redesign .acd-inventory-table td:first-child {
    width: 74px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-inventory-item-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-weight: 650;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-kpis,
:where(body.wat-app--collection).collection-admin-detail-redesign .done-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-kpi {
    min-width: 0;
    padding: 12px;
    border: 1px solid #dcebea;
    border-radius: 12px;
    background: linear-gradient(180deg, #fff, #f8fcff);
    box-shadow: 0 10px 26px rgba(5, 41, 101, 0.06);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-kpi b {
    display: block;
    color: var(--admin-text);
    font-size: 20px;
    font-weight: 850;
    line-height: 1.1;
    white-space: nowrap;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-kpi b .currency,
:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-kpi b .currency-value,
:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-total-line b .currency,
:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-total-line b .currency-value,
:where(body.wat-app--collection).collection-admin-detail-redesign .done-revenue-tile b .currency,
:where(body.wat-app--collection).collection-admin-detail-redesign .done-revenue-tile b .currency-value {
    display: inline;
    margin: 0;
    color: inherit;
    font: inherit;
    white-space: nowrap;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-kpi > span {
    display: block;
    margin-top: 5px;
    color: var(--admin-text-muted);
    font-size: 12px;
    font-weight: 750;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-kpi.is-warning {
    border-color: #f0d8a2;
    background: linear-gradient(180deg, #fffaf0, #fffdf7);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-kpi.is-success {
    border-color: #bdebd7;
    background: linear-gradient(180deg, #f5fffb, #fff);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-total-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 10px;
    background: #f7fbfd;
    color: var(--admin-text-muted);
    font-size: 12px;
    font-weight: 750;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-total-line b {
    color: var(--admin-text);
    font-size: 14px;
    font-weight: 850;
    white-space: nowrap;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-total-line.is-strong {
    background: #eaf7ff;
    color: #254f6c;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-total-line.is-strong b {
    color: #0029a5;
    font-size: 20px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .done-ui {
    display: grid;
    gap: 13px;
    min-width: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .done-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .done-side-stack {
    display: grid;
    gap: 12px;
    min-width: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .done-report-suite {
    display: grid;
    gap: 0;
    overflow: hidden;
    border: 1px solid #9de8dd;
    border-radius: 14px;
    background: #fff;
    box-shadow:
        0 0 0 4px rgba(0, 180, 156, 0.07),
        0 22px 46px rgba(0, 127, 222, 0.13);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .done-report-suite-head {
    display: grid;
    gap: 7px;
    padding: 16px;
    background:
        radial-gradient(circle at 88% 6%, rgba(25, 217, 181, 0.22), transparent 36%),
        linear-gradient(135deg, #052965 0%, #006fcf 60%, #00b49c 100%);
    color: #fff;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .done-report-suite-head h3 {
    margin: 0;
    color: #fff;
    font-size: 20px;
    line-height: 1.16;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .done-report-suite-head p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
    font-weight: 700;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .done-report-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .done-report-suite-body {
    display: grid;
    gap: 12px;
    padding: 13px;
    background:
        linear-gradient(180deg, rgba(245, 253, 253, 0.94), #fff 48%),
        #fff;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .done-report-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .done-report-summary.is-single {
    grid-template-columns: minmax(0, 1fr);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .done-report-actions-bottom {
    justify-content: flex-end;
    padding-top: 2px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .done-certificate-card .done-report-suite-head {
    gap: 4px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .done-certificate-card .done-report-meta-row {
    justify-content: flex-start;
    margin-top: 6px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .done-certificate-card .done-report-meta-row .button {
    width: fit-content;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .done-revenue-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .done-revenue-tile {
    min-width: 0;
    padding: 11px;
    border: 1px solid #dfeaea;
    border-radius: 12px;
    background: #fff;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .done-revenue-tile b {
    display: block;
    color: var(--admin-text);
    font-size: 18px;
    font-weight: 850;
    line-height: 1.15;
    white-space: nowrap;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .done-revenue-tile > span {
    display: block;
    color: var(--admin-text-muted);
    font-size: 11px;
    font-weight: 750;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .done-report-link {
    display: grid;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .done-report-link:hover b,
:where(body.wat-app--collection).collection-admin-detail-redesign .done-report-link:focus-visible b {
    color: var(--acd-blue);
    text-decoration: underline;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-done-workspace {
    display: grid;
    gap: 18px;
    min-width: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-done-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-done-kpi {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border: 1px solid rgba(23, 45, 84, 0.1);
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fbff, #fff);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-done-kpi span {
    color: var(--admin-text-muted);
    font-size: 0.78rem;
    font-weight: 650;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-done-kpi b {
    color: var(--acd-blue-dark);
    font-size: 1.28rem;
    line-height: 1.1;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-done-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-done-side-stack {
    display: grid;
    gap: 18px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-card-header-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-card-header-actions .card-title {
    margin-bottom: 4px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-done-meta {
    display: grid;
    grid-template-columns: minmax(150px, max-content) minmax(0, 1fr);
    gap: 8px 16px;
    margin: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-done-meta dt {
    color: var(--admin-text-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-done-meta dd {
    min-width: 0;
    margin: 0;
    font-weight: 650;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-done-fieldset {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid rgba(23, 45, 84, 0.12);
    border-radius: 12px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-report-options {
    display: grid;
    gap: 10px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-done-badges,
:where(body.wat-app--collection).collection-admin-detail-redesign .acd-done-report-number,
:where(body.wat-app--collection).collection-admin-detail-redesign .acd-ddc-upload {
    margin-top: 12px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-ddc-attachments {
    display: grid;
    gap: 8px;
    padding: 0;
    margin: 12px 0 0;
    list-style: none;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-ddc-attachments li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-top: 1px solid rgba(23, 45, 84, 0.08);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-ddc-attachments li:first-child {
    border-top: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-ddc-attachments a {
    min-width: 0;
    overflow-wrap: anywhere;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-payment-workspace {
    display: grid;
    gap: 18px;
    min-width: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .payment-ui {
    display: grid;
    gap: 16px;
    min-width: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .payment-hero {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(20, 185, 184, 0.2);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(18, 104, 243, 0.08), rgba(20, 185, 184, 0.13));
}

:where(body.wat-app--collection).collection-admin-detail-redesign .payment-hero-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .payment-hero h3 {
    margin: 0 0 4px;
    color: var(--acd-blue-dark);
    font-size: 1rem;
    font-weight: 850;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .payment-hero p {
    margin: 0;
    color: var(--admin-text-muted);
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.4;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .payment-due-focus {
    display: grid;
    gap: 5px;
    padding: 15px;
    border: 1px solid #cceee8;
    border-radius: 12px;
    background: linear-gradient(135deg, #effffc, #f7fbff);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .payment-due-focus > span {
    color: var(--admin-text-muted);
    font-size: 0.75rem;
    font-weight: 750;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .payment-due-focus > b {
    display: block;
    color: var(--admin-text);
    font-size: 2rem;
    font-weight: 850;
    line-height: 1.1;
    letter-spacing: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .payment-due-focus > b span,
:where(body.wat-app--collection).collection-admin-detail-redesign .payment-due-focus > b strong {
    font: inherit;
    color: inherit;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .payment-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: nowrap;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .payment-actions .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .payment-actions .button svg.lucide,
:where(body.wat-app--collection).collection-admin-detail-redesign .payment-actions .button i[data-lucide] {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: currentColor;
    stroke: currentColor;
    stroke-width: 2.45;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .payment-actions .button-light {
    min-height: 34px;
    padding: 0 10px;
    font-size: 0.75rem;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-invoice-workspace {
    display: grid;
    gap: 18px;
    min-width: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-invoice-main-panel {
    min-width: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-invoice-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 16px;
    align-items: start;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-invoice-main,
:where(body.wat-app--collection).collection-admin-detail-redesign .acd-invoice-rail,
:where(body.wat-app--collection).collection-admin-detail-redesign .collection-invoice-preview {
    display: grid;
    gap: 14px;
    min-width: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-invoice-section {
    display: grid;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(23, 45, 84, 0.1);
    border-radius: 12px;
    background: #fff;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-invoice-section > legend {
    padding: 0 5px;
    color: var(--acd-blue-dark);
    font-weight: 800;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-invoice-offer-cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid rgba(18, 104, 243, 0.12);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(18, 104, 243, 0.08), rgba(20, 185, 184, 0.1));
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-invoice-offer-cap span {
    color: var(--admin-text-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-invoice-offer-cap strong {
    color: var(--acd-blue-dark);
    font-size: 1.05rem;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-invoice-fees-form,
:where(body.wat-app--collection).collection-admin-detail-redesign .collection-invoice-inline-form,
:where(body.wat-app--collection).collection-admin-detail-redesign .collection-invoice-dd-form {
    display: grid;
    gap: 10px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .collection-invoice-money-row {
    align-items: center;
    gap: 12px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .collection-invoice-money-row > span:last-child {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .collection-amount-input {
    max-width: 150px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-invoice-extra-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(130px, 170px) auto;
    gap: 10px;
    align-items: end;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-invoice-extras-table-wrap {
    border-radius: 10px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-invoice-extras-table {
    min-width: 760px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-invoice-extra-proof-cell {
    min-width: 260px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-invoice-extra-proofs {
    display: grid;
    gap: 7px;
    padding: 0;
    margin: 0 0 8px;
    list-style: none;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-invoice-extra-proofs li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-invoice-extra-proofs a {
    min-width: 0;
    overflow-wrap: anywhere;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-invoice-extra-upload {
    margin: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .collection-invoice-metrics {
    display: grid;
    gap: 10px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .collection-invoice-metric,
:where(body.wat-app--collection).collection-admin-detail-redesign .collection-invoice-step-card {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 13px;
    border: 1px solid rgba(23, 45, 84, 0.1);
    border-radius: 12px;
    background: var(--acd-surface-soft);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .collection-invoice-metric h3 {
    margin: 0;
    color: var(--admin-text-muted);
    font-size: 0.8rem;
    font-weight: 800;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .collection-invoice-metric output {
    color: var(--acd-blue-dark);
    font-size: 1.2rem;
    line-height: 1.1;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .collection-invoice-metric small,
:where(body.wat-app--collection).collection-admin-detail-redesign .collection-invoice-step-note {
    color: var(--admin-text-muted);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .collection-invoice-step-card {
    margin: 0;
    background: #fff;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .collection-invoice-step-card > legend {
    padding: 0 5px;
    color: var(--acd-blue-dark);
    font-weight: 800;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .collection-invoice-context-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    margin: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .collection-invoice-context-list dt {
    color: var(--admin-text-muted);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .collection-invoice-context-list dd {
    margin: 0;
    text-align: right;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .collection-invoice-remaining {
    padding: 12px;
    border: 1px solid rgba(20, 185, 184, 0.22);
    border-radius: 10px;
    background: rgba(20, 185, 184, 0.08);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .collection-invoice-remaining-value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .collection-invoice-dd {
    display: grid;
    gap: 12px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .collection-invoice-dd-attachments {
    display: grid;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(23, 45, 84, 0.08);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-payment-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 18px;
    align-items: start;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-payment-due {
    display: grid;
    gap: 4px;
    margin-bottom: 16px;
    padding: 16px;
    border: 1px solid rgba(20, 185, 184, 0.24);
    border-radius: 12px;
    background: rgba(20, 185, 184, 0.08);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-payment-due span {
    color: var(--admin-text-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-payment-due b {
    color: var(--acd-blue-dark);
    font-size: 1.7rem;
    line-height: 1.1;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-batch-values-list {
    display: grid;
    gap: 14px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-values-list .dispatch-value-add-row,
:where(body.wat-app--collection) .acd-shell-body .dispatch-values-list .dispatch-value-add-row {
    display: flex;
    align-items: end;
    gap: 10px;
    flex-wrap: wrap;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-values-list .dispatch-value-select-cell,
:where(body.wat-app--collection) .acd-shell-body .dispatch-values-list .dispatch-value-select-cell {
    position: relative;
    flex: 1 1 240px;
    min-width: min(220px, 100%);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-values-list .dispatch-value-select-cell > label,
:where(body.wat-app--collection) .acd-shell-body .dispatch-values-list .dispatch-value-select-cell > label,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-values-list .dispatch-value-weight-cell,
:where(body.wat-app--collection) .acd-shell-body .dispatch-values-list .dispatch-value-weight-cell {
    display: grid;
    gap: 6px;
    color: var(--admin-text-muted);
    font-size: 12px;
    font-weight: 700;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-values-list .select-button,
:where(body.wat-app--collection) .acd-shell-body .dispatch-values-list .select-button {
    width: 100%;
    min-height: 38px;
    justify-content: flex-start;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-values-list .dispatch-value-weight-cell,
:where(body.wat-app--collection) .acd-shell-body .dispatch-values-list .dispatch-value-weight-cell {
    flex: 0 0 132px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-values-list .dispatch-value-weight-cell input,
:where(body.wat-app--collection) .acd-shell-body .dispatch-values-list .dispatch-value-weight-cell input {
    width: 100%;
    min-height: 38px;
    border: 1px solid #d4e2ea;
    border-radius: 9px;
    background: #fff;
    color: var(--admin-text);
    padding: 0 10px;
    font: inherit;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-values-list .dispatch-value-add-row > button,
:where(body.wat-app--collection) .acd-shell-body .dispatch-values-list .dispatch-value-add-row > button {
    flex: 0 0 auto;
    min-height: 38px;
    align-self: end;
    white-space: nowrap;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-values-list .popup-anchor,
:where(body.wat-app--collection) .acd-shell-body .dispatch-values-list .popup-anchor {
    position: relative;
    z-index: 650;
    width: 0;
    height: 0;
    overflow: visible;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-values-list .popup-anchor > .popup,
:where(body.wat-app--collection) .acd-shell-body .dispatch-values-list .popup-anchor > .popup {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 8px;
    left: 0;
    display: none;
    width: min(340px, calc(100vw - 40px));
    max-height: min(42vh, 340px);
    overflow-y: auto;
    border: 1px solid #d4e2ea;
    border-radius: 12px;
    background: #fff;
    padding: 10px;
    box-shadow: 0 20px 48px rgba(5, 24, 43, 0.18);
    z-index: 650;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-values-list .popup-anchor > .popup.visible,
:where(body.wat-app--collection) .acd-shell-body .dispatch-values-list .popup-anchor > .popup.visible {
    display: block;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-values-list .popup > label,
:where(body.wat-app--collection) .acd-shell-body .dispatch-values-list .popup > label {
    display: grid;
    gap: 6px;
    color: var(--admin-text-muted);
    font-size: 12px;
    font-weight: 700;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-values-list .popup input[type="search"],
:where(body.wat-app--collection) .acd-shell-body .dispatch-values-list .popup input[type="search"] {
    min-height: 38px;
    border: 1px solid #d4e2ea;
    border-radius: 9px;
    background: #fff;
    color: var(--admin-text);
    padding: 0 10px;
    font: inherit;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-values-list .popup-list,
:where(body.wat-app--collection) .acd-shell-body .dispatch-values-list .popup-list {
    display: grid;
    gap: 5px;
    margin-top: 8px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-values-list .popup-button,
:where(body.wat-app--collection) .acd-shell-body .dispatch-values-list .popup-button {
    width: 100%;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--admin-text);
    padding: 8px 9px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-values-list .popup-button:hover,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-values-list .popup-button:focus-visible,
:where(body.wat-app--collection) .acd-shell-body .dispatch-values-list .popup-button:hover,
:where(body.wat-app--collection) .acd-shell-body .dispatch-values-list .popup-button:focus-visible {
    background: #eef6ff;
    color: #0f58d6;
    outline: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .action-logs-table__context-links {
    flex-wrap: wrap;
    min-width: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .status-badge {
    white-space: normal;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-workflow-panel {
    position: relative;
    overflow: hidden;
    border-color: rgba(20, 185, 184, 0.32);
    background:
        linear-gradient(180deg, rgba(246, 253, 255, 0.95), rgba(255, 255, 255, 1) 34%),
        var(--acd-surface);
    box-shadow:
        0 0 0 1px rgba(18, 104, 243, 0.08),
        0 22px 48px rgba(10, 50, 88, 0.12);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-workflow-panel > .card-title:first-child,
:where(body.wat-app--collection).collection-admin-detail-redesign .acd-workflow-panel > .quote-card-header:first-child {
    margin: -16px -16px 18px;
    padding: 16px 18px;
    border: 0;
    border-radius: var(--admin-radius) var(--admin-radius) 0 0;
    background: linear-gradient(135deg, var(--acd-blue-dark), #0d4f83 62%, var(--acd-teal));
    color: #fff;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-workflow-panel > .card-title:first-child h2,
:where(body.wat-app--collection).collection-admin-detail-redesign .acd-workflow-panel > .quote-card-header:first-child h2 {
    color: inherit;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-workflow-panel > .quote-card-header:first-child .card-title {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-request-prepare-panel {
    display: grid;
    gap: 16px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-request-prepare-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    min-width: 0;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-request-prepare-section {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(23, 45, 84, 0.1);
    border-radius: 12px;
    background: #fff;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-request-prepare-section > h3,
:where(body.wat-app--collection).collection-admin-detail-redesign .acd-client-documents > h3 {
    margin: 0;
    color: var(--acd-blue-dark);
    font-size: 0.9rem;
    font-weight: 800;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-request-prepare-section--wide {
    grid-column: 1 / -1;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .acd-request-message blockquote {
    margin: 0;
}

@media (min-width: 901px) {
    :where(body.wat-app--collection).collection-admin-detail-redesign[data-collection-status="4"] {
        display: grid;
        grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
        gap: 18px;
        align-items: start;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign[data-collection-status="4"] > .acd-page-header,
:where(body.wat-app--collection).collection-admin-detail-redesign[data-collection-status="4"] > .acd-timeline,
:where(body.wat-app--collection).collection-admin-detail-redesign[data-collection-status="4"] > :not(.acd-client-panel):not(.acd-done-workspace):not(.acd-page-header):not(.acd-timeline) {
        grid-column: 1 / -1;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign[data-collection-status="4"] > .acd-client-panel {
        grid-column: 1;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign[data-collection-status="4"] > .acd-done-workspace {
        grid-column: 2;
    }
}

@media (max-width: 1180px) {
    :where(body.wat-app--collection) .portal_content {
        padding-inline: 20px;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .timeline {
        padding-inline: 20px;
        scroll-padding-inline: 20px;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .definition-list {
        grid-template-columns: minmax(100px, max-content) minmax(0, 1fr);
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-topbar {
        grid-template-columns: 1fr;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-dispatch-topbar,
:where(body.wat-app--collection).collection-admin-detail-redesign .acd-dispatch-lanes {
        grid-template-columns: 1fr;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-invoice-layout {
        grid-template-columns: 1fr;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-done-main-grid,
:where(body.wat-app--collection).collection-admin-detail-redesign .done-card-grid {
        grid-template-columns: 1fr;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-done-meta {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-done-meta dt {
        margin-top: 8px;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-layout {
        grid-template-columns: 1fr;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-type-list {
        display: flex;
        overflow-x: auto;
        padding-bottom: 4px;
        overscroll-behavior-x: contain;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-type-button {
        min-width: 220px;
    }
}

@media (max-width: 900px) {
    :where(body.wat-app--collection) .portal_content {
        padding: 16px 14px 32px;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .timeline {
        margin-top: 18px;
        margin-bottom: 22px;
        padding-inline: max(20px, calc(50vw - 65px));
        scroll-padding-inline: max(20px, calc(50vw - 65px));
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-page-header-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-page-header h1 {
        font-size: 2.25rem;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-client-panel,
:where(body.wat-app--collection).collection-admin-detail-redesign .card,
:where(body.wat-app--collection).collection-admin-detail-redesign details.card {
        border-radius: 12px;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .definition-list {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .definition-list dt {
        margin-top: 8px;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-done-main-grid,
:where(body.wat-app--collection).collection-admin-detail-redesign .done-card-grid {
        grid-template-columns: 1fr;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-payment-grid {
        grid-template-columns: 1fr;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .payment-hero,
:where(body.wat-app--collection).collection-admin-detail-redesign .payment-hero-head,
:where(body.wat-app--collection).collection-admin-detail-redesign .payment-hero-head > div,
:where(body.wat-app--collection).collection-admin-detail-redesign .payment-due-focus,
:where(body.wat-app--collection).collection-admin-detail-redesign .payment-actions {
        min-width: 0;
        max-width: 100%;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .payment-hero-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .payment-hero-head .invoice-pill {
        justify-self: start;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .payment-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .payment-actions .button {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        justify-content: center;
        white-space: normal;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-request-prepare-grid {
        grid-template-columns: 1fr;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-invoice-extra-form {
        grid-template-columns: 1fr;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .invoice-value-add,
:where(body.wat-app--collection) .acd-shell-body .invoice-value-add {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        justify-content: stretch;
        width: 100%;
        max-width: 100%;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .invoice-value-add > *,
:where(body.wat-app--collection) .acd-shell-body .invoice-value-add > *,
:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-item-values-list,
:where(body.wat-app--collection) .acd-shell-body .invoice-item-values-list,
:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-item-value-card,
:where(body.wat-app--collection) .acd-shell-body .invoice-item-value-card,
:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-value-picker-cell,
:where(body.wat-app--collection) .acd-shell-body .invoice-value-picker-cell,
:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-value-picker-cell > label,
:where(body.wat-app--collection) .acd-shell-body .invoice-value-picker-cell > label {
        min-width: 0;
        max-width: 100%;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .invoice-value-add .button,
:where(body.wat-app--collection) .acd-shell-body .invoice-value-add .button,
:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-value-add input[name="weightKg"],
:where(body.wat-app--collection) .acd-shell-body .invoice-value-add input[name="weightKg"],
:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-value-add .select-button,
:where(body.wat-app--collection) .acd-shell-body .invoice-value-add .select-button {
        width: 100%;
        max-width: 100%;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-invoice-extras-table {
        min-width: 720px;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .collection-invoice-context-list {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .collection-invoice-context-list dd {
        text-align: left;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .collection-invoice-remaining-value {
        align-items: flex-start;
        flex-direction: column;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-kpis {
        display: flex;
        overflow-x: auto;
        padding-bottom: 4px;
        overscroll-behavior-x: contain;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-kpi {
        flex: 0 0 160px;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-complete-inline {
        margin: 0;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-dispatch-kpis {
        display: flex;
        overflow-x: auto;
        padding-bottom: 4px;
        overscroll-behavior-x: contain;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-dispatch-kpi {
        flex: 0 0 160px;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-dispatch-completion-card {
        order: 2;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-table-tools {
        align-items: stretch;
        flex-direction: column;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-search {
        min-width: 0;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-processing-add-category-bottom {
        display: none;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-done-meta {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-done-meta dt {
        margin-top: 8px;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .processing-table,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-admin-table,
:where(body.wat-app--collection).collection-admin-detail-redesign .acd-inventory-table {
        min-width: 840px;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .processing-group > summary,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatching-item-row {
        align-items: flex-start;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .dispatching-item-row {
        grid-template-columns: 1fr;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .dispatching-item-row .processed-item-drive-count-button {
        justify-self: flex-start;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-dispatch-create-grid {
        grid-template-columns: 1fr;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-method-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-proof-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    :where(body.wat-app--collection).collection-admin-detail-redesign .processing-table,
:where(body.wat-app--collection).collection-admin-detail-redesign .dispatch-admin-table {
        min-width: 860px;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-inventory-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-done-kpis {
        grid-template-columns: 1fr;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-card-header-actions {
        flex-direction: column;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-subcategory-row {
        grid-template-columns: minmax(0, 1fr) max-content max-content;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-subcategory-progress {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-inventory-table {
        min-width: 680px;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-workflow-panel > .card-title:first-child,
:where(body.wat-app--collection).collection-admin-detail-redesign .acd-workflow-panel > .quote-card-header:first-child {
        margin: -12px -12px 16px;
        padding: 14px;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-invoice-section {
        padding: 12px;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-invoice-offer-cap,
:where(body.wat-app--collection).collection-admin-detail-redesign .collection-invoice-money-row {
        align-items: flex-start;
        flex-direction: column;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .collection-invoice-money-row > span:last-child {
        justify-content: flex-start;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .collection-amount-input {
        max-width: 140px;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .card,
:where(body.wat-app--collection).collection-admin-detail-redesign details.card,
:where(body.wat-app--collection).collection-admin-detail-redesign .acd-client-panel {
        padding: 12px;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign details.card {
        padding: 0;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign details.card > :not(summary) {
        margin-inline: 12px;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-task-header {
        align-items: flex-start;
        flex-direction: column;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-method-row {
        grid-template-columns: 1fr;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .acd-dd-no-data-form .button-blue-2 {
        width: 100%;
    }
}

@media (max-width: 1180px) {
    :where(body.wat-app--collection) .acd-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    :where(body.wat-app--collection) .acd-shell-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 80;
        width: min(280px, calc(100vw - 48px));
        transform: translateX(-105%);
        transition: transform 0.18s ease;
        box-shadow: 18px 0 50px rgba(5, 24, 43, 0.16);
    }

    :where(body.wat-app--collection).is-acd-shell-open .acd-shell-sidebar {
        transform: translateX(0);
    }

    :where(body.wat-app--collection) .acd-shell-body .acd-shell-mobile-open {
        display: inline-flex;
    }

    :where(body.wat-app--collection) .acd-shell-body .acd-shell-mobile-close {
        position: absolute;
        right: 16px;
        top: 28px;
        display: inline-flex;
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
        border-radius: 999px;
        padding: 0;
    }

    :where(body.wat-app--collection) .acd-shell-backdrop {
        position: fixed;
        inset: 0;
        z-index: 70;
        border: 0;
        background: rgba(5, 24, 43, 0.32);
        padding: 0;
    }

    :where(body.wat-app--collection).is-acd-shell-open .acd-shell-body .acd-shell-backdrop,
:where(body.wat-app--collection).is-acd-shell-open .acd-shell-backdrop {
        display: block;
    }

    :where(body.wat-app--collection) .acd-shell-topbar {
        padding-inline: 20px;
    }
}

@media (max-width: 640px) {
    :where(body.wat-app--collection) .acd-shell-topbar {
        height: 58px;
        gap: 12px;
        padding-inline: 14px;
    }

    :where(body.wat-app--collection) .acd-shell-topbar-title {
        font-size: 0.9rem;
    }

    :where(body.wat-app--collection) .acd-shell-user {
        display: none;
    }

    :where(body.wat-app--collection) .acd-shell-content {
        padding-inline: 14px;
    }
}
:where(body.wat-app--collection) .offer-rejection-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border: 1px solid #f1d89e;
    border-radius: 10px;
    padding: 10px 12px;
    color: #744708;
    background: #fff8e7;
    font-size: 12px;
    line-height: 1.4;
}

:where(body.wat-app--collection) .offer-rejection-warning svg {
    width: 15px;
    height: 15px;
    margin-top: 1px;
    flex: 0 0 auto;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-item-type-filter {
    display: grid;
    padding: 10px 12px;
    border-bottom: 1px solid #e1ecee;
    background: linear-gradient(180deg, #fbfefe, #f7fbfc);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-item-type-filter-rail {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 1px 1px 4px;
    scrollbar-width: thin;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-item-type-filter-rail::-webkit-scrollbar {
    height: 4px;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-item-type-filter-rail::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #aab7bd;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-item-type-filter-option {
    display: grid;
    flex: 0 0 auto;
    gap: 1px;
    min-width: 108px;
    min-height: 46px;
    padding: 6px 11px;
    border: 1px solid #d6e2e7;
    border-radius: 10px;
    background: #fff;
    color: var(--admin-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-item-type-filter-option:hover,
:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-item-type-filter-option:focus-visible {
    border-color: #5cb9df;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 127, 222, 0.1);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-item-type-filter-option.is-active {
    border-color: #0b8fc9;
    background: #e9f8fd;
    box-shadow: inset 0 0 0 1px rgba(11, 143, 201, 0.12);
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-item-type-filter-option span {
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
}

:where(body.wat-app--collection).collection-admin-detail-redesign .invoice-item-type-filter-option small {
    color: var(--admin-text-muted);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
}

@media (max-width: 640px) {
    :where(body.wat-app--collection).collection-admin-detail-redesign .invoice-item-type-filter {
        padding-inline: 10px;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .invoice-item-type-filter-rail {
        margin-inline: -2px;
        padding-inline: 2px;
        scroll-snap-type: x proximity;
    }

    :where(body.wat-app--collection).collection-admin-detail-redesign .invoice-item-type-filter-option {
        min-width: 132px;
        scroll-snap-align: start;
    }
}


/* Live collection wrapper cascade (formerly inline, intentionally after the external collection rules). */

    :where(body.wat-app--collection) {
      --wat-blue: #007fde;
      --wat-blue-deep: #0029a5;
      --wat-navy: #053854;
      --wat-mint: #29eec6;
      --wat-teal: #00b49c;
      --bg: #f7fbfb;
      --panel: #ffffff;
      --panel-soft: #f8fbff;
      --border: #dcebea;
      --border-strong: #c8dddc;
      --text: #0b263e;
      --muted: #667b88;
      --faint: #9caabe;
      --shadow: 0 18px 44px rgba(4, 67, 86, 0.065);
      --soft-shadow: 0 8px 25px rgba(4, 67, 86, 0.055);
      --radius: 12px;
      --sidebar: 216px;
      --font-ui: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --topbar-bg: rgba(255, 255, 255, 0.9);
      --sidebar-bg: rgba(255, 255, 255, 0.93);
      --primary-gradient: linear-gradient(135deg, #007dde, #00a4bf);
      --action-shadow: 0 12px 26px rgba(0, 164, 191, 0.17);
      --panel-header-bg: linear-gradient(180deg, #fff, #fbfefe);
      --message-bg: linear-gradient(135deg, #effff9, #f7fdff);
      --message-border: #bfece2;
      --stats-bg: linear-gradient(180deg, #f4fbff, #f0fbf8);
      --nav-active-bg: #e2f2ff;
      --button-radius: 10px;
      --h1-weight: 760;
      --title-weight: 680;
      --strong-weight: 630;
      --label-weight: 560;
      font-family: var(--font-ui);
      color: var(--text);
      background: var(--bg);
    }

    :where(body.wat-app--collection) * {
      box-sizing: border-box;
    }

    :where(body.wat-app--collection) [hidden],
:where(body.wat-app--collection) .hidden {
      display: none !important;
    }

    :where(body.wat-app--collection) {
      margin: 0;
      min-width: 1240px;
      background:
        linear-gradient(180deg, rgba(0, 127, 222, 0.05), transparent 280px),
        var(--bg);
      font-size: 14px;
    }

    :where(body.wat-app--collection) button,
:where(body.wat-app--collection) input,
:where(body.wat-app--collection) textarea {
      font: inherit;
    }

    :where(body.wat-app--collection) button {
      cursor: pointer;
    }

    :where(body.wat-app--collection) .app {
      display: grid;
      grid-template-columns: var(--sidebar) minmax(0, 1fr);
      min-height: 100vh;
    }

    :where(body.wat-app--collection) .sidebar {
      position: sticky;
      top: 0;
      height: 100vh;
      padding: 24px 16px 18px;
      background: rgba(255, 255, 255, 0.92);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: 22px;
    }

    :where(body.wat-app--collection) .mobile-menu-button,
:where(body.wat-app--collection) .mobile-sidebar-close,
:where(body.wat-app--collection) .mobile-sidebar-backdrop {
      display: none;
    }

    :where(body.wat-app--collection) .brand {
      display: flex;
      align-items: center;
      height: 42px;
      padding: 0 4px;
    }

    :where(body.wat-app--collection) .brand img {
      width: 126px;
      height: auto;
      display: block;
    }

    :where(body.wat-app--collection) .nav {
      display: flex;
      flex-direction: column;
      gap: 32px;
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      padding-right: 4px;
    }

    :where(body.wat-app--collection) .nav-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    :where(body.wat-app--collection) .nav-title {
      margin: 0 0 8px;
      padding: 0;
      color: #71819a;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }

    :where(body.wat-app--collection) .nav-group-toggle {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: inherit;
      font: inherit;
      letter-spacing: inherit;
      padding: 3px 8px;
      text-align: left;
      text-transform: inherit;
      transition: background 0.12s ease, color 0.12s ease;
    }

    :where(body.wat-app--collection) .nav-group-toggle:hover {
      background: #edf5ff;
      color: #405676;
    }

    :where(body.wat-app--collection) .nav-group-chevron {
      display: inline-block;
      width: 7px;
      height: 7px;
      flex: 0 0 auto;
      border-bottom: 1.5px solid currentColor;
      border-right: 1.5px solid currentColor;
      opacity: 0.82;
      transform: rotate(45deg) translateY(-1px);
      transition: transform 0.14s ease;
    }

    :where(body.wat-app--collection) .nav-group.is-collapsed .nav-group-chevron {
      transform: rotate(-45deg);
    }

    :where(body.wat-app--collection) .nav-group-links {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    :where(body.wat-app--collection) .nav-button {
      width: 100%;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: #405676;
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 36px;
      padding: 8px 10px;
      font-size: 13px;
      font-weight: 650;
      line-height: 1.2;
      text-align: left;
      text-decoration: none;
      transition: background 0.12s ease, color 0.12s ease;
    }

    :where(body.wat-app--collection) .nav-button:hover {
      background: #edf5ff;
      color: var(--wat-blue-deep);
    }

    :where(body.wat-app--collection) .nav-button.is-active {
      color: var(--wat-blue-deep);
      background: #dcecff;
      box-shadow: inset 3px 0 0 var(--wat-blue);
    }

    :where(body.wat-app--collection) .nav-button svg,
:where(body.wat-app--collection) .mini-icon svg,
:where(body.wat-app--collection) .icon-chip svg {
      width: 18px;
      height: 18px;
      stroke-width: 2.1;
    }

    :where(body.wat-app--collection) .topbar {
      height: 64px;
      padding: 0 32px;
      border-bottom: 1px solid var(--border);
      background: rgba(255, 255, 255, 0.88);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }

    :where(body.wat-app--collection) .breadcrumbs {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #355075;
      font-weight: 650;
      white-space: nowrap;
    }

    :where(body.wat-app--collection) .breadcrumbs b {
      color: var(--text);
    }

    :where(body.wat-app--collection) .breadcrumbs a {
      color: inherit;
      text-decoration: none;
    }

    :where(body.wat-app--collection) .breadcrumbs a:hover {
      color: var(--wat-blue-deep);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    :where(body.wat-app--collection) .top-actions {
      display: flex;
      align-items: center;
      gap: 18px;
    }

    :where(body.wat-app--collection) .search {
      width: 354px;
      height: 40px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 12px;
      background: #fff;
      border: 1px solid var(--border-strong);
      border-radius: 8px;
      color: #7b8da5;
      box-shadow: 0 5px 16px rgba(7, 29, 73, 0.03);
    }

    :where(body.wat-app--collection) .search input {
      border: 0;
      outline: 0;
      flex: 1;
      min-width: 0;
      color: var(--text);
    }

    :where(body.wat-app--collection) .kbd {
      border: 1px solid #c7d6e6;
      border-radius: 6px;
      min-width: 24px;
      padding: 2px 6px;
      text-align: center;
      color: #7c8aa0;
      background: #f8fbff;
      font-weight: 700;
    }

    :where(body.wat-app--collection) .dots {
      position: relative;
      width: 42px;
      height: 42px;
      border: 1px solid var(--border-strong);
      border-radius: 9px;
      background: #fff;
      color: #46617f;
      display: grid;
      place-items: center;
    }

    :where(body.wat-app--collection) .avatar {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--text);
      font-weight: 750;
    }

    :where(body.wat-app--collection) .avatar-menu {
      position: relative;
    }

    :where(body.wat-app--collection) .avatar-menu > summary.avatar {
      cursor: pointer;
      list-style: none;
    }

    :where(body.wat-app--collection) .avatar-menu > summary.avatar::-webkit-details-marker {
      display: none;
    }

    :where(body.wat-app--collection) .avatar-circle {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--wat-blue), var(--wat-mint));
      color: white;
      display: grid;
      place-items: center;
      font-size: 13px;
      font-weight: 850;
      box-shadow: 0 9px 20px rgba(0, 127, 222, 0.22);
    }

    :where(body.wat-app--collection) .avatar-photo {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      background: #eaf4ff;
      box-shadow: 0 9px 20px rgba(0, 127, 222, 0.18);
    }

    :where(body.wat-app--collection) .avatar span {
      display: block;
      color: #728197;
      font-size: 12px;
      font-weight: 600;
      margin-top: 2px;
    }

    :where(body.wat-app--collection) .avatar-dropdown {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      z-index: 80;
      width: 220px;
      padding: 8px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.98);
      box-shadow: 0 18px 42px rgba(7, 29, 73, 0.14);
    }

    :where(body.wat-app--collection) .avatar-dropdown::before {
      content: "";
      position: absolute;
      top: -5px;
      right: 18px;
      width: 10px;
      height: 10px;
      border-left: 1px solid var(--border);
      border-top: 1px solid var(--border);
      background: rgba(255, 255, 255, 0.98);
      transform: rotate(45deg);
    }

    :where(body.wat-app--collection) .avatar-menu-link,
:where(body.wat-app--collection) .avatar-menu-button {
      width: 100%;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: #405676;
      display: flex;
      align-items: center;
      gap: 10px;
      min-height: 36px;
      padding: 8px 10px;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.2;
      text-align: left;
      text-decoration: none;
    }

    :where(body.wat-app--collection) .avatar-menu-link:hover,
:where(body.wat-app--collection) .avatar-menu-button:hover {
      background: #edf5ff;
      color: var(--wat-blue-deep);
    }

    :where(body.wat-app--collection) .avatar-menu-button {
      cursor: pointer;
    }

    :where(body.wat-app--collection) .avatar-dropdown-separator {
      height: 1px;
      margin: 6px 4px;
      background: var(--border);
    }

    :where(body.wat-app--collection) .content {
      min-width: 0;
    }

    :where(body.wat-app--collection) .main {
      padding: 28px 32px 34px;
    }

    :where(body.wat-app--collection) .hero {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 28px;
      margin-bottom: 5px;
    }

    :where(body.wat-app--collection) .title-line {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    :where(body.wat-app--collection) h1 {
      margin: 0;
      font-size: 49px;
      line-height: 0.98;
      letter-spacing: 0;
      color: #061944;
      font-weight: 850;
    }

    :where(body.wat-app--collection) .status-pill {
      display: inline-flex;
      align-items: center;
      height: 42px;
      padding: 0 18px;
      border-radius: 21px;
      color: #fff;
      background: linear-gradient(135deg, var(--wat-blue), var(--wat-blue-deep));
      font-size: 17px;
      font-weight: 820;
      box-shadow: 0 12px 24px rgba(0, 127, 222, 0.22);
    }

    :where(body.wat-app--collection) .meta-line {
      display: flex;
      align-items: center;
      gap: 18px;
      margin-top: 10px;
      color: #3b64aa;
      font-weight: 650;
    }

    :where(body.wat-app--collection) .meta-line span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    :where(body.wat-app--collection) .primary-actions {
      display: flex;
      align-items: center;
      gap: 14px;
      padding-top: 5px;
      position: relative;
    }

    :where(body.wat-app--collection) .button {
      border: 0;
      min-height: 44px;
      border-radius: 8px;
      padding: 0 18px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      font-weight: 800;
      white-space: nowrap;
    }

    :where(body.wat-app--collection) .relative {
      position: relative;
    }

    :where(body.wat-app--collection) .feedback:empty {
      display: none;
    }

    :where(body.wat-app--collection) .feedback.error,
:where(body.wat-app--collection) .feedback.success,
:where(body.wat-app--collection) .feedback.warning,
:where(body.wat-app--collection) .feedback.tip {
      display: block;
      grid-column: 1 / -1;
      margin-top: 8px;
      padding: 10px 12px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 650;
      line-height: 1.35;
    }

    :where(body.wat-app--collection) .feedback.error {
      border: 1px solid rgba(217, 50, 75, 0.22);
      background: #fff0f2;
      color: #b72239;
    }

    :where(body.wat-app--collection) .feedback.success {
      border: 1px solid rgba(39, 189, 120, 0.24);
      background: #effcf5;
      color: #137045;
    }

    :where(body.wat-app--collection) #flashMessageContainer {
      position: fixed;
      left: 50%;
      bottom: 0;
      z-index: 2000;
      width: min(100vw, 800px);
      max-width: 100vw;
      transform: translateX(-50%);
      pointer-events: none;
    }

    :where(body.wat-app--collection) #flashMessageContainer > .feedback {
      pointer-events: auto;
      margin: 0;
      padding: 18px 20px;
      border-radius: 10px 10px 0 0;
      box-shadow: 0 10px 34px rgba(4, 67, 86, 0.18);
      animation: flash-message-in 0.28s ease-out;
    }

    :where(body.wat-app--collection) #flashMessageContainer > .feedback.error {
      border: 1px solid rgba(217, 50, 75, 0.26);
      border-bottom: 0;
      background: #fff0f2;
      color: #9f1f34;
    }

    :where(body.wat-app--collection) #flashMessageContainer .feedback.disappear {
      transform: translateY(100%);
      animation: flash-message-out 0.24s ease-out;
    }

    @keyframes flash-message-in {
      from {
        transform: translateY(100%);
      }

      to {
        transform: translateY(0);
      }
    }

    @keyframes flash-message-out {
      from {
        transform: translateY(0);
      }

      to {
        transform: translateY(100%);
      }
    }

    :where(body.wat-app--collection) .indicator-overlay {
      display: none;
      position: absolute;
      z-index: 2;
      inset: 0;
      place-items: center;
      border-radius: inherit;
      background: rgba(255, 255, 255, 0.58);
      pointer-events: none;
    }

    :where(body.wat-app--collection) .htmx-request .indicator-overlay,
:where(body.wat-app--collection) .htmx-request.indicator-overlay {
      display: grid;
    }

    :where(body.wat-app--collection) .indicator-spinner {
      width: 20px;
      height: 20px;
      pointer-events: none;
    }

    :where(body.wat-app--collection) .button-primary {
      color: #fff;
      background: linear-gradient(135deg, var(--wat-blue), var(--wat-blue-deep));
      box-shadow: 0 14px 30px rgba(0, 127, 222, 0.22);
    }

    :where(body.wat-app--collection) .button-secondary {
      color: var(--wat-blue-deep);
      background: #fff;
      border: 1px solid #b9d4ff;
    }

    :where(body.wat-app--collection) .button-light {
      color: var(--wat-blue-deep);
      background: #edf6ff;
      border: 1px solid #d6e9ff;
    }

    :where(body.wat-app--collection) .button-danger {
      color: #b42318;
      background: #fff1f0;
      border: 1px solid #ffd1cc;
      box-shadow: none;
    }

    :where(body.wat-app--collection) .menu-popover {
      display: none;
      position: absolute;
      top: 54px;
      right: 0;
      width: 216px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 8px;
      box-shadow: var(--shadow);
      z-index: 5;
      padding: 6px;
    }

    :where(body.wat-app--collection) .menu-popover.is-open {
      display: block;
    }

    :where(body.wat-app--collection) .menu-popover button {
      width: 100%;
      border: 0;
      background: transparent;
      border-radius: 6px;
      padding: 9px 10px;
      color: #365071;
      text-align: left;
      font-weight: 650;
    }

    :where(body.wat-app--collection) .menu-popover button:hover {
      background: #edf6ff;
    }

    :where(body.wat-app--collection) .menu-popover button.is-danger {
      color: #b94343;
    }

    :where(body.wat-app--collection) .menu-popover button.is-success {
      color: #0f7a55;
    }

    :where(body.wat-app--collection) .timeline {
      margin: 32px 0 24px;
      padding: 0 58px;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scrollbar-width: thin;
      --timeline-step-width: 100px;
    }

    :where(body.wat-app--collection) .timeline-track {
      position: relative;
      display: grid;
      width: max(100%, calc(15 * var(--timeline-step-width)));
      grid-template-columns: repeat(15, minmax(var(--timeline-step-width), 1fr));
      align-items: start;
    }

    :where(body.wat-app--collection) .timeline-track::before {
      content: "";
      position: absolute;
      left: 38px;
      right: 38px;
      top: 18px;
      height: 3px;
      background: #d7e2ed;
      border-radius: 999px;
    }

    :where(body.wat-app--collection) .timeline-track::after {
      content: "";
      position: absolute;
      left: 38px;
      width: calc((100% - 76px) / 14 * var(--timeline-step-progress, 0.92));
      top: 18px;
      height: 3px;
      background: var(--wat-blue);
      border-radius: 999px;
    }

    :where(body.wat-app--collection) .step {
      position: relative;
      z-index: 1;
      min-width: 0;
      border: 0;
      background: transparent;
      color: #728197;
      text-align: center;
      padding: 0 4px;
      text-decoration: none;
      display: block;
      cursor: default;
    }

    :where(body.wat-app--collection) .step-dot {
      width: 36px;
      height: 36px;
      margin: 0 auto 8px;
      border-radius: 50%;
      background: #f9fbfe;
      border: 2px solid #c8d6e6;
      display: grid;
      place-items: center;
      color: #63768e;
      font-size: 13px;
      font-weight: 850;
      box-shadow: 0 4px 11px rgba(7, 29, 73, 0.08);
    }

    :where(body.wat-app--collection) .step.is-current {
      color: var(--wat-blue-deep);
    }

    :where(body.wat-app--collection) .step.is-current .step-dot {
      color: #fff;
      border-color: var(--wat-blue);
      background: linear-gradient(135deg, var(--wat-blue), var(--wat-blue-deep));
    }

    :where(body.wat-app--collection) .step.is-complete {
      color: #31577c;
    }

    :where(body.wat-app--collection) .step.is-complete .step-dot {
      color: var(--wat-blue-deep);
      border-color: #9cd1ff;
      background: #edf7ff;
      box-shadow: none;
    }

    :where(body.wat-app--collection) .step.is-locked {
      cursor: default;
      opacity: 0.62;
    }

    :where(body.wat-app--collection) .step-label {
      display: block;
      font-size: 12px;
      line-height: 1.14;
      font-weight: 770;
      min-height: 31px;
    }

    :where(body.wat-app--collection) .step-date {
      display: grid;
      justify-items: center;
      min-height: 23px;
      margin-top: 3px;
    }

    :where(body.wat-app--collection) .step-date:empty {
      display: none;
    }

    :where(body.wat-app--collection) .step-date .timeline_cell_details {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 74px;
      min-height: 22px;
      border-radius: 999px;
      color: #6d7d93;
      font-size: 10.5px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0;
      white-space: nowrap;
    }

    :where(body.wat-app--collection) .step-date .timeline_cell_details.--clickable {
      cursor: pointer;
      color: var(--wat-blue-deep);
      background: #eef8ff;
      border: 1px solid #cbe6ff;
    }

    :where(body.wat-app--collection) .step-date .timeline_cell_details.--clickable:hover {
      background: #e4f3ff;
      border-color: #9fd2ff;
    }

    :where(body.wat-app--collection) .step-date form.timeline_cell_details {
      padding: 0;
      background: transparent;
      border: 0;
    }

    :where(body.wat-app--collection) .step-date input[type="date"] {
      width: 96px;
      min-height: 26px;
      padding: 2px 5px;
      border: 1px solid #9fd2ff;
      border-radius: 7px;
      background: #fff;
      color: var(--text);
      font: inherit;
      font-size: 10.5px;
      font-weight: 700;
      line-height: 1;
      outline: none;
      box-shadow: 0 0 0 3px rgba(0, 127, 222, 0.12);
    }

    :where(body.wat-app--collection) .cancelled-banner {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 13px;
      align-items: start;
      margin: -2px 0 20px;
      border: 1px solid #fecaca;
      border-radius: 12px;
      background: linear-gradient(135deg, #fff5f5, #fff9f1);
      padding: 14px 16px;
      box-shadow: 0 14px 34px rgba(180, 35, 24, 0.08);
    }

    :where(body.wat-app--collection) .cancelled-banner-icon {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 11px;
      background: #fee2e2;
      color: #b42318;
      flex: 0 0 auto;
    }

    :where(body.wat-app--collection) .cancelled-banner-icon svg {
      width: 20px;
      height: 20px;
    }

    :where(body.wat-app--collection) .cancelled-banner-copy {
      min-width: 0;
    }

    :where(body.wat-app--collection) .cancelled-banner-copy h2 {
      margin: 0;
      color: #9f1f34;
      font-size: 16px;
      line-height: 1.25;
      font-weight: var(--title-weight);
    }

    :where(body.wat-app--collection) .cancelled-banner-copy p {
      margin: 3px 0 0;
      color: #7f4a4a;
      font-size: 13px;
      font-weight: var(--label-weight);
      line-height: 1.4;
    }

    :where(body.wat-app--collection) .cancelled-banner-copy blockquote {
      margin: 9px 0 0;
      border-left: 3px solid #f87171;
      padding: 7px 10px;
      border-radius: 0 8px 8px 0;
      background: rgba(255, 255, 255, 0.72);
      color: #603636;
      font-size: 13px;
      font-weight: var(--label-weight);
      line-height: 1.45;
      overflow-wrap: anywhere;
    }

    :where(body.wat-app--collection) .cards {
      display: grid;
      grid-template-columns: 0.98fr 1fr 1.34fr;
      gap: 12px;
      align-items: stretch;
    }

    :where(body.wat-app--collection) .panel {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--soft-shadow);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 648px;
    }

    :where(body.wat-app--collection) .panel-blue {
      border-top: 4px solid var(--wat-blue);
    }

    :where(body.wat-app--collection) .panel-teal {
      border-top: 4px solid var(--wat-teal);
    }

    :where(body.wat-app--collection) .panel-green {
      border-top: 4px solid #18b976;
    }

    :where(body.wat-app--collection) .panel-header {
      padding: 14px 18px 12px;
      display: flex;
      gap: 13px;
      align-items: flex-start;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(180deg, #fff, #fbfdff);
    }

    :where(body.wat-app--collection) .panel-title h2 {
      margin: 1px 0 3px;
      font-size: 16px;
      line-height: 1.12;
    }

    :where(body.wat-app--collection) .panel-title p {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: 650;
    }

    :where(body.wat-app--collection) .panel-body {
      padding: 14px;
      flex: 1;
    }

    :where(body.wat-app--collection) .review-list {
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      background: #fff;
    }

    :where(body.wat-app--collection) .review-row {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      gap: 13px;
      padding: 12px 14px;
      border-bottom: 1px solid var(--border);
      align-items: center;
    }

    :where(body.wat-app--collection) .review-row > div:last-child {
      min-width: 0;
    }

    :where(body.wat-app--collection) .review-row:last-child {
      border-bottom: 0;
    }

    :where(body.wat-app--collection) .review-row-location {
      align-items: start;
    }

    :where(body.wat-app--collection) .row-label {
      margin: 0 0 4px;
      color: #7a8ba2;
      font-size: 12px;
      font-weight: 750;
    }

    :where(body.wat-app--collection) .row-value {
      margin: 0;
      color: var(--text);
      font-weight: 780;
      line-height: 1.36;
      overflow-wrap: anywhere;
    }

    :where(body.wat-app--collection) .row-value small {
      display: block;
      color: var(--muted);
      font-weight: 650;
      margin-top: 2px;
    }

    :where(body.wat-app--collection) .review-note-list {
      display: grid;
      gap: 8px;
      margin-top: 2px;
    }

    :where(body.wat-app--collection) .review-note-item {
      border: 1px solid #e1edf4;
      border-radius: 8px;
      background: #fbfdff;
      padding: 8px;
    }

    :where(body.wat-app--collection) .review-note-item b {
      display: block;
      font-size: 12px;
      line-height: 1.25;
      margin-bottom: 3px;
    }

    :where(body.wat-app--collection) .review-note-item time {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: var(--label-weight);
      margin-bottom: 4px;
    }

    :where(body.wat-app--collection) .review-note-item span {
      display: block;
      color: #405873;
      font-size: 12px;
      font-weight: var(--label-weight);
      line-height: 1.35;
    }

    :where(body.wat-app--collection) .review-cc-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
    }

    :where(body.wat-app--collection) .review-cc-list .chip {
      padding: 5px 8px;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    :where(body.wat-app--collection) .mini-icon {
      width: 37px;
      height: 37px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: var(--wat-blue);
      background: #eaf4ff;
    }

    :where(body.wat-app--collection) .mini-icon-green {
      color: #11a06d;
      background: #e9fbf4;
    }

    :where(body.wat-app--collection) .mini-icon-purple {
      color: #7c55e8;
      background: #f2edff;
    }

    :where(body.wat-app--collection) .map-wrap {
      margin-top: 8px;
      width: 100%;
      height: 84px;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid var(--border);
      background: #eaf2f8;
    }

    :where(body.wat-app--collection) .map-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    :where(body.wat-app--collection) .map-link {
      display: inline-flex;
      gap: 5px;
      align-items: center;
      color: var(--wat-blue-deep);
      font-size: 12px;
      font-weight: 760;
      text-decoration: none;
      margin-top: 8px;
    }

    :where(body.wat-app--collection) .request-location-form {
      margin: 0;
    }

    :where(body.wat-app--collection) .request-location-edit {
      display: grid;
      gap: 9px;
      min-width: 0;
    }

    :where(body.wat-app--collection) .request-location-label {
      display: grid;
      gap: 6px;
    }

    :where(body.wat-app--collection) .request-location-textarea {
      width: 100%;
      min-height: 78px;
      resize: vertical;
      border: 1px solid var(--border-strong);
      border-radius: 8px;
      background: #fff;
      color: var(--text);
      padding: 10px 11px;
      font: inherit;
      font-size: 13px;
      line-height: 1.4;
      outline: none;
    }

    :where(body.wat-app--collection) .request-location-textarea:focus {
      border-color: #78b9ff;
      box-shadow: 0 0 0 3px rgba(0, 127, 222, 0.13);
    }

    :where(body.wat-app--collection) .request-location-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }

    :where(body.wat-app--collection) .request-location-actions .button {
      min-height: 38px;
      padding: 0 13px;
      font-size: 13px;
    }

    :where(body.wat-app--collection) .small-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-top: 14px;
    }

    :where(body.wat-app--collection) .info-tile {
      min-height: 84px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: #fbfdff;
      padding: 12px 9px;
      display: grid;
      align-content: center;
      justify-items: center;
      text-align: center;
    }

    :where(body.wat-app--collection) .info-tile .mini-icon {
      width: 30px;
      height: 30px;
      margin: 0 auto 8px;
    }

    :where(body.wat-app--collection) .info-tile b {
      display: block;
      font-size: 13px;
      line-height: 1.2;
      margin-top: 3px;
    }

    :where(body.wat-app--collection) .info-tile span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 650;
      line-height: 1.2;
    }

    :where(body.wat-app--collection) .request-assignee-tile {
      width: 100%;
      font-family: inherit;
      cursor: pointer;
    }

    :where(body.wat-app--collection) .request-assignee-tile:hover {
      border-color: #9fc7ff;
      background: #f5fbff;
    }

    :where(body.wat-app--collection) #modalContainer:empty {
      display: none;
    }

    :where(body.wat-app--collection) #modalContainer:not(:empty) {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: grid;
      place-items: center;
      padding: 22px;
      background: rgba(6, 23, 52, 0.42);
    }

    :where(body.wat-app--collection) #modalContainer > .modal,
:where(body.wat-app--collection) #modalContainer > .mockup-modal {
      position: relative;
      grid-area: 1 / 1;
      z-index: 1;
    }

    :where(body.wat-app--collection) #modalContainer > .modal:last-child,
:where(body.wat-app--collection) #modalContainer > .mockup-modal:last-child {
      z-index: 2;
    }

    :where(body.wat-app--collection) #modalContainer > .modal:not(:last-child),
:where(body.wat-app--collection) #modalContainer > .mockup-modal:not(:last-child) {
      pointer-events: none;
    }

    :where(body.wat-app--collection) .mockup-modal {
      position: relative;
      width: min(560px, 100%);
      max-height: min(760px, calc(100vh - 44px));
      overflow-x: auto;
      overflow-y: hidden;
      border: 1px solid #d9e7f7;
      border-radius: 10px;
      background: #fff;
      box-shadow: 0 24px 70px rgba(7, 33, 74, 0.24);
      padding: 22px;
    }

    :where(body.wat-app--collection) .modal-close {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 34px;
      height: 34px;
      border: 1px solid #d8e7f7;
      border-radius: 50%;
      background: #f7fbff;
      color: #123052;
      display: grid;
      place-items: center;
      cursor: pointer;
    }

    :where(body.wat-app--collection) .mockup-modal-head {
      padding-right: 42px;
      margin-bottom: 16px;
    }

    :where(body.wat-app--collection) .mockup-modal-head h2 {
      margin: 0;
      color: var(--text);
      font-size: 22px;
      line-height: 1.2;
      font-weight: 760;
    }

    :where(body.wat-app--collection) .mockup-modal-head p {
      margin: 5px 0 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: var(--label-weight);
      line-height: 1.4;
    }

    :where(body.wat-app--collection) .mockup-field {
      display: grid;
      gap: 7px;
      margin-top: 12px;
      color: #183454;
      font-size: 13px;
      font-weight: var(--strong-weight);
    }

    :where(body.wat-app--collection) .mockup-field input {
      width: 100%;
      min-height: 42px;
      border: 1px solid #c8d9e8;
      border-radius: 8px;
      padding: 0 12px;
      color: var(--text);
      font: inherit;
      font-size: 14px;
      background: #fff;
    }

    :where(body.wat-app--collection) .mockup-field input:focus {
      outline: 2px solid rgba(25, 124, 242, 0.16);
      border-color: #7db7ff;
    }

    :where(body.wat-app--collection) .mockup-field textarea {
      width: 100%;
      min-height: 118px;
      border: 1px solid #c8d9e8;
      border-radius: 8px;
      padding: 12px;
      color: var(--text);
      font: inherit;
      font-size: 14px;
      line-height: 1.45;
      resize: vertical;
      background: #fff;
    }

    :where(body.wat-app--collection) .mockup-field textarea:focus {
      outline: 2px solid rgba(25, 124, 242, 0.16);
      border-color: #7db7ff;
    }

    :where(body.wat-app--collection) .mockup-inline-fields {
      display: grid;
      grid-template-columns: 92px minmax(0, 1fr);
      align-items: end;
      gap: 12px;
    }

    :where(body.wat-app--collection) .mockup-inline-fields .mockup-field {
      margin-top: 0;
    }

    :where(body.wat-app--collection) .mockup-units-field input {
      text-align: center;
    }

    :where(body.wat-app--collection) .mockup-modal-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 18px;
    }

    :where(body.wat-app--collection) .mockup-danger-modal {
      border-color: #fecaca;
    }

    :where(body.wat-app--collection) .mockup-option-list {
      display: grid;
      gap: 8px;
      margin-top: 14px;
      max-height: 360px;
      overflow: auto;
    }

    :where(body.wat-app--collection) .mockup-option-button {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      width: 100%;
      border: 1px solid #d9e7f7;
      border-radius: 8px;
      background: #fbfdff;
      padding: 11px 12px;
      color: var(--text);
      text-align: left;
      font-family: inherit;
      cursor: pointer;
    }

    :where(body.wat-app--collection) .mockup-option-button:hover {
      border-color: #9fc7ff;
      background: #f1f8ff;
    }

    :where(body.wat-app--collection) .mockup-option-button b,
:where(body.wat-app--collection) .mockup-option-button small {
      display: block;
      line-height: 1.25;
    }

    :where(body.wat-app--collection) .mockup-option-button b {
      font-size: 14px;
      font-weight: var(--strong-weight);
    }

    :where(body.wat-app--collection) .mockup-option-button small {
      margin-top: 3px;
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .mockup-option-button em {
      flex: 0 0 auto;
      border-radius: 999px;
      background: #eef7ff;
      color: var(--wat-blue-deep);
      padding: 5px 8px;
      font-style: normal;
      font-size: 12px;
      font-weight: var(--strong-weight);
    }

    :where(body.wat-app--collection) .mockup-option-button.is-danger {
      border-color: #ffd1cc;
      background: #fff6f5;
      color: #b42318;
    }

    :where(body.wat-app--collection) .mockup-empty {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .section-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin: 0 0 8px;
      color: var(--text);
      font-weight: 820;
      min-width: 0;
    }

    :where(body.wat-app--collection) .section-label-left {
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
    }

    :where(body.wat-app--collection) .section-label-left span,
:where(body.wat-app--collection) .section-label-left {
      overflow-wrap: anywhere;
    }

    :where(body.wat-app--collection) .message-box {
      position: relative;
      padding: 14px 18px;
      border-radius: 8px;
      border: 1px solid #ccefe8;
      background: linear-gradient(135deg, #effffc, #f3fbff);
      color: #11405d;
      line-height: 1.55;
      font-weight: 650;
      margin-bottom: 14px;
    }

    :where(body.wat-app--collection) .quote-mark {
      color: var(--wat-teal);
      font-size: 29px;
      line-height: 0;
      font-weight: 900;
      vertical-align: -8px;
    }

    :where(body.wat-app--collection) .empty-state {
      border: 1px dashed #c8d2df;
      border-radius: 8px;
      min-height: 100px;
      background: #fbfdff;
      display: grid;
      place-items: center;
      text-align: center;
      color: var(--muted);
      padding: 12px;
      margin-bottom: 14px;
    }

    :where(body.wat-app--collection) .empty-state svg {
      width: 27px;
      height: 27px;
      color: #9baabd;
      margin-bottom: 7px;
    }

    :where(body.wat-app--collection) .empty-state b {
      display: block;
      color: #8190a3;
      font-size: 16px;
      margin-bottom: 4px;
    }

    :where(body.wat-app--collection) .input-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      margin-top: 4px;
    }

    :where(body.wat-app--collection) .note-actions {
      grid-template-columns: auto auto;
      justify-content: end;
      margin: 10px 0 18px;
    }

    :where(body.wat-app--collection) .input,
:where(body.wat-app--collection) .textarea {
      width: 100%;
      border: 1px solid var(--border-strong);
      border-radius: 8px;
      background: #fff;
      color: var(--text);
      padding: 10px 12px;
      outline: none;
    }

    :where(body.wat-app--collection) .input:focus,
:where(body.wat-app--collection) .textarea:focus {
      border-color: var(--wat-blue);
      box-shadow: 0 0 0 3px rgba(0, 127, 222, 0.1);
    }

    :where(body.wat-app--collection) .hint {
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
      margin: 8px 0 0;
    }

    :where(body.wat-app--collection) .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 9px;
    }

    :where(body.wat-app--collection) .chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 9px;
      border-radius: 999px;
      background: #eaf4ff;
      color: var(--wat-blue-deep);
      font-size: 12px;
      font-weight: 760;
    }

    :where(body.wat-app--collection) .chip.request-cc-chip {
      border: 0;
      appearance: none;
      font-family: inherit;
    }

    :where(body.wat-app--collection) .chip-remove {
      display: inline-grid;
      place-items: center;
      width: 18px;
      height: 18px;
      padding: 0;
      border: 0;
      border-radius: 999px;
      background: rgba(180, 35, 24, 0.1);
      color: #b42318;
      cursor: pointer;
    }

    :where(body.wat-app--collection) .chip-remove svg {
      width: 12px;
      height: 12px;
    }

    :where(body.wat-app--collection) .request-upload-form {
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
      min-width: 0;
    }

    :where(body.wat-app--collection) .request-upload-form label.button {
      cursor: pointer;
      margin: 0;
      max-width: 100%;
    }

    :where(body.wat-app--collection) .visually-hidden-file {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }

    :where(body.wat-app--collection) .request-document-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
    }

    :where(body.wat-app--collection) .request-document-item a {
      color: var(--wat-blue-deep);
      text-decoration: none;
    }

    :where(body.wat-app--collection) .request-document-item a:hover {
      text-decoration: underline;
    }

    :where(body.wat-app--collection) .request-note-form,
:where(body.wat-app--collection) .request-cc-form {
      margin-top: 10px;
    }

    :where(body.wat-app--collection) .request-cc-form {
      align-items: start;
    }

    :where(body.wat-app--collection) .todo-strip {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 12px;
      margin-top: 18px;
      padding: 12px;
      border: 1px solid #ccefe8;
      border-radius: 8px;
      background: linear-gradient(135deg, #f0fffb, #f5fbff);
    }

    :where(body.wat-app--collection) .todo-strip .mini-icon {
      width: 32px;
      height: 32px;
    }

    :where(body.wat-app--collection) .todo-strip b {
      display: block;
      color: var(--text);
      font-weight: 820;
      margin-bottom: 2px;
    }

    :where(body.wat-app--collection) .todo-strip span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 650;
      line-height: 1.32;
    }

    :where(body.wat-app--collection) .todo-strip .button {
      grid-column: 1 / -1;
      width: 100%;
      min-height: 40px;
    }

    :where(body.wat-app--collection) .workflow-stack {
      display: grid;
      gap: 14px;
    }

    :where(body.wat-app--collection) .state-hero-card {
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 14px;
      background: linear-gradient(135deg, #f7fcff, #f4fffb);
    }

    :where(body.wat-app--collection) .state-hero-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }

    :where(body.wat-app--collection) .state-hero-title {
      margin: 0;
      font-size: 16px;
      line-height: 1.2;
      font-weight: var(--title-weight);
    }

    :where(body.wat-app--collection) .state-hero-copy {
      margin: 4px 0 0;
      color: var(--muted);
      line-height: 1.45;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .state-badge {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 28px;
      padding: 0 9px;
      border-radius: 999px;
      color: #096b59;
      background: #e7f9f3;
      font-size: 12px;
      font-weight: var(--strong-weight);
    }

    :where(body.wat-app--collection) .state-badge.is-waiting {
      color: #87520b;
      background: #fff5df;
    }

    :where(body.wat-app--collection) .state-badge.is-neutral {
      color: #4c617a;
      background: #eef4f8;
    }

    :where(body.wat-app--collection) .state-badge svg {
      width: 14px;
      height: 14px;
    }

    :where(body.wat-app--collection) .workflow-meta-grid,
:where(body.wat-app--collection) .form-grid,
:where(body.wat-app--collection) .mini-card-grid {
      display: grid;
      gap: 10px;
    }

    :where(body.wat-app--collection) .workflow-meta-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :where(body.wat-app--collection) .mini-card-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    :where(body.wat-app--collection) .field-card,
:where(body.wat-app--collection) .fake-field,
:where(body.wat-app--collection) .receipt-mini,
:where(body.wat-app--collection) .compact-note {
      border: 1px solid var(--border);
      border-radius: 10px;
      background: #fff;
      padding: 11px 12px;
    }

    :where(body.wat-app--collection) .field-card span,
:where(body.wat-app--collection) .fake-field span,
:where(body.wat-app--collection) .receipt-mini span,
:where(body.wat-app--collection) .compact-note span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
      margin-bottom: 4px;
    }

    :where(body.wat-app--collection) .field-card b,
:where(body.wat-app--collection) .fake-field b,
:where(body.wat-app--collection) .receipt-mini b,
:where(body.wat-app--collection) .compact-note b {
      display: block;
      color: var(--text);
      font-weight: var(--strong-weight);
      line-height: 1.25;
      overflow-wrap: anywhere;
    }

    :where(body.wat-app--collection) .form-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :where(body.wat-app--collection) .fake-field {
      min-height: 58px;
      display: grid;
      align-content: center;
      background: #fbfdff;
    }

    :where(body.wat-app--collection) .workflow-input-field {
      min-height: 58px;
      display: grid;
      gap: 7px;
      align-content: center;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: #fbfdff;
      padding: 11px 12px;
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .workflow-input-field span {
      display: block;
    }

    :where(body.wat-app--collection) .workflow-input-field.is-wide {
      grid-column: 1 / -1;
    }

    :where(body.wat-app--collection) .workflow-input-field input {
      width: 100%;
      min-height: 38px;
      border: 1px solid #c8d9e8;
      border-radius: 8px;
      background: #fff;
      color: var(--text);
      padding: 0 10px;
      font: inherit;
      font-size: 14px;
      font-weight: var(--strong-weight);
      outline: none;
    }

    :where(body.wat-app--collection) .workflow-input-field input:focus {
      border-color: #7db7ff;
      box-shadow: 0 0 0 3px rgba(25, 124, 242, 0.14);
    }

    :where(body.wat-app--collection) .fake-field.is-wide {
      grid-column: 1 / -1;
    }

    :where(body.wat-app--collection) .certificate-group {
      grid-column: 1 / -1;
      display: grid;
      gap: 11px;
      border: 1px solid #cce9e8;
      border-radius: 12px;
      padding: 12px;
      background: linear-gradient(135deg, #f8fffd, #f4fbff);
      box-shadow: 0 12px 28px rgba(12, 119, 148, 0.08);
    }

    :where(body.wat-app--collection) .certificate-group-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    :where(body.wat-app--collection) .certificate-headline {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      min-width: 0;
    }

    :where(body.wat-app--collection) .certificate-headline b {
      display: block;
      color: var(--text);
      font-weight: var(--strong-weight);
      line-height: 1.25;
    }

    :where(body.wat-app--collection) .certificate-headline span {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
      line-height: 1.35;
    }

    :where(body.wat-app--collection) .certificate-status {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      min-height: 26px;
      padding: 0 9px;
      border-radius: 999px;
      background: #e7f9f3;
      color: #086754;
      font-size: 12px;
      font-weight: var(--strong-weight);
    }

    :where(body.wat-app--collection) .certificate-status.is-off {
      background: #eef4f8;
      color: #607287;
    }

    :where(body.wat-app--collection) .certificate-toggle {
      display: flex;
      align-items: center;
      gap: 9px;
      color: #29445f;
      font-weight: var(--label-weight);
      line-height: 1.35;
    }

    :where(body.wat-app--collection) .certificate-toggle input {
      width: 16px;
      height: 16px;
      margin: 0;
      accent-color: var(--wat-blue);
      flex: 0 0 auto;
    }

    :where(body.wat-app--collection) .certificate-fields {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    :where(body.wat-app--collection) .deposit-preview {
      display: flex;
      align-items: baseline;
      gap: 8px;
      flex-wrap: wrap;
    }

    :where(body.wat-app--collection) .workflow-input-field .deposit-preview {
      display: flex;
    }

    :where(body.wat-app--collection) .deposit-preview small {
      color: #607287;
      font-size: 12px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .deposit-preview b {
      color: #086754;
      font-size: 13px;
      font-weight: var(--strong-weight);
    }

    :where(body.wat-app--collection) .certificate-note,
:where(body.wat-app--collection) .certificate-warning {
      margin: 0;
      line-height: 1.4;
      font-size: 12px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .certificate-note {
      color: #486077;
    }

    :where(body.wat-app--collection) .certificate-warning {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      border: 1px solid #f1d89e;
      border-radius: 10px;
      padding: 9px 10px;
      color: #744708;
      background: #fff8e7;
    }

    :where(body.wat-app--collection) .certificate-warning svg {
      width: 15px;
      height: 15px;
      margin-top: 1px;
      flex: 0 0 auto;
    }

    :where(body.wat-app--collection) .receipt-card {
      display: grid;
      gap: 12px;
      border: 1px solid #cbddec;
      border-radius: 12px;
      padding: 13px;
      background: #fff;
      box-shadow: 0 12px 28px rgba(16, 42, 67, 0.06);
    }

    :where(body.wat-app--collection) .receipt-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    :where(body.wat-app--collection) .receipt-title {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      min-width: 0;
    }

    :where(body.wat-app--collection) .receipt-title h4 {
      margin: 0;
      color: var(--text);
      font-size: 15px;
      line-height: 1.25;
      font-weight: var(--strong-weight);
    }

    :where(body.wat-app--collection) .receipt-title p {
      margin: 2px 0 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .receipt-status {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      min-height: 26px;
      padding: 0 9px;
      border-radius: 999px;
      background: #eef4f8;
      color: #607287;
      font-size: 12px;
      font-weight: var(--strong-weight);
    }

    :where(body.wat-app--collection) .receipt-option {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      border: 1px solid #d7e6f2;
      border-radius: 10px;
      padding: 10px 11px;
      background: #f8fbff;
      color: #29445f;
      font-weight: var(--label-weight);
      line-height: 1.35;
    }

    :where(body.wat-app--collection) .receipt-option input {
      width: 16px;
      height: 16px;
      margin: 1px 0 0;
      accent-color: var(--wat-blue);
      flex: 0 0 auto;
    }

    :where(body.wat-app--collection) .receipt-option b,
:where(body.wat-app--collection) .receipt-option small {
      display: block;
    }

    :where(body.wat-app--collection) .receipt-option b {
      color: var(--text);
      font-weight: var(--strong-weight);
    }

    :where(body.wat-app--collection) .receipt-option small {
      margin-top: 2px;
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .receipt-summary {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    :where(body.wat-app--collection) .receipt-card .workflow-actions {
      margin-top: 0;
    }

    :where(body.wat-app--collection) .check-row,
:where(body.wat-app--collection) .action-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
      color: #29445f;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .check-row:last-child,
:where(body.wat-app--collection) .action-row:last-child {
      border-bottom: 0;
    }

    :where(body.wat-app--collection) .check-box {
      width: 18px;
      height: 18px;
      border-radius: 5px;
      border: 1px solid #b7c6d6;
      background: #fff;
      display: grid;
      place-items: center;
      color: var(--wat-blue);
      flex: 0 0 auto;
    }

    :where(body.wat-app--collection) .check-box.is-done {
      border-color: #6dbdfb;
      background: #eaf6ff;
    }

    :where(body.wat-app--collection) .check-box svg {
      width: 13px;
      height: 13px;
    }

    :where(body.wat-app--collection) .confirmation-list {
      display: grid;
      gap: 8px;
      margin-top: 12px;
    }

    :where(body.wat-app--collection) .confirmation-check {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 10px 11px;
      border: 1px solid #cbddec;
      border-radius: 10px;
      background: #fff;
      color: #29445f;
      line-height: 1.34;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .confirmation-check.is-warning {
      border-color: #f3d6a4;
      background: #fffaf0;
    }

    :where(body.wat-app--collection) .confirmation-check input {
      flex: 0 0 auto;
      width: 16px;
      height: 16px;
      margin: 1px 0 0;
      accent-color: var(--wat-blue);
    }

    :where(body.wat-app--collection) .quote-row b.is-warning {
      color: #a15c05;
    }

    :where(body.wat-app--collection) .action-row {
      justify-content: space-between;
      gap: 12px;
    }

    :where(body.wat-app--collection) .action-row small {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .workflow-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 12px;
    }

    :where(body.wat-app--collection) .workflow-actions .button {
      flex: 1;
      min-width: 0;
      min-height: 40px;
      justify-content: center;
      padding: 0 12px;
      font-size: 13px;
      line-height: 1.15;
      white-space: normal;
      text-align: center;
    }

    :where(body.wat-app--collection) .workflow-actions .button svg {
      flex: 0 0 auto;
    }

    :where(body.wat-app--collection) .secondary-link {
      border: 0;
      background: transparent;
      color: var(--wat-blue-deep);
      padding: 0;
      font-weight: var(--strong-weight);
    }

    :where(body.wat-app--collection) .quote-panel {
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      background: #fff;
    }

    :where(body.wat-app--collection) .quote-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      padding: 10px 12px;
      border-bottom: 1px solid var(--border);
      align-items: center;
    }

    :where(body.wat-app--collection) .quote-row:last-child {
      border-bottom: 0;
    }

    :where(body.wat-app--collection) .quote-row span {
      color: var(--muted);
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .quote-row b {
      font-weight: var(--strong-weight);
    }

    :where(body.wat-app--collection) .compact-table {
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      background: #fff;
    }

    :where(body.wat-app--collection) .compact-table-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 70px 78px;
      gap: 10px;
      align-items: center;
      padding: 9px 11px;
      border-bottom: 1px solid var(--border);
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .compact-table-row:last-child {
      border-bottom: 0;
    }

    :where(body.wat-app--collection) .compact-table-row.is-head {
      background: #f4f8fb;
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--strong-weight);
    }

    :where(body.wat-app--collection) .compact-table-row b,
:where(body.wat-app--collection) .compact-table-row span:not(:first-child) {
      text-align: right;
    }

    :where(body.wat-app--collection) .compact-table-row span:first-child {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    :where(body.wat-app--collection) .stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      background: linear-gradient(180deg, #f5faff, #eef6ff);
      margin-bottom: 12px;
    }

    :where(body.wat-app--collection) .stat {
      padding: 10px 10px 9px;
      text-align: center;
      border-right: 1px solid var(--border);
      min-width: 0;
    }

    :where(body.wat-app--collection) .stat:last-child {
      border-right: 0;
    }

    :where(body.wat-app--collection) .stat .mini-icon {
      margin: 0 auto 5px;
      width: 25px;
      height: 25px;
      border-radius: 8px;
    }

    :where(body.wat-app--collection) .stat b {
      display: block;
      color: var(--text);
      font-size: 20px;
      line-height: 1.05;
      margin-bottom: 4px;
      font-weight: 850;
    }

    :where(body.wat-app--collection) .stat span {
      color: #566b85;
      font-size: 12px;
      font-weight: 720;
    }

    :where(body.wat-app--collection) .stat small {
      display: block;
      margin-top: 2px;
      color: #8795a8;
      font-weight: 650;
    }

    :where(body.wat-app--collection) .category-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 0 8px;
      font-weight: 820;
    }

    :where(body.wat-app--collection) .category-head button,
:where(body.wat-app--collection) .view-link {
      border: 0;
      background: transparent;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 0;
      color: var(--wat-blue);
      text-decoration: none;
      font-weight: 800;
      cursor: pointer;
    }

    :where(body.wat-app--collection) .category-list {
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      background: #fff;
    }

    :where(body.wat-app--collection) .category-row {
      display: grid;
      grid-template-columns: 34px minmax(0, 1.2fr) minmax(120px, 0.95fr) 52px 54px;
      align-items: center;
      gap: 12px;
      min-height: 42px;
      padding: 5px 11px;
      border-bottom: 1px solid var(--border);
    }

    :where(body.wat-app--collection) .category-row:last-child {
      border-bottom: 0;
    }

    :where(body.wat-app--collection) .category-name {
      min-width: 0;
      font-weight: 820;
      line-height: 1.18;
    }

    :where(body.wat-app--collection) .category-name small {
      display: block;
      color: #74849a;
      font-weight: 640;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-top: 3px;
    }

    :where(body.wat-app--collection) .bar {
      height: 6px;
      border-radius: 999px;
      background: #e8eef5;
      overflow: hidden;
    }

    :where(body.wat-app--collection) .bar span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: var(--bar-color, var(--wat-blue));
      width: var(--bar-width, 50%);
    }

    :where(body.wat-app--collection) .bar-cables {
      --bar-width: 100%;
      --bar-color: #0d73ff;
    }

    :where(body.wat-app--collection) .bar-batteries {
      --bar-width: 66%;
      --bar-color: #1dbf7c;
    }

    :where(body.wat-app--collection) .bar-displays {
      --bar-width: 50%;
      --bar-color: #11aabc;
    }

    :where(body.wat-app--collection) .bar-storage {
      --bar-width: 41%;
      --bar-color: #8758dc;
    }

    :where(body.wat-app--collection) .bar-computers {
      --bar-width: 39%;
      --bar-color: #f47d22;
    }

    :where(body.wat-app--collection) .bar-network {
      --bar-width: 28%;
      --bar-color: #ee5283;
    }

    :where(body.wat-app--collection) .bar-mobile {
      --bar-width: 22%;
      --bar-color: #f2ae1c;
    }

    :where(body.wat-app--collection) .bar-other {
      --bar-width: 42%;
      --bar-color: #8a96a8;
    }

    :where(body.wat-app--collection) .icon-orange {
      color: #e5671a;
      background: #fff1e8;
    }

    :where(body.wat-app--collection) .icon-pink {
      color: #de4777;
      background: #fff0f5;
    }

    :where(body.wat-app--collection) .icon-yellow {
      color: #d79a00;
      background: #fff8e7;
    }

    :where(body.wat-app--collection) .icon-slate {
      color: #627186;
      background: #f3f6fa;
    }


    :where(body.wat-app--collection) .count,
:where(body.wat-app--collection) .percent {
      font-weight: 780;
      color: var(--text);
      text-align: right;
    }

    :where(body.wat-app--collection) .percent {
      color: #8190a3;
      font-size: 12px;
      font-weight: 690;
    }

    :where(body.wat-app--collection) .inventory-footer {
      margin-top: auto;
      padding: 10px 14px 12px;
    }

    :where(body.wat-app--collection) .full-width-action {
      width: 100%;
      height: 40px;
      border-radius: 8px;
      border: 0;
      color: var(--wat-blue-deep);
      background: #edf6ff;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      font-weight: 850;
    }

    :where(body.wat-app--collection) .secondary-accordions {
      margin-top: 14px;
      display: grid;
      gap: 8px;
    }

    :where(body.wat-app--collection) .secondary-accordion {
      border-radius: 8px;
      border: 1px solid var(--border);
      background: #fff;
      box-shadow: var(--soft-shadow);
      overflow: hidden;
    }

    :where(body.wat-app--collection) .secondary-accordion summary {
      min-height: 48px;
      color: #3d5576;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 14px;
      font-weight: 760;
      cursor: pointer;
      list-style: none;
    }

    :where(body.wat-app--collection) .secondary-accordion summary::-webkit-details-marker {
      display: none;
    }

    :where(body.wat-app--collection) .secondary-accordion[open] .secondary-chevron {
      transform: rotate(180deg);
    }

    :where(body.wat-app--collection) .secondary-chevron {
      transition: transform .16s ease;
    }

    :where(body.wat-app--collection) .secondary-accordion-body {
      border-top: 1px solid var(--border);
      padding: 14px;
    }

    :where(body.wat-app--collection) .secondary-loading {
      min-height: 72px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 720;
    }

    :where(body.wat-app--collection) .secondary-loading svg {
      width: 18px;
      height: 18px;
      animation: spin .9s linear infinite;
    }

    :where(body.wat-app--collection) .accordion-label {
      display: flex;
      align-items: center;
      gap: 11px;
      min-width: 0;
      text-align: left;
    }

    :where(body.wat-app--collection) .accordion-label svg,
:where(body.wat-app--collection) .secondary-chevron {
      width: 18px;
      height: 18px;
      flex: 0 0 auto;
    }

    :where(body.wat-app--collection) .accordion-title {
      display: grid;
      gap: 1px;
      min-width: 0;
    }

    :where(body.wat-app--collection) .accordion-title small {
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
    }

    :where(body.wat-app--collection) .developer-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, .75fr);
      gap: 14px;
    }

    :where(body.wat-app--collection) .developer-section {
      min-width: 0;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: #fbfdff;
      padding: 14px;
    }

    :where(body.wat-app--collection) .developer-section + .developer-section {
      margin-top: 14px;
    }

    :where(body.wat-app--collection) .developer-section-title {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 12px;
      color: var(--text);
    }

    :where(body.wat-app--collection) .developer-section-title svg {
      width: 18px;
      height: 18px;
      color: var(--wat-blue-deep);
    }

    :where(body.wat-app--collection) .developer-section-title h3 {
      margin: 0;
      font-size: 15px;
      font-weight: 820;
      letter-spacing: 0;
    }

    :where(body.wat-app--collection) .developer-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
    }

    :where(body.wat-app--collection) .developer-actions .button,
:where(body.wat-app--collection) .developer-form .button {
      min-height: 38px;
      padding: 0 13px;
      font-size: 13px;
    }

    :where(body.wat-app--collection) .developer-actions .button svg,
:where(body.wat-app--collection) .developer-form .button svg {
      width: 16px;
      height: 16px;
    }

    :where(body.wat-app--collection) .developer-current {
      display: grid;
      gap: 2px;
      margin-bottom: 10px;
      padding: 10px 12px;
      border-radius: 8px;
      background: #f1f7ff;
      color: #37506e;
      font-size: 13px;
    }

    :where(body.wat-app--collection) .developer-current span,
:where(body.wat-app--collection) .developer-muted,
:where(body.wat-app--collection) .developer-status-control span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 720;
    }

    :where(body.wat-app--collection) .developer-current b {
      color: var(--text);
      font-size: 13px;
    }

    :where(body.wat-app--collection) .developer-muted {
      margin: 0;
    }

    :where(body.wat-app--collection) .developer-form,
:where(body.wat-app--collection) .developer-status-control {
      display: grid;
      gap: 10px;
      min-width: 0;
    }

    :where(body.wat-app--collection) .developer-form label,
:where(body.wat-app--collection) .developer-status-control {
      display: grid;
      gap: 6px;
      color: var(--text);
      font-weight: 760;
    }

    :where(body.wat-app--collection) .developer-bin-select,
:where(body.wat-app--collection) .developer-select,
:where(body.wat-app--collection) .developer-status-updates input[type="date"] {
      width: 100%;
      min-height: 40px;
      border-radius: 8px;
      border: 1px solid var(--border-strong);
      background: #fff;
      color: var(--text);
      padding: 0 11px;
      font: inherit;
      font-size: 13px;
      font-weight: 650;
      outline: none;
    }

    :where(body.wat-app--collection) .developer-bin-select:focus,
:where(body.wat-app--collection) .developer-select:focus,
:where(body.wat-app--collection) .developer-status-updates input[type="date"]:focus {
      border-color: #78b9ff;
      box-shadow: 0 0 0 3px rgba(0, 127, 222, 0.13);
    }

    :where(body.wat-app--collection) .developer-status-section {
      margin-top: 14px;
    }

    :where(body.wat-app--collection) .developer-status-updates fieldset {
      margin: 12px 0 0;
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: #fff;
    }

    :where(body.wat-app--collection) .developer-status-updates legend {
      padding: 0 6px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 820;
      text-transform: uppercase;
      letter-spacing: .04em;
    }

    :where(body.wat-app--collection) .developer-status-updates ul {
      list-style: none;
      display: grid;
      gap: 8px;
      padding: 0;
      margin: 0;
    }

    :where(body.wat-app--collection) .developer-status-updates li {
      min-height: 34px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 7px;
      padding: 7px 9px;
      border-radius: 8px;
      background: #f8fbff;
      color: #435b7b;
      font-size: 13px;
    }

    :where(body.wat-app--collection) .developer-status-updates button.a {
      border: 0;
      background: transparent;
      color: var(--wat-blue-deep);
      padding: 0;
      font: inherit;
      font-weight: 800;
      cursor: pointer;
    }

    :where(body.wat-app--collection) .developer-status-updates form {
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 7px;
    }

    :where(body.wat-app--collection) .developer-status-updates .button-blue,
:where(body.wat-app--collection) .developer-status-updates .button-blue-2 {
      min-height: 34px;
      border-radius: 8px;
      border: 1px solid #b9d4ff;
      padding: 0 11px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--wat-blue-deep);
      background: #edf6ff;
      font: inherit;
      font-size: 12px;
      font-weight: 820;
      cursor: pointer;
    }

    :where(body.wat-app--collection) .developer-status-updates .button-blue {
      border: 0;
      color: #fff;
      background: linear-gradient(135deg, var(--wat-blue), var(--wat-blue-deep));
    }

    :where(body.wat-app--collection) .request-activity-log-list {
      display: grid;
      gap: 10px;
    }

    :where(body.wat-app--collection) .request-log-entry {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      gap: 10px;
      padding: 11px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: #fbfdff;
    }

    :where(body.wat-app--collection) .request-log-icon {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      color: var(--wat-blue-deep);
      background: #eef7ff;
    }

    :where(body.wat-app--collection) .request-log-icon svg {
      width: 17px;
      height: 17px;
    }

    :where(body.wat-app--collection) .request-log-main {
      min-width: 0;
      display: grid;
      gap: 6px;
    }

    :where(body.wat-app--collection) .request-log-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      min-width: 0;
    }

    :where(body.wat-app--collection) .request-log-head b {
      color: var(--text);
      font-size: 13px;
      font-weight: 780;
      overflow-wrap: anywhere;
    }

    :where(body.wat-app--collection) .request-log-head time {
      flex: 0 0 auto;
      color: var(--muted);
      font-size: 12px;
      font-weight: 680;
      white-space: nowrap;
    }

    :where(body.wat-app--collection) .request-log-meta,
:where(body.wat-app--collection) .request-log-links {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
    }

    :where(body.wat-app--collection) .request-log-meta span,
:where(body.wat-app--collection) .request-log-links a {
      min-height: 24px;
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 0 9px;
      background: #f0f5fb;
      color: #536880;
      font-size: 12px;
      font-weight: 720;
      text-decoration: none;
    }

    :where(body.wat-app--collection) .request-log-links a {
      background: #edf6ff;
      color: var(--wat-blue-deep);
    }

    :where(body.wat-app--collection) .request-log-main code {
      width: fit-content;
      max-width: 100%;
      border-radius: 7px;
      background: #eef3f8;
      color: #466078;
      padding: 5px 7px;
      font-size: 12px;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    :where(body.wat-app--collection) .request-empty-inline {
      min-height: 96px;
      display: grid;
      justify-items: center;
      align-content: center;
      gap: 6px;
      border: 1px dashed var(--border-strong);
      border-radius: 8px;
      background: #fbfdff;
      color: var(--muted);
      text-align: center;
      padding: 14px;
    }

    :where(body.wat-app--collection) .request-empty-inline svg {
      width: 24px;
      height: 24px;
      color: #90a3b8;
    }

    :where(body.wat-app--collection) .request-empty-inline b {
      color: #586b82;
      font-size: 14px;
    }

    :where(body.wat-app--collection) .request-empty-inline span {
      font-size: 13px;
      font-weight: 650;
    }

    :where(body.wat-app--collection) .preliminary-processing-details,
:where(body.wat-app--collection) .processing-client-details,
:where(body.wat-app--collection) .collection-receipt-details {
      margin-top: 14px;
    }

    :where(body.wat-app--collection) .preliminary-processing-details {
      display: block;
    }

    :where(body.wat-app--collection) .preliminary-processing-panel {
      grid-column: 1 / -1;
      min-width: 0;
    }

    :where(body.wat-app--collection) .preliminary-processing-panel .panel-body {
      padding: 14px;
      min-width: 0;
    }

    :where(body.wat-app--collection) .processing-client-details details,
:where(body.wat-app--collection) .collection-receipt-details details {
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #fff;
      box-shadow: var(--soft-shadow);
      overflow: hidden;
    }

    :where(body.wat-app--collection) .processing-client-details summary,
:where(body.wat-app--collection) .collection-receipt-details summary {
      min-height: 54px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 0 15px;
      color: #29445f;
      cursor: pointer;
      list-style: none;
      font-weight: var(--strong-weight);
    }

    :where(body.wat-app--collection) .processing-client-details summary::-webkit-details-marker,
:where(body.wat-app--collection) .collection-receipt-details summary::-webkit-details-marker {
      display: none;
    }

    :where(body.wat-app--collection) .processing-client-details summary > svg,
:where(body.wat-app--collection) .collection-receipt-details summary > svg {
      width: 18px;
      height: 18px;
      transition: transform 0.15s ease;
    }

    :where(body.wat-app--collection) .processing-client-details details[open] summary > svg,
:where(body.wat-app--collection) .collection-receipt-details details[open] summary > svg {
      transform: rotate(180deg);
    }

    :where(body.wat-app--collection) .processing-client-body {
      padding: 14px;
      border-top: 1px solid var(--border);
      display: grid;
      grid-template-columns: minmax(0, 1fr) 320px;
      gap: 14px;
      align-items: start;
    }

    :where(body.wat-app--collection) .toast {
      position: fixed;
      left: calc(var(--sidebar) + 32px);
      bottom: 22px;
      display: none;
      padding: 12px 14px;
      border-radius: 8px;
      background: #061944;
      color: white;
      box-shadow: var(--shadow);
      z-index: 20;
      font-weight: 700;
    }

    :where(body.wat-app--collection) .toast.is-visible {
      display: block;
    }

    :where(body.wat-app--collection).is-drawer-open {
      overflow: hidden;
    }

    :where(body.wat-app--collection) .inventory-drawer {
      position: fixed;
      inset: 0;
      z-index: 35;
      display: none;
    }

    :where(body.wat-app--collection) .inventory-drawer.is-open {
      display: block;
    }

    :where(body.wat-app--collection) .inventory-backdrop {
      position: absolute;
      inset: 0;
      border: 0;
      background: rgba(4, 22, 50, 0.28);
      cursor: pointer;
    }

    :where(body.wat-app--collection) .inventory-panel {
      position: absolute;
      inset: 0 0 0 auto;
      width: min(860px, calc(100vw - var(--sidebar) - 36px));
      background: #f8fbfe;
      box-shadow: -22px 0 48px rgba(6, 25, 68, 0.16);
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      border-left: 1px solid var(--border);
    }

    :where(body.wat-app--collection) #requestInventoryDrawerContent {
      min-height: 0;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      overflow: hidden;
    }

    :where(body.wat-app--collection) .drawer-header,
:where(body.wat-app--collection) .drawer-tools,
:where(body.wat-app--collection) .drawer-footer {
      padding: 18px 22px;
      background: rgba(255, 255, 255, 0.92);
      border-bottom: 1px solid var(--border);
    }

    :where(body.wat-app--collection) .drawer-header {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 16px;
      align-items: start;
    }

    :where(body.wat-app--collection) .drawer-title h2 {
      margin: 0 0 5px;
      color: var(--text);
      font-size: 25px;
      font-weight: var(--title-weight);
      letter-spacing: 0;
    }

    :where(body.wat-app--collection) .drawer-title p {
      margin: 0;
      color: var(--muted);
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .drawer-close {
      width: 40px;
      height: 40px;
      border: 1px solid var(--border-strong);
      border-radius: 8px;
      background: #fff;
      color: var(--text);
      display: grid;
      place-items: center;
      cursor: pointer;
    }

    :where(body.wat-app--collection) .drawer-close svg {
      width: 18px;
      height: 18px;
    }

    :where(body.wat-app--collection) .drawer-tools {
      display: grid;
      grid-template-columns: minmax(260px, 1fr) auto;
      gap: 12px;
      align-items: center;
      background: #f8fbfe;
    }

    :where(body.wat-app--collection) .filter-pills {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 8px;
    }

    :where(body.wat-app--collection) .filter-pill {
      height: 34px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: #fff;
      color: #445b78;
      padding: 0 12px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-weight: 740;
      cursor: pointer;
    }

    :where(body.wat-app--collection) .filter-pill.is-active {
      color: var(--wat-blue-deep);
      background: #e9f5ff;
      border-color: #b8dcff;
    }

    :where(body.wat-app--collection) .drawer-body {
      min-height: 0;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      padding: 18px 22px;
    }

    :where(body.wat-app--collection) .inventory-table {
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      background: #fff;
    }

    :where(body.wat-app--collection) .inventory-table-row {
      display: grid;
      grid-template-columns: 58px minmax(180px, 1.28fr) 78px minmax(118px, 0.82fr) minmax(132px, 0.92fr) 58px 38px;
      align-items: center;
      gap: 10px;
      min-height: 54px;
      padding: 8px 14px;
      border-bottom: 1px solid var(--border);
    }

    :where(body.wat-app--collection) .inventory-table-row:last-child {
      border-bottom: 0;
    }

    :where(body.wat-app--collection) .inventory-table-head {
      min-height: 40px;
      color: #65758b;
      background: #f3f7fb;
      font-size: 11px;
      font-weight: 820;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }

    :where(body.wat-app--collection) .inventory-table-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }

    :where(body.wat-app--collection) .inventory-table-actions.is-bottom {
      margin: 10px 0 0;
    }

    :where(body.wat-app--collection) .inventory-table-actions.is-bottom .inventory-add-button {
      margin-left: auto;
    }

    :where(body.wat-app--collection) .inventory-table-actions span {
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .inventory-add-button {
      min-height: 38px;
      padding: 0 13px;
    }

    :where(body.wat-app--collection) .inventory-item-name {
      min-width: 0;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 10px;
      font-weight: var(--strong-weight);
    }

    :where(body.wat-app--collection) .inventory-item-name span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    :where(body.wat-app--collection) .inventory-table-action {
      display: flex;
      justify-content: flex-end;
    }

    :where(body.wat-app--collection) .inventory-delete-button {
      width: 28px;
      height: 28px;
      border: 1px solid #fecaca;
      border-radius: 999px;
      color: #c93131;
      background: #fff1f2;
      display: grid;
      place-items: center;
      padding: 0;
      transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
    }

    :where(body.wat-app--collection) .inventory-delete-button:hover {
      color: #fff;
      background: #df3d3d;
      transform: translateY(-1px);
    }

    :where(body.wat-app--collection) .inventory-delete-button svg {
      width: 15px;
      height: 15px;
      stroke-width: 2.5;
    }

    :where(body.wat-app--collection) .drawer-muted {
      color: var(--muted);
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .drawer-number {
      color: var(--text);
      text-align: center;
      font-weight: var(--strong-weight);
    }

    :where(body.wat-app--collection) .inventory-unit-button {
      min-width: 42px;
      height: 30px;
      border: 1px solid transparent;
      border-radius: 999px;
      background: transparent;
      color: inherit;
      font: inherit;
      font-weight: inherit;
      text-align: center;
      cursor: pointer;
      transition: background 0.12s ease, border-color 0.12s ease;
    }

    :where(body.wat-app--collection) .inventory-unit-button:hover,
:where(body.wat-app--collection) .inventory-unit-button:focus-visible {
      border-color: #b9d9ff;
      background: #edf6ff;
      outline: none;
    }

    :where(body.wat-app--collection) .inventory-unit-form {
      display: flex;
      justify-content: center;
    }

    :where(body.wat-app--collection) .inventory-unit-input {
      width: 56px;
      height: 30px;
      border: 1px solid #8ebdff;
      border-radius: 999px;
      color: var(--text);
      font: inherit;
      font-weight: var(--strong-weight);
      text-align: center;
      background: #fff;
      box-shadow: 0 0 0 3px rgba(25, 124, 242, 0.12);
    }

    :where(body.wat-app--collection) .inventory-unit-input:focus {
      outline: none;
    }

    :where(body.wat-app--collection) .data-badge {
      justify-self: end;
      min-width: 56px;
      height: 28px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #eef3f8;
      color: #63748a;
      font-weight: 820;
      font-size: 12px;
    }

    :where(body.wat-app--collection) .data-badge.is-yes {
      color: #087b63;
      background: #e7f8f3;
    }

    :where(body.wat-app--collection) .drawer-footer {
      border-top: 1px solid var(--border);
      border-bottom: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
    }

    :where(body.wat-app--collection) .drawer-actions {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    :where(body.wat-app--collection) {
      color: var(--text);
      background:
        linear-gradient(180deg, rgba(0, 127, 222, 0.035), transparent 260px),
        var(--bg);
      font-size: 13.5px;
    }

    :where(body.wat-app--collection) .sidebar {
      background: var(--sidebar-bg);
    }

    :where(body.wat-app--collection) .topbar {
      background: var(--topbar-bg);
    }

    :where(body.wat-app--collection) h1 {
      font-family: var(--font-ui);
      font-weight: var(--h1-weight);
      letter-spacing: 0;
      color: var(--text);
    }

    :where(body.wat-app--collection) .panel {
      border-color: var(--border);
      border-radius: var(--radius);
      box-shadow: var(--soft-shadow);
    }

    :where(body.wat-app--collection) .panel-header {
      background: var(--panel-header-bg);
    }

    :where(body.wat-app--collection) .review-list,
:where(body.wat-app--collection) .category-list,
:where(body.wat-app--collection) .stats,
:where(body.wat-app--collection) .empty-state,
:where(body.wat-app--collection) .map-wrap,
:where(body.wat-app--collection) .info-tile,
:where(body.wat-app--collection) .todo-strip,
:where(body.wat-app--collection) .inventory-table {
      border-color: var(--border);
      border-radius: var(--radius);
    }

    :where(body.wat-app--collection) .button,
:where(body.wat-app--collection) .dots,
:where(body.wat-app--collection) .full-width-action,
:where(body.wat-app--collection) .drawer-close,
:where(body.wat-app--collection) .input,
:where(body.wat-app--collection) .textarea,
:where(body.wat-app--collection) .search,
:where(body.wat-app--collection) .secondary-accordion {
      border-radius: var(--button-radius);
    }

    :where(body.wat-app--collection) .status-pill,
:where(body.wat-app--collection) .button-primary,
:where(body.wat-app--collection) .step.is-current .step-dot {
      background: var(--primary-gradient);
      box-shadow: var(--action-shadow);
    }

    :where(body.wat-app--collection) .status-pill.is-cancelled {
      color: #fff;
      background: linear-gradient(135deg, #b42318, #e5484d);
      box-shadow: 0 14px 30px rgba(180, 35, 24, 0.2);
    }

    :where(body.wat-app--collection) .button-primary {
      font-weight: var(--title-weight);
    }

    :where(body.wat-app--collection) .button-secondary,
:where(body.wat-app--collection) .button-light,
:where(body.wat-app--collection) .button-danger,
:where(body.wat-app--collection) .full-width-action {
      box-shadow: none;
      font-weight: var(--strong-weight);
    }

    :where(body.wat-app--collection) .button:disabled {
      cursor: default;
      opacity: 0.62;
      box-shadow: none;
    }

    :where(body.wat-app--collection) .nav-button,
:where(body.wat-app--collection) .breadcrumbs,
:where(body.wat-app--collection) .meta-line,
:where(body.wat-app--collection) .panel-title p,
:where(body.wat-app--collection) .row-label,
:where(body.wat-app--collection) .hint,
:where(body.wat-app--collection) .stat span,
:where(body.wat-app--collection) .stat small,
:where(body.wat-app--collection) .category-name small,
:where(body.wat-app--collection) .percent {
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .panel-title h2,
:where(body.wat-app--collection) .section-label,
:where(body.wat-app--collection) .category-head,
:where(body.wat-app--collection) .row-value,
:where(body.wat-app--collection) .info-tile b,
:where(body.wat-app--collection) .empty-state b,
:where(body.wat-app--collection) .category-name,
:where(body.wat-app--collection) .count,
:where(body.wat-app--collection) .stat b,
:where(body.wat-app--collection) .step-label {
      font-weight: var(--strong-weight);
    }

    :where(body.wat-app--collection) .panel-title h2 {
      font-weight: var(--title-weight);
    }

    :where(body.wat-app--collection) .nav-title {
      font-weight: var(--strong-weight);
      color: #77869a;
    }

    :where(body.wat-app--collection) .nav-button.is-active {
      background: var(--nav-active-bg);
      color: var(--wat-blue-deep);
    }

    :where(body.wat-app--collection) .message-box {
      background: var(--message-bg);
      border-color: var(--message-border);
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .stats {
      background: var(--stats-bg);
    }

    :where(body.wat-app--collection) .panel-teal {
      position: relative;
      border-top: 0;
      border-color: rgba(0, 180, 156, 0.46);
      background: linear-gradient(180deg, #ffffff, #f2fffc);
      box-shadow:
        0 24px 62px rgba(0, 127, 222, 0.13),
        0 0 0 5px rgba(0, 180, 156, 0.08),
        0 0 0 1px rgba(0, 180, 156, 0.12);
      transform: translateY(-2px);
    }

    :where(body.wat-app--collection) .panel-teal::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% 0%, rgba(0, 180, 156, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(0, 180, 156, 0.07), transparent 42%);
    }

    :where(body.wat-app--collection) .panel-teal .panel-header,
:where(body.wat-app--collection) .panel-teal .panel-body {
      position: relative;
      z-index: 1;
    }

    :where(body.wat-app--collection) .panel-teal .panel-header {
      color: #fff;
      background: linear-gradient(135deg, #052965 0%, #006fcf 62%, #00b49c 100%);
      border-bottom: 0;
      padding-top: 17px;
      padding-bottom: 16px;
    }

    :where(body.wat-app--collection) .panel-teal .panel-title h2,
:where(body.wat-app--collection) .panel-teal .panel-title p {
      color: #fff;
    }

    :where(body.wat-app--collection) .panel-teal .panel-title p {
      opacity: 0.84;
    }

    :where(body.wat-app--collection) .panel-teal .panel-body {
      background: linear-gradient(180deg, rgba(239, 255, 251, 0.94), #fff 142px);
    }

    :where(body.wat-app--collection) .panel-teal .state-hero-card {
      border-color: #93e8db;
      background: linear-gradient(145deg, #effffa, #fff);
      box-shadow:
        0 16px 36px rgba(0, 180, 156, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    :where(body.wat-app--collection) .panel-teal .workflow-actions .button-primary,
:where(body.wat-app--collection) .panel-teal .todo-strip .button-primary {
      min-height: 46px;
      font-size: 14px;
      box-shadow: 0 15px 30px rgba(0, 127, 222, 0.2);
    }

    :where(body.wat-app--collection) .panel-teal .state-badge {
      color: #075f51;
      background: #ddfbf4;
      border: 1px solid #a4eadb;
    }

    :where(body.wat-app--collection) .panel-green {
      border-top-color: var(--wat-mint);
    }

    :where(body.wat-app--collection) .cards.is-processing,
:where(body.wat-app--collection) .cards.is-invoice,
:where(body.wat-app--collection) .cards.is-done {
      grid-template-columns: minmax(0, 1fr);
      align-items: stretch;
    }

    :where(body.wat-app--collection) .cards.is-processing {
      display: none;
    }

    :where(body.wat-app--collection) .cards.is-done.is-client-report {
      grid-template-columns: minmax(280px, 0.35fr) minmax(0, 0.65fr);
    }

    :where(body.wat-app--collection) .cards.is-processing .panel-blue,
:where(body.wat-app--collection) .cards.is-processing .panel-green,
:where(body.wat-app--collection) .cards.is-invoice .panel-blue,
:where(body.wat-app--collection) .cards.is-invoice .panel-green,
:where(body.wat-app--collection) .cards.is-done .panel-blue,
:where(body.wat-app--collection) .cards.is-done .panel-green {
      display: none;
    }

    :where(body.wat-app--collection) .cards.is-processing .panel-teal,
:where(body.wat-app--collection) .cards.is-invoice .panel-teal,
:where(body.wat-app--collection) .cards.is-done .panel-teal {
      min-height: 735px;
    }

    :where(body.wat-app--collection) .cards.is-done.is-client-report .panel-blue {
      display: flex;
    }

    :where(body.wat-app--collection) .cards.is-processing .panel-body,
:where(body.wat-app--collection) .cards.is-invoice .panel-body,
:where(body.wat-app--collection) .cards.is-done .panel-body {
      min-width: 0;
    }

    :where(body.wat-app--collection) .processing-ui {
      display: grid;
      gap: 14px;
      min-width: 0;
    }

    :where(body.wat-app--collection) .processing-kpis {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(310px, 340px);
      gap: 9px;
      align-items: stretch;
      min-width: 0;
    }

    :where(body.wat-app--collection) .processing-metric-rail {
      display: grid;
      grid-template-columns: 1.15fr repeat(3, minmax(0, 1fr));
      gap: 9px;
      min-width: 0;
    }

    :where(body.wat-app--collection) .processing-kpi {
      min-height: 74px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #fff;
      padding: 10px;
      display: grid;
      align-content: center;
      gap: 4px;
    }

    :where(body.wat-app--collection) .processing-kpi b {
      color: var(--text);
      font-size: 19px;
      line-height: 1.05;
      font-weight: 760;
    }

    :where(body.wat-app--collection) .processing-kpi span {
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
      line-height: 1.2;
    }

    :where(body.wat-app--collection) .processing-kpi.is-alert {
      border-color: #f3d2a2;
      background: #fffaf0;
    }

    :where(body.wat-app--collection) .processing-kpi.is-danger {
      border-color: #f2b8b8;
      background: #fff6f6;
    }

    :where(body.wat-app--collection) .processing-search,
:where(body.wat-app--collection) .processing-select,
:where(body.wat-app--collection) .processing-input {
      height: 38px;
      border: 1px solid var(--border-strong);
      border-radius: 10px;
      background: #fff;
      padding: 0 11px;
      color: var(--text);
      min-width: 0;
    }

    :where(body.wat-app--collection) .processing-search:focus,
:where(body.wat-app--collection) .processing-select:focus,
:where(body.wat-app--collection) .processing-input:focus {
      border-color: var(--wat-blue);
      box-shadow: 0 0 0 3px rgba(0, 127, 222, 0.09);
      outline: 0;
    }

    :where(body.wat-app--collection) .processing-layout {
      display: grid;
      gap: 12px;
      min-width: 0;
    }

    :where(body.wat-app--collection) .processing-layout.is-workbench {
      grid-template-columns: 240px minmax(0, 1fr);
    }

    :where(body.wat-app--collection) .processing-layout.is-workbench.is-detail-open {
      grid-template-columns: 240px minmax(0, 1fr) 240px;
    }

    :where(body.wat-app--collection) .processing-side,
:where(body.wat-app--collection) .processing-main,
:where(body.wat-app--collection) .processing-detail {
      min-width: 0;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 12px 28px rgba(4, 67, 86, 0.045);
    }

    :where(body.wat-app--collection) .processing-side,
:where(body.wat-app--collection) .processing-detail {
      padding: 12px;
    }

    :where(body.wat-app--collection) .processing-side-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: start;
    }

    :where(body.wat-app--collection) .round-add {
      width: 38px;
      height: 38px;
      border: 0;
      border-radius: 999px;
      display: grid;
      place-items: center;
      color: #fff;
      background: var(--primary-gradient);
      box-shadow: 0 12px 24px rgba(0, 127, 222, 0.18);
      padding: 0;
    }

    :where(body.wat-app--collection) .round-add svg {
      width: 19px;
      height: 19px;
      stroke-width: 2.5;
      color: currentColor;
    }

    :where(body.wat-app--collection) .processing-ui .button svg.lucide,
:where(body.wat-app--collection) .processing-ui .button i[data-lucide],
:where(body.wat-app--collection) .processing-ui .round-add svg.lucide,
:where(body.wat-app--collection) .processing-ui .round-add i[data-lucide],
:where(body.wat-app--collection) .processing-product-popup .button svg.lucide,
:where(body.wat-app--collection) .processing-product-popup .button i[data-lucide] {
      width: 17px;
      height: 17px;
      flex: 0 0 auto;
      color: currentColor;
      stroke: currentColor;
      stroke-width: 2.45;
    }

    :where(body.wat-app--collection) .processing-ui .button-primary svg.lucide,
:where(body.wat-app--collection) .processing-ui .button-primary i[data-lucide],
:where(body.wat-app--collection) .processing-ui .round-add svg.lucide,
:where(body.wat-app--collection) .processing-ui .round-add i[data-lucide] {
      color: #fff;
      stroke: #fff;
    }

    :where(body.wat-app--collection) .processing-ui .round-add svg.lucide,
:where(body.wat-app--collection) .processing-ui .round-add i[data-lucide] {
      width: 19px;
      height: 19px;
    }

    :where(body.wat-app--collection) .processing-ui .button-danger {
      border-color: #ffd1cc;
      background: #fff1f0;
      color: #b42318;
      box-shadow: none;
    }

    :where(body.wat-app--collection) .processing-ui .button-danger:not(:disabled):hover,
:where(body.wat-app--collection) .processing-ui .button-danger:not(:disabled):focus-visible {
      border-color: #ffb4ab;
      background: #ffe7e4;
      color: #981b12;
      outline: 0;
    }

    :where(body.wat-app--collection) .processing-remove-category-button {
      min-width: 0;
      padding-inline: 12px;
    }

    :where(body.wat-app--collection) .processing-main {
      overflow: hidden;
    }

    :where(body.wat-app--collection) .processing-section-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      padding: 13px 14px;
      border-bottom: 1px solid var(--border);
      background: #fbfdff;
    }

    :where(body.wat-app--collection) .processing-section-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    :where(body.wat-app--collection) .processing-section-head h3,
:where(body.wat-app--collection) .processing-side h3,
:where(body.wat-app--collection) .processing-detail h3 {
      margin: 0;
      color: var(--text);
      font-size: 15px;
      font-weight: var(--strong-weight);
      line-height: 1.24;
    }

    :where(body.wat-app--collection) .processing-section-head p,
:where(body.wat-app--collection) .processing-side p,
:where(body.wat-app--collection) .processing-detail p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
      line-height: 1.35;
    }

    :where(body.wat-app--collection) .processing-group-list {
      display: grid;
      gap: 8px;
      margin-top: 12px;
    }

    :where(body.wat-app--collection) .processing-side-actions {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--border);
    }

    :where(body.wat-app--collection) .processing-side-actions .button {
      width: 100%;
      justify-content: center;
      min-height: 38px;
    }

    :where(body.wat-app--collection) .processing-group-item {
      width: 100%;
      border: 1px solid #dde9f0;
      border-radius: 10px;
      background: #fff;
      padding: 10px;
      color: var(--text);
      display: grid;
      gap: 7px;
      text-align: left;
    }

    :where(body.wat-app--collection) .processing-group-item.is-active {
      border-color: #8fdff1;
      background: linear-gradient(135deg, #f0fbff, #f4fffb);
      box-shadow: inset 3px 0 0 var(--wat-blue);
    }

    :where(body.wat-app--collection) .processing-group-name {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      font-weight: var(--strong-weight);
      line-height: 1.25;
    }

    :where(body.wat-app--collection) .processing-group-name > span:first-child {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    :where(body.wat-app--collection) .processing-group-name > span:last-child {
      flex: 0 0 auto;
      white-space: nowrap;
    }

    :where(body.wat-app--collection) .processing-progress {
      height: 6px;
      overflow: hidden;
      border-radius: 999px;
      background: #e8eff5;
    }

    :where(body.wat-app--collection) .processing-progress span {
      display: block;
      height: 100%;
      width: var(--progress, 50%);
      border-radius: inherit;
      background: var(--progress-color, var(--wat-blue));
    }

    :where(body.wat-app--collection) .processing-group-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .processing-tag {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 0 8px;
      border-radius: 999px;
      background: #eef6ff;
      color: #2368a7;
      font-size: 12px;
      font-weight: var(--strong-weight);
      white-space: nowrap;
    }

    :where(body.wat-app--collection) .processing-tag.is-warning {
      color: #89520a;
      background: #fff4dd;
    }

    :where(body.wat-app--collection) .processing-tag.is-danger {
      color: #b3261e;
      background: #ffeded;
    }

    :where(body.wat-app--collection) .processing-tag.is-success {
      color: #087b63;
      background: #e6f8f3;
    }

    :where(body.wat-app--collection) .processing-tag.is-muted {
      color: #607287;
      background: #eef4f8;
    }

    :where(body.wat-app--collection) .processing-table-wrap {
      overflow: auto;
    }

    :where(body.wat-app--collection) .processing-card-list {
      display: none;
    }

    :where(body.wat-app--collection) .processing-mock-table {
      width: 100%;
      min-width: 780px;
      border-collapse: collapse;
      background: #fff;
    }

    :where(body.wat-app--collection) .processing-ui[data-processing-workbench] .processing-mock-table {
      min-width: 720px;
    }

    :where(body.wat-app--collection) .processing-mock-table th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: #f4f8fb;
      color: #65758b;
      font-size: 11px;
      font-weight: 820;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      text-align: left;
      padding: 10px;
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
    }

    :where(body.wat-app--collection) .processing-mock-table td {
      padding: 9px 10px;
      border-bottom: 1px solid var(--border);
      vertical-align: middle;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .processing-mock-table tr:last-child td {
      border-bottom: 0;
    }

    :where(body.wat-app--collection) .processing-mock-table tr.is-selected td {
      background: #f2fbff;
    }

    :where(body.wat-app--collection) .processing-mock-table tr.is-warning td {
      background: #fffaf1;
    }

    :where(body.wat-app--collection) .processing-product-cell {
      display: grid;
      gap: 2px;
      min-width: 0;
      font-weight: var(--strong-weight);
    }

    :where(body.wat-app--collection) .processing-product-cell small {
      color: var(--muted);
      font-weight: var(--label-weight);
      line-height: 1.25;
    }

    :where(body.wat-app--collection) .processing-cell-input {
      width: 100%;
      min-width: 72px;
      height: 34px;
      border: 1px solid #d4e2ea;
      border-radius: 8px;
      background: #fff;
      padding: 0 9px;
      color: var(--text);
    }

    :where(body.wat-app--collection) .processing-cell-input.is-short {
      max-width: 72px;
      text-align: right;
    }

    :where(body.wat-app--collection) .processing-cell-input.is-missing {
      border-color: #e8b25b;
      background: #fff9ec;
    }

    :where(body.wat-app--collection) .note-count-pill,
:where(body.wat-app--collection) .drive-pill {
      min-height: 30px;
      border: 1px solid #d8e7ef;
      border-radius: 999px;
      background: #fff;
      color: #38536d;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 0 9px;
      font-size: 12px;
      font-weight: var(--strong-weight);
      white-space: nowrap;
    }

    :where(body.wat-app--collection) .note-count-pill {
      min-width: 40px;
      justify-content: center;
      color: #607287;
      background: #eef4f8;
      border-color: #d6e0e8;
    }

    :where(body.wat-app--collection) .note-count-pill.has-notes {
      color: #087b63;
      background: #e6f8f3;
      border-color: #bdeadd;
    }

    :where(body.wat-app--collection) .note-count-pill svg {
      width: 14px;
      height: 14px;
    }

    :where(body.wat-app--collection) .drive-pill.is-needed {
      color: #89520a;
      background: #fff5df;
      border-color: #f3d5a0;
    }

    :where(body.wat-app--collection) .drive-pill.is-locked {
      color: #607287;
      background: #eef4f8;
      border-color: #d6e0e8;
    }

    :where(body.wat-app--collection) .round-delete {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      border: 1px solid #fecaca;
      color: #c93131;
      background: #fff1f2;
      display: grid;
      place-items: center;
      padding: 0;
    }

    :where(body.wat-app--collection) .round-delete:hover {
      color: #fff;
      background: #df3d3d;
    }

    :where(body.wat-app--collection) .round-delete svg {
      width: 15px;
      height: 15px;
      stroke-width: 2.5;
    }

    :where(body.wat-app--collection) .quality-list {
      display: grid;
      gap: 9px;
      margin-top: 12px;
    }

    :where(body.wat-app--collection) .quality-item {
      border: 1px solid #dbe8f0;
      border-radius: 10px;
      padding: 10px;
      background: #fbfdff;
      display: grid;
      gap: 3px;
    }

    :where(body.wat-app--collection) .quality-item.is-warning {
      border-color: #f3d2a2;
      background: #fffaf0;
    }

    :where(body.wat-app--collection) .quality-item.is-danger {
      border-color: #f2b8b8;
      background: #fff6f6;
    }

    :where(body.wat-app--collection) .quality-item b {
      color: var(--text);
      font-weight: var(--strong-weight);
      line-height: 1.25;
    }

    :where(body.wat-app--collection) .quality-item span {
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
      line-height: 1.35;
    }

    :where(body.wat-app--collection) .processing-complete {
      margin-top: 12px;
      display: grid;
      gap: 10px;
      border: 1px solid #bfe9e0;
      border-radius: 12px;
      background: linear-gradient(135deg, #f2fffb, #ffffff);
      padding: 12px;
    }

    :where(body.wat-app--collection) .processing-complete label {
      display: flex;
      align-items: center;
      gap: 9px;
      color: #29445f;
      font-size: 12px;
      font-weight: var(--label-weight);
      line-height: 1.35;
      white-space: nowrap;
    }

    :where(body.wat-app--collection) .processing-complete input {
      width: 16px;
      height: 16px;
      margin: 0;
      accent-color: var(--wat-blue);
    }

    :where(body.wat-app--collection) .processing-complete .button {
      width: 100%;
      justify-content: center;
      min-height: 40px;
      min-width: 0;
      padding-left: 20px;
      padding-right: 20px;
    }

    :where(body.wat-app--collection) .processing-kpis .processing-complete {
      margin: 0;
      min-height: 74px;
      min-width: 0;
    }

    :where(body.wat-app--collection) .processing-complete-form {
      display: grid;
      gap: 10px;
      min-width: 0;
    }

    :where(body.wat-app--collection) .workbench-search-row {
      margin: 12px 14px 0;
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #fff;
    }

    :where(body.wat-app--collection) .workbench-search-row .processing-search {
      width: 100%;
    }

    :where(body.wat-app--collection) .workbench-add-form {
      margin: 12px 14px 0;
      padding: 12px;
      border: 1px solid #bfe9e0;
      border-radius: 12px;
      background: linear-gradient(135deg, #f1fffb, #ffffff);
      box-sizing: border-box;
      max-width: 690px;
    }

    :where(body.wat-app--collection) .workbench-add-form-head {
      display: none;
    }

    :where(body.wat-app--collection) .workbench-add-form .operator-form-grid {
      grid-template-columns: minmax(280px, 390px) minmax(170px, 210px);
      align-items: start;
      justify-content: start;
    }

    :where(body.wat-app--collection) .workbench-add-form .workflow-actions {
      margin-top: 12px;
      justify-content: flex-end;
    }

    :where(body.wat-app--collection) .workbench-add-form .workflow-actions .button {
      flex: 0 0 auto;
      min-width: 118px;
    }

    :where(body.wat-app--collection) .processing-add-drives {
      display: grid;
      gap: 8px;
      max-width: 390px;
    }

    :where(body.wat-app--collection) .processing-add-drives:empty {
      display: none;
    }

    :where(body.wat-app--collection) .processing-add-drive-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
    }

    :where(body.wat-app--collection) .workbench-table-footer {
      display: flex;
      justify-content: flex-end;
      padding: 10px 14px 14px;
      border-top: 1px solid var(--border);
      background: #fbfdff;
    }

    :where(body.wat-app--collection) .workbench-table-footer .button {
      min-height: 38px;
    }

    :where(body.wat-app--collection) .selected-row-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }

    :where(body.wat-app--collection) .selected-row-close {
      width: 32px;
      height: 32px;
      border: 1px solid var(--border-strong);
      border-radius: 8px;
      background: #fff;
      color: #38536d;
      display: grid;
      place-items: center;
      padding: 0;
      flex: 0 0 auto;
    }

    :where(body.wat-app--collection) .selected-row-close svg {
      width: 16px;
      height: 16px;
    }

    :where(body.wat-app--collection) .processing-mock-table tbody tr {
      cursor: pointer;
    }

    :where(body.wat-app--collection) .processing-mock-table tbody tr:hover td {
      background: #f7fcff;
    }

    :where(body.wat-app--collection) .operator-form-grid {
      display: grid;
      grid-template-columns: minmax(280px, 390px) minmax(170px, 210px);
      gap: 10px;
      align-items: start;
      justify-content: start;
    }

    :where(body.wat-app--collection) .operator-form-grid .is-wide {
      grid-column: span 2;
    }

    :where(body.wat-app--collection) .operator-input-card-drives {
      grid-column: auto;
    }

    :where(body.wat-app--collection) .operator-form-metrics-row,
:where(body.wat-app--collection) .operator-form-drives-row,
:where(body.wat-app--collection) .operator-form-notes-row {
      display: grid;
      grid-column: 1 / -1;
      gap: 10px;
      align-items: start;
    }

    :where(body.wat-app--collection) .operator-form-metrics-row {
      grid-template-columns: minmax(170px, 210px) 72px 86px;
    }

    :where(body.wat-app--collection) .operator-form-drives-row {
      grid-template-columns: minmax(0, 390px);
    }

    :where(body.wat-app--collection) .operator-form-notes-row {
      grid-template-columns: repeat(2, minmax(0, 200px));
    }

    :where(body.wat-app--collection) .operator-input-card {
      display: grid;
      gap: 6px;
      min-width: 0;
    }

    :where(body.wat-app--collection) .operator-input-card label {
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .operator-input-card input,
:where(body.wat-app--collection) .operator-input-card textarea,
:where(body.wat-app--collection) .operator-input-card select {
      width: 100%;
      min-width: 0;
      border: 1px solid var(--border-strong);
      border-radius: 10px;
      background: #fff;
      padding: 9px 10px;
      color: var(--text);
    }

    :where(body.wat-app--collection) .operator-input-card-qty input,
:where(body.wat-app--collection) .operator-input-card-weight input {
      width: 100%;
      max-width: 72px;
      padding-inline: 8px;
      text-align: right;
    }

    :where(body.wat-app--collection) .operator-input-card-weight input {
      max-width: 86px;
    }

    :where(body.wat-app--collection) .operator-input-card-product .processing-product-select {
      min-width: 0;
    }

    :where(body.wat-app--collection) .operator-input-card textarea {
      resize: vertical;
      min-height: 72px;
      height: 72px;
    }

    :where(body.wat-app--collection) .operator-input-card-drives [data-new-add-drive] {
      width: fit-content;
      height: 37px;
      min-height: 37px;
      min-width: 0;
      padding: 0 12px;
      justify-self: start;
    }

    @media (max-width: 1300px) {
      :where(body.wat-app--collection) .workbench-add-form .operator-form-grid,
:where(body.wat-app--collection) .operator-form-grid {
        grid-template-columns: minmax(260px, 360px) minmax(165px, 200px);
      }

      :where(body.wat-app--collection) .operator-form-metrics-row {
        grid-template-columns: minmax(165px, 200px) 72px 86px;
      }

      :where(body.wat-app--collection) .operator-form-drives-row {
        grid-template-columns: minmax(0, 360px);
      }

      :where(body.wat-app--collection) .operator-form-notes-row {
        grid-template-columns: repeat(2, minmax(0, 190px));
      }
    }

    @media (max-width: 760px) {
      :where(body.wat-app--collection) .workbench-add-form .operator-form-grid,
:where(body.wat-app--collection) .operator-form-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      :where(body.wat-app--collection) .operator-form-metrics-row {
        grid-template-columns: minmax(0, 1fr) 72px 86px;
      }

      :where(body.wat-app--collection) .operator-form-drives-row {
        grid-template-columns: minmax(0, 1fr);
      }

      :where(body.wat-app--collection) .operator-form-notes-row {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    :where(body.wat-app--collection) .processing-detail-product-button {
      display: grid;
      width: 100%;
      min-height: 0;
      border: 0;
      background: transparent;
      color: inherit;
      padding: 0;
      text-align: left;
      box-shadow: none;
    }

    :where(body.wat-app--collection) .processing-detail-product-button b {
      color: var(--text);
    }

    :where(body.wat-app--collection) .processing-detail-product-button small {
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .processing-detail-product-button:hover b,
:where(body.wat-app--collection) .processing-detail-product-button:focus-visible b {
      color: var(--wat-blue);
    }

    :where(body.wat-app--collection) .processing-detail-panel {
      display: grid;
      gap: 10px;
      margin-top: 12px;
    }

    :where(body.wat-app--collection) .processing-detail-actions {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 8px;
    }

    :where(body.wat-app--collection) .processing-detail-actions .button {
      width: 100%;
      justify-content: center;
      min-height: 38px;
    }

    :where(body.wat-app--collection) .processing-detail-actions .button:disabled {
      cursor: not-allowed;
      opacity: 0.52;
      box-shadow: none;
    }

    :where(body.wat-app--collection) .processing-product-popup {
      position: fixed;
      width: min(380px, calc(100vw - 36px));
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 10px;
      border: 1px solid var(--border-strong);
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 22px 54px rgba(5, 56, 84, 0.18);
      z-index: 220;
    }

    :where(body.wat-app--collection) .processing-product-popup label {
      display: grid;
      gap: 6px;
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .processing-product-popup input[type="search"] {
      width: 100%;
      height: 38px;
      min-width: 0;
      border: 1px solid var(--border-strong);
      border-radius: 10px;
      background: #fff;
      color: var(--text);
      padding: 0 10px;
    }

    :where(body.wat-app--collection) .processing-product-popup input[type="search"]:focus {
      border-color: var(--wat-blue);
      box-shadow: 0 0 0 3px rgba(0, 127, 222, 0.09);
      outline: 0;
    }

    :where(body.wat-app--collection) .processing-product-popup .popup-list {
      display: grid;
      gap: 7px;
      max-height: min(42vh, 340px);
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    :where(body.wat-app--collection) .processing-product-option {
      width: 100%;
      display: grid;
      gap: 2px;
      padding: 9px 10px;
      border: 1px solid #dbe8f0;
      border-radius: 10px;
      background: #fbfdff;
      color: var(--text);
      text-align: left;
    }

    :where(body.wat-app--collection) .processing-product-option:hover,
:where(body.wat-app--collection) .processing-product-option:focus-visible {
      border-color: #9cddf1;
      background: #f0fbff;
      outline: 0;
    }

    :where(body.wat-app--collection) .processing-product-option b {
      font-size: 13px;
      font-weight: var(--strong-weight);
      line-height: 1.25;
    }

    :where(body.wat-app--collection) .processing-product-option span {
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
      line-height: 1.25;
    }

    :where(body.wat-app--collection) .processing-product-popup-empty {
      border: 1px dashed var(--border-strong);
      border-radius: 10px;
      padding: 12px;
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
      text-align: center;
    }

    :where(body.wat-app--collection) .processing-product-create {
      width: 100%;
      justify-content: center;
      min-height: 36px;
    }

    :where(body.wat-app--collection) .detail-box {
      border: 1px solid #dbe8f0;
      border-radius: 10px;
      padding: 10px;
      background: #fbfdff;
    }

    :where(body.wat-app--collection) .detail-box span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
      margin-bottom: 5px;
    }

    :where(body.wat-app--collection) .detail-box b {
      display: block;
      color: var(--text);
      font-weight: var(--strong-weight);
      line-height: 1.3;
    }

    :where(body.wat-app--collection) .processing-detail-drive-button {
      width: 100%;
      appearance: none;
      cursor: pointer;
      font-family: inherit;
      text-align: left;
    }

    :where(body.wat-app--collection) .processing-detail-drive-button:disabled {
      cursor: not-allowed;
      opacity: 0.62;
    }

    :where(body.wat-app--collection) .processing-detail-drive-button:not(:disabled):hover,
:where(body.wat-app--collection) .processing-detail-drive-button:not(:disabled):focus-visible {
      border-color: #9cddf1;
      background: #f0fbff;
      outline: 0;
    }

    :where(body.wat-app--collection) .processing-detail-drive-button small {
      display: block;
      margin-top: 5px;
      color: var(--wat-blue);
      font-size: 12px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .processing-detail-drive-button:disabled small {
      color: var(--muted);
    }

    :where(body.wat-app--collection) .cards.is-dispatching {
      grid-template-columns: minmax(0, 1fr);
      align-items: stretch;
    }

    :where(body.wat-app--collection) .cards.is-dispatching .panel-blue,
:where(body.wat-app--collection) .cards.is-dispatching .panel-green {
      display: none;
    }

    :where(body.wat-app--collection) .cards.is-dispatching .panel-teal {
      min-height: 760px;
    }

    :where(body.wat-app--collection) .cards.is-dispatching .panel-body {
      min-width: 0;
    }

    :where(body.wat-app--collection) .dispatch-ui {
      display: grid;
      gap: 14px;
      min-width: 0;
    }

    :where(body.wat-app--collection) .dispatch-kpis {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 260px;
      gap: 9px;
      align-items: stretch;
    }

    :where(body.wat-app--collection) .dispatch-metric-rail {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 9px;
      min-width: 0;
    }

    :where(body.wat-app--collection) .dispatch-kpi {
      min-height: 78px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #fff;
      padding: 10px;
      display: grid;
      align-content: center;
      gap: 4px;
      box-shadow: 0 10px 24px rgba(4, 67, 86, 0.04);
    }

    :where(body.wat-app--collection) .dispatch-kpi b {
      color: var(--text);
      font-size: 19px;
      line-height: 1.05;
      font-weight: 760;
    }

    :where(body.wat-app--collection) .dispatch-kpi span {
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
      line-height: 1.25;
    }

    :where(body.wat-app--collection) .dispatch-kpi.is-success {
      border-color: #bdeadd;
      background: #f2fffb;
    }

    :where(body.wat-app--collection) .dispatch-kpi.is-warning {
      border-color: #f3d2a2;
      background: #fffaf0;
    }

    :where(body.wat-app--collection) .dispatch-kpi.is-danger {
      border-color: #f2b8b8;
      background: #fff6f6;
    }

    :where(body.wat-app--collection) .dispatch-kpi.is-info {
      border-color: #b7daf5;
      background: #f2f9ff;
    }

    :where(body.wat-app--collection) .dispatch-grid {
      display: grid;
      gap: 12px;
      min-width: 0;
      align-items: start;
    }

    :where(body.wat-app--collection) .dispatch-grid.is-dual {
      grid-template-columns: minmax(340px, 0.95fr) minmax(560px, 1.45fr);
    }

    :where(body.wat-app--collection) .dispatch-wide {
      display: grid;
      gap: 12px;
      min-width: 0;
      align-content: start;
    }

    :where(body.wat-app--collection) .dispatch-card {
      min-width: 0;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 12px 28px rgba(4, 67, 86, 0.045);
      overflow: hidden;
    }

    :where(body.wat-app--collection) .dispatch-card-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding: 13px 14px;
      border-bottom: 1px solid var(--border);
      background: #fbfdff;
    }

    :where(body.wat-app--collection) .dispatch-card-header h3 {
      margin: 0;
      color: var(--text);
      font-size: 15px;
      font-weight: var(--strong-weight);
      line-height: 1.24;
    }

    :where(body.wat-app--collection) .dispatch-card-header p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
      line-height: 1.35;
    }

    :where(body.wat-app--collection) .dispatch-card-header-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 0 0 auto;
    }

    :where(body.wat-app--collection) .dispatch-card-header[data-dispatch-card-toggle] {
      cursor: pointer;
      user-select: none;
      transition: background 0.16s ease;
    }

    :where(body.wat-app--collection) .dispatch-card-header[data-dispatch-card-toggle]:hover {
      background: #f6fbff;
    }

    :where(body.wat-app--collection) .dispatch-card-header[data-dispatch-card-toggle]:focus-visible {
      outline: 3px solid rgba(0, 127, 222, 0.18);
      outline-offset: -3px;
    }

    :where(body.wat-app--collection) .dispatch-card-chevron {
      width: 22px;
      height: 22px;
      border-radius: 999px;
      color: #587089;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      transition: background 0.16s ease, color 0.16s ease;
    }

    :where(body.wat-app--collection) .dispatch-card-header[data-dispatch-card-toggle]:hover .dispatch-card-chevron {
      color: var(--wat-blue);
      background: rgba(0, 127, 222, 0.08);
    }

    :where(body.wat-app--collection) .dispatch-card-chevron svg,
:where(body.wat-app--collection) .dispatch-card-chevron i {
      width: 16px;
      height: 16px;
      transition: transform 0.16s ease;
    }

    :where(body.wat-app--collection) .dispatch-card-body {
      display: grid;
      gap: 10px;
      padding: 12px;
      min-width: 0;
    }

    :where(body.wat-app--collection) .dispatch-card-body > form {
      min-width: 0;
      max-width: 100%;
    }

    :where(body.wat-app--collection) .dispatch-card.is-collapsed .dispatch-card-header {
      border-bottom: 0;
    }

    :where(body.wat-app--collection) .dispatch-card.is-collapsed .dispatch-card-body {
      display: none;
    }

    :where(body.wat-app--collection) .dispatch-card.is-collapsed .dispatch-card-chevron svg,
:where(body.wat-app--collection) .dispatch-card.is-collapsed .dispatch-card-chevron i {
      transform: rotate(180deg);
    }

    :where(body.wat-app--collection) .dispatch-local-search {
      height: 36px;
      border: 1px solid var(--border-strong);
      border-radius: 10px;
      background: #fff;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 10px;
      color: var(--muted);
      box-shadow: 0 8px 18px rgba(4, 67, 86, 0.035);
    }

    :where(body.wat-app--collection) .dispatch-local-search svg {
      width: 15px;
      height: 15px;
      flex: 0 0 auto;
    }

    :where(body.wat-app--collection) .dispatch-local-search input {
      border: 0;
      outline: 0;
      min-width: 0;
      width: 100%;
      color: var(--text);
      font: inherit;
      font-size: 13px;
      background: transparent;
    }

    :where(body.wat-app--collection) .dispatch-local-search:focus-within {
      border-color: var(--wat-blue);
      box-shadow: 0 0 0 3px rgba(0, 127, 222, 0.09);
    }

    :where(body.wat-app--collection) .dispatch-local-search + .dispatch-table-wrap {
      margin-top: 10px;
    }

    :where(body.wat-app--collection) .dispatch-empty-filter {
      border: 1px dashed #c9d9e4;
      border-radius: 10px;
      padding: 12px;
      color: var(--muted);
      background: #f8fbfd;
      text-align: center;
      font-size: 12px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .dispatch-card.is-primary {
      border-color: #8de7dc;
      box-shadow:
        0 0 0 4px rgba(0, 180, 156, 0.07),
        0 22px 46px rgba(0, 127, 222, 0.11);
    }

    :where(body.wat-app--collection) .dispatch-card.is-primary .dispatch-card-header,
:where(body.wat-app--collection) .dispatch-action-header {
      border: 0;
      background:
        radial-gradient(circle at 88% 0%, rgba(25, 217, 181, 0.34), transparent 34%),
        linear-gradient(135deg, #052965 0%, #006fcf 58%, #00b49c 100%);
      color: #fff;
    }

    :where(body.wat-app--collection) .dispatch-card.is-primary .dispatch-card-header h3,
:where(body.wat-app--collection) .dispatch-card.is-primary .dispatch-card-header p,
:where(body.wat-app--collection) .dispatch-action-header h3,
:where(body.wat-app--collection) .dispatch-action-header p {
      color: #fff;
    }

    :where(body.wat-app--collection) .dispatch-card.is-primary .dispatch-card-header p,
:where(body.wat-app--collection) .dispatch-action-header p {
      opacity: 0.82;
    }

    :where(body.wat-app--collection) .dispatch-card.is-primary .dispatch-card-header[data-dispatch-card-toggle]:hover {
      background:
        radial-gradient(circle at 88% 0%, rgba(25, 217, 181, 0.42), transparent 34%),
        linear-gradient(135deg, #052965 0%, #006fcf 58%, #00b49c 100%);
    }

    :where(body.wat-app--collection) .dispatch-card.is-primary .dispatch-card-chevron {
      color: #fff;
      background: rgba(255, 255, 255, 0.12);
    }

    :where(body.wat-app--collection) .dispatch-card.is-primary .dispatch-card-header[data-dispatch-card-toggle]:hover .dispatch-card-chevron {
      color: #fff;
      background: rgba(255, 255, 255, 0.22);
    }

    :where(body.wat-app--collection) .dispatch-header-actions,
:where(body.wat-app--collection) .dispatch-row-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    :where(body.wat-app--collection) .dispatch-pill {
      display: inline-flex;
      min-height: 26px;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 0 9px;
      border: 1px solid #d8e7ef;
      background: #eef6ff;
      color: #2368a7;
      font-size: 12px;
      font-weight: var(--strong-weight);
      white-space: nowrap;
    }

    :where(body.wat-app--collection) .dispatch-pill.is-success {
      border-color: #bdeadd;
      background: #e6f8f3;
      color: #087b63;
    }

    :where(body.wat-app--collection) .dispatch-pill.is-warning {
      border-color: #f3d5a0;
      background: #fff5df;
      color: #89520a;
    }

    :where(body.wat-app--collection) .dispatch-pill.is-danger {
      border-color: #fecaca;
      background: #fff1f2;
      color: #b3261e;
    }

    :where(body.wat-app--collection) .dispatch-pill.is-muted {
      border-color: #d6e0e8;
      background: #eef4f8;
      color: #607287;
    }

    :where(body.wat-app--collection) .dispatch-task-list {
      display: grid;
      gap: 9px;
    }

    :where(body.wat-app--collection) .dispatch-task {
      border: 1px solid #dbe8f0;
      border-radius: 11px;
      background: #fff;
      padding: 10px;
      display: grid;
      gap: 8px;
    }

    :where(body.wat-app--collection) .dispatch-dd-group {
      border: 1px solid #dbe8f0;
      border-radius: 13px;
      background: #fff;
      padding: 10px;
      display: grid;
      gap: 9px;
      min-width: 0;
    }

    :where(body.wat-app--collection) .dispatch-dd-group.is-blocking {
      border-color: #f2b8b8;
      background: #fff8f8;
    }

    :where(body.wat-app--collection) .dispatch-dd-group.is-cleared {
      border-color: #bdeadd;
      background: #f2fffb;
    }

    :where(body.wat-app--collection) .dispatch-dd-group-header {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: start;
      min-width: 0;
    }

    :where(body.wat-app--collection) .dispatch-dd-subtasks {
      display: grid;
      gap: 8px;
      min-width: 0;
    }

    :where(body.wat-app--collection) .dispatch-dd-subtask {
      background: rgba(255, 255, 255, 0.78);
      box-shadow: 0 1px 0 rgba(15, 32, 56, 0.03);
    }

    :where(body.wat-app--collection) .dispatch-dd-group.is-cleared .dispatch-dd-subtask {
      border-color: #d5eee4;
    }

    :where(body.wat-app--collection) .dispatch-task.is-dd {
      gap: 7px;
      padding: 9px 10px;
    }

    :where(body.wat-app--collection) .dispatch-task .dispatch-method-select {
      width: 100%;
    }

    :where(body.wat-app--collection) .dispatch-method-row {
      display: flex;
      gap: 7px;
      align-items: center;
      min-width: 0;
    }

    :where(body.wat-app--collection) .dispatch-method-row .dispatch-method-select {
      flex: 1 1 auto;
      min-width: 128px;
    }

    :where(body.wat-app--collection) .dispatch-method-row .button {
      flex: 0 0 auto;
      min-height: 32px;
      padding: 0 9px;
      font-size: 12px;
    }

    :where(body.wat-app--collection) .dispatch-task-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: start;
    }

    :where(body.wat-app--collection) .dispatch-task-grid .dispatch-product {
      min-width: 0;
    }

    :where(body.wat-app--collection) .dispatch-task.is-blocking {
      border-color: #f2b8b8;
      background: #fff8f8;
    }

    :where(body.wat-app--collection) .dispatch-task.is-cleared {
      border-color: #bdeadd;
      background: #f2fffb;
    }

    :where(body.wat-app--collection) .dispatch-cleared-card {
      border-color: #cfeadd;
      background: linear-gradient(180deg, #fbfffd, #f6fffb);
    }

    :where(body.wat-app--collection) .dispatch-cleared-card .dispatch-card-header {
      background: #f6fffb;
    }

    :where(body.wat-app--collection) .dispatch-cleared-card .dispatch-card-header[data-dispatch-card-toggle]:hover {
      background: #f1fff9;
    }

    :where(body.wat-app--collection) .dispatch-cleared-list {
      display: grid;
      gap: 8px;
    }

    :where(body.wat-app--collection) .dispatch-cleared-task {
      border: 1px solid #d5eee4;
      border-radius: 11px;
      background: #fff;
      padding: 9px 10px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
    }

    :where(body.wat-app--collection) .dispatch-cleared-task .dispatch-compact-actions {
      justify-content: flex-end;
    }

    :where(body.wat-app--collection) .dispatch-table-wrap {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      overflow: auto;
      border: 1px solid var(--border);
      border-radius: 11px;
      background: #fff;
    }

    :where(body.wat-app--collection) .dispatch-table {
      width: 100%;
      min-width: 720px;
      border-collapse: collapse;
    }

    :where(body.wat-app--collection) .dispatch-table th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: #f4f8fb;
      color: #65758b;
      font-size: 11px;
      font-weight: 820;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      text-align: left;
      padding: 10px;
      border-bottom: 1px solid var(--border);
      white-space: nowrap;
    }

    :where(body.wat-app--collection) .dispatch-table td {
      padding: 9px 10px;
      border-bottom: 1px solid var(--border);
      vertical-align: middle;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .dispatch-table tr:last-child td {
      border-bottom: 0;
    }

    :where(body.wat-app--collection) .dispatch-table tbody tr:hover td {
      background: #f7fcff;
    }

    :where(body.wat-app--collection) .dispatch-table tr.is-selected td {
      background: #f2fbff;
    }

    :where(body.wat-app--collection) .dispatch-product {
      display: grid;
      gap: 2px;
      min-width: 0;
      font-weight: var(--strong-weight);
    }

    :where(body.wat-app--collection) .dispatch-product small {
      color: var(--muted);
      font-weight: var(--label-weight);
      line-height: 1.25;
    }

    :where(body.wat-app--collection) .dispatch-product small.is-serial-line {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    :where(body.wat-app--collection) .dispatch-qty-input {
      width: 74px;
      height: 32px;
      border: 1px solid #d4e2ea;
      border-radius: 8px;
      background: #fff;
      padding: 0 8px;
      text-align: right;
      color: var(--text);
    }

    :where(body.wat-app--collection) .dispatch-next-card {
      display: grid;
      gap: 10px;
      border: 1px solid #bfe9e0;
      border-radius: 12px;
      background: linear-gradient(135deg, #f2fffb, #ffffff);
      padding: 12px;
    }

    :where(body.wat-app--collection) .dispatch-next-card .button {
      width: 100%;
      justify-content: center;
      min-height: 40px;
    }

    :where(body.wat-app--collection) .dispatch-kpis .dispatch-next-card {
      min-height: 78px;
      padding: 10px;
      align-content: center;
    }

    :where(body.wat-app--collection) .dispatch-footer-row {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      padding-top: 10px;
      border-top: 1px solid var(--border);
    }

    :where(body.wat-app--collection) .dispatch-footer-row small {
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
      line-height: 1.35;
    }

    :where(body.wat-app--collection) .dispatch-step-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      min-width: 0;
    }

    :where(body.wat-app--collection) .dispatch-step-card {
      border: 1px solid #dbe8f0;
      border-radius: 11px;
      background: #fbfdff;
      padding: 10px;
      display: grid;
      gap: 6px;
      min-width: 0;
    }

    :where(body.wat-app--collection) .dispatch-step-card.is-success {
      border-color: #bdeadd;
      background: #f2fffb;
    }

    :where(body.wat-app--collection) .dispatch-step-card.is-warning {
      border-color: #f3d2a2;
      background: #fffaf0;
    }

    :where(body.wat-app--collection) .dispatch-step-card b {
      color: var(--text);
      font-size: 14px;
      font-weight: var(--strong-weight);
    }

    :where(body.wat-app--collection) .dispatch-step-card span {
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
      line-height: 1.32;
    }

    :where(body.wat-app--collection) .dispatch-partner-dd-status {
      align-content: center;
    }

    :where(body.wat-app--collection) .dispatch-status-line {
      display: flex;
      align-items: center;
      gap: 7px;
      color: var(--text);
      font-size: 13px;
      font-weight: var(--strong-weight);
      line-height: 1.3;
    }

    :where(body.wat-app--collection) .dispatch-status-line span {
      color: inherit;
      font-size: inherit;
      font-weight: inherit;
      line-height: inherit;
    }

    :where(body.wat-app--collection) .dispatch-status-line svg {
      width: 16px;
      height: 16px;
      flex: 0 0 auto;
    }

    :where(body.wat-app--collection) .dispatch-status-line.is-success {
      color: #087b63;
    }

    :where(body.wat-app--collection) .dispatch-status-line.is-warning {
      color: #89520a;
    }

    :where(body.wat-app--collection) .dispatch-dd-override {
      margin-top: 3px;
      display: flex;
      gap: 7px;
      align-items: flex-start;
      color: var(--text);
      font-size: 12px;
      font-weight: var(--label-weight);
      line-height: 1.3;
    }

    :where(body.wat-app--collection) .dispatch-dd-override input {
      margin-top: 2px;
      flex: 0 0 auto;
    }

    :where(body.wat-app--collection) .dispatch-table.is-dd {
      min-width: 980px;
    }

    :where(body.wat-app--collection) .dispatch-table.is-stock {
      min-width: 850px;
    }

    :where(body.wat-app--collection) .dispatch-table.is-batch {
      min-width: 780px;
    }

    :where(body.wat-app--collection) .dispatch-table.is-values {
      min-width: 820px;
    }

    :where(body.wat-app--collection) .dispatch-method-select,
:where(body.wat-app--collection) .dispatch-partner-select {
      height: 32px;
      border: 1px solid #d4e2ea;
      border-radius: 8px;
      background: #fff;
      color: var(--text);
      padding: 0 8px;
      min-width: 0;
    }

    :where(body.wat-app--collection) .dispatch-evidence-actions {
      display: flex;
      gap: 6px;
      align-items: center;
      flex-wrap: wrap;
    }

    :where(body.wat-app--collection) .dispatch-evidence-proof-set {
      display: flex;
      gap: 6px;
      align-items: center;
      flex-wrap: wrap;
      min-width: 0;
    }

    :where(body.wat-app--collection) .dispatch-evidence-proof-set.has-evidence {
      display: grid;
      gap: 6px;
      align-items: center;
      justify-items: start;
      width: 100%;
    }

    :where(body.wat-app--collection) .dispatch-evidence-proof-row {
      display: inline-flex;
      gap: 6px;
      align-items: center;
      min-width: 0;
    }

    :where(body.wat-app--collection) .dispatch-evidence-proof-row.has-upload {
      display: inline-flex;
      justify-content: flex-start;
      justify-self: start;
      max-width: 100%;
    }

    :where(body.wat-app--collection) .dispatch-evidence-actions .button {
      min-height: 30px;
      padding: 0 8px;
      font-size: 12px;
    }

    :where(body.wat-app--collection) .dispatch-file-form,
:where(body.wat-app--collection) .dispatch-inline-form {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin: 0;
      min-width: 0;
    }

    :where(body.wat-app--collection) .dispatch-file-form .button {
      position: relative;
      overflow: hidden;
      cursor: pointer;
    }

    :where(body.wat-app--collection) .dispatch-file-input {
      position: absolute;
      inset: 0;
      opacity: 0;
      cursor: pointer;
    }

    :where(body.wat-app--collection) .dispatch-evidence-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      min-width: 0;
      max-width: 220px;
      font-size: 12px;
      font-weight: 700;
      color: var(--blue-700);
    }

    :where(body.wat-app--collection) .dispatch-evidence-link a {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: inherit;
    }

    :where(body.wat-app--collection) .dispatch-dd-proof-row {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: space-between;
      min-width: 0;
    }

    :where(body.wat-app--collection) .dispatch-dd-proof-row .dispatch-evidence-actions {
      min-width: 0;
      flex: 1 1 auto;
    }

    :where(body.wat-app--collection) .dispatch-compact-actions {
      display: flex;
      gap: 6px;
      align-items: center;
      flex-wrap: wrap;
    }

    :where(body.wat-app--collection) .dispatch-compact-actions .button {
      min-height: 30px;
      padding: 0 8px;
      font-size: 12px;
    }

    :where(body.wat-app--collection) .dispatch-empty-state {
      border: 1px dashed #cbd9e6;
      border-radius: 11px;
      padding: 16px;
      text-align: center;
      color: var(--muted);
      font-weight: 800;
      background: #f8fbfe;
    }

    :where(body.wat-app--collection) .dispatch-date-input {
      width: 100%;
      border: 0;
      color: var(--text);
      font: inherit;
      font-weight: 800;
      background: transparent;
      padding: 0;
    }

    :where(body.wat-app--collection) .dispatch-values-summary {
      display: grid;
      gap: 8px;
      font-size: 12px;
      color: var(--text);
    }

    :where(body.wat-app--collection) .dispatch-values-summary > div {
      display: flex;
      gap: 6px;
      align-items: center;
      flex-wrap: wrap;
    }

    :where(body.wat-app--collection) .dispatch-product.is-blocked {
      color: #b3261e;
    }

    :where(body.wat-app--collection) .dispatch-batch-card {
      border: 1px solid #dbe8f0;
      border-radius: 11px;
      background: #fff;
      padding: 10px;
      display: grid;
      gap: 9px;
    }

    :where(body.wat-app--collection) .dispatch-step-grid + .feedback + .dispatch-row-actions,
:where(body.wat-app--collection) .dispatch-step-grid + .dispatch-row-actions {
      margin-top: 12px;
    }

    :where(body.wat-app--collection) .dispatch-batch-card .dispatch-table-wrap + .feedback + .dispatch-row-actions,
:where(body.wat-app--collection) .dispatch-batch-card .dispatch-table-wrap + .dispatch-row-actions {
      margin-top: 12px;
    }

    :where(body.wat-app--collection) .dispatch-batch-card.is-pending {
      border-color: #f3d2a2;
      background: #fffaf0;
    }

    :where(body.wat-app--collection) .dispatch-batch-card.is-complete {
      border-color: #bdeadd;
      background: #f4fffb;
    }

    :where(body.wat-app--collection) .dispatch-batch-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: flex-start;
    }

    :where(body.wat-app--collection) .dispatch-batch-head b {
      color: var(--text);
      font-weight: var(--strong-weight);
    }

    :where(body.wat-app--collection) .dispatch-batch-head small {
      display: block;
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
      margin-top: 2px;
    }

    :where(body.wat-app--collection) .dispatch-progress {
      height: 8px;
      border-radius: 999px;
      background: #e7eef4;
      overflow: hidden;
    }

    :where(body.wat-app--collection) .dispatch-progress span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: var(--primary-gradient);
    }

    :where(body.wat-app--collection) .dispatch-values-form {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    :where(body.wat-app--collection) .dispatch-values-form label {
      display: grid;
      gap: 5px;
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .dispatch-values-form input {
      height: 32px;
      border: 1px solid #d4e2ea;
      border-radius: 8px;
      padding: 0 8px;
      color: var(--text);
    }

    :where(body.wat-app--collection) .dispatch-batch-card.is-editing {
      border-color: #86dcca;
      background: linear-gradient(180deg, #f7fffc, #ffffff);
      box-shadow: 0 18px 42px rgba(16, 170, 148, 0.12);
    }

    :where(body.wat-app--collection) .dispatch-values-editor-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    :where(body.wat-app--collection) .dispatch-values-editor-section,
:where(body.wat-app--collection) .dispatch-values-item {
      border: 1px solid #dbe8f0;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.82);
      padding: 10px;
      display: grid;
      gap: 10px;
      min-width: 0;
    }

    :where(body.wat-app--collection) .dispatch-values-editor-head,
:where(body.wat-app--collection) .dispatch-values-item-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 10px;
      min-width: 0;
    }

    :where(body.wat-app--collection) .dispatch-values-editor-head h4 {
      margin: 0;
      color: var(--text);
      font-size: 14px;
      font-weight: var(--strong-weight);
    }

    :where(body.wat-app--collection) .dispatch-values-editor-head p {
      margin: 2px 0 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .dispatch-values-item-list {
      display: grid;
      gap: 8px;
    }

    :where(body.wat-app--collection) .dispatch-values-list {
      display: grid;
      gap: 7px;
      min-width: 0;
    }

    :where(body.wat-app--collection) .dispatch-values-list .no-value {
      color: var(--muted);
      font-size: 12px;
      font-style: normal;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .dispatch-values-list .value-row {
      border: 1px solid #dbe8f0;
      border-radius: 9px;
      background: #fbfdff;
      padding: 7px 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-width: 0;
      color: var(--text);
      font-size: 12px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .dispatch-values-list .value-row > span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    :where(body.wat-app--collection) .dispatch-values-list .value-row .a {
      border: 0;
      background: transparent;
      padding: 0;
      color: var(--primary);
      font: inherit;
      font-weight: var(--strong-weight);
      cursor: pointer;
    }

    :where(body.wat-app--collection) .dispatch-values-list form.value-row {
      justify-content: flex-start;
      flex-wrap: wrap;
    }

    :where(body.wat-app--collection) .dispatch-values-list .label-row {
      display: flex;
      align-items: center;
      gap: 7px;
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .dispatch-values-list input,
:where(body.wat-app--collection) .dispatch-values-list .select-button,
:where(body.wat-app--collection) .dispatch-values-list .popup input {
      border: 1px solid #d4e2ea;
      border-radius: 8px;
      min-height: 34px;
      padding: 0 9px;
      color: var(--text);
      background: #fff;
      font: inherit;
      font-size: 12px;
    }

    :where(body.wat-app--collection) .dispatch-values-list .select-button {
      display: inline-flex;
      align-items: center;
      min-width: 180px;
      text-align: left;
      cursor: pointer;
    }

    :where(body.wat-app--collection) .dispatch-values-list .popup {
      position: absolute;
      z-index: 80;
      margin-top: 6px;
      border: 1px solid #d6e5ee;
      border-radius: 11px;
      background: #fff;
      box-shadow: 0 18px 46px rgba(18, 42, 66, 0.16);
      padding: 10px;
      display: grid;
      gap: 8px;
      min-width: 240px;
    }

    :where(body.wat-app--collection) .dispatch-values-list .popup label {
      display: grid;
      gap: 5px;
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .dispatch-values-list .popup-list {
      display: grid;
      gap: 4px;
      max-height: 220px;
      overflow: auto;
    }

    :where(body.wat-app--collection) .dispatch-values-list .popup-button,
:where(body.wat-app--collection) .dispatch-values-list .button-blue,
:where(body.wat-app--collection) .dispatch-values-list .button-blue-2 {
      border: 1px solid #dbe8f0;
      border-radius: 8px;
      background: #f8fbfe;
      color: var(--text);
      min-height: 32px;
      padding: 0 10px;
      font: inherit;
      font-size: 12px;
      font-weight: var(--label-weight);
      cursor: pointer;
      text-align: left;
    }

    :where(body.wat-app--collection) .dispatch-values-list .button-blue,
:where(body.wat-app--collection) .dispatch-values-list .button-blue-2 {
      background: #eaf5ff;
      color: var(--primary);
      text-align: center;
      font-weight: var(--strong-weight);
    }

    :where(body.wat-app--collection) .dispatch-values-list .button-delete-row {
      width: 28px;
      height: 28px;
      border: 1px solid #ffd2d2;
      border-radius: 999px;
      background: #fff5f5;
      color: #d92d20;
      display: inline-grid;
      place-items: center;
      cursor: pointer;
      flex: 0 0 auto;
    }

    :where(body.wat-app--collection) .dispatch-values-list .button-delete-row:hover {
      background: #d92d20;
      color: #fff;
    }

    :where(body.wat-app--collection) .dispatch-link-button {
      border: 0;
      background: transparent;
      color: var(--primary);
      padding: 0;
      font: inherit;
      font-weight: var(--strong-weight);
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    :where(body.wat-app--collection) .dispatch-group-modal {
      width: min(980px, calc(100vw - 32px));
      overflow-x: hidden;
      overflow-y: auto;
    }

    :where(body.wat-app--collection) .dispatch-group-modal-head {
      display: grid;
      gap: 6px;
    }

    :where(body.wat-app--collection) .dispatch-group-modal-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      min-width: 0;
    }

    :where(body.wat-app--collection) .dispatch-group-modal-panel {
      display: grid;
      gap: 12px;
      align-content: start;
      min-width: 0;
      border: 1px solid #dbe8f0;
      border-radius: 11px;
      background: #fbfdff;
      padding: 12px;
    }

    :where(body.wat-app--collection) .dispatch-group-modal-batches {
      grid-column: 1 / -1;
    }

    :where(body.wat-app--collection) .dispatch-group-modal-percentages {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    :where(body.wat-app--collection) .dispatch-group-modal-percentages .feedback {
      grid-column: 1 / -1;
    }

    :where(body.wat-app--collection) .dispatch-group-modal-amount,
:where(body.wat-app--collection) .dispatch-group-modal-values,
:where(body.wat-app--collection) .dispatch-group-modal-attachments,
:where(body.wat-app--collection) .dispatch-group-modal-upload {
      display: grid;
      gap: 9px;
      min-width: 0;
    }

    :where(body.wat-app--collection) .dispatch-group-modal-amount label,
:where(body.wat-app--collection) .dispatch-group-modal-upload label,
:where(body.wat-app--collection) .dispatch-group-modal-attachment-fields label,
:where(body.wat-app--collection) .dispatch-group-modal-add-value-row label {
      display: grid;
      gap: 5px;
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .dispatch-group-modal-amount input,
:where(body.wat-app--collection) .dispatch-group-modal-upload input,
:where(body.wat-app--collection) .dispatch-group-modal-upload select,
:where(body.wat-app--collection) .dispatch-group-modal-attachment-fields input,
:where(body.wat-app--collection) .dispatch-group-modal-attachment-fields select,
:where(body.wat-app--collection) .dispatch-group-modal-add-value-row input {
      width: 100%;
      min-width: 0;
      min-height: 34px;
      border: 1px solid #d4e2ea;
      border-radius: 8px;
      background: #fff;
      color: var(--text);
      padding: 0 9px;
      font: inherit;
      font-size: 12px;
    }

    :where(body.wat-app--collection) .dispatch-group-modal-add-value-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(110px, 150px) auto;
      gap: 8px;
      align-items: end;
      min-width: 0;
    }

    :where(body.wat-app--collection) .dispatch-group-modal-upload-controls,
:where(body.wat-app--collection) .dispatch-group-modal-attachment-fields {
      display: grid;
      grid-template-columns: minmax(116px, 135px) auto;
      gap: 8px;
      align-items: end;
      min-width: 0;
    }

    :where(body.wat-app--collection) .dispatch-group-modal-upload-controls.has-certificate,
:where(body.wat-app--collection) .dispatch-group-modal-attachment-fields.has-certificate {
      grid-template-columns: minmax(116px, 135px) minmax(145px, 1fr) auto;
    }

    :where(body.wat-app--collection) .dispatch-group-modal-add-value-row > div,
:where(body.wat-app--collection) .dispatch-group-modal-upload-controls > label,
:where(body.wat-app--collection) .dispatch-group-modal-attachment-fields > label {
      min-width: 0;
    }

    :where(body.wat-app--collection) .dispatch-group-modal-upload-controls > button,
:where(body.wat-app--collection) .dispatch-group-modal-attachment-fields > button {
      display: inline-flex;
      min-height: 38px;
      align-items: center;
      justify-content: center;
      gap: 8px;
      justify-self: end;
      white-space: nowrap;
      min-width: max-content;
      padding-inline: 14px;
    }

    :where(body.wat-app--collection) .dispatch-group-modal-upload-controls > button svg,
:where(body.wat-app--collection) .dispatch-group-modal-upload-controls > button i[data-lucide] {
      width: 16px;
      height: 16px;
      color: currentColor;
      stroke: currentColor;
      stroke-width: 2.4;
      flex: 0 0 auto;
    }

    :where(body.wat-app--collection) .dispatch-group-modal-add-value-row .select-button {
      width: 100%;
      justify-content: flex-start;
    }

    :where(body.wat-app--collection) .dispatch-group-modal-attachment {
      display: grid;
      gap: 7px;
      min-width: 0;
      border: 1px solid #dbe8f0;
      border-radius: 10px;
      background: #fff;
      padding: 10px;
    }

    :where(body.wat-app--collection) .dispatch-group-modal-upload input[type="file"] {
      min-height: 42px;
      padding: 7px 10px;
      line-height: 1.6;
    }

    :where(body.wat-app--collection) .dispatch-group-modal-attachment-file {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      min-width: 0;
    }

    :where(body.wat-app--collection) .dispatch-group-modal-attachment-file a,
:where(body.wat-app--collection) .dispatch-group-modal-link {
      min-width: 0;
      color: var(--primary);
      font-weight: var(--strong-weight);
      text-decoration: underline;
      text-underline-offset: 2px;
      overflow-wrap: anywhere;
    }

    :where(body.wat-app--collection) .dispatch-group-modal .button-delete-row {
      width: 28px;
      height: 28px;
      border: 1px solid #ffd2d2;
      border-radius: 999px;
      background: #fff5f5;
      color: #d92d20;
      display: inline-grid;
      place-items: center;
      cursor: pointer;
      flex: 0 0 auto;
      padding: 0;
    }

    :where(body.wat-app--collection) .dispatch-group-modal .button-delete-row:hover {
      background: #d92d20;
      color: #fff;
    }

    :where(body.wat-app--collection) .dispatch-group-modal .button-delete-row svg,
:where(body.wat-app--collection) .dispatch-group-modal .button-delete-row i[data-lucide] {
      width: 15px;
      height: 15px;
      color: currentColor;
      stroke: currentColor;
      stroke-width: 2.5;
    }

    :where(body.wat-app--collection) .dispatch-warning-state {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      border: 1px solid #f3d5a0;
      border-radius: 11px;
      background: #fff5df;
      color: #89520a;
      padding: 12px;
      font-size: 13px;
      font-weight: var(--strong-weight);
      line-height: 1.35;
    }

    :where(body.wat-app--collection) .dispatch-warning-state svg,
:where(body.wat-app--collection) .dispatch-warning-state i[data-lucide] {
      width: 17px;
      height: 17px;
      color: currentColor;
      stroke: currentColor;
      stroke-width: 2.4;
    }

    :where(body.wat-app--collection) .dispatch-stock-summary {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    :where(body.wat-app--collection) .dispatch-stock-summary div {
      border: 1px solid #dbe8f0;
      border-radius: 10px;
      background: #fbfdff;
      padding: 9px;
      display: grid;
      gap: 3px;
    }

    :where(body.wat-app--collection) .dispatch-stock-summary b {
      color: var(--text);
      font-weight: var(--strong-weight);
    }

    :where(body.wat-app--collection) .dispatch-stock-summary span {
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .invoice-ui {
      display: grid;
      gap: 14px;
    }

    :where(body.wat-app--collection) .invoice-kpis {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 10px;
    }

    :where(body.wat-app--collection) .invoice-kpi {
      border: 1px solid var(--border);
      border-radius: 12px;
      background: linear-gradient(180deg, #fff, #f8fcff);
      padding: 12px;
      box-shadow: var(--soft-shadow);
    }

    :where(body.wat-app--collection) .invoice-kpi b {
      display: block;
      color: var(--text);
      font-size: 20px;
      line-height: 1.1;
    }

    :where(body.wat-app--collection) .invoice-kpi span {
      display: block;
      margin-top: 5px;
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .invoice-kpi.is-warning {
      border-color: #f0d8a2;
      background: linear-gradient(180deg, #fffaf0, #fffdf7);
    }

    :where(body.wat-app--collection) .invoice-kpi.is-success {
      border-color: #bdebd7;
      background: linear-gradient(180deg, #f5fffb, #fff);
    }

    :where(body.wat-app--collection) .invoice-grid {
      display: grid;
      gap: 12px;
    }

    :where(body.wat-app--collection) .invoice-grid.is-rail {
      grid-template-columns: minmax(0, 1.35fr) 420px;
      align-items: start;
    }

    :where(body.wat-app--collection) .invoice-card {
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #fff;
      box-shadow: var(--soft-shadow);
      overflow: hidden;
    }

    :where(body.wat-app--collection) .invoice-card.is-action {
      border-color: #83e4dc;
      box-shadow:
        0 0 0 4px rgba(0, 180, 156, 0.07),
        0 22px 46px rgba(0, 127, 222, 0.11);
    }

    :where(body.wat-app--collection) .invoice-card-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 15px;
      border-bottom: 1px solid var(--border);
      background: #fbfdff;
    }

    :where(body.wat-app--collection) .invoice-card.is-action .invoice-card-head {
      border: 0;
      color: #fff;
      background:
        radial-gradient(circle at 88% 0%, rgba(25, 217, 181, 0.34), transparent 34%),
        linear-gradient(135deg, #052965 0%, #006fcf 58%, #00b49c 100%);
    }

    :where(body.wat-app--collection) .invoice-card-head h3 {
      margin: 0;
      color: var(--text);
      font-size: 15px;
      font-weight: var(--strong-weight);
      line-height: 1.22;
    }

    :where(body.wat-app--collection) .invoice-card-head p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
      line-height: 1.35;
    }

    :where(body.wat-app--collection) .invoice-card.is-action .invoice-card-head h3,
:where(body.wat-app--collection) .invoice-card.is-action .invoice-card-head p {
      color: #fff;
    }

    :where(body.wat-app--collection) .invoice-card.is-action .invoice-card-head p {
      opacity: 0.84;
    }

    :where(body.wat-app--collection) .invoice-card-body {
      display: grid;
      gap: 12px;
      padding: 13px;
    }

    :where(body.wat-app--collection) .invoice-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 25px;
      padding: 0 9px;
      border-radius: 999px;
      border: 1px solid #cfe1eb;
      background: #f5fbff;
      color: #39556b;
      font-size: 11px;
      font-weight: var(--strong-weight);
      white-space: nowrap;
    }

    :where(body.wat-app--collection) .invoice-pill.is-success {
      border-color: #a8e5cf;
      background: #eafff7;
      color: #117a57;
    }

    :where(body.wat-app--collection) .invoice-pill.is-warning {
      border-color: #f2d59a;
      background: #fff7e4;
      color: #8a5d08;
    }

    :where(body.wat-app--collection) .invoice-pill.is-danger {
      border-color: #ffc7c7;
      background: #fff0f0;
      color: #b43434;
    }

    :where(body.wat-app--collection) .invoice-field-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    :where(body.wat-app--collection) .invoice-field-grid.is-three {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    :where(body.wat-app--collection) .invoice-field {
      display: grid;
      gap: 6px;
      color: var(--text);
      font-size: 12px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .invoice-field input,
:where(body.wat-app--collection) .invoice-field select {
      width: 100%;
      min-height: 38px;
      border: 1px solid var(--border-strong);
      border-radius: 10px;
      background: #fff;
      color: var(--text);
      padding: 0 10px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .invoice-money-input,
:where(body.wat-app--collection) .workflow-money-input {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      min-height: 38px;
      border: 1px solid var(--border-strong);
      border-radius: 10px;
      background: #fff;
      overflow: hidden;
    }

    :where(body.wat-app--collection) .workflow-input-field .workflow-money-input {
      display: grid;
    }

    :where(body.wat-app--collection) .invoice-money-input span,
:where(body.wat-app--collection) .workflow-money-input span {
      padding: 0 9px;
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--strong-weight);
    }

    :where(body.wat-app--collection) .workflow-input-field .workflow-money-input span {
      display: flex;
      align-items: center;
      min-height: 38px;
    }

    :where(body.wat-app--collection) .invoice-money-input input,
:where(body.wat-app--collection) .workflow-money-input input {
      border: 0;
      border-left: 1px solid #e4efef;
      border-radius: 0;
    }

    :where(body.wat-app--collection) .workflow-money-input:focus-within,
:where(body.wat-app--collection) .invoice-money-input:focus-within {
      border-color: #7db7ff;
      box-shadow: 0 0 0 3px rgba(25, 124, 242, 0.14);
    }

    :where(body.wat-app--collection) .workflow-money-input input:focus,
:where(body.wat-app--collection) .invoice-money-input input:focus {
      box-shadow: none;
    }

    :where(body.wat-app--collection) .invoice-readonly-value {
      min-height: 38px;
      display: flex;
      align-items: center;
      border: 1px solid #d9e8e8;
      border-radius: 10px;
      background: #f6fbfd;
      color: var(--wat-blue-deep);
      padding: 0 10px;
      font-weight: var(--strong-weight);
    }

    :where(body.wat-app--collection) .receipt-status.is-generated {
      background: #e7f9f3;
      color: #086754;
    }

    :where(body.wat-app--collection) .invoice-table-wrap {
      overflow: auto;
      border: 1px solid #e3eeee;
      border-radius: 11px;
      background: #fff;
    }

    :where(body.wat-app--collection) .invoice-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 620px;
    }

    :where(body.wat-app--collection) .invoice-table th {
      height: 36px;
      padding: 0 10px;
      background: #f6fbfd;
      color: #607586;
      border-bottom: 1px solid #e4eeee;
      text-align: left;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0;
    }

    :where(body.wat-app--collection) .invoice-table td {
      padding: 9px 10px;
      border-bottom: 1px solid #edf3f3;
      color: var(--text);
      font-size: 12px;
      vertical-align: middle;
    }

    :where(body.wat-app--collection) .invoice-table tr:last-child td {
      border-bottom: 0;
    }

    :where(body.wat-app--collection) .invoice-table input {
      width: 100%;
      min-height: 34px;
      border: 1px solid #d9e8e8;
      border-radius: 9px;
      background: #fff;
      color: var(--text);
      padding: 0 9px;
      font-size: 12px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .invoice-line-title {
      display: grid;
      gap: 3px;
      font-weight: var(--strong-weight);
    }

    :where(body.wat-app--collection) .invoice-line-title small {
      color: var(--muted);
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .invoice-add-row {
      display: grid;
      grid-template-columns: minmax(0, 1.5fr) 140px auto;
      gap: 8px;
      align-items: end;
    }

    :where(body.wat-app--collection) .invoice-final-stack {
      display: grid;
      gap: 10px;
    }

    :where(body.wat-app--collection) .invoice-total-line {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 9px 10px;
      border-radius: 10px;
      background: #f7fbfd;
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .invoice-total-line b {
      color: var(--text);
      font-size: 14px;
    }

    :where(body.wat-app--collection) .invoice-total-line.is-strong {
      background: #eaf7ff;
      color: #254f6c;
    }

    :where(body.wat-app--collection) .invoice-total-line.is-strong b {
      color: var(--wat-blue-deep);
      font-size: 20px;
    }

    :where(body.wat-app--collection) .invoice-warning {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      border: 1px solid #f0d8a2;
      border-radius: 10px;
      background: #fff8e8;
      color: #74510d;
      padding: 10px;
      font-size: 12px;
      font-weight: var(--label-weight);
      line-height: 1.35;
    }

    :where(body.wat-app--collection) .invoice-warning svg {
      width: 16px;
      height: 16px;
      flex: 0 0 auto;
      margin-top: 1px;
    }

    :where(body.wat-app--collection) .data-destruction-evidence-file-picker {
      position: relative;
      overflow: hidden;
    }

    :where(body.wat-app--collection) .data-destruction-evidence-file-input {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer;
    }

    :where(body.wat-app--collection) .invoice-doc-list,
:where(body.wat-app--collection) .invoice-batch-list {
      display: grid;
      gap: 8px;
    }

    :where(body.wat-app--collection) .invoice-doc-item,
:where(body.wat-app--collection) .invoice-batch-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      border: 1px solid #e0ecec;
      border-radius: 11px;
      background: #fff;
      padding: 9px 10px;
    }

    :where(body.wat-app--collection) .invoice-doc-item small,
:where(body.wat-app--collection) .invoice-batch-item small {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 11px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .invoice-doc-link {
      display: block;
      min-width: 0;
      color: var(--ink);
      text-decoration: none;
      overflow-wrap: anywhere;
    }

    :where(body.wat-app--collection) .invoice-doc-link:hover b {
      color: var(--brand);
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    :where(body.wat-app--collection) .invoice-batch-amount {
      width: 128px;
    }

    :where(body.wat-app--collection) .payment-ui {
      display: grid;
      gap: 13px;
    }

    :where(body.wat-app--collection) .payment-hero {
      display: grid;
      gap: 13px;
      border: 1px solid #cfe8ee;
      border-radius: 13px;
      background:
        radial-gradient(circle at 90% 0%, rgba(0, 180, 156, 0.12), transparent 34%),
        linear-gradient(180deg, #f8fdff, #fff);
      padding: 14px;
      box-shadow: var(--soft-shadow);
    }

    :where(body.wat-app--collection) .payment-hero-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    :where(body.wat-app--collection) .payment-hero h3 {
      margin: 0;
      color: var(--text);
      font-size: 17px;
      font-weight: 820;
    }

    :where(body.wat-app--collection) .payment-hero p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
      line-height: 1.4;
    }

    :where(body.wat-app--collection) .payment-due-focus {
      display: grid;
      gap: 5px;
      border: 1px solid #cceee8;
      border-radius: 12px;
      background: linear-gradient(135deg, #effffc, #f7fbff);
      padding: 15px;
    }

    :where(body.wat-app--collection) .payment-due-focus b {
      display: block;
      color: var(--text);
      font-size: 32px;
      line-height: 1.1;
      letter-spacing: 0;
    }

    :where(body.wat-app--collection) .payment-due-focus span {
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .payment-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 8px;
      flex-wrap: nowrap;
    }

    :where(body.wat-app--collection) .payment-actions .button-light {
      min-height: 34px;
      padding: 0 10px;
      font-size: 12px;
    }

    :where(body.wat-app--collection) .payment-actions .button {
      white-space: nowrap;
    }

    :where(body.wat-app--collection) .invoice-batch-details {
      margin-top: 12px;
    }

    :where(body.wat-app--collection) details.invoice-batch-details {
      display: block;
      overflow: hidden;
    }

    :where(body.wat-app--collection) .invoice-secondary-panel {
      min-height: 0;
      border-top-color: var(--wat-teal);
    }

    :where(body.wat-app--collection) details.invoice-secondary-panel > summary.panel-header {
      cursor: pointer;
      list-style: none;
    }

    :where(body.wat-app--collection) details.invoice-secondary-panel > summary.panel-header::-webkit-details-marker {
      display: none;
    }

    :where(body.wat-app--collection) details.invoice-secondary-panel > summary.panel-header .invoice-pill {
      margin-left: auto;
    }

    :where(body.wat-app--collection) details.invoice-secondary-panel > summary.panel-header::after {
      content: "";
      width: 9px;
      height: 9px;
      flex: 0 0 auto;
      border-right: 2px solid #64748b;
      border-bottom: 2px solid #64748b;
      transform: rotate(45deg);
      transition: transform 160ms ease, border-color 160ms ease;
    }

    :where(body.wat-app--collection) details.invoice-secondary-panel[open] > summary.panel-header::after {
      transform: rotate(-135deg);
    }

    :where(body.wat-app--collection) details.invoice-secondary-panel > summary.panel-header:hover::after {
      border-color: var(--wat-blue-deep);
    }

    :where(body.wat-app--collection) .invoice-secondary-panel .panel-header {
      align-items: center;
    }

    :where(body.wat-app--collection) .invoice-secondary-panel .panel-body {
      min-width: 0;
    }

    :where(body.wat-app--collection) .invoice-batch-workspace {
      display: grid;
      grid-template-columns: 310px minmax(0, 1fr);
      gap: 12px;
      min-width: 0;
    }

    :where(body.wat-app--collection) .invoice-batch-rail {
      display: grid;
      gap: 8px;
      align-content: start;
    }

    :where(body.wat-app--collection) .invoice-batch-option {
      display: grid;
      gap: 7px;
      width: 100%;
      border: 1px solid #dfeaea;
      border-radius: 12px;
      background: #fff;
      padding: 11px;
      color: var(--text);
      text-align: left;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(13, 51, 73, 0.04);
    }

    :where(body.wat-app--collection) .invoice-batch-option:hover,
:where(body.wat-app--collection) .invoice-batch-option.is-selected {
      border-color: #71dcd4;
      background: linear-gradient(180deg, #f4fffc, #fff);
      box-shadow: 0 0 0 3px rgba(0, 180, 156, 0.08);
    }

    :where(body.wat-app--collection) .invoice-batch-option-head,
:where(body.wat-app--collection) .invoice-batch-detail-head,
:where(body.wat-app--collection) .invoice-value-section-head,
:where(body.wat-app--collection) .invoice-item-value-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }

    :where(body.wat-app--collection) .invoice-batch-option b,
:where(body.wat-app--collection) .invoice-batch-detail-head b,
:where(body.wat-app--collection) .invoice-value-section-head b,
:where(body.wat-app--collection) .invoice-item-value-head b {
      color: var(--text);
      font-weight: var(--strong-weight);
    }

    :where(body.wat-app--collection) .invoice-batch-option small,
:where(body.wat-app--collection) .invoice-batch-detail-head small,
:where(body.wat-app--collection) .invoice-value-section-head small,
:where(body.wat-app--collection) .invoice-item-value-head small {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 11px;
      font-weight: var(--label-weight);
      line-height: 1.35;
    }

    :where(body.wat-app--collection) .invoice-batch-detail {
      display: grid;
      gap: 12px;
      min-width: 0;
    }

    :where(body.wat-app--collection) .invoice-batch-summary-grid {
      display: grid;
      grid-template-columns: 1.15fr repeat(3, minmax(0, 1fr));
      gap: 9px;
    }

    :where(body.wat-app--collection) .invoice-percentages-form {
      display: contents;
    }

    :where(body.wat-app--collection) .invoice-percentages-warning {
      grid-column: span 3;
      align-self: end;
      align-items: center;
    }

    :where(body.wat-app--collection) .invoice-value-section {
      border: 1px solid #dfeaea;
      border-radius: 12px;
      background: #fff;
      overflow: hidden;
    }

    :where(body.wat-app--collection) .invoice-secondary-panel:has(.invoice-value-picker-cell .popup.visible),
:where(body.wat-app--collection) .invoice-value-section:has(.invoice-value-picker-cell .popup.visible) {
      overflow: visible;
    }

    :where(body.wat-app--collection) .invoice-value-section-head {
      padding: 12px;
      border-bottom: 1px solid #e7f0f0;
      background: #f8fcfd;
    }

    :where(body.wat-app--collection) .invoice-value-list,
:where(body.wat-app--collection) .invoice-item-values-list {
      display: grid;
      gap: 9px;
      padding: 10px;
    }

    :where(body.wat-app--collection) .invoice-value-row,
:where(body.wat-app--collection) .invoice-value-add {
      display: grid;
      grid-template-columns: minmax(180px, 280px) 130px auto;
      gap: 8px;
      align-items: end;
      justify-content: start;
    }

    :where(body.wat-app--collection) .invoice-value-row.is-existing {
      align-items: center;
      border: 1px solid #e5eeee;
      border-radius: 10px;
      background: #fbfefe;
      padding: 8px;
    }

    :where(body.wat-app--collection) .invoice-value-add .feedback {
      grid-column: 1 / -1;
    }

    :where(body.wat-app--collection) .invoice-value-row select,
:where(body.wat-app--collection) .invoice-value-row input,
:where(body.wat-app--collection) .invoice-value-add .select-button,
:where(body.wat-app--collection) .invoice-value-add input {
      width: 100%;
      min-height: 34px;
      border: 1px solid #d9e8e8;
      border-radius: 9px;
      background: #fff;
      color: var(--text);
      padding: 0 9px;
      font-size: 12px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .invoice-value-picker-cell,
:where(body.wat-app--collection) .dispatch-group-modal-value-picker-cell {
      position: relative;
      min-width: 0;
    }

    :where(body.wat-app--collection) .invoice-value-picker-cell > label,
:where(body.wat-app--collection) .dispatch-group-modal-value-picker-cell > label {
      display: grid;
      gap: 6px;
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .invoice-value-picker-cell .select-button,
:where(body.wat-app--collection) .dispatch-group-modal-value-picker-cell .select-button {
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      text-align: left;
      cursor: pointer;
    }

    :where(body.wat-app--collection) .invoice-value-picker-cell .popup-anchor,
:where(body.wat-app--collection) .dispatch-group-modal-value-picker-cell .popup-anchor {
      position: relative;
      z-index: 80;
      width: 0;
      height: 0;
      overflow: visible;
    }

    :where(body.wat-app--collection) .invoice-value-picker-cell .popup-anchor > .popup,
:where(body.wat-app--collection) .dispatch-group-modal-value-picker-cell .popup-anchor > .popup {
      position: absolute;
      top: auto;
      right: auto;
      bottom: 8px;
      left: 0;
      display: none;
      width: min(340px, calc(100vw - 40px));
      max-height: min(42vh, 340px);
      overflow-y: auto;
      border: 1px solid #d4e2ea;
      border-radius: 12px;
      background: #fff;
      padding: 10px;
      box-shadow: 0 20px 48px rgba(5, 24, 43, 0.18);
      z-index: 80;
    }

    :where(body.wat-app--collection) .invoice-value-picker-cell .popup-anchor > .popup.visible,
:where(body.wat-app--collection) .dispatch-group-modal-value-picker-cell .popup-anchor > .popup.visible {
      display: block;
    }

    :where(body.wat-app--collection) .invoice-value-picker-cell .popup > label,
:where(body.wat-app--collection) .dispatch-group-modal-value-picker-cell .popup > label {
      display: grid;
      gap: 6px;
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .invoice-value-picker-cell .popup input[type="search"],
:where(body.wat-app--collection) .dispatch-group-modal-value-picker-cell .popup input[type="search"] {
      min-height: 38px;
      border: 1px solid #d4e2ea;
      border-radius: 9px;
      background: #fff;
      color: var(--text);
      padding: 0 10px;
      font: inherit;
    }

    :where(body.wat-app--collection) .invoice-value-picker-cell .popup-list,
:where(body.wat-app--collection) .dispatch-group-modal-value-picker-cell .popup-list {
      display: grid;
      gap: 5px;
      margin-top: 8px;
    }

    :where(body.wat-app--collection) .invoice-value-picker-cell .popup-button,
:where(body.wat-app--collection) .invoice-value-picker-cell .popup .button-blue,
:where(body.wat-app--collection) .dispatch-group-modal-value-picker-cell .popup-button,
:where(body.wat-app--collection) .dispatch-group-modal-value-picker-cell .popup .button-blue {
      width: 100%;
      min-height: 32px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--text);
      padding: 8px 9px;
      font: inherit;
      font-size: 13px;
      font-weight: var(--strong-weight);
      text-align: left;
      cursor: pointer;
    }

    :where(body.wat-app--collection) .invoice-value-picker-cell .popup .button-blue,
:where(body.wat-app--collection) .dispatch-group-modal-value-picker-cell .popup .button-blue {
      background: #eaf5ff;
      color: var(--primary);
      text-align: center;
    }

    :where(body.wat-app--collection) .invoice-value-picker-cell .popup-button:hover,
:where(body.wat-app--collection) .invoice-value-picker-cell .popup-button:focus-visible,
:where(body.wat-app--collection) .dispatch-group-modal-value-picker-cell .popup-button:hover,
:where(body.wat-app--collection) .dispatch-group-modal-value-picker-cell .popup-button:focus-visible {
      background: #eef6ff;
      color: var(--primary);
      outline: 0;
    }

    :where(body.wat-app--collection) .invoice-item-value-card {
      display: grid;
      gap: 9px;
      border: 1px solid #e5eeee;
      border-radius: 12px;
      background: #fff;
      padding: 10px;
    }

    :where(body.wat-app--collection) .invoice-value-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
    }

    :where(body.wat-app--collection) .invoice-value-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 28px;
      border: 1px solid #cfe7e4;
      border-radius: 999px;
      background: #f2fffc;
      color: #155c53;
      padding: 0 9px;
      font-size: 12px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .invoice-value-chip b {
      color: #083c36;
    }

    :where(body.wat-app--collection) .invoice-empty-inline {
      color: var(--muted);
      font-size: 12px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .done-ui {
      display: grid;
      gap: 13px;
    }

    :where(body.wat-app--collection) .done-kpis {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 9px;
    }

    :where(body.wat-app--collection) .done-card-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      align-items: start;
    }

    :where(body.wat-app--collection) .done-side-stack {
      display: grid;
      gap: 12px;
    }

    :where(body.wat-app--collection) .collection-receipt-body {
      padding: 14px;
      border-top: 1px solid var(--border);
    }

    :where(body.wat-app--collection) .collection-receipt-body .receipt-card {
      box-shadow: none;
    }

    :where(body.wat-app--collection) .done-final-inventory-details {
      margin-top: 12px;
    }

    :where(body.wat-app--collection) .done-final-inventory-details-list {
      display: grid;
      gap: 10px;
    }

    :where(body.wat-app--collection) .done-final-inventory-details-list > summary {
      cursor: pointer;
      list-style: none;
    }

    :where(body.wat-app--collection) .done-final-inventory-details-list > summary::-webkit-details-marker {
      display: none;
    }

    :where(body.wat-app--collection) .done-final-inventory-details-list[open] > summary {
      margin-bottom: 10px;
    }

    :where(body.wat-app--collection) .drawer-search {
      display: flex;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #fff;
      padding: 9px 11px;
    }

    :where(body.wat-app--collection) .drawer-search input {
      border: 0;
      outline: 0;
      min-width: 0;
      width: 100%;
      color: var(--text);
      font: inherit;
      background: transparent;
    }

    :where(body.wat-app--collection) .inventory-name {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      font-weight: 800;
    }

    :where(body.wat-app--collection) .item-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 9px;
      background: #eef7ff;
      color: var(--wat-blue);
      flex: 0 0 auto;
    }

    :where(body.wat-app--collection) .done-report-suite {
      display: grid;
      gap: 0;
      border: 1px solid #9de8dd;
      border-radius: 14px;
      background: #fff;
      overflow: hidden;
      box-shadow:
        0 0 0 4px rgba(0, 180, 156, 0.07),
        0 22px 46px rgba(0, 127, 222, 0.13);
    }

    :where(body.wat-app--collection) .done-report-suite-head {
      display: grid;
      gap: 7px;
      background:
        radial-gradient(circle at 88% 6%, rgba(25, 217, 181, 0.22), transparent 36%),
        linear-gradient(135deg, #052965 0%, #006fcf 60%, #00b49c 100%);
      color: #fff;
      padding: 16px;
    }

    :where(body.wat-app--collection) .done-report-suite-head h3 {
      margin: 0;
      color: #fff;
      font-size: 20px;
      line-height: 1.16;
    }

    :where(body.wat-app--collection) .done-report-meta-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    :where(body.wat-app--collection) .done-report-meta-row p {
      margin: 0;
      color: rgba(255, 255, 255, 0.82);
      font-size: 12px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .done-report-actions-bottom {
      justify-content: flex-end;
      padding-top: 2px;
    }

    :where(body.wat-app--collection) .done-report-suite-body {
      display: grid;
      gap: 12px;
      padding: 13px;
      background:
        linear-gradient(180deg, rgba(245, 253, 253, 0.94), #fff 48%),
        #fff;
    }

    :where(body.wat-app--collection) .done-report-summary {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    :where(body.wat-app--collection) .done-report-summary.is-single {
      grid-template-columns: minmax(0, 1fr);
    }

    :where(body.wat-app--collection) .done-report-summary .done-revenue-tile {
      background: #f7fcfd;
    }

    :where(body.wat-app--collection) .done-inventory-feature {
      display: grid;
      gap: 11px;
    }

    :where(body.wat-app--collection) .done-inventory-stats {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    :where(body.wat-app--collection) .done-mini-stat {
      border: 1px solid #dfeaea;
      border-radius: 11px;
      background: #f8fcfd;
      padding: 9px;
    }

    :where(body.wat-app--collection) .done-mini-stat b {
      display: block;
      color: var(--text);
      font-size: 17px;
    }

    :where(body.wat-app--collection) .done-mini-stat span {
      display: block;
      margin-top: 2px;
      color: var(--muted);
      font-size: 11px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .done-option-list {
      display: grid;
      gap: 8px;
    }

    :where(body.wat-app--collection) .done-option {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 9px;
      align-items: center;
      border: 1px solid #e1eeee;
      border-radius: 10px;
      background: #fff;
      padding: 9px 10px;
      color: var(--text);
      font-size: 12px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .done-option small {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: 11px;
    }

    :where(body.wat-app--collection) .done-revenue-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 9px;
    }

    :where(body.wat-app--collection) .done-revenue-tile {
      border: 1px solid #dfeaea;
      border-radius: 12px;
      background: #fff;
      padding: 11px;
    }

    :where(body.wat-app--collection) .done-revenue-tile b {
      display: block;
      color: var(--text);
      font-size: 18px;
    }

    :where(body.wat-app--collection) .done-revenue-tile span {
      display: block;
      color: var(--muted);
      font-size: 11px;
      font-weight: var(--label-weight);
    }

    :where(body.wat-app--collection) .invoice-step-card {
      display: grid;
      gap: 12px;
      min-height: 100%;
    }

    :where(body.wat-app--collection) .invoice-footer-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }

    @media (max-width: 1320px) {
      :where(body.wat-app--collection) {
        min-width: 1120px;
      }

      :where(body.wat-app--collection) .main,
:where(body.wat-app--collection) .topbar {
        padding-left: 24px;
        padding-right: 24px;
      }

      :where(body.wat-app--collection) .cards {
        grid-template-columns: 1fr 1fr;
      }

      :where(body.wat-app--collection) .cards.is-dispatching,
:where(body.wat-app--collection) .cards.is-invoice,
:where(body.wat-app--collection) .cards.is-done {
        grid-template-columns: minmax(0, 1fr);
      }

      :where(body.wat-app--collection) .cards.is-done.is-client-report {
        grid-template-columns: minmax(0, 1fr);
      }

      :where(body.wat-app--collection) .panel-green {
        grid-column: 1 / -1;
      }

      :where(body.wat-app--collection) .processing-layout.is-workbench {
        grid-template-columns: 220px minmax(0, 1fr);
      }

      :where(body.wat-app--collection) .processing-layout.is-workbench.is-detail-open {
        grid-template-columns: 220px minmax(0, 1fr);
      }

      :where(body.wat-app--collection) .processing-layout.is-workbench.is-detail-open .processing-detail {
        grid-column: 1 / -1;
      }

      :where(body.wat-app--collection) .processing-kpis {
        grid-template-columns: minmax(0, 1fr);
      }

      :where(body.wat-app--collection) .processing-metric-rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      :where(body.wat-app--collection) .dispatch-kpis {
        grid-template-columns: minmax(0, 1fr);
      }

      :where(body.wat-app--collection) .dispatch-metric-rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      :where(body.wat-app--collection) .dispatch-grid.is-dual {
        grid-template-columns: minmax(0, 1fr);
      }

      :where(body.wat-app--collection) .invoice-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      :where(body.wat-app--collection) .invoice-grid.is-rail {
        grid-template-columns: minmax(0, 1fr);
      }

      :where(body.wat-app--collection) .invoice-batch-workspace,
:where(body.wat-app--collection) .invoice-batch-summary-grid,
:where(body.wat-app--collection) .done-card-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      :where(body.wat-app--collection) .done-kpis,
:where(body.wat-app--collection) .done-revenue-grid,
:where(body.wat-app--collection) .done-report-summary,
:where(body.wat-app--collection) .done-inventory-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

    }

    @media (max-width: 1180px) {
      :where(body.wat-app--collection) {
        min-width: 0;
        width: 100%;
        overflow-x: hidden;
      }

      :where(body.wat-app--collection).is-mobile-menu-open {
        overflow: hidden;
      }

      :where(body.wat-app--collection) .app {
        display: block;
        min-height: 100vh;
      }

      :where(body.wat-app--collection) .content,
:where(body.wat-app--collection) .main {
        width: 100%;
        min-width: 0;
      }

      :where(body.wat-app--collection) .sidebar {
        position: fixed;
        z-index: 45;
        inset: 0 auto 0 0;
        width: min(318px, calc(100vw - 42px));
        max-width: none;
        height: 100dvh;
        padding: 18px 14px;
        transform: translateX(-105%);
        transition: transform 0.18s ease;
        box-shadow: 22px 0 46px rgba(6, 25, 68, 0.18);
      }

      :where(body.wat-app--collection).is-mobile-menu-open .sidebar {
        transform: translateX(0);
      }

      :where(body.wat-app--collection) .mobile-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 44;
        border: 0;
        background: rgba(4, 22, 50, 0.34);
      }

      :where(body.wat-app--collection).is-mobile-menu-open .mobile-sidebar-backdrop {
        display: block;
      }

      :where(body.wat-app--collection) .mobile-menu-button,
:where(body.wat-app--collection) .mobile-sidebar-close {
        width: 40px;
        height: 40px;
        border: 1px solid var(--border-strong);
        border-radius: 10px;
        background: #fff;
        color: var(--text);
        align-items: center;
        justify-content: center;
        padding: 0;
        box-shadow: 0 8px 18px rgba(7, 29, 73, 0.06);
      }

      :where(body.wat-app--collection) .mobile-menu-button {
        display: inline-flex;
        flex: 0 0 auto;
      }

      :where(body.wat-app--collection) .mobile-sidebar-close {
        display: inline-flex;
        position: absolute;
        top: 18px;
        right: 14px;
      }

      :where(body.wat-app--collection) .brand {
        height: 40px;
        padding-right: 48px;
      }

      :where(body.wat-app--collection) .brand img {
        width: 112px;
      }

      :where(body.wat-app--collection) .topbar {
        position: sticky;
        top: 0;
        z-index: 30;
        height: 60px;
        padding: 9px 22px;
        gap: 14px;
        justify-content: flex-start;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px);
      }

      :where(body.wat-app--collection) .breadcrumbs {
        flex: 1 1 auto;
        min-width: 0;
      }

      :where(body.wat-app--collection) .breadcrumbs b {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      :where(body.wat-app--collection) .top-actions {
        flex: 0 1 auto;
        min-width: 0;
        gap: 12px;
      }

      :where(body.wat-app--collection) .search {
        width: clamp(240px, 34vw, 330px);
      }

      :where(body.wat-app--collection) .avatar div,
:where(body.wat-app--collection) .avatar > svg {
        display: none;
      }

      :where(body.wat-app--collection) .main {
        padding: 24px 24px 30px;
      }

      :where(body.wat-app--collection) .hero {
        gap: 18px;
        flex-wrap: wrap;
      }

      :where(body.wat-app--collection) h1 {
        font-size: 44px;
      }

      :where(body.wat-app--collection) .status-pill {
        height: 38px;
        padding: 0 16px;
        font-size: 16px;
      }

      :where(body.wat-app--collection) .primary-actions {
        margin-left: auto;
      }

      :where(body.wat-app--collection) .timeline {
        margin: 28px -24px 20px;
        padding: 0 24px 8px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
      }

      :where(body.wat-app--collection) .timeline-track {
        --timeline-mobile-edge: calc((100vw - 82px) / 2);
        width: max-content;
        min-width: 1230px;
        grid-template-columns: repeat(15, 82px);
        padding: 0 var(--timeline-mobile-edge);
      }

      :where(body.wat-app--collection) .timeline-track::before {
        left: calc(var(--timeline-mobile-edge) + 41px);
        right: calc(var(--timeline-mobile-edge) + 41px);
        top: 15px;
      }

      :where(body.wat-app--collection) .timeline-track::after {
        left: calc(var(--timeline-mobile-edge) + 41px);
        width: calc(83.1429px * var(--timeline-step-progress, 0.92));
        top: 15px;
      }

      :where(body.wat-app--collection) .step {
        padding: 0 3px;
      }

      :where(body.wat-app--collection) .step-dot {
        width: 30px;
        height: 30px;
        margin-bottom: 6px;
        font-size: 12px;
      }

      :where(body.wat-app--collection) .step-label {
        min-height: 27px;
        font-size: 11px;
        line-height: 1.12;
      }

      :where(body.wat-app--collection) .cards {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
      }

      :where(body.wat-app--collection) .panel,
:where(body.wat-app--collection) .cards.is-processing .panel-teal,
:where(body.wat-app--collection) .cards.is-invoice .panel-teal,
:where(body.wat-app--collection) .cards.is-done .panel-teal {
        min-height: 0;
      }

      :where(body.wat-app--collection) .toast {
        left: 24px;
        right: 24px;
      }

      :where(body.wat-app--collection) .inventory-panel {
        width: min(860px, calc(100vw - 36px));
      }
    }

    @media (max-width: 900px) {
      :where(body.wat-app--collection) {
        min-width: 0;
        width: 100%;
        overflow-x: hidden;
        font-size: 13px;
      }

      :where(body.wat-app--collection).is-mobile-menu-open {
        overflow: hidden;
      }

      :where(body.wat-app--collection) .app {
        display: block;
        min-height: 100vh;
      }

      :where(body.wat-app--collection) .content,
:where(body.wat-app--collection) .main {
        width: 100%;
        min-width: 0;
      }

      :where(body.wat-app--collection) .sidebar {
        position: fixed;
        z-index: 45;
        inset: 0 auto 0 0;
        width: min(318px, calc(100vw - 42px));
        max-width: none;
        height: 100dvh;
        padding: 18px 14px;
        transform: translateX(-105%);
        transition: transform 0.18s ease;
        box-shadow: 22px 0 46px rgba(6, 25, 68, 0.18);
      }

      :where(body.wat-app--collection).is-mobile-menu-open .sidebar {
        transform: translateX(0);
      }

      :where(body.wat-app--collection) .mobile-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 44;
        border: 0;
        background: rgba(4, 22, 50, 0.34);
      }

      :where(body.wat-app--collection).is-mobile-menu-open .mobile-sidebar-backdrop {
        display: block;
      }

      :where(body.wat-app--collection) .mobile-menu-button,
:where(body.wat-app--collection) .mobile-sidebar-close {
        width: 40px;
        height: 40px;
        border: 1px solid var(--border-strong);
        border-radius: 10px;
        background: #fff;
        color: var(--text);
        align-items: center;
        justify-content: center;
        padding: 0;
        box-shadow: 0 8px 18px rgba(7, 29, 73, 0.06);
      }

      :where(body.wat-app--collection) .mobile-menu-button {
        display: inline-flex;
        flex: 0 0 auto;
      }

      :where(body.wat-app--collection) .mobile-sidebar-close {
        display: inline-flex;
        position: absolute;
        top: 18px;
        right: 14px;
      }

      :where(body.wat-app--collection) .brand {
        height: 40px;
        padding-right: 48px;
      }

      :where(body.wat-app--collection) .brand img {
        width: 112px;
      }

      :where(body.wat-app--collection) .nav {
        gap: 28px;
        padding-right: 2px;
      }

      :where(body.wat-app--collection) .nav-button {
        min-height: 40px;
        font-size: 13px;
      }

      :where(body.wat-app--collection) .topbar {
        position: sticky;
        top: 0;
        z-index: 30;
        min-height: 58px;
        height: auto;
        padding: 8px 12px;
        gap: 10px;
        justify-content: flex-start;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px);
      }

      :where(body.wat-app--collection) .breadcrumbs {
        flex: 1;
        min-width: 0;
        gap: 0;
      }

      :where(body.wat-app--collection) .breadcrumbs span,
:where(body.wat-app--collection) .breadcrumbs a {
        display: none;
      }

      :where(body.wat-app--collection) .breadcrumbs b {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
      }

      :where(body.wat-app--collection) .top-actions {
        margin-left: auto;
        gap: 0;
      }

      :where(body.wat-app--collection) .search,
:where(body.wat-app--collection) .avatar div,
:where(body.wat-app--collection) .avatar > svg {
        display: none;
      }

      :where(body.wat-app--collection) .avatar-circle {
        width: 34px;
        height: 34px;
        font-size: 12px;
      }

      :where(body.wat-app--collection) .main {
        padding: 16px 12px 22px;
      }

      :where(body.wat-app--collection) .hero {
        display: grid;
        gap: 13px;
        margin-bottom: 0;
      }

      :where(body.wat-app--collection) .title-line {
        align-items: flex-start;
        gap: 9px;
        flex-wrap: wrap;
      }

      :where(body.wat-app--collection) h1 {
        font-size: 35px;
        line-height: 1;
      }

      :where(body.wat-app--collection) .status-pill {
        height: 32px;
        padding: 0 13px;
        border-radius: 999px;
        font-size: 14px;
      }

      :where(body.wat-app--collection) .meta-line {
        margin-top: 8px;
        gap: 7px;
        align-items: flex-start;
        flex-direction: column;
      }

      :where(body.wat-app--collection) .primary-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 9px;
        padding-top: 0;
      }

      :where(body.wat-app--collection) .primary-actions .button-primary {
        width: 100%;
      }

      :where(body.wat-app--collection) .button {
        min-height: 42px;
        padding: 0 13px;
        font-size: 13px;
      }

      :where(body.wat-app--collection) .menu-popover {
        top: 50px;
        right: 0;
        width: min(252px, calc(100vw - 24px));
      }

      :where(body.wat-app--collection) .timeline {
        margin: 22px -12px 16px;
        padding: 0 12px 8px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
      }

      :where(body.wat-app--collection) .timeline-track {
        --timeline-mobile-edge: calc((100vw - 82px) / 2);
        width: max-content;
        min-width: 1230px;
        grid-template-columns: repeat(15, 82px);
        padding: 0 var(--timeline-mobile-edge);
      }

      :where(body.wat-app--collection) .timeline-track::before {
        left: calc(var(--timeline-mobile-edge) + 41px);
        right: calc(var(--timeline-mobile-edge) + 41px);
        top: 15px;
      }

      :where(body.wat-app--collection) .timeline-track::after {
        left: calc(var(--timeline-mobile-edge) + 41px);
        width: calc(83.1429px * var(--timeline-step-progress, 0.92));
        top: 15px;
      }

      :where(body.wat-app--collection) .step {
        padding: 0 3px;
      }

      :where(body.wat-app--collection) .step-dot {
        width: 30px;
        height: 30px;
        margin-bottom: 6px;
        font-size: 12px;
      }

      :where(body.wat-app--collection) .step-label {
        min-height: 27px;
        font-size: 11px;
        line-height: 1.12;
      }

      :where(body.wat-app--collection) .cards {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      :where(body.wat-app--collection) .cards[data-state="request"] .panel-blue {
        order: 1;
      }

      :where(body.wat-app--collection) .cards[data-state="request"] .panel-teal {
        order: 2;
      }

      :where(body.wat-app--collection) .cards[data-state="contact-initiated"] .panel-teal,
:where(body.wat-app--collection) .cards[data-state="assessment-planned"] .panel-teal,
:where(body.wat-app--collection) .cards[data-state="assessment-done"] .panel-teal,
:where(body.wat-app--collection) .cards[data-state="offer-draft"] .panel-teal,
:where(body.wat-app--collection) .cards[data-state="pending-response"] .panel-teal,
:where(body.wat-app--collection) .cards[data-state="offer-accepted"] .panel-teal,
:where(body.wat-app--collection) .cards[data-state="collection-planned"] .panel-teal,
:where(body.wat-app--collection) .cards[data-state="in-transit"] .panel-teal,
:where(body.wat-app--collection) .cards[data-state="delivered"] .panel-teal {
        order: 1;
        width: min(100%, 390px);
        align-self: center;
      }

      :where(body.wat-app--collection) .cards[data-state="contact-initiated"] .panel-blue,
:where(body.wat-app--collection) .cards[data-state="assessment-planned"] .panel-blue,
:where(body.wat-app--collection) .cards[data-state="assessment-done"] .panel-blue,
:where(body.wat-app--collection) .cards[data-state="offer-draft"] .panel-blue,
:where(body.wat-app--collection) .cards[data-state="pending-response"] .panel-blue,
:where(body.wat-app--collection) .cards[data-state="offer-accepted"] .panel-blue,
:where(body.wat-app--collection) .cards[data-state="collection-planned"] .panel-blue,
:where(body.wat-app--collection) .cards[data-state="in-transit"] .panel-blue,
:where(body.wat-app--collection) .cards[data-state="delivered"] .panel-blue {
        order: 2;
      }

      :where(body.wat-app--collection) .cards[data-state="request"] .panel-green {
        order: 3;
      }

      :where(body.wat-app--collection) .cards[data-state="contact-initiated"] .panel-green,
:where(body.wat-app--collection) .cards[data-state="assessment-planned"] .panel-green,
:where(body.wat-app--collection) .cards[data-state="assessment-done"] .panel-green,
:where(body.wat-app--collection) .cards[data-state="offer-draft"] .panel-green,
:where(body.wat-app--collection) .cards[data-state="pending-response"] .panel-green,
:where(body.wat-app--collection) .cards[data-state="offer-accepted"] .panel-green,
:where(body.wat-app--collection) .cards[data-state="collection-planned"] .panel-green,
:where(body.wat-app--collection) .cards[data-state="in-transit"] .panel-green,
:where(body.wat-app--collection) .cards[data-state="delivered"] .panel-green {
        order: 3;
      }

      :where(body.wat-app--collection) .cards[data-state="payment"] .panel-teal,
:where(body.wat-app--collection) .cards[data-state="done"] .panel-teal {
        order: 1;
      }

      :where(body.wat-app--collection) .cards[data-state="payment"] .panel-green {
        order: 2;
      }

      :where(body.wat-app--collection) .cards[data-state="payment"] .panel-blue,
:where(body.wat-app--collection) .cards[data-state="done"] .panel-blue {
        order: 3;
      }

      :where(body.wat-app--collection) .panel,
:where(body.wat-app--collection) .cards.is-processing .panel-teal,
:where(body.wat-app--collection) .cards.is-invoice .panel-teal,
:where(body.wat-app--collection) .cards.is-done .panel-teal {
        min-height: 0;
      }

      :where(body.wat-app--collection) .panel-teal {
        transform: none;
        box-shadow:
          0 18px 42px rgba(0, 127, 222, 0.12),
          0 0 0 4px rgba(0, 180, 156, 0.08);
      }

      :where(body.wat-app--collection) .panel-header,
:where(body.wat-app--collection) .panel-teal .panel-header {
        padding: 13px 14px 12px;
      }

      :where(body.wat-app--collection) .panel-title h2 {
        font-size: 15px;
      }

      :where(body.wat-app--collection) .panel-title p {
        font-size: 12px;
      }

      :where(body.wat-app--collection) .panel-body {
        padding: 12px;
      }

      :where(body.wat-app--collection) .workflow-stack {
        gap: 13px;
      }

      :where(body.wat-app--collection) .panel-teal .state-hero-card,
:where(body.wat-app--collection) .panel-teal .todo-strip {
        width: min(100%, 390px);
        margin-inline: auto;
      }

      :where(body.wat-app--collection) .section-label {
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
      }

      :where(body.wat-app--collection) .section-label-left {
        min-width: 0;
      }

      :where(body.wat-app--collection) .section-label .button {
        min-height: 34px;
        padding: 0 10px;
        margin-left: auto;
      }

      :where(body.wat-app--collection) .message-box {
        padding: 12px 13px;
        line-height: 1.48;
      }

      :where(body.wat-app--collection) .empty-state {
        min-height: 92px;
      }

      :where(body.wat-app--collection) .input-row {
        grid-template-columns: minmax(0, 1fr);
      }

      :where(body.wat-app--collection) .note-actions {
        grid-template-columns: 1fr 1fr;
      }

      :where(body.wat-app--collection) .todo-strip {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 10px;
        margin-top: 14px;
      }

      :where(body.wat-app--collection) .workflow-meta-grid,
:where(body.wat-app--collection) .form-grid,
:where(body.wat-app--collection) .mini-card-grid,
:where(body.wat-app--collection) .receipt-summary,
:where(body.wat-app--collection) .certificate-fields,
:where(body.wat-app--collection) .processing-client-body {
        grid-template-columns: minmax(0, 1fr);
      }

      :where(body.wat-app--collection) .review-row {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 10px;
        padding: 11px 12px;
      }

      :where(body.wat-app--collection) .mini-icon {
        width: 32px;
        height: 32px;
      }

      :where(body.wat-app--collection) .mini-icon svg,
:where(body.wat-app--collection) .nav-button svg,
:where(body.wat-app--collection) .icon-chip svg {
        width: 16px;
        height: 16px;
      }

      :where(body.wat-app--collection) .map-wrap {
        height: 96px;
      }

      :where(body.wat-app--collection) .small-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }

      :where(body.wat-app--collection) .info-tile {
        min-height: 78px;
        padding: 10px 7px;
      }

      :where(body.wat-app--collection) .info-tile .mini-icon {
        width: 28px;
        height: 28px;
        margin-bottom: 7px;
      }

      :where(body.wat-app--collection) .info-tile span {
        font-size: 11px;
      }

      :where(body.wat-app--collection) .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      :where(body.wat-app--collection) .stat {
        border-right: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
      }

      :where(body.wat-app--collection) .stat:nth-child(2n) {
        border-right: 0;
      }

      :where(body.wat-app--collection) .stat:nth-last-child(-n + 2) {
        border-bottom: 0;
      }

      :where(body.wat-app--collection) .stat b {
        font-size: 18px;
      }

      :where(body.wat-app--collection) .category-head {
        align-items: flex-start;
        gap: 8px;
      }

      :where(body.wat-app--collection) .category-head button {
        flex: 0 0 auto;
        font-size: 12px;
      }

      :where(body.wat-app--collection) .category-row {
        grid-template-columns: 32px minmax(0, 1fr) auto;
        gap: 8px 10px;
        min-height: 58px;
        padding: 9px 10px;
      }

      :where(body.wat-app--collection) .category-row .bar {
        grid-column: 2 / -1;
        grid-row: 2;
      }

      :where(body.wat-app--collection) .category-name small {
        white-space: normal;
      }

      :where(body.wat-app--collection) .count {
        grid-column: 3;
        grid-row: 1;
      }

      :where(body.wat-app--collection) .percent {
        display: none;
      }

      :where(body.wat-app--collection) .inventory-footer {
        padding: 10px 12px 12px;
      }

      :where(body.wat-app--collection) .secondary-accordions {
        margin-top: 12px;
      }

      :where(body.wat-app--collection) .secondary-accordion summary {
        padding: 0 12px;
      }

      :where(body.wat-app--collection) .accordion-title small {
        display: none;
      }

      :where(body.wat-app--collection) .toast {
        left: 12px;
        right: 12px;
        bottom: 14px;
        z-index: 70;
      }

      :where(body.wat-app--collection) .inventory-panel {
        width: 100vw;
        max-width: 100vw;
        inset: 0;
        border-left: 0;
      }

      :where(body.wat-app--collection) .drawer-header,
:where(body.wat-app--collection) .drawer-tools,
:where(body.wat-app--collection) .drawer-footer {
        padding: 14px;
      }

      :where(body.wat-app--collection) .drawer-title h2 {
        font-size: 22px;
      }

      :where(body.wat-app--collection) .drawer-title p {
        font-size: 12px;
        line-height: 1.35;
      }

      :where(body.wat-app--collection) .drawer-tools {
        grid-template-columns: minmax(0, 1fr);
      }

      :where(body.wat-app--collection) .filter-pills {
        justify-content: flex-start;
      }

      :where(body.wat-app--collection) .drawer-body {
        padding: 14px;
      }

      :where(body.wat-app--collection) .drawer-footer {
        display: none;
      }

      :where(body.wat-app--collection) .inventory-table {
        min-width: 760px;
      }

      :where(body.wat-app--collection) .cards.is-processing {
        display: none;
      }

      :where(body.wat-app--collection) .cards.is-processing .panel-teal {
        box-shadow: none;
      }

      :where(body.wat-app--collection) .cards.is-processing .panel-teal .panel-header {
        border-radius: 12px 12px 0 0;
      }

      :where(body.wat-app--collection) .cards.is-processing .panel-teal .panel-body {
        padding: 12px;
      }

      :where(body.wat-app--collection) .processing-ui {
        gap: 12px;
        min-width: 0;
      }

      :where(body.wat-app--collection) .processing-kpis {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        overflow: visible;
        margin: 0;
        padding: 0;
      }

      :where(body.wat-app--collection) .processing-metric-rail {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        margin: 0 -12px;
        padding: 0 12px 3px;
        scroll-snap-type: x mandatory;
      }

      :where(body.wat-app--collection) .processing-kpi {
        flex: 0 0 132px;
        min-height: 68px;
        padding: 9px 10px;
        scroll-snap-align: start;
      }

      :where(body.wat-app--collection) .processing-kpi b {
        font-size: 17px;
      }

      :where(body.wat-app--collection) .processing-kpi span {
        font-size: 11px;
      }

      :where(body.wat-app--collection) .processing-kpis .processing-complete {
        width: 100%;
        min-height: 68px;
        margin: 0;
        padding: 10px;
      }

      :where(body.wat-app--collection) .workbench-search-row {
        position: static;
        top: auto;
        z-index: auto;
        margin: 0 12px 10px;
        padding: 8px;
        border-radius: 12px;
        box-shadow: none;
      }

      :where(body.wat-app--collection) .processing-search,
:where(body.wat-app--collection) .processing-select,
:where(body.wat-app--collection) .processing-input,
:where(body.wat-app--collection) .processing-cell-input {
        height: 42px;
        font-size: 16px;
      }

      :where(body.wat-app--collection) .processing-layout.is-workbench,
:where(body.wat-app--collection) .processing-layout.is-workbench.is-detail-open {
        grid-template-columns: minmax(0, 1fr);
      }

      :where(body.wat-app--collection) .processing-side,
:where(body.wat-app--collection) .processing-main,
:where(body.wat-app--collection) .processing-detail {
        border-radius: 12px;
      }

      :where(body.wat-app--collection) .processing-side {
        padding: 12px;
      }

      :where(body.wat-app--collection) .processing-side-head {
        align-items: center;
      }

      :where(body.wat-app--collection) .processing-group-list {
        display: flex;
        gap: 9px;
        overflow-x: auto;
        margin: 12px -12px 0;
        padding: 0 12px 5px;
        scroll-snap-type: x mandatory;
      }

      :where(body.wat-app--collection) .processing-group-item {
        flex: 0 0 178px;
        scroll-snap-align: start;
        min-height: 96px;
      }

      :where(body.wat-app--collection) .processing-side-actions {
        display: none;
      }

      :where(body.wat-app--collection) .processing-section-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
      }

      :where(body.wat-app--collection) .processing-section-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-content: initial;
        width: 100%;
      }

      :where(body.wat-app--collection) .processing-section-actions .button {
        width: 100%;
        min-height: 38px;
        padding: 0 12px;
        font-size: 13px;
        justify-content: center;
      }

      :where(body.wat-app--collection) .workbench-add-form:not([hidden]) {
        position: fixed;
        z-index: 62;
        inset: auto 10px 10px;
        max-height: min(82dvh, 690px);
        overflow: auto;
        margin: 0;
        padding: 12px;
        border-radius: 16px;
        box-shadow: 0 -22px 60px rgba(6, 25, 68, 0.22);
      }

      :where(body.wat-app--collection) .workbench-add-form-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
      }

      :where(body.wat-app--collection) .workbench-add-form-head div {
        display: grid;
        gap: 2px;
      }

      :where(body.wat-app--collection) .workbench-add-form-head b {
        color: var(--text);
        font-size: 16px;
        line-height: 1.2;
      }

      :where(body.wat-app--collection) .workbench-add-form-head span {
        color: var(--muted);
        font-size: 12px;
        font-weight: var(--label-weight);
      }

      :where(body.wat-app--collection) .workbench-add-form .operator-form-grid,
:where(body.wat-app--collection) .operator-form-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      :where(body.wat-app--collection) .operator-form-grid .is-wide,
:where(body.wat-app--collection) .workbench-add-form .operator-form-grid .is-wide {
        grid-column: auto;
      }

      :where(body.wat-app--collection) .workbench-add-form .workflow-actions {
        position: sticky;
        bottom: -12px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin: 12px -12px -12px;
        padding: 10px 12px;
        background: rgba(255, 255, 255, 0.94);
        backdrop-filter: blur(10px);
        border-top: 1px solid var(--border);
      }

      :where(body.wat-app--collection) .workbench-add-form .workflow-actions .button {
        width: 100%;
        min-width: 0;
      }

      :where(body.wat-app--collection) .processing-table-wrap {
        display: block;
        overflow-x: auto;
        padding: 0 12px 12px;
      }

      :where(body.wat-app--collection) .processing-card-list {
        display: none;
      }

      :where(body.wat-app--collection) .processing-mock-table {
        min-width: 760px;
        background: #fff;
      }

      :where(body.wat-app--collection) .processing-mock-table thead {
        display: table-header-group;
      }

      :where(body.wat-app--collection) .processing-mock-table tbody {
        display: table-row-group;
      }

      :where(body.wat-app--collection) .processing-mock-table tr {
        display: table-row;
      }

      :where(body.wat-app--collection) .processing-mock-table th,
:where(body.wat-app--collection) .processing-mock-table td {
        display: table-cell;
        width: auto;
      }

      :where(body.wat-app--collection) .processing-mock-table th {
        padding: 9px 8px;
        white-space: nowrap;
      }

      :where(body.wat-app--collection) .processing-mock-table td,
:where(body.wat-app--collection) .processing-mock-table tr:last-child td,
:where(body.wat-app--collection) .processing-mock-table tr.is-selected td,
:where(body.wat-app--collection) .processing-mock-table tr.is-warning td,
:where(body.wat-app--collection) .processing-mock-table tbody tr:hover td {
        padding: 7px 8px;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
      }

      :where(body.wat-app--collection) .processing-mock-table tr:last-child td {
        border-bottom: 0;
      }

      :where(body.wat-app--collection) .processing-mock-table td[data-label]::before {
        content: none;
      }

      :where(body.wat-app--collection) .processing-product-cell {
        min-width: 168px;
        font-size: 14px;
      }

      :where(body.wat-app--collection) .processing-product-cell small {
        margin-top: 2px;
      }

      :where(body.wat-app--collection) .processing-cell-input {
        height: 34px;
        min-width: 0;
      }

      :where(body.wat-app--collection) .processing-cell-input.is-short {
        max-width: 66px;
        text-align: center;
      }

      :where(body.wat-app--collection) .drive-pill,
:where(body.wat-app--collection) .note-count-pill {
        width: auto;
        min-height: 32px;
        justify-content: center;
      }

      :where(body.wat-app--collection) .round-delete {
        width: 32px;
        height: 32px;
      }

      :where(body.wat-app--collection) .workbench-table-footer {
        padding: 0 12px 12px;
        border-top: 0;
      }

      :where(body.wat-app--collection) .workbench-table-footer .button {
        width: 100%;
        justify-content: center;
      }

      :where(body.wat-app--collection) .processing-detail {
        position: fixed;
        z-index: 63;
        inset: auto 10px 10px;
        max-height: min(76dvh, 620px);
        overflow: auto;
        padding: 14px;
        border-radius: 16px;
        box-shadow: 0 -22px 60px rgba(6, 25, 68, 0.24);
      }

      :where(body.wat-app--collection) .processing-detail[hidden] {
        display: none;
      }

      :where(body.wat-app--collection) .processing-detail-panel {
        gap: 9px;
      }

      :where(body.wat-app--collection) .processing-detail-panel .button {
        width: 100%;
        justify-content: center;
      }

      :where(body.wat-app--collection) .cards.is-dispatching .panel-teal {
        box-shadow: none;
      }

      :where(body.wat-app--collection) .cards.is-dispatching .panel-teal .panel-header {
        border-radius: 12px 12px 0 0;
      }

      :where(body.wat-app--collection) .cards.is-dispatching .panel-teal .panel-body {
        padding: 12px;
      }

      :where(body.wat-app--collection) .dispatch-ui {
        gap: 12px;
        min-width: 0;
      }

      :where(body.wat-app--collection) .dispatch-kpis {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        overflow: visible;
        margin: 0;
        padding: 0;
      }

      :where(body.wat-app--collection) .dispatch-metric-rail {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        margin: 0 -12px;
        padding: 0 12px 3px;
        scroll-snap-type: x mandatory;
      }

      :where(body.wat-app--collection) .dispatch-kpi {
        flex: 0 0 136px;
        min-height: 68px;
        padding: 9px 10px;
        scroll-snap-align: start;
      }

      :where(body.wat-app--collection) .dispatch-kpi b {
        font-size: 17px;
      }

      :where(body.wat-app--collection) .dispatch-kpi span {
        font-size: 11px;
      }

      :where(body.wat-app--collection) .dispatch-kpis .dispatch-next-card {
        width: 100%;
        min-height: 0;
        margin: 0;
        padding: 10px;
      }

      :where(body.wat-app--collection) .dispatch-grid,
:where(body.wat-app--collection) .dispatch-grid.is-dual,
:where(body.wat-app--collection) .dispatch-wide {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
      }

      :where(body.wat-app--collection) .dispatch-card {
        border-radius: 12px;
      }

      :where(body.wat-app--collection) .dispatch-card-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 9px;
        padding: 12px;
      }

      :where(body.wat-app--collection) .dispatch-card-header h3 {
        font-size: 15px;
      }

      :where(body.wat-app--collection) .dispatch-card-header p {
        font-size: 11px;
        line-height: 1.3;
      }

      :where(body.wat-app--collection) .dispatch-card-header-actions {
        gap: 6px;
      }

      :where(body.wat-app--collection) .dispatch-card-header-actions .dispatch-pill {
        max-width: 104px;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      :where(body.wat-app--collection) .dispatch-card-body {
        padding: 10px;
      }

      :where(body.wat-app--collection) .dispatch-local-search {
        height: 42px;
      }

      :where(body.wat-app--collection) .dispatch-local-search input,
:where(body.wat-app--collection) .dispatch-method-select,
:where(body.wat-app--collection) .dispatch-partner-select,
:where(body.wat-app--collection) .dispatch-qty-input {
        font-size: 16px;
      }

      :where(body.wat-app--collection) .dispatch-task-list,
:where(body.wat-app--collection) .dispatch-cleared-list {
        gap: 8px;
      }

      :where(body.wat-app--collection) .dispatch-task.is-dd {
        padding: 9px;
        gap: 7px;
      }

      :where(body.wat-app--collection) .dispatch-dd-group {
        padding: 9px;
        gap: 8px;
      }

      :where(body.wat-app--collection) .dispatch-dd-group-header {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
      }

      :where(body.wat-app--collection) .dispatch-dd-group-header .dispatch-pill {
        justify-self: start;
      }

      :where(body.wat-app--collection) .dispatch-task-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
      }

      :where(body.wat-app--collection) .dispatch-task-grid .dispatch-pill {
        justify-self: start;
      }

      :where(body.wat-app--collection) .dispatch-method-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 7px;
      }

      :where(body.wat-app--collection) .dispatch-method-row .dispatch-method-select {
        width: 100%;
        min-width: 0;
      }

      :where(body.wat-app--collection) .dispatch-task.is-dd .dispatch-method-row {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
      }

      :where(body.wat-app--collection) .dispatch-task.is-dd .dispatch-method-row .button {
        width: auto;
        min-width: 76px;
        justify-content: center;
      }

      :where(body.wat-app--collection) .dispatch-dd-proof-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        align-items: center;
      }

      :where(body.wat-app--collection) .dispatch-dd-proof-row .dispatch-evidence-actions,
:where(body.wat-app--collection) .dispatch-evidence-actions {
        flex-wrap: wrap;
        gap: 6px;
      }

      :where(body.wat-app--collection) .dispatch-compact-actions {
        gap: 6px;
      }

      :where(body.wat-app--collection) .dispatch-dd-proof-row .dispatch-compact-actions .button {
        width: 100%;
        justify-content: center;
      }

      :where(body.wat-app--collection) .dispatch-evidence-actions .button,
:where(body.wat-app--collection) .dispatch-compact-actions .button {
        min-height: 34px;
        padding: 0 9px;
        font-size: 12px;
        white-space: nowrap;
      }

      :where(body.wat-app--collection) .dispatch-cleared-task {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
      }

      :where(body.wat-app--collection) .dispatch-cleared-task .dispatch-compact-actions {
        justify-content: flex-start;
      }

      :where(body.wat-app--collection) .dispatch-table-wrap {
        max-width: 100%;
        overflow-x: auto;
      }

      :where(body.wat-app--collection) .dispatch-table th {
        padding: 9px 8px;
      }

      :where(body.wat-app--collection) .dispatch-table td {
        padding: 8px;
      }

      :where(body.wat-app--collection) .dispatch-step-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      :where(body.wat-app--collection) .dispatch-partner-dd-status {
        min-height: 64px;
      }

      :where(body.wat-app--collection) .dispatch-status-line {
        align-items: flex-start;
      }

      :where(body.wat-app--collection) .dispatch-row-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
        gap: 8px;
      }

      :where(body.wat-app--collection) .dispatch-row-actions .button {
        width: 100%;
        justify-content: center;
      }

      :where(body.wat-app--collection) .dispatch-batch-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
      }

      :where(body.wat-app--collection) .dispatch-batch-head .dispatch-pill {
        justify-self: start;
      }

      :where(body.wat-app--collection) .dispatch-values-form {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
      }

      :where(body.wat-app--collection) .dispatch-values-form label {
        font-size: 11px;
      }

      :where(body.wat-app--collection) .dispatch-values-editor-grid,
:where(body.wat-app--collection) .dispatch-values-form {
        grid-template-columns: minmax(0, 1fr);
      }

      :where(body.wat-app--collection) .dispatch-values-editor-head,
:where(body.wat-app--collection) .dispatch-values-item-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
      }

      :where(body.wat-app--collection) .dispatch-values-editor-head .button,
:where(body.wat-app--collection) .dispatch-values-item-head .button,
:where(body.wat-app--collection) .dispatch-batch-head .button {
        width: 100%;
        justify-content: center;
      }

      :where(body.wat-app--collection) .dispatch-values-list .value-row {
        align-items: flex-start;
      }

      :where(body.wat-app--collection) .dispatch-values-list form.value-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
      }

      :where(body.wat-app--collection) .dispatch-values-list .label-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
      }

      :where(body.wat-app--collection) .dispatch-values-list .select-button,
:where(body.wat-app--collection) .dispatch-values-list .popup {
        min-width: min(260px, calc(100vw - 80px));
      }

      :where(body.wat-app--collection) .dispatch-stock-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      :where(body.wat-app--collection) .invoice-ui,
:where(body.wat-app--collection) .payment-ui,
:where(body.wat-app--collection) .done-ui {
        gap: 12px;
        min-width: 0;
      }

      :where(body.wat-app--collection) .invoice-kpis,
:where(body.wat-app--collection) .done-kpis {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        margin: 0 -12px;
        padding: 0 12px 3px;
        scroll-snap-type: x mandatory;
      }

      :where(body.wat-app--collection) .invoice-kpis .invoice-kpi,
:where(body.wat-app--collection) .done-kpis .invoice-kpi {
        flex: 0 0 136px;
        min-height: 68px;
        padding: 9px 10px;
        scroll-snap-align: start;
      }

      :where(body.wat-app--collection) .invoice-kpis .invoice-kpi b,
:where(body.wat-app--collection) .done-kpis .invoice-kpi b {
        font-size: 17px;
      }

      :where(body.wat-app--collection) .invoice-kpis .invoice-kpi span,
:where(body.wat-app--collection) .done-kpis .invoice-kpi span {
        font-size: 11px;
      }

      :where(body.wat-app--collection) .invoice-grid,
:where(body.wat-app--collection) .invoice-grid.is-rail,
:where(body.wat-app--collection) .invoice-field-grid,
:where(body.wat-app--collection) .invoice-field-grid.is-three {
        grid-template-columns: minmax(0, 1fr);
      }

      :where(body.wat-app--collection) .invoice-card-head,
:where(body.wat-app--collection) .payment-hero-head,
:where(body.wat-app--collection) .invoice-batch-detail-head,
:where(body.wat-app--collection) .invoice-value-section-head,
:where(body.wat-app--collection) .invoice-item-value-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
      }

      :where(body.wat-app--collection) .invoice-card-head .invoice-pill,
:where(body.wat-app--collection) .payment-hero-head .invoice-pill,
:where(body.wat-app--collection) .invoice-batch-detail-head .invoice-pill,
:where(body.wat-app--collection) .invoice-value-section-head .invoice-pill,
:where(body.wat-app--collection) .invoice-item-value-head .invoice-pill {
        justify-self: start;
      }

      :where(body.wat-app--collection) .collection-admin-detail-redesign .payment-hero,
:where(body.wat-app--collection) .collection-admin-detail-redesign .payment-hero-head,
:where(body.wat-app--collection) .collection-admin-detail-redesign .payment-hero-head > div,
:where(body.wat-app--collection) .collection-admin-detail-redesign .payment-due-focus,
:where(body.wat-app--collection) .collection-admin-detail-redesign .payment-actions {
        min-width: 0;
        max-width: 100%;
      }

      :where(body.wat-app--collection) .collection-admin-detail-redesign .payment-hero-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
      }

      :where(body.wat-app--collection) .collection-admin-detail-redesign .payment-hero-head .invoice-pill {
        justify-self: start;
      }

      :where(body.wat-app--collection) .invoice-card-body {
        padding: 11px;
      }

      :where(body.wat-app--collection) .invoice-add-row {
        grid-template-columns: minmax(0, 1fr);
      }

      :where(body.wat-app--collection) .invoice-add-row .button,
:where(body.wat-app--collection) .invoice-footer-actions .button,
:where(body.wat-app--collection) .payment-actions .button {
        width: 100%;
        justify-content: center;
      }

      :where(body.wat-app--collection) .invoice-footer-actions,
:where(body.wat-app--collection) .payment-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
      }

      :where(body.wat-app--collection) .collection-admin-detail-redesign .payment-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
      }

      :where(body.wat-app--collection) .collection-admin-detail-redesign .payment-actions .button {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        justify-content: center;
        white-space: normal;
      }

      :where(body.wat-app--collection) .payment-due-focus b {
        font-size: 29px;
      }

      :where(body.wat-app--collection) .invoice-table-wrap {
        max-width: 100%;
        overflow-x: auto;
      }

      :where(body.wat-app--collection) .invoice-table {
        min-width: 560px;
      }

      :where(body.wat-app--collection) .invoice-batch-workspace {
        grid-template-columns: minmax(0, 1fr);
      }

      :where(body.wat-app--collection) .invoice-batch-rail {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        margin: 0 -11px;
        padding: 0 11px 4px;
        scroll-snap-type: x mandatory;
      }

      :where(body.wat-app--collection) .invoice-batch-option {
        flex: 0 0 min(268px, calc(100vw - 48px));
        scroll-snap-align: start;
      }

      :where(body.wat-app--collection) .invoice-batch-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      :where(body.wat-app--collection) .invoice-batch-summary-grid .invoice-field:first-child {
        grid-column: 1 / -1;
      }

      :where(body.wat-app--collection) .invoice-value-row.is-existing {
        grid-template-columns: 30px minmax(0, 1fr) 82px;
        align-items: center;
      }

      :where(body.wat-app--collection) .invoice-value-add {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        justify-content: stretch;
        width: 100%;
        max-width: 100%;
      }

      :where(body.wat-app--collection) .invoice-value-row > *,
:where(body.wat-app--collection) .invoice-value-add > * {
        min-width: 0;
      }

      :where(body.wat-app--collection) .invoice-item-values-list,
:where(body.wat-app--collection) .invoice-item-value-card,
:where(body.wat-app--collection) .invoice-value-picker-cell,
:where(body.wat-app--collection) .invoice-value-picker-cell > label {
        min-width: 0;
        max-width: 100%;
      }

      :where(body.wat-app--collection) .invoice-value-row.is-existing .round-delete {
        width: 30px;
        height: 30px;
        min-height: 30px;
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
      }

      :where(body.wat-app--collection) .invoice-value-row.is-existing select {
        grid-column: 2;
      }

      :where(body.wat-app--collection) .invoice-value-row.is-existing input {
        grid-column: 3;
      }

      :where(body.wat-app--collection) .invoice-value-add .button {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: center;
      }

      :where(body.wat-app--collection) .invoice-value-add input[name="weightKg"],
:where(body.wat-app--collection) .invoice-value-add .select-button {
        width: 100%;
        max-width: 100%;
      }

      :where(body.wat-app--collection) .invoice-value-row select,
:where(body.wat-app--collection) .invoice-value-row input,
:where(body.wat-app--collection) .invoice-value-add .select-button,
:where(body.wat-app--collection) .invoice-value-add input {
        min-height: 34px;
        font-size: 13px;
      }

      :where(body.wat-app--collection) .invoice-doc-item,
:where(body.wat-app--collection) .invoice-batch-item {
        grid-template-columns: minmax(0, 1fr) auto;
      }

      :where(body.wat-app--collection) .done-card-grid {
        grid-template-columns: minmax(0, 1fr);
      }

      :where(body.wat-app--collection) .done-certificate-card {
        order: 1;
      }

      :where(body.wat-app--collection) .done-revenue-card {
        order: 2;
      }

      :where(body.wat-app--collection) .done-report-suite-head {
        padding: 14px;
      }

      :where(body.wat-app--collection) .done-report-suite-head h3 {
        font-size: 18px;
      }

      :where(body.wat-app--collection) .done-report-meta-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
      }

      :where(body.wat-app--collection) .done-report-meta-row .button {
        width: 100%;
        justify-content: center;
      }

      :where(body.wat-app--collection) .done-option {
        grid-template-columns: auto minmax(0, 1fr);
      }

      :where(body.wat-app--collection) .done-option .invoice-pill {
        grid-column: 2;
        justify-self: start;
      }

      :where(body.wat-app--collection) .cards.is-done.is-client-report,
:where(body.wat-app--collection) .done-card-grid,
:where(body.wat-app--collection) .done-kpis,
:where(body.wat-app--collection) .done-revenue-grid,
:where(body.wat-app--collection) .done-report-summary,
:where(body.wat-app--collection) .done-inventory-stats,
:where(body.wat-app--collection) .invoice-batch-workspace,
:where(body.wat-app--collection) .invoice-batch-summary-grid {
        grid-template-columns: minmax(0, 1fr);
      }
    }

/* #endregion */

/* #region Complete public website */

body:where(.wat-app).wat-public .wat-public-main {
    width: min(1240px, calc(100% - 32px));
    padding: 34px 0 64px;
}

body:where(.wat-app).wat-public .wat-public-page,
body:where(.wat-app).repair-ui-portal .wat-public-page {
    width: 100%;
    min-width: 0;
    margin: 0 auto;
}

body:where(.wat-app).repair-ui-body .wat-public-page > .page-header {
    margin-bottom: 22px;
}

body:where(.wat-app).repair-ui-body .wat-public-page > :where(section, .card) + :where(section, .card) {
    margin-top: 20px;
}

/* Account access and recovery */
body:where(.wat-app).repair-ui-body .public-auth-page {
    display: grid;
    width: min(960px, 100%);
    min-height: 430px;
    grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--wat-border);
    border-radius: 14px;
    background: var(--wat-surface);
    box-shadow: var(--wat-elevated-shadow);
}

body:where(.wat-app).repair-ui-body .public-auth-page .login-form-container {
    display: grid;
    align-content: center;
    gap: 12px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(26px, 5vw, 54px);
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
}

body:where(.wat-app).repair-ui-body .public-auth-page .login-form-container > :where(h1, h2) {
    margin: 0;
    color: var(--wat-text);
    font-size: 26px !important;
    font-weight: 760;
    letter-spacing: -0.025em;
}

body:where(.wat-app).repair-ui-body .public-auth-page .login-form-container > hr {
    width: 52px;
    height: 3px;
    margin: 0 0 6px;
    border: 0;
    border-radius: 999px;
    background: var(--wat-gradient);
}

body:where(.wat-app).repair-ui-body .public-auth-page .login-form-container form {
    display: grid;
    gap: 11px;
    margin: 0;
}

body:where(.wat-app).repair-ui-body .public-auth-page .login-form-container form > label:not(.checkbox-label) {
    display: grid;
    gap: 5px;
    color: var(--wat-muted);
    font-size: 12px;
}

body:where(.wat-app).repair-ui-body .public-auth-page .login-form-container :where(input:not([type="checkbox"]), select) {
    width: 100%;
    min-height: 42px;
}

body:where(.wat-app).repair-ui-body .public-auth-page .signup-identity-row {
    display: grid;
    grid-template-columns: minmax(78px, 0.34fr) repeat(2, minmax(0, 1fr));
    gap: 9px;
}

body:where(.wat-app).repair-ui-body .public-auth-page .login-side {
    display: grid;
    align-content: center;
    gap: 20px;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: clamp(28px, 5vw, 54px);
    border: 0;
    border-radius: 0;
    background: var(--wat-command-gradient);
    color: #fff;
    box-shadow: none;
}

body:where(.wat-app).repair-ui-body .public-auth-page .login-side :where(h3, a, b, span, div) {
    color: #fff;
}

body:where(.wat-app).repair-ui-body .public-auth-page .login-side > .flex-row {
    gap: 24px;
    flex-wrap: wrap;
}

body:where(.wat-app).repair-ui-body .public-auth-page .login-side > .flex-row img:first-child {
    width: min(180px, 68%);
    height: auto;
}

body:where(.wat-app).repair-ui-body .public-auth-page .login-side > .flex-row img:last-child {
    width: 74px;
    height: 74px;
    opacity: 0.82;
}

body:where(.wat-app).repair-ui-body .public-auth-page .login-side > .flex-row svg {
    width: 70px;
    height: 70px;
    flex: 0 0 70px;
    color: #fff;
    opacity: 0.86;
    stroke-width: 1.6;
}

body:where(.wat-app).repair-ui-body .public-auth-page .login-side_text {
    font-size: 14px;
    line-height: 1.65;
}

/* Informational, legal and public error pages */
body:where(.wat-app).repair-ui-body .about-hero {
    display: grid;
    grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.28fr);
    gap: 24px;
    align-items: stretch;
    overflow: hidden;
    padding: 0;
}

body:where(.wat-app).repair-ui-body .about-hero_media {
    min-height: 330px;
}

body:where(.wat-app).repair-ui-body .about-hero_image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 12px 0 0 12px;
    object-fit: cover;
}

body:where(.wat-app).repair-ui-body .about-hero_content {
    display: grid;
    align-content: center;
    gap: 10px;
    padding: 30px 30px 30px 6px;
}

body:where(.wat-app).repair-ui-body .about-hero_content h2,
body:where(.wat-app).repair-ui-body .contact-details h2 {
    font-size: 24px;
    font-weight: 720;
    letter-spacing: -0.025em;
}

body:where(.wat-app).repair-ui-body .contact-page-content {
    display: grid;
    grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
    gap: 22px;
    overflow: hidden;
    padding: 0;
}

body:where(.wat-app).repair-ui-body .contact-details {
    display: grid;
    align-content: center;
    gap: 13px;
    padding: 28px 4px 28px 28px;
}

body:where(.wat-app).repair-ui-body .contact-details > :where(a, .flex-row) {
    display: flex;
    min-height: 38px;
    align-items: center;
    gap: 10px;
    color: var(--wat-text);
    text-decoration: none;
}

body:where(.wat-app).repair-ui-body .wat-public-page .contact-details > :where(a, .flex-row) > :where(img, svg) {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    padding: 8px;
    border-radius: 10px;
    background: var(--wat-nav-active);
    color: var(--wat-primary-deep);
    object-fit: contain;
}

body:where(.wat-app).repair-ui-body .contact-img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 310px;
    border-radius: 0 12px 12px 0;
    object-fit: cover;
}

body:where(.wat-app).repair-ui-body .contact-socials {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

body:where(.wat-app).repair-ui-body .contact-socials a {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid var(--wat-border);
    border-radius: 10px;
    background: var(--wat-surface-soft);
}

body:where(.wat-app).repair-ui-body .contact-socials img {
    width: 20px;
    height: 20px;
}

body:where(.wat-app).repair-ui-body .public-legal-page {
    width: min(900px, 100%);
    margin: 0 auto;
    border: 1px solid var(--wat-border);
    border-radius: 14px;
    background: #fff;
    padding: clamp(22px, 4vw, 42px);
    box-shadow: var(--wat-shadow);
}

body:where(.wat-app).repair-ui-body .public-legal-page h1 {
    margin-bottom: 22px;
    font-size: clamp(34px, 5vw, 48px);
    font-weight: 760;
    letter-spacing: -0.04em;
    line-height: 1;
}

body:where(.wat-app).repair-ui-body .public-legal-page h2 {
    margin: 28px 0 8px;
    padding-top: 18px;
    border-top: 1px solid var(--wat-border);
    font-size: 18px;
    font-weight: 680;
}

body:where(.wat-app).repair-ui-body .public-legal-page :where(p, li) {
    color: #40576a;
    font-size: 13.5px;
    line-height: 1.65;
}

body:where(.wat-app).repair-ui-body .public-error-page,
body:where(.wat-app).repair-ui-body .public-error-card {
    width: min(720px, 100%);
    margin-inline: auto;
}

body:where(.wat-app).repair-ui-body .public-error-card {
    padding: 22px;
}

/* Shared contact and footer calls to action */
body:where(.wat-app).repair-ui-body .contact-form-card,
body:where(.wat-app).repair-ui-body .home-section.--contact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.72fr);
    gap: 24px;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--wat-border);
    border-radius: 12px;
    background: #fff;
    padding: clamp(20px, 4vw, 34px);
    box-shadow: var(--wat-shadow);
}

body:where(.wat-app).repair-ui-body .contact-form {
    display: grid;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

body:where(.wat-app).repair-ui-body .contact-form h3 {
    font-size: 25px !important;
    font-weight: 720;
    letter-spacing: -0.025em;
}

body:where(.wat-app).repair-ui-body .contact-form-card > img,
body:where(.wat-app).repair-ui-body .home-section.--contact > img {
    display: block;
    width: min(100%, 330px);
    max-height: 290px;
    justify-self: center;
    object-fit: contain;
}

body:where(.wat-app).repair-ui-body :where(.community-footer, .newsletter-footer) {
    position: relative;
    overflow: hidden;
    margin: 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    font-family: inherit !important;
}

body:where(.wat-app).repair-ui-body .community-footer {
    background: var(--wat-command-gradient);
    color: #fff;
    padding: 34px 24px;
}

body:where(.wat-app).repair-ui-body .community-footer_background {
    width: min(1240px, 100%);
    margin: 0 auto;
}

body:where(.wat-app).repair-ui-body .community-footer :where(h3, p, b, a) {
    color: #fff;
}

body:where(.wat-app).repair-ui-body .newsletter-footer {
    background: #0b263e;
    color: #fff;
    padding: 30px 24px;
}

body:where(.wat-app).repair-ui-body .newsletter-footer-content {
    display: grid;
    width: min(1240px, 100%);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    margin: 0 auto;
}

body:where(.wat-app).repair-ui-body .newsletter-footer :where(h3, a, p, div, label) {
    color: #fff;
}

body:where(.wat-app).repair-ui-body .newsletter-footer :where(.newsletter-footer_bg, .newsletter-footer_bg-1, .newsletter-footer_bg-2, .newsletter-footer_bg-3) {
    background: transparent;
}

body:where(.wat-app).repair-ui-body .newsletter-form {
    display: grid;
    gap: 9px;
}

body:where(.wat-app).repair-ui-portal #footer {
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: #063f5b;
    color: #fff;
    padding: 28px 24px 32px;
}

body:where(.wat-app).repair-ui-portal #footer .footer-content {
    display: grid;
    width: min(1240px, 100%);
    grid-template-columns: minmax(180px, 1.35fr) repeat(4, minmax(120px, 1fr));
    gap: 30px;
    margin: 0 auto;
}

body:where(.wat-app).repair-ui-portal #footer :where(.footer-section, .footer-content_images) {
    display: grid;
    align-content: start;
    gap: 6px;
}

body:where(.wat-app).repair-ui-portal #footer :where(h3, a, span, .copyright) {
    color: #fff;
}

/* Home */
body:where(.wat-app).wat-public .home-hero.slider {
    position: relative;
    width: 100%;
    min-height: min(590px, 66vh);
    overflow: hidden;
    border-bottom: 1px solid var(--wat-border);
    background: #092c49;
}

body:where(.wat-app).wat-public .home-hero .slide {
    isolation: isolate;
}

body:where(.wat-app).wat-public .home-hero .slide_background {
    z-index: 0;
}

body:where(.wat-app).wat-public .home-hero .slide-text {
    position: relative;
    z-index: 1;
    width: min(560px, calc(100% - 104px));
    margin: auto auto auto max(52px, calc((100vw - 1240px) / 2));
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 14px;
    background: rgba(5, 41, 78, 0.82);
    color: #fff;
    padding: clamp(24px, 4vw, 40px);
    box-shadow: 0 24px 62px rgba(4, 20, 42, 0.24);
    backdrop-filter: blur(10px);
}

body:where(.wat-app).wat-public .home-hero .slide-text :where(h2, p) {
    color: #fff;
}

body:where(.wat-app).wat-public .home-hero .slide-text h2 {
    font-size: clamp(34px, 5vw, 54px);
    font-weight: 760;
    letter-spacing: -0.045em;
    line-height: 0.98;
}

body:where(.wat-app).wat-public .home-hero .slide-text p {
    max-width: 490px;
    font-size: 15px;
    line-height: 1.55;
}

body:where(.wat-app).wat-public .home-hero .slider-control {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 999px;
    background-color: rgba(5, 41, 78, 0.62);
    backdrop-filter: blur(8px);
}

body:where(.wat-app).wat-public .newsletter-popup {
    position: fixed;
    z-index: 70;
    right: 22px;
    bottom: 22px;
    display: grid;
    width: min(390px, calc(100vw - 24px));
    gap: 9px;
    border: 1px solid var(--wat-border-strong);
    border-radius: 14px;
    background: #fff;
    color: var(--wat-text);
    padding: 22px;
    box-shadow: 0 22px 58px rgba(5, 24, 43, 0.2);
}

body:where(.wat-app).wat-public .newsletter-popup_close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    min-height: 34px;
    border: 1px solid var(--wat-border);
    background: #fff;
    color: var(--wat-muted);
}

body:where(.wat-app).wat-public .home-intro {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--wat-border);
    border-radius: 14px;
    background: linear-gradient(135deg, #fff 0%, #f2fffc 100%);
    padding: clamp(28px, 6vw, 64px);
    box-shadow: var(--wat-shadow);
}

body:where(.wat-app).wat-public .home-intro::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, #007dde, #00a4bf);
    content: "";
}

body:where(.wat-app).wat-public .home-intro_content {
    max-width: 880px;
}

body:where(.wat-app).wat-public .home-intro h1 {
    margin: 0;
    font-size: clamp(38px, 5.5vw, 60px);
    font-weight: 760;
    letter-spacing: -0.05em;
    line-height: 0.98;
}

body:where(.wat-app).wat-public .home-intro p {
    max-width: 720px;
    margin: 18px 0 0;
    color: var(--wat-muted);
    font-size: 15px;
}

body:where(.wat-app).wat-public .home-intro_actions,
body:where(.wat-app).wat-public .home-intro_contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
}

body:where(.wat-app).wat-public .home-intro_contact {
    padding-top: 18px;
    border-top: 1px solid var(--wat-border);
}

body:where(.wat-app).wat-public .home-intro_contact-label {
    color: var(--wat-muted);
    font-size: 11px;
    font-weight: 720;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body:where(.wat-app).wat-public .home-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--wat-primary-deep);
    font-weight: 630;
    text-decoration: none;
}

body:where(.wat-app).wat-public .home-contact-item :where(img, svg) {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    object-fit: contain;
}

body:where(.wat-app).repair-ui-public #header .mobile-header-menu-content svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: var(--wat-primary-deep);
}

body:where(.wat-app).repair-ui-body .mobile-sticky-tel {
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #25d366;
    color: #fff;
    box-shadow: 0 10px 28px rgba(5, 41, 78, 0.2);
}

body:where(.wat-app).repair-ui-body .mobile-sticky-tel svg {
    width: 26px;
    height: 26px;
}

body:where(.wat-app).wat-public .home-services {
    margin-top: 20px;
}

body:where(.wat-app).wat-public .services-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

body:where(.wat-app).wat-public .services-list_cell {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--wat-border);
    border-radius: 12px;
    background: #fff;
    color: var(--wat-text);
    padding: 20px;
    box-shadow: var(--wat-shadow);
    text-decoration: none;
}

body:where(.wat-app).wat-public .services-list_cell::after {
    opacity: 0.08;
}

body:where(.wat-app).wat-public .services-list_cell :where(h2, li) {
    color: var(--wat-text);
}

body:where(.wat-app).wat-public .home-benefits {
    margin-top: 20px;
    border: 1px solid var(--wat-border);
    border-radius: 14px;
    background: var(--wat-surface-soft);
    padding: clamp(20px, 4vw, 34px);
}

body:where(.wat-app).wat-public .home-benefits_header h2 {
    margin: 0 0 20px;
    font-size: 28px;
    font-weight: 720;
    letter-spacing: -0.03em;
}

body:where(.wat-app).wat-public .home-benefits_body {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    gap: 20px;
    align-items: start;
}

body:where(.wat-app).wat-public .benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

body:where(.wat-app).wat-public .benefit-card {
    display: grid;
    min-height: 190px;
    place-items: center;
    align-content: center;
    gap: 9px;
    border: 1px solid var(--wat-border);
    border-radius: 12px;
    background: #fff;
    padding: 18px;
    text-align: center;
}

body:where(.wat-app).wat-public .benefit-card img {
    width: 72px;
    height: 72px;
}

body:where(.wat-app).wat-public .benefit-card :where(h3, p) {
    margin: 0;
}

body:where(.wat-app).wat-public .home-benefits_contact {
    padding: 22px;
}

body:where(.wat-app).wat-public .home-section:not(.--contact) {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.65fr);
    gap: 28px;
    align-items: center;
    margin-top: 20px;
    border: 1px solid var(--wat-border);
    border-radius: 14px;
    background: #fff;
    padding: clamp(24px, 4vw, 38px);
    box-shadow: var(--wat-shadow);
    text-align: left;
}

body:where(.wat-app).wat-public .home-section.text-right:not(.--contact) {
    grid-template-columns: minmax(220px, 0.65fr) minmax(0, 1.35fr);
}

body:where(.wat-app).wat-public .home-section:not(.--contact) > img {
    display: block;
    width: min(100%, 300px);
    max-height: 300px;
    justify-self: center;
    object-fit: contain;
}

body:where(.wat-app).wat-public .home-section:not(.--contact) .mobile-img {
    display: none;
}

body:where(.wat-app).wat-public .home-section:not(.--contact) h2 {
    margin-bottom: 12px;
    font-size: 30px;
    font-weight: 720;
    letter-spacing: -0.035em;
}

body:where(.wat-app).wat-public .home-section:not(.--contact) :where(p, li) {
    color: #40576a;
    line-height: 1.58;
}

/* Anonymous collection request */
body:where(.wat-app).wat-public .public-collection-request {
    width: min(980px, 100%);
    margin: 0 auto;
}

body:where(.wat-app).wat-public .public-collection-request .portal-ui-form {
    display: grid;
    gap: 14px;
    padding: 0 18px 18px;
    overflow: visible;
}

body:where(.wat-app).wat-public .public-collection-request .portal-ui-form > .card-title:first-child {
    margin: 0 -18px;
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--wat-border);
    background: var(--wat-surface-soft);
}

body:where(.wat-app).wat-public .public-collection-request .portal-ui-form > :not(.card-title) {
    width: auto;
    min-width: 0;
    margin-inline: 0;
}

body:where(.wat-app).wat-public .public-collection-request .portal-ui-form > :last-child {
    margin-bottom: 0;
}

body:where(.wat-app).wat-public .public-collection-request .portal-ui-form-section {
    display: grid;
    gap: 12px;
    margin: 0;
    border: 1px solid var(--wat-border);
    border-radius: 10px;
    background: var(--wat-surface-soft);
    padding: 14px;
}

body:where(.wat-app).wat-public .public-collection-request .portal-ui-section-title {
    margin: 0;
    font-size: 15px;
    font-weight: 680;
}

body:where(.wat-app).wat-public .public-collection-request :where(.collection-request-location-grid, .collection-request-name-grid, .collection-request-contact-grid) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

body:where(.wat-app).wat-public .public-collection-request :where(label, .collection-request-message) {
    display: grid;
    gap: 6px;
}

body:where(.wat-app).wat-public .public-collection-request .checkbox-label {
    display: flex;
    width: auto;
    min-width: 0;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

body:where(.wat-app).wat-public .public-collection-request .checkbox-label > input {
    flex: 0 0 auto;
}

body:where(.wat-app).wat-public .public-collection-request .collection-request-map {
    min-height: 190px;
    overflow: hidden;
    border: 1px solid var(--wat-border);
    border-radius: 10px;
    background: #edf4f7;
}

@media (min-width: 601px) {
    body:where(.wat-app).wat-public .public-collection-request .collection-request-location-grid:has(.collection-request-address-label) > .collection-request-map.map.--short {
        margin-top: calc(1.15em + 7px);
    }
}

body:where(.wat-app).wat-public .public-collection-request .collection-request-required {
    color: var(--wat-error);
}

body:where(.wat-app).wat-public .public-collection-request .collection-request-required-note {
    margin-top: 0;
    color: var(--wat-muted);
    font-size: 11.5px;
}

body:where(.wat-app).wat-public .public-collection-request .collection-items-optional__toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

body:where(.wat-app).wat-public .public-collection-request .collection-items-optional__toggle-text {
    display: grid;
    gap: 2px;
}

body:where(.wat-app).wat-public .public-collection-request .portal-ui-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

body:where(.wat-app).wat-public .public-collection-request .item-type-popup {
    position: absolute;
    z-index: 60;
    display: grid;
    min-width: 0;
    width: min(420px, calc(100vw - 48px));
    max-height: min(55vh, 420px);
    gap: 9px;
    overflow-y: auto;
    border: 1px solid var(--wat-border-strong);
    border-radius: 12px;
    background: #fff;
    padding: 10px;
    box-shadow: 0 22px 54px rgba(5, 56, 84, 0.18);
}

body:where(.wat-app).wat-public .public-collection-request .collection-items-optional__add > .popup-anchor {
    display: block;
    width: 0;
    height: 0;
    overflow: visible;
}

body:where(.wat-app).wat-public .public-collection-request .collection-items-optional__add > .popup-anchor > .item-type-popup {
    top: 0;
    left: 0;
    max-width: calc(100vw - 72px);
}

@media (max-width: 960px) {
    body:where(.wat-app).repair-ui-body .public-auth-page,
    body:where(.wat-app).repair-ui-body .contact-page-content,
    body:where(.wat-app).repair-ui-body .about-hero,
    body:where(.wat-app).wat-public .home-benefits_body {
        grid-template-columns: minmax(0, 1fr);
    }

    body:where(.wat-app).repair-ui-body .public-auth-page .login-side {
        min-height: 250px;
    }

    body:where(.wat-app).repair-ui-body .about-hero_image,
    body:where(.wat-app).repair-ui-body .contact-img {
        min-height: 280px;
        border-radius: 12px 12px 0 0;
    }

    body:where(.wat-app).repair-ui-body .about-hero_content,
    body:where(.wat-app).repair-ui-body .contact-details {
        padding: 24px;
    }

    body:where(.wat-app).wat-public .services-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:where(.wat-app).repair-ui-portal #footer .footer-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    body:where(.wat-app).wat-public .wat-public-main {
        width: min(100% - 24px, 1240px);
        padding: 24px 0 44px;
    }

    body:where(.wat-app).repair-ui-body .public-auth-page .signup-identity-row,
    body:where(.wat-app).repair-ui-body .contact-form-card,
    body:where(.wat-app).repair-ui-body .home-section.--contact,
    body:where(.wat-app).wat-public .home-section:not(.--contact),
    body:where(.wat-app).wat-public .home-section.text-right:not(.--contact),
    body:where(.wat-app).wat-public .public-collection-request :where(.collection-request-location-grid, .collection-request-name-grid, .collection-request-contact-grid) {
        grid-template-columns: minmax(0, 1fr);
    }

    body:where(.wat-app).wat-public .home-hero.slider {
        min-height: 540px;
    }

    body:where(.wat-app).wat-public .home-hero .slide-text {
        width: calc(100% - 48px);
        margin: auto 24px;
    }

    body:where(.wat-app).wat-public .home-section:not(.--contact) > img {
        display: none;
    }

    body:where(.wat-app).wat-public .home-section:not(.--contact) .mobile-img {
        display: block;
        width: min(100%, 250px);
        margin: 16px auto;
    }

    body:where(.wat-app).repair-ui-body .contact-form-card > img,
    body:where(.wat-app).repair-ui-body .home-section.--contact > img {
        width: min(70%, 250px);
    }

    body:where(.wat-app).repair-ui-body .newsletter-footer-content,
    body:where(.wat-app).repair-ui-portal #footer .footer-content {
        grid-template-columns: minmax(0, 1fr);
    }

}

@media (max-width: 520px) {
    body:where(.wat-app).repair-ui-body .public-auth-page .login-form-container,
    body:where(.wat-app).repair-ui-body .public-auth-page .login-side,
    body:where(.wat-app).repair-ui-body .public-legal-page {
        padding: 20px;
    }

    body:where(.wat-app).wat-public .services-list,
    body:where(.wat-app).wat-public .benefits-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body:where(.wat-app).wat-public .home-intro_actions > :where(a, button) {
        width: 100%;
    }

    body:where(.wat-app).wat-public .newsletter-popup {
        right: 12px;
        bottom: 12px;
    }

    body:where(.wat-app).wat-public .public-collection-request .portal-ui-form > :not(.card-title) {
        margin-inline: 0;
    }

    body:where(.wat-app).wat-public .public-collection-request .portal-ui-form {
        padding: 0 12px 12px;
    }

    body:where(.wat-app).wat-public .public-collection-request .portal-ui-form > .card-title:first-child {
        margin-inline: -12px;
    }

    body:where(.wat-app).wat-public .public-collection-request .collection-items-optional__add > .popup-anchor > .item-type-popup {
        width: min(420px, calc(100vw - 80px));
        max-width: calc(100vw - 80px);
    }
}

/* #endregion */

/* #region Complete authenticated internal admin workspace
 *
 * The remaining admin, employee and developer pages still render their
 * established semantic class names. This scoped bridge applies the canonical
 * WAT shell, typography, surfaces, actions and responsive rules without
 * leaking into public or historical routes.
 */

body:where(.wat-app).wat-admin {
    overflow-x: hidden;
}

body:where(.wat-app).wat-admin:has(#modalContainer > :where(.modal, .mockup-modal, .popup)) {
    overflow: hidden;
}

:where(body.wat-app).wat-admin .admin-page {
    display: grid;
    min-width: 0;
    gap: 20px;
    color: var(--text);
}

:where(body.wat-app).wat-admin .admin-page > * {
    min-width: 0;
}

:where(body.wat-app).wat-admin .admin-page :where(h1, h2, h3, h4, p) {
    color: inherit;
}

:where(body.wat-app).wat-admin .admin-page .page-header {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 2px;
}

:where(body.wat-app).wat-admin .admin-page .page-header_title {
    min-width: 0;
}

:where(body.wat-app).wat-admin .admin-page .page-header_title h1,
:where(body.wat-app).wat-admin .admin-page > h1 {
    margin: 0;
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 49px;
    font-weight: 760;
    letter-spacing: -0.045em;
    line-height: 0.98;
}

:where(body.wat-app).wat-admin .admin-page .page-header_subtitle {
    max-width: 760px;
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.45;
}

:where(body.wat-app).wat-admin .admin-page .page-header_actions,
:where(body.wat-app).wat-admin .admin-page .buttons-row,
:where(body.wat-app).wat-admin .admin-page .workflow-actions,
:where(body.wat-app).wat-admin #modalContainer :where(.buttons-row, .workflow-actions) {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

:where(body.wat-app).wat-admin .admin-page :where(
    .card,
    details.card,
    .panel,
    .e-waste-card,
    .stat-card,
    .field-card,
    .operator-input-card,
    .invoice-card,
    .dispatch-card,
    .state-hero-card,
    .portal-ui-entity-card
),
:where(body.wat-app).wat-admin #modalContainer :where(
    .card,
    details.card,
    .panel,
    .e-waste-card,
    .stat-card,
    .field-card,
    .operator-input-card,
    .invoice-card,
    .dispatch-card,
    .state-hero-card,
    .portal-ui-entity-card
) {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    background: var(--panel);
    box-shadow: var(--soft-shadow);
}

:where(body.wat-app).wat-admin .admin-page :where(.card, details.card, .panel),
:where(body.wat-app).wat-admin #modalContainer :where(.card, details.card, .panel) {
    margin: 0;
}

:where(body.wat-app).wat-admin .admin-page :where(.card-title, .panel-title),
:where(body.wat-app).wat-admin #modalContainer :where(.card-title, .panel-title) {
    margin: 0;
    color: var(--text);
    font-size: 16px;
    font-weight: 680;
    line-height: 1.15;
}

:where(body.wat-app).wat-admin .admin-page .card:not(details, fieldset) > .card-title:first-child,
:where(body.wat-app).wat-admin .admin-page .card > #eWasteSubcategoriesArea > .card-title:first-child,
:where(body.wat-app).wat-admin .admin-page .card > #adminProductsDetailsArea > .card-title:first-child,
:where(body.wat-app).wat-admin .admin-page .card > #adminProductsDetailsArea > .admin-products-items-panel > .card-title:first-child,
:where(body.wat-app).wat-admin #modalContainer .card:not(details, fieldset) > .card-title:first-child {
    margin: -16px -16px 16px;
    border-radius: 11px 11px 0 0;
    padding: 14px 18px 12px;
    background: linear-gradient(180deg, #fff, #fbfefe);
}

:where(body.wat-app).wat-admin .admin-page details.card[open] > summary.card-title:first-child,
:where(body.wat-app).wat-admin #modalContainer details.card[open] > summary.card-title:first-child {
    margin: -16px -16px 16px;
}

:where(body.wat-app).wat-admin .admin-page fieldset.card > legend.card-title:first-child,
:where(body.wat-app).wat-admin #modalContainer fieldset.card > legend.card-title:first-child {
    width: calc(100% + 32px);
    max-width: none;
    box-sizing: border-box;
    margin: -16px -16px 16px;
    border-radius: 11px 11px 0 0;
    padding: 14px 18px 12px;
    background: linear-gradient(180deg, #fff, #fbfefe);
}

:where(body.wat-app).wat-admin .admin-page .admin-users-workspace {
    display: grid;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

:where(body.wat-app).wat-admin .admin-page .admin-users-data-quality-bar {
    margin-bottom: 12px;
}

:where(body.wat-app).wat-admin .admin-page :where(.panel-header, .invoice-card-head, .dispatch-card-header),
:where(body.wat-app).wat-admin #modalContainer :where(.panel-header, .invoice-card-head, .dispatch-card-header) {
    border-bottom: 1px solid var(--border);
    padding: 14px 18px 12px;
    background: linear-gradient(180deg, #fff, #fbfefe);
}

:where(body.wat-app).wat-admin .admin-page :where(.panel-body, .invoice-card-body, .dispatch-card-body),
:where(body.wat-app).wat-admin #modalContainer :where(.panel-body, .invoice-card-body, .dispatch-card-body) {
    padding: 14px;
}

:where(body.wat-app).wat-admin .admin-page details.card > summary {
    min-height: 54px;
    border-radius: 12px;
    padding: 14px 18px;
    color: var(--text);
    background: transparent;
    font-size: 16px;
    font-weight: 680;
}

:where(body.wat-app).wat-admin .admin-page details.card[open] > summary {
    border-bottom: 1px solid var(--border);
    border-radius: 11px 11px 0 0;
    background: linear-gradient(180deg, #fff, #fbfefe);
}

:where(body.wat-app).wat-admin .admin-page details.card[open] > :not(summary) {
    margin-right: 0;
    margin-left: 0;
}

:where(body.wat-app).wat-admin .admin-page details.card[open] > :last-child {
    margin-bottom: 0;
}

:where(body.wat-app).wat-admin .admin-page :where(
    .cards-grid,
    .e-waste-card-grid,
    .stats-grid,
    .workflow-stack,
    .map-legend-layout
) {
    gap: 20px;
}

:where(body.wat-app).wat-admin .admin-page :where(.table-container, .overflow-auto),
:where(body.wat-app).wat-admin #modalContainer :where(.table-container, .overflow-auto) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel);
    box-shadow: var(--soft-shadow);
}

:where(body.wat-app).wat-admin .admin-page :where(table, .table, .table-sober, .ops-inbox-table),
:where(body.wat-app).wat-admin #modalContainer :where(table, .table, .table-sober, .ops-inbox-table) {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--text);
    background: transparent;
    font-size: 13px;
}

:where(body.wat-app).wat-admin .admin-page :where(table, .table, .table-sober, .ops-inbox-table) th,
:where(body.wat-app).wat-admin #modalContainer :where(table, .table, .table-sober, .ops-inbox-table) th {
    border-bottom: 1px solid var(--border-strong);
    padding: 11px 12px;
    color: #4c617a;
    background: var(--panel-soft);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.25;
    text-align: left;
    text-transform: uppercase;
}

:where(body.wat-app).wat-admin .admin-page :where(table, .table, .table-sober, .ops-inbox-table) td,
:where(body.wat-app).wat-admin #modalContainer :where(table, .table, .table-sober, .ops-inbox-table) td {
    border-bottom: 1px solid var(--border);
    padding: 11px 12px;
    color: var(--text);
    vertical-align: middle;
}

:where(body.wat-app).wat-admin .admin-page :where(table, .table, .table-sober, .ops-inbox-table) tbody tr:last-child td,
:where(body.wat-app).wat-admin #modalContainer :where(table, .table, .table-sober, .ops-inbox-table) tbody tr:last-child td {
    border-bottom: 0;
}

:where(body.wat-app).wat-admin .admin-page :where(table, .table, .table-sober, .ops-inbox-table) tbody tr:hover td,
:where(body.wat-app).wat-admin #modalContainer :where(table, .table, .table-sober, .ops-inbox-table) tbody tr:hover td {
    background: #f8fbff;
}

:where(body.wat-app).wat-admin .admin-page :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select,
    textarea,
    .select-button,
    .workflow-input-field
),
:where(body.wat-app).wat-admin #modalContainer :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select,
    textarea,
    .select-button,
    .workflow-input-field
) {
    min-height: 40px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 9px 11px;
    color: var(--text);
    background: #fff;
    font: inherit;
    box-shadow: none;
}

:where(body.wat-app).wat-admin .admin-page textarea,
:where(body.wat-app).wat-admin #modalContainer textarea {
    min-height: 96px;
    resize: vertical;
}

:where(body.wat-app).wat-admin .admin-page :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select,
    textarea,
    .select-button,
    .workflow-input-field
):focus,
:where(body.wat-app).wat-admin #modalContainer :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select,
    textarea,
    .select-button,
    .workflow-input-field
):focus {
    border-color: var(--wat-blue);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(0, 127, 222, 0.15);
}

:where(body.wat-app).wat-admin .admin-page :where(label, .label-row, .row-label, .stat-card_label, .field-label),
:where(body.wat-app).wat-admin #modalContainer :where(label, .label-row, .row-label, .stat-card_label, .field-label) {
    color: var(--muted);
    font-size: 12px;
    font-weight: 560;
    line-height: 1.35;
}

:where(body.wat-app).wat-admin .admin-page :where(
    .button,
    .button-blue,
    .button-blue-2,
    .button-red-2,
    .button-primary,
    .button-secondary,
    .button-light,
    .button-danger,
    .text-button,
    .button-delete-row
),
:where(body.wat-app).wat-admin #modalContainer :where(
    .button,
    .button-blue,
    .button-blue-2,
    .button-red-2,
    .button-primary,
    .button-secondary,
    .button-light,
    .button-danger,
    .text-button,
    .button-delete-row
) {
    position: relative;
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 9px 14px;
    font-family: var(--font-ui);
    font-size: 13.5px;
    font-weight: 630;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

:where(body.wat-app).wat-admin .admin-page :where(.button-blue, .button-primary),
:where(body.wat-app).wat-admin #modalContainer :where(.button-blue, .button-primary) {
    border-color: transparent;
    color: #fff;
    background: var(--primary-gradient);
    box-shadow: var(--action-shadow);
}

:where(body.wat-app).wat-admin .admin-page :where(.button-blue-2, .button-secondary),
:where(body.wat-app).wat-admin #modalContainer :where(.button-blue-2, .button-secondary) {
    border-color: #9fc8e8;
    color: var(--wat-blue-deep);
    background: #fff;
    box-shadow: 0 7px 18px rgba(7, 29, 73, 0.04);
}

:where(body.wat-app).wat-admin .admin-page .button-light,
:where(body.wat-app).wat-admin #modalContainer .button-light {
    border-color: #cae4f8;
    color: var(--wat-blue-deep);
    background: var(--nav-active-bg);
}

:where(body.wat-app).wat-admin .admin-page :where(.button-red-2, .button-danger, .button-delete-row),
:where(body.wat-app).wat-admin #modalContainer :where(.button-red-2, .button-danger, .button-delete-row) {
    border-color: #ffd0cc;
    color: #b42318;
    background: #fff1f0;
}

:where(body.wat-app).wat-admin .admin-page :where(.text-button),
:where(body.wat-app).wat-admin #modalContainer :where(.text-button) {
    min-height: 34px;
    border-color: transparent;
    padding: 7px 8px;
    color: var(--wat-blue-deep);
    background: transparent;
}

:where(body.wat-app).wat-admin .admin-page :where(
    .button,
    .button-blue,
    .button-blue-2,
    .button-red-2,
    .button-primary,
    .button-secondary,
    .button-light,
    .button-danger,
    .text-button,
    .button-delete-row
):is(:hover, :focus-visible):not(:disabled),
:where(body.wat-app).wat-admin #modalContainer :where(
    .button,
    .button-blue,
    .button-blue-2,
    .button-red-2,
    .button-primary,
    .button-secondary,
    .button-light,
    .button-danger,
    .text-button,
    .button-delete-row
):is(:hover, :focus-visible):not(:disabled) {
    transform: translateY(-1px);
}

:where(body.wat-app).wat-admin .admin-page :where(
    .button,
    .button-blue,
    .button-blue-2,
    .button-red-2,
    .button-primary,
    .button-secondary,
    .button-light,
    .button-danger,
    .text-button,
    .button-delete-row
):focus-visible,
:where(body.wat-app).wat-admin #modalContainer :where(
    .button,
    .button-blue,
    .button-blue-2,
    .button-red-2,
    .button-primary,
    .button-secondary,
    .button-light,
    .button-danger,
    .text-button,
    .button-delete-row
):focus-visible {
    outline: 3px solid rgba(0, 127, 222, 0.2);
    outline-offset: 2px;
}

:where(body.wat-app).wat-admin .admin-page :where(
    .button,
    .button-blue,
    .button-blue-2,
    .button-red-2,
    .button-primary,
    .button-secondary,
    .button-light,
    .button-danger,
    .text-button,
    .button-delete-row
):disabled,
:where(body.wat-app).wat-admin #modalContainer :where(
    .button,
    .button-blue,
    .button-blue-2,
    .button-red-2,
    .button-primary,
    .button-secondary,
    .button-light,
    .button-danger,
    .text-button,
    .button-delete-row
):disabled {
    cursor: not-allowed;
    opacity: 0.58;
    box-shadow: none;
    transform: none;
}

:where(body.wat-app).wat-admin .admin-page :where(.small, .--small),
:where(body.wat-app).wat-admin #modalContainer :where(.small, .--small) {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 12.5px;
}

:where(body.wat-app).wat-admin .admin-page :where(
    .status-badge,
    .state-badge,
    .dispatch-pill,
    .invoice-pill,
    .quote-pill,
    .tag
),
:where(body.wat-app).wat-admin #modalContainer :where(
    .status-badge,
    .state-badge,
    .dispatch-pill,
    .invoice-pill,
    .quote-pill,
    .tag
) {
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
    border-radius: 9999px;
    padding: 5px 9px;
    color: #4c617a;
    background: #eef4f8;
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.15;
}

:where(body.wat-app).wat-admin .admin-page :where(.status-badge--success, .status-badge.is-success, .state-badge.is-success, .dispatch-pill.is-success, .invoice-pill.is-success, .quote-pill.is-success, .tag.is-success),
:where(body.wat-app).wat-admin #modalContainer :where(.status-badge--success, .status-badge.is-success, .state-badge.is-success, .dispatch-pill.is-success, .invoice-pill.is-success, .quote-pill.is-success, .tag.is-success) {
    border-color: #bdebdc;
    color: #096b59;
    background: #e7f9f3;
}

:where(body.wat-app).wat-admin .admin-page :where(.status-badge--warning, .status-badge.is-warning, .state-badge.is-warning, .dispatch-pill.is-warning, .invoice-pill.is-warning, .quote-pill.is-warning, .tag.is-warning),
:where(body.wat-app).wat-admin #modalContainer :where(.status-badge--warning, .status-badge.is-warning, .state-badge.is-warning, .dispatch-pill.is-warning, .invoice-pill.is-warning, .quote-pill.is-warning, .tag.is-warning) {
    border-color: #f2d39c;
    color: #87520b;
    background: #fff5df;
}

:where(body.wat-app).wat-admin .admin-page :where(.status-badge--danger, .status-badge.is-danger, .state-badge.is-danger, .dispatch-pill.is-danger, .invoice-pill.is-danger, .quote-pill.is-danger, .tag.is-danger),
:where(body.wat-app).wat-admin #modalContainer :where(.status-badge--danger, .status-badge.is-danger, .state-badge.is-danger, .dispatch-pill.is-danger, .invoice-pill.is-danger, .quote-pill.is-danger, .tag.is-danger) {
    border-color: #ffd0cc;
    color: #b42318;
    background: #fff1f0;
}

:where(body.wat-app).wat-admin .admin-page :where(.status-badge--info, .status-badge.is-info, .state-badge.is-info, .dispatch-pill.is-info, .invoice-pill.is-info, .quote-pill.is-info, .tag.is-info),
:where(body.wat-app).wat-admin #modalContainer :where(.status-badge--info, .status-badge.is-info, .state-badge.is-info, .dispatch-pill.is-info, .invoice-pill.is-info, .quote-pill.is-info, .tag.is-info) {
    border-color: #c8dff6;
    color: var(--wat-blue-deep);
    background: #eaf4ff;
}

:where(body.wat-app).wat-admin .admin-page .feedback,
:where(body.wat-app).wat-admin #modalContainer .feedback {
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 11px 13px;
    color: #4c617a;
    background: #eef4f8;
    font-size: 13px;
    line-height: 1.4;
}

:where(body.wat-app).wat-admin .admin-page .feedback.success,
:where(body.wat-app).wat-admin #modalContainer .feedback.success {
    border-color: #bdebdc;
    color: #096b59;
    background: #e7f9f3;
}

:where(body.wat-app).wat-admin .admin-page .feedback.warning,
:where(body.wat-app).wat-admin #modalContainer .feedback.warning {
    border-color: #f2d39c;
    color: #87520b;
    background: #fff5df;
}

:where(body.wat-app).wat-admin .admin-page .feedback.error,
:where(body.wat-app).wat-admin #modalContainer .feedback.error {
    border-color: #ffc9d1;
    color: #b72239;
    background: #fff0f2;
}

:where(body.wat-app).wat-admin .admin-page :where(.muted, .no-value, .tip, small),
:where(body.wat-app).wat-admin #modalContainer :where(.muted, .no-value, .tip, small) {
    color: var(--muted);
}

:where(body.wat-app).wat-admin .admin-collection-search-form {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 10px;
}

:where(body.wat-app).wat-admin .admin-collection-search-form > label {
    display: grid;
    gap: 6px;
}

:where(body.wat-app):is(.wat-admin, .repair-ui-admin) .admin-status-filter-form {
    display: grid;
    min-width: 0;
    margin: 0 0 14px;
}

:where(body.wat-app):is(.wat-admin, .repair-ui-admin) .admin-status-filter-panel {
    width: 100%;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px 14px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: var(--soft-shadow);
}

:where(body.wat-app):is(.wat-admin, .repair-ui-admin) .admin-status-filter-panel > legend {
    padding: 0 5px;
}

:where(body.wat-app):is(.wat-admin, .repair-ui-admin) .admin-status-filter-panel > legend h3 {
    margin: 0;
    color: var(--text);
    font-size: 16px;
    font-weight: 680;
    line-height: 1.12;
}

:where(body.wat-app):is(.wat-admin, .repair-ui-admin) .admin-status-filter-toolbar {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 14px;
}

:where(body.wat-app):is(.wat-admin, .repair-ui-admin) .admin-status-filter-toolbar .checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

:where(body.wat-app):is(.wat-admin, .repair-ui-admin) .admin-status-filter-timeline {
    --status-filter-step-gap: 10px;
    --status-filter-step-width: 100px;
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(auto-fill, var(--status-filter-step-width));
    justify-content: start;
    gap: var(--status-filter-step-gap);
    overflow: visible;
    padding: 2px 0;
    counter-reset: admin-status-filter-step;
}

:where(body.wat-app):is(.wat-admin, .repair-ui-admin) .admin-status-filter-step {
    position: relative;
    z-index: 1;
    display: block;
    width: var(--status-filter-step-width);
    min-width: 0;
    padding: 0;
    color: #728197;
    text-align: center;
    cursor: pointer;
    counter-increment: admin-status-filter-step;
}

:where(body.wat-app):is(.wat-admin, .repair-ui-admin) .admin-status-filter-step::before {
    position: absolute;
    z-index: -1;
    top: 18px;
    right: calc(var(--status-filter-step-gap) / -2);
    left: calc(var(--status-filter-step-gap) / -2);
    height: 3px;
    border-radius: 999px;
    background: #d7e2ed;
    content: "";
}

:where(body.wat-app):is(.wat-admin, .repair-ui-admin) .admin-status-filter-step.is-row-start::before {
    left: 50%;
}

:where(body.wat-app):is(.wat-admin, .repair-ui-admin) .admin-status-filter-step.is-row-end::before {
    right: 50%;
}

:where(body.wat-app):is(.wat-admin, .repair-ui-admin) .admin-status-filter-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

:where(body.wat-app):is(.wat-admin, .repair-ui-admin) .admin-status-filter-step .step-dot {
    position: relative;
    z-index: 1;
    margin-bottom: 7px;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}

:where(body.wat-app):is(.wat-admin, .repair-ui-admin) .admin-status-filter-step .step-dot::before {
    content: counter(admin-status-filter-step);
}

:where(body.wat-app):is(.wat-admin, .repair-ui-admin) .admin-status-filter-step .step-label {
    width: max-content;
    min-height: 0;
    margin-inline: auto;
    color: inherit;
    white-space: nowrap;
}

:where(body.wat-app):is(.wat-admin, .repair-ui-admin) .admin-status-filter-step:has(input:checked) {
    color: var(--wat-blue-deep);
}

:where(body.wat-app):is(.wat-admin, .repair-ui-admin) .admin-status-filter-step:has(input:checked) .step-dot {
    border-color: var(--wat-blue);
    color: #fff;
    background: var(--primary-gradient);
    box-shadow: var(--action-shadow);
}

:where(body.wat-app):is(.wat-admin, .repair-ui-admin) .admin-status-filter-step:is(:hover, :focus-within) .step-dot {
    border-color: var(--wat-blue);
    transform: translateY(-1px);
}

:where(body.wat-app):is(.wat-admin, .repair-ui-admin) .admin-status-filter-step:has(input:focus-visible) .step-dot {
    outline: 3px solid rgba(0, 127, 222, 0.2);
    outline-offset: 3px;
}

:where(body.wat-app).wat-admin #eWasteCollectionsList {
    display: grid;
    min-width: 0;
    gap: 20px;
}

:where(body.wat-app).wat-admin .admin-collection-result-count {
    margin: 0 2px -4px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

:where(body.wat-app).wat-admin .admin-collection-result-count strong {
    color: var(--text);
    font-weight: 680;
}

:where(body.wat-app).wat-admin .admin-collection-card.card {
    --admin-collection-card-edge: var(--wat-blue);
    position: relative;
    overflow: hidden;
    gap: 0;
    padding: 0;
    border-left: 4px solid var(--admin-collection-card-edge);
    opacity: 1;
    background: #fff;
}

:where(body.wat-app).wat-admin .admin-collection-card.--done {
    --admin-collection-card-edge: #16a085;
}

:where(body.wat-app).wat-admin .admin-collection-card:is(.--warning) {
    --admin-collection-card-edge: #d58a21;
}

:where(body.wat-app).wat-admin .admin-collection-card:is(.--danger, .--cancelled) {
    --admin-collection-card-edge: #c9372c;
}

:where(body.wat-app).wat-admin .admin-collection-card_header {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: nowrap;
    overflow: visible;
    box-sizing: border-box;
    border-bottom: 1px solid var(--border);
    padding: 7px 14px;
    background: #fff;
}

:where(body.wat-app).wat-admin .admin-collection-card_identity,
:where(body.wat-app).wat-admin .admin-collection-card_state {
    min-width: 0;
}

:where(body.wat-app).wat-admin .admin-collection-card_identity {
    display: grid;
    gap: 2px;
}

:where(body.wat-app).wat-admin .admin-collection-card_order-row,
:where(body.wat-app).wat-admin .admin-collection-card_party,
:where(body.wat-app).wat-admin .admin-collection-card_badges,
:where(body.wat-app).wat-admin .admin-collection-card_status-date {
    display: flex;
    min-width: 0;
    align-items: center;
}

:where(body.wat-app).wat-admin .admin-collection-card_order-row {
    gap: 8px;
    flex-wrap: wrap;
}

:where(body.wat-app).wat-admin .admin-collection-card_order {
    color: var(--wat-blue-deep);
    font-size: 18px;
    font-weight: 760;
    letter-spacing: -0.018em;
    line-height: 1.1;
    text-decoration: none;
}

:where(body.wat-app).wat-admin .admin-collection-card_order:is(:hover, :focus-visible) {
    color: var(--wat-blue);
    text-decoration: underline;
}

:where(body.wat-app).wat-admin .admin-collection-card_bin {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 9999px;
    padding: 4px 8px;
    color: #4c617a;
    background: var(--panel-soft);
    font-size: 11px;
    font-weight: 630;
    line-height: 1;
    text-decoration: none;
}

:where(body.wat-app).wat-admin .admin-collection-card_party {
    gap: 6px;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.35;
    flex-wrap: wrap;
}

:where(body.wat-app).wat-admin .admin-collection-card_party a {
    font-weight: 630;
    text-decoration: none;
}

:where(body.wat-app).wat-admin .admin-collection-card_customer {
    color: var(--text);
}

:where(body.wat-app).wat-admin .admin-collection-card_company {
    color: var(--wat-blue-deep);
}

:where(body.wat-app).wat-admin .admin-collection-card_state {
    display: grid;
    justify-items: end;
    gap: 7px;
}

:where(body.wat-app).wat-admin .admin-collection-card_badges {
    justify-content: flex-end;
    gap: 6px;
    flex-wrap: wrap;
}

:where(body.wat-app).wat-admin .admin-collection-card_badges .status-badge {
    min-height: 25px;
    padding: 4px 8px;
    letter-spacing: 0;
    text-transform: none;
}

:where(body.wat-app).wat-admin .admin-collection-card_badges svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.1;
}

:where(body.wat-app).wat-admin .admin-collection-card_status-date {
    justify-content: flex-end;
    gap: 6px;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 560;
    line-height: 1.3;
    text-align: right;
}

:where(body.wat-app).wat-admin .admin-collection-card_status-date svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    stroke-width: 2.1;
}

:where(body.wat-app).wat-admin .admin-collection-card_status-date.is-overdue {
    color: #b42318;
    font-weight: 650;
}

:where(body.wat-app).wat-admin .admin-collection-card_body {
    display: block;
    min-width: 0;
    color: var(--text);
    font-size: 13px;
}

:where(body.wat-app).wat-admin .admin-collection-card_context {
    display: grid;
    min-width: 0;
    margin: 0;
    grid-template-columns: minmax(0, 1.15fr) minmax(180px, 0.72fr) minmax(0, 1.13fr);
    background: var(--panel-soft);
}

:where(body.wat-app).wat-admin .admin-collection-card_context-item {
    display: grid;
    min-width: 0;
    align-items: center;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    border-right: 1px solid var(--border);
    padding: 12px 14px;
}

:where(body.wat-app).wat-admin .admin-collection-card_context-item:last-child {
    border-right: 0;
}

:where(body.wat-app).wat-admin .admin-collection-card_context-icon,
:where(body.wat-app).wat-admin .admin-collection-card_summary-icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: var(--wat-blue-deep);
    background: #eaf4ff;
}

:where(body.wat-app).wat-admin .admin-collection-card_context-icon svg,
:where(body.wat-app).wat-admin .admin-collection-card_summary-icon svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.1;
}

:where(body.wat-app).wat-admin .admin-collection-card_context-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

:where(body.wat-app).wat-admin .admin-collection-card_context-copy dt,
:where(body.wat-app).wat-admin .admin-collection-card_summary-label {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 560;
    line-height: 1.25;
}

:where(body.wat-app).wat-admin .admin-collection-card_context-copy dd {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 4px 8px;
    margin: 0;
    color: var(--text);
    font-size: 13px;
    font-weight: 630;
    line-height: 1.35;
    flex-wrap: wrap;
    overflow-wrap: anywhere;
}

:where(body.wat-app).wat-admin .admin-collection-card_context-copy dd a {
    overflow-wrap: anywhere;
    text-decoration: none;
}

:where(body.wat-app).wat-admin .admin-collection-card_context-supporting {
    color: var(--muted);
    font-size: 11px;
    font-style: italic;
    line-height: 1.3;
}

:where(body.wat-app).wat-admin .admin-collection-card_location {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

:where(body.wat-app).wat-admin .admin-collection-card_location dd {
    flex: 1 1 auto;
}

:where(body.wat-app).wat-admin .admin-collection-card_map-button {
    display: inline-flex;
    width: 30px;
    height: 30px;
    min-width: 30px;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    border: 1px solid #cae4f8;
    border-radius: 8px;
    padding: 0;
    color: var(--wat-blue-deep);
    background: #fff;
    box-shadow: none;
}

:where(body.wat-app).wat-admin .admin-collection-card_map-button svg {
    width: 15px;
    height: 15px;
    stroke-width: 2.1;
}

:where(body.wat-app).wat-admin .admin-collection-card_map-button:is(:hover, :focus-visible) {
    border-color: var(--wat-blue);
    color: var(--wat-blue);
    background: var(--nav-active-bg);
}

:where(body.wat-app).wat-admin .admin-collection-card_map-button:focus-visible {
    outline: 3px solid rgba(0, 127, 222, 0.2);
    outline-offset: 2px;
}

:where(body.wat-app).wat-admin .admin-collection-card_summary {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--border);
    padding: 12px 14px;
    background: #fff;
}

:where(body.wat-app).wat-admin .admin-collection-card_inventory {
    display: grid;
    min-width: 0;
    flex: 1 1 420px;
    align-items: center;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
}

:where(body.wat-app).wat-admin .admin-collection-card_summary-icon {
    border-radius: 8px;
    color: #096b59;
    background: #e7f9f3;
}

:where(body.wat-app).wat-admin .admin-collection-card_inventory-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

:where(body.wat-app).wat-admin .admin-collection-card_inventory-value {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 5px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

:where(body.wat-app).wat-admin .admin-collection-card_inventory-value strong {
    flex: 0 0 auto;
    color: var(--text);
    font-size: 13.5px;
    font-weight: 680;
}

:where(body.wat-app).wat-admin .admin-collection-card_inventory-value > span {
    display: -webkit-box;
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

:where(body.wat-app).wat-admin .admin-collection-card_summary .collection-card_documents {
    display: flex;
    min-width: 0;
    flex: 0 1 auto;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

:where(body.wat-app).wat-admin .admin-collection-card_summary .collection-card_document {
    min-width: 0;
    gap: 6px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 8px;
    background: var(--panel-soft);
}

:where(body.wat-app).wat-admin .admin-collection-card_summary .collection-card_document-label,
:where(body.wat-app).wat-admin .admin-collection-card_summary .collection-card_document-price {
    color: var(--text);
    font-size: 11.5px;
    font-weight: 630;
}

:where(body.wat-app).wat-admin .admin-collection-card_open {
    min-height: 36px;
    flex: 0 0 auto;
    border: 1px solid #cae4f8;
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--wat-blue-deep);
    background: var(--nav-active-bg);
    text-decoration: none;
}

:where(body.wat-app).wat-admin .admin-collection-card_open svg {
    width: 15px;
    height: 15px;
    stroke-width: 2.1;
    transition: transform 0.12s ease;
}

:where(body.wat-app).wat-admin .admin-collection-card_open:is(:hover, :focus-visible) svg {
    transform: translateX(2px);
}

:where(body.wat-app).wat-admin .admin-collection-results-empty {
    display: grid;
    min-height: 148px;
    place-items: center;
    align-content: center;
    gap: 6px;
    border: 1px dashed var(--border-strong);
    border-radius: 12px;
    padding: 24px;
    color: var(--muted);
    background: var(--panel-soft);
    text-align: center;
}

:where(body.wat-app).wat-admin .admin-collection-results-empty svg {
    width: 24px;
    height: 24px;
    margin-bottom: 2px;
    color: var(--wat-blue);
    stroke-width: 2;
}

:where(body.wat-app).wat-admin .admin-collection-results-empty strong {
    color: var(--text);
    font-size: 15px;
    font-weight: 680;
}

:where(body.wat-app).wat-admin .admin-collection-results-empty span {
    font-size: 12.5px;
}

:where(body.wat-app).wat-admin .admin-page :where(.stat-card_value, .e-waste-card_metric_value, .row-value),
:where(body.wat-app).wat-admin #modalContainer :where(.stat-card_value, .e-waste-card_metric_value, .row-value) {
    color: var(--text);
    font-weight: 680;
}

:where(body.wat-app).wat-admin #modalContainer:has(:where(.modal, .mockup-modal, .popup)) {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: auto;
    padding: 24px;
    background: rgba(4, 22, 50, 0.34);
    backdrop-filter: blur(3px);
}

:where(body.wat-app).wat-admin #modalContainer > :where(.modal, .mockup-modal) {
    width: min(720px, 100%);
    max-height: calc(100dvh - 48px);
    overflow: auto;
    scroll-padding-top: 72px;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    color: var(--text);
    background: #fff;
    box-shadow: 0 26px 72px rgba(4, 22, 50, 0.2);
}

:where(body.wat-app).wat-admin #modalContainer > :where(.modal, .mockup-modal) > h2:first-of-type {
    position: sticky;
    z-index: 3;
    top: -20px;
    margin: -20px -20px 16px;
    border-bottom: 1px solid var(--border);
    padding: 20px;
    background: #fff;
}

:where(body.wat-app).wat-admin #modalContainer :where(.modal h2, .modal h3, .mockup-modal h2, .mockup-modal h3) {
    margin-top: 0;
    color: var(--text);
    font-weight: 680;
}

:where(body.wat-app).wat-admin #modalContainer .modal-close {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    background: #fff;
}

:where(body.wat-app).wat-admin #modalContainer > .dispatch-group-modal {
    position: relative;
    width: min(980px, calc(100vw - 32px));
    overflow-x: hidden;
    overflow-y: auto;
}

:where(body.wat-app).wat-admin .dispatch-group-modal > .modal-close {
    position: absolute;
    z-index: 5;
    top: 14px;
    right: 14px;
}

:where(body.wat-app).wat-admin .dispatch-group-modal > .modal-close :where(svg, i[data-lucide]) {
    width: 18px;
    height: 18px;
    stroke-width: 2.2;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-head {
    display: grid;
    gap: 6px;
    padding-right: 48px;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-head :where(h2, p) {
    margin: 0;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-head h2 {
    font-size: 22px;
    font-weight: 720;
    letter-spacing: -0.02em;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-head p {
    color: var(--muted);
    font-size: 12.5px;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-head > .dispatch-pill {
    width: max-content;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-tabs {
    display: flex;
    width: 100%;
    min-width: 0;
    margin-top: 16px;
    column-gap: 8px;
    row-gap: 12px;
    flex-wrap: wrap;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-tabs > .tab-toggle {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-tabs > .tab-toggle,
:where(body.wat-app).wat-admin .dispatch-group-modal-tabs > .tab-toggle + label {
    order: 1;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-tabs > .tab-toggle + label {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--border-strong);
    border-radius: 9px;
    padding: 8px 12px;
    color: #4c617a;
    background: var(--panel-soft);
    font-size: 12.5px;
    font-weight: 650;
    cursor: pointer;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-tabs > .tab-toggle + label :where(svg, i[data-lucide]) {
    width: 16px;
    height: 16px;
    stroke-width: 2.2;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-tabs > .tab-toggle:checked + label {
    border-color: #9fc8e8;
    color: var(--wat-blue-deep);
    background: var(--nav-active-bg);
    box-shadow: inset 0 0 0 1px rgba(0, 127, 222, 0.08);
}

:where(body.wat-app).wat-admin .dispatch-group-modal-tabs > .tab-toggle:focus-visible + label {
    outline: 3px solid rgba(0, 127, 222, 0.2);
    outline-offset: 2px;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-tabs > .tab-toggle + label.is-disabled {
    color: var(--muted);
    cursor: not-allowed;
    opacity: 0.62;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-tabs > .dispatch-group-modal-tab {
    order: 2;
    width: 100%;
    min-width: 0;
    flex-basis: 100%;
    border: 0;
    border-radius: 0;
    padding: 0;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-tabs > .tab-toggle:not(:checked) + label + .dispatch-group-modal-tab {
    display: none;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-panel {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 12px;
    background: var(--panel-soft);
}

:where(body.wat-app).wat-admin .dispatch-group-modal-batches,
:where(body.wat-app).wat-admin .dispatch-group-modal-decisions {
    grid-column: 1 / -1;
}

:where(body.wat-app).wat-admin .dispatch-values-editor-head {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

:where(body.wat-app).wat-admin .dispatch-values-editor-head :where(h4, p) {
    margin: 0;
}

:where(body.wat-app).wat-admin .dispatch-values-editor-head h4 {
    color: var(--text);
    font-size: 15px;
    font-weight: 680;
}

:where(body.wat-app).wat-admin .dispatch-values-editor-head p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.4;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-decision-form,
:where(body.wat-app).wat-admin .dispatch-group-modal-decision-batches,
:where(body.wat-app).wat-admin .dispatch-group-modal-values,
:where(body.wat-app).wat-admin .dispatch-group-modal-attachments,
:where(body.wat-app).wat-admin .dispatch-group-modal-upload,
:where(body.wat-app).wat-admin .dispatch-group-modal-amount {
    display: grid;
    min-width: 0;
    gap: 9px;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-decision-batch {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-decision-summary {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    color: var(--text);
    background: #fff;
    cursor: pointer;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-decision-batch[open] > .dispatch-group-modal-decision-summary {
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, #fff, #fbfefe);
}

:where(body.wat-app).wat-admin .dispatch-group-modal-decision-identity,
:where(body.wat-app).wat-admin .dispatch-group-modal-decision-metrics {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px 8px;
    flex-wrap: wrap;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-decision-identity > strong {
    font-size: 13.5px;
    font-weight: 680;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-decision-identity > a {
    color: var(--wat-blue-deep);
    font-size: 12.5px;
    font-weight: 650;
    text-decoration: none;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-decision-identity > small {
    color: var(--muted);
    font-size: 11px;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-decision-metrics {
    justify-content: flex-end;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-decision-body {
    display: grid;
    min-width: 0;
    gap: 10px;
    padding: 10px;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-item-state {
    display: grid;
    min-width: 0;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 10px;
    background: #fff;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-item-state.is-pending {
    border-color: #f2d39c;
    background: #fffcf5;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-item-state.is-accepted {
    border-color: #bdebdc;
    background: #fbfffd;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-item-state.is-rejected {
    border-color: #ffd0cc;
    background: #fffdfd;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-item-state-head,
:where(body.wat-app).wat-admin .dispatch-group-modal-item-state-head > div {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-item-state-head {
    justify-content: space-between;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-item-state-head :where(svg, i[data-lucide]) {
    width: 16px;
    height: 16px;
    color: currentColor;
    stroke-width: 2.2;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-item-state-head strong {
    font-size: 12.5px;
    font-weight: 680;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-item-state-head .checkbox-label {
    color: var(--text);
    font-size: 11.5px;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-pending-list {
    display: grid;
    gap: 6px;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-pending-item {
    display: grid;
    min-width: 0;
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 9px;
    border-top: 1px solid var(--border);
    padding-top: 7px;
    color: var(--text);
}

:where(body.wat-app).wat-admin .dispatch-group-modal-pending-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-pending-copy > span {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-pending-copy input.dispatch-quantity {
    width: 66px;
    min-width: 66px;
    min-height: 34px;
    padding: 6px 8px;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-pending-copy strong {
    min-width: 0;
    font-size: 12.5px;
    font-weight: 650;
    overflow-wrap: anywhere;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-pending-copy small,
:where(body.wat-app).wat-admin .dispatch-status-group small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-completed-states {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

:where(body.wat-app).wat-admin .dispatch-group-modal .dispatch-status-group {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

:where(body.wat-app).wat-admin .dispatch-group-modal .dispatch-status-group li {
    display: grid;
    min-width: 0;
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    border-top: 1px solid var(--border);
    padding-top: 7px;
}

:where(body.wat-app).wat-admin .dispatch-group-modal .dispatch-status-group li > :where(svg, i[data-lucide]) {
    width: 15px;
    height: 15px;
    stroke-width: 2.3;
}

:where(body.wat-app).wat-admin .dispatch-group-modal .dispatch-status-group li > span {
    min-width: 0;
}

:where(body.wat-app).wat-admin .dispatch-group-modal .dispatch-status-group li > span > strong {
    display: block;
    font-size: 12px;
    font-weight: 650;
    overflow-wrap: anywhere;
}

:where(body.wat-app).wat-admin .dispatch-group-modal .dispatch-status-group .text-button {
    min-height: 30px;
    padding: 5px 7px;
    font-size: 11.5px;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-empty-copy {
    margin: 0;
    color: var(--muted);
    font-size: 11.5px;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-decision-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-decision-actions .button {
    min-height: 38px;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-percentages {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-percentages .feedback {
    grid-column: 1 / -1;
}

:where(body.wat-app).wat-admin .dispatch-group-modal :where(
    .dispatch-group-modal-percentages,
    .dispatch-group-modal-amount,
    .dispatch-group-modal-upload,
    .dispatch-group-modal-attachment-fields,
    .dispatch-group-modal-add-value-row
) label {
    display: grid;
    gap: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-add-value-row {
    display: grid;
    min-width: 0;
    align-items: end;
    grid-template-columns: minmax(0, 1fr) minmax(110px, 150px) auto;
    gap: 8px;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-upload-controls,
:where(body.wat-app).wat-admin .dispatch-group-modal-attachment-fields {
    display: grid;
    min-width: 0;
    align-items: end;
    grid-template-columns: minmax(116px, 135px) auto;
    gap: 8px;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-upload-controls.has-certificate,
:where(body.wat-app).wat-admin .dispatch-group-modal-attachment-fields.has-certificate {
    grid-template-columns: minmax(116px, 135px) minmax(145px, 1fr) auto;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-upload-controls > button,
:where(body.wat-app).wat-admin .dispatch-group-modal-attachment-fields > button {
    justify-self: end;
    white-space: nowrap;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-value-picker-cell {
    position: relative;
    min-width: 0;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-value-picker-cell > label {
    display: grid;
    gap: 6px;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-value-picker-cell .select-button {
    width: 100%;
    justify-content: flex-start;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-value-picker-cell .popup-anchor {
    position: relative;
    z-index: 650;
    width: 0;
    height: 0;
    overflow: visible;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-value-picker-cell .popup-anchor > .popup {
    position: absolute;
    z-index: 650;
    right: auto;
    bottom: 8px;
    left: 0;
    display: none;
    width: min(340px, calc(100vw - 40px));
    max-height: min(42vh, 340px);
    overflow-y: auto;
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    padding: 10px;
    background: #fff;
    box-shadow: 0 20px 48px rgba(5, 24, 43, 0.18);
}

:where(body.wat-app).wat-admin .dispatch-group-modal-value-picker-cell .popup-anchor > .popup.visible {
    display: block;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-value-picker-cell .popup-list {
    display: grid;
    gap: 5px;
    margin-top: 8px;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-value-picker-cell .popup-button {
    width: 100%;
    min-height: 32px;
    border: 0;
    border-radius: 8px;
    padding: 8px 9px;
    color: var(--text);
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    text-align: left;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-value-picker-cell .popup-button:is(:hover, :focus-visible) {
    color: var(--wat-blue-deep);
    background: var(--nav-active-bg);
}

:where(body.wat-app).wat-admin .dispatch-group-modal .invoice-value-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

:where(body.wat-app).wat-admin .dispatch-group-modal .invoice-value-chip {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 5px 6px 5px 9px;
    color: var(--text);
    background: #fff;
    font-size: 11.5px;
}

:where(body.wat-app).wat-admin .dispatch-group-modal .round-delete,
:where(body.wat-app).wat-admin .dispatch-group-modal .button-delete-row {
    display: inline-grid;
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    place-items: center;
    border: 1px solid #ffd0cc;
    border-radius: 9999px;
    padding: 0;
    color: #b42318;
    background: #fff1f0;
}

:where(body.wat-app).wat-admin .dispatch-group-modal :where(.round-delete, .button-delete-row) :where(svg, i[data-lucide]) {
    width: 15px;
    height: 15px;
    stroke-width: 2.3;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-attachment {
    display: grid;
    min-width: 0;
    gap: 7px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    background: #fff;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-attachment-file {
    display: grid;
    min-width: 0;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-attachment-file a,
:where(body.wat-app).wat-admin .dispatch-group-modal-link {
    min-width: 0;
    color: var(--wat-blue-deep);
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}

:where(body.wat-app).wat-admin .dispatch-group-modal-upload input[type="file"] {
    min-height: 42px;
    padding: 7px 10px;
    line-height: 1.6;
}

:where(body.wat-app).wat-admin .dispatch-warning-state {
    display: grid;
    align-items: start;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    border: 1px solid #f2d39c;
    border-radius: 10px;
    padding: 11px;
    color: #87520b;
    background: #fff5df;
    font-size: 12.5px;
    line-height: 1.4;
}

:where(body.wat-app).wat-admin .admin-page :where(.popup, .popup-list),
:where(body.wat-app).wat-admin #modalContainer :where(.popup, .popup-list) {
    border-color: var(--border);
    border-radius: 10px;
    color: var(--text);
    background: #fff;
    box-shadow: var(--shadow);
}

:where(body.wat-app).wat-admin .admin-page .popup-button,
:where(body.wat-app).wat-admin #modalContainer .popup-button {
    border-radius: 8px;
    color: var(--text);
    background: transparent;
}

:where(body.wat-app).wat-admin .admin-page .popup-button:is(:hover, :focus-visible),
:where(body.wat-app).wat-admin #modalContainer .popup-button:is(:hover, :focus-visible) {
    color: var(--wat-blue-deep);
    background: var(--nav-active-bg);
}

:where(body.wat-app).wat-admin .admin-page :where(.map, .map-feedback),
:where(body.wat-app).wat-admin #modalContainer :where(.map, .map-feedback) {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel-soft);
}

:where(body.wat-app).wat-admin .admin-page :where(a:not(.button):not(.button-blue):not(.button-blue-2):not(.button-red-2)),
:where(body.wat-app).wat-admin #modalContainer :where(a:not(.button):not(.button-blue):not(.button-blue-2):not(.button-red-2)) {
    color: var(--wat-blue-deep);
    text-underline-offset: 3px;
}

:where(body.wat-app).wat-admin .admin-page :where(.empty-state, .dispatch-empty-state, .invoice-empty-inline),
:where(body.wat-app).wat-admin #modalContainer :where(.empty-state, .dispatch-empty-state, .invoice-empty-inline) {
    min-height: 128px;
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
    padding: 24px;
    color: var(--muted);
    background: var(--panel-soft);
    text-align: center;
}

@media (max-width: 1180px) {
    :where(body.wat-app).wat-admin .admin-page .page-header_title h1,
    :where(body.wat-app).wat-admin .admin-page > h1 {
        font-size: 44px;
    }
}

@media (max-width: 900px) {
    :where(body.wat-app).wat-admin .admin-page {
        gap: 16px;
    }

    :where(body.wat-app).wat-admin .admin-page .page-header {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    :where(body.wat-app).wat-admin .admin-page .page-header_title h1,
    :where(body.wat-app).wat-admin .admin-page > h1 {
        font-size: 35px;
        line-height: 1;
    }

    :where(body.wat-app).wat-admin .admin-page .page-header_subtitle {
        margin-top: 7px;
        font-size: 13px;
    }

    :where(body.wat-app).wat-admin .admin-page :where(.page-header_actions, .buttons-row, .workflow-actions),
    :where(body.wat-app).wat-admin #modalContainer :where(.buttons-row, .workflow-actions) {
        justify-content: flex-start;
    }

    :where(body.wat-app).wat-admin .admin-page :where(.form-row, .flex-row),
    :where(body.wat-app).wat-admin #modalContainer :where(.form-row, .flex-row) {
        align-items: stretch;
        flex-direction: column;
    }

    :where(body.wat-app):is(.wat-admin, .repair-ui-admin) .admin-status-filter-toolbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    :where(body.wat-app).wat-admin .admin-collection-card_header {
        display: grid;
        align-items: stretch;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    :where(body.wat-app).wat-admin .admin-collection-card_identity,
    :where(body.wat-app).wat-admin .admin-collection-card_state {
        width: 100%;
    }

    :where(body.wat-app).wat-admin .admin-collection-card_state {
        justify-items: start;
    }

    :where(body.wat-app).wat-admin .admin-collection-card_badges,
    :where(body.wat-app).wat-admin .admin-collection-card_status-date {
        justify-content: flex-start;
        text-align: left;
    }

    :where(body.wat-app).wat-admin .admin-collection-card_context {
        grid-template-columns: minmax(0, 1fr);
    }

    :where(body.wat-app).wat-admin .admin-collection-card_context-item {
        border-right: 0;
        border-bottom: 1px solid var(--border);
        padding: 11px 12px;
    }

    :where(body.wat-app).wat-admin .admin-collection-card_context-item:last-child {
        border-bottom: 0;
    }

    :where(body.wat-app).wat-admin .admin-collection-card_summary {
        display: grid;
        align-items: stretch;
    }

    :where(body.wat-app).wat-admin .admin-collection-card_inventory {
        width: 100%;
    }

    :where(body.wat-app).wat-admin .admin-collection-card_summary .collection-card_documents {
        width: 100%;
    }

    :where(body.wat-app).wat-admin .admin-collection-card_open {
        width: 100%;
        justify-content: center;
    }

    :where(body.wat-app).wat-admin #modalContainer:has(:where(.modal, .mockup-modal, .popup)) {
        align-items: end;
        padding: 12px;
    }

    :where(body.wat-app).wat-admin #modalContainer > :where(.modal, .mockup-modal) {
        width: 100%;
        max-height: calc(100dvh - 24px);
        border-radius: 14px;
        padding: 18px;
    }

    :where(body.wat-app).wat-admin #modalContainer > :where(.modal, .mockup-modal) > h2:first-of-type {
        top: -18px;
        margin: -18px -18px 14px;
        padding: 18px;
    }

    :where(body.wat-app).wat-admin .dispatch-group-modal-grid,
    :where(body.wat-app).wat-admin .dispatch-group-modal-completed-states {
        grid-template-columns: minmax(0, 1fr);
    }

    :where(body.wat-app).wat-admin .dispatch-group-modal-decision-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    :where(body.wat-app).wat-admin .dispatch-group-modal-decision-metrics {
        justify-content: flex-start;
    }

    :where(body.wat-app).wat-admin .dispatch-group-modal-add-value-row,
    :where(body.wat-app).wat-admin .dispatch-group-modal-upload-controls,
    :where(body.wat-app).wat-admin .dispatch-group-modal-attachment-fields,
    :where(body.wat-app).wat-admin .dispatch-group-modal-upload-controls.has-certificate,
    :where(body.wat-app).wat-admin .dispatch-group-modal-attachment-fields.has-certificate {
        grid-template-columns: minmax(0, 1fr);
    }

    :where(body.wat-app).wat-admin .dispatch-group-modal-upload-controls > button,
    :where(body.wat-app).wat-admin .dispatch-group-modal-attachment-fields > button,
    :where(body.wat-app).wat-admin .dispatch-group-modal-add-value-row > button {
        width: 100%;
        justify-self: stretch;
    }
}

@media (max-width: 520px) {
    :where(body.wat-app).wat-admin .admin-collection-card_header {
        padding: 8px 12px 7px;
    }

    :where(body.wat-app).wat-admin .admin-collection-card_order {
        font-size: 17px;
    }

    :where(body.wat-app).wat-admin .admin-collection-card_party {
        gap: 4px 6px;
    }

    :where(body.wat-app).wat-admin .admin-collection-card_summary {
        padding: 11px 12px 12px;
    }

    :where(body.wat-app).wat-admin .admin-collection-card_inventory {
        align-items: start;
    }

    :where(body.wat-app).wat-admin .admin-collection-card_inventory-value {
        align-items: flex-start;
        flex-direction: column;
        gap: 1px;
    }

    :where(body.wat-app).wat-admin .dispatch-group-modal-head h2 {
        font-size: 19px;
    }

    :where(body.wat-app).wat-admin .dispatch-group-modal-tabs > .tab-toggle + label {
        flex: 1 1 0;
        justify-content: center;
        padding-inline: 8px;
        text-align: center;
    }

    :where(body.wat-app).wat-admin .dispatch-group-modal-percentages {
        grid-template-columns: minmax(0, 1fr);
    }

    :where(body.wat-app).wat-admin .dispatch-group-modal-percentages .feedback {
        grid-column: auto;
    }

    :where(body.wat-app).wat-admin .dispatch-group-modal-decision-actions {
        align-items: stretch;
        flex-direction: column;
    }

    :where(body.wat-app).wat-admin .dispatch-group-modal-decision-actions .button {
        width: 100%;
    }

    :where(body.wat-app).wat-admin .dispatch-group-modal-pending-copy > span {
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(body.wat-app).wat-admin *,
    :where(body.wat-app).wat-admin *::before,
    :where(body.wat-app).wat-admin *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* #endregion */

/* #region Portal customer Repair summaries and repairer work queue */

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card {
    --customer-order-accent: var(--wat-blue-deep);
    --customer-order-header-from: #eef1ff;
    --customer-order-header-to: #fbfcff;
    --customer-order-icon-text: var(--wat-blue-deep);
    --customer-order-icon-soft: #e8edff;
    position: relative;
    display: grid;
    width: min(100%, 1080px);
    min-width: 0;
    overflow: hidden;
    grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
    border: 1px solid var(--border-strong);
    border-left: 3px solid var(--customer-order-accent);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(5, 56, 84, 0.055);
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-impact-card.is-collection {
    --customer-order-accent: var(--wat-blue);
    --customer-order-header-from: #eef6ff;
    --customer-order-header-to: #fbfdff;
    --customer-order-icon-text: var(--wat-blue-deep);
    --customer-order-icon-soft: #e7f2ff;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-impact-card.is-data-destruction {
    --customer-order-accent: #7c55e8;
    --customer-order-header-from: #f5f1ff;
    --customer-order-header-to: #fdfcff;
    --customer-order-icon-text: #6540c7;
    --customer-order-icon-soft: #f2edff;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card.is-action {
    border-left-color: #e89a18;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card.is-complete {
    border-left-color: #16a085;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card.is-cancelled {
    border-left-color: #d6534d;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__status {
    position: static;
    display: flex;
    top: auto;
    z-index: auto;
    width: auto;
    grid-column: 1 / -1;
    align-items: center;
    min-width: 0;
    gap: 12px;
    margin: 0;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(120deg, var(--customer-order-header-from), var(--customer-order-header-to));
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card.is-action .portal-ui-customer-repair-card__status {
    background: linear-gradient(120deg, #fff8e8, #fffdf8);
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card.is-complete .portal-ui-customer-repair-card__status {
    background: linear-gradient(120deg, #eefaf6, #fbfefd);
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card.is-cancelled .portal-ui-customer-repair-card__status {
    background: linear-gradient(120deg, #fff1f0, #fffafa);
}

body:where(.wat-app).repair-ui-portal .collection-patterns :where(
    .portal-ui-customer-repair-card__status-icon,
    .portal-ui-customer-repair-card__device-icon
) {
    display: inline-flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--customer-order-icon-text);
    background: var(--customer-order-icon-soft);
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card.is-action .portal-ui-customer-repair-card__status-icon {
    color: #87520b;
    background: #fff0cf;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card.is-complete .portal-ui-customer-repair-card__status-icon {
    color: #096b59;
    background: #dff5ed;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card.is-cancelled .portal-ui-customer-repair-card__status-icon {
    color: #9e302b;
    background: #ffe1df;
}

body:where(.wat-app).repair-ui-portal .collection-patterns :where(
    .portal-ui-customer-repair-card__status-icon,
    .portal-ui-customer-repair-card__device-icon
) :where(i, svg) {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__status > div {
    min-width: 0;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__status h2 {
    margin: 0;
    color: var(--text);
    font-size: 17px;
    font-weight: 720;
    line-height: 1.2;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__status p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 12.5px;
    line-height: 1.35;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__device {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-right: 1px solid var(--border);
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-impact-card .portal-ui-customer-repair-card__device {
    grid-template-columns: minmax(0, 1fr);
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__device-copy {
    display: grid;
    min-width: 0;
    justify-items: start;
    gap: 3px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__device-copy > strong {
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: 15px;
    font-weight: 720;
    line-height: 1.2;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__device-copy > span:not(.portal-ui-customer-repair-card__order-number),
body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__device-copy > small {
    color: var(--muted);
    font-size: 11.5px;
    line-height: 1.3;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__order-number {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 1px;
    color: var(--wat-blue-deep);
    font-size: 11.5px;
    font-weight: 720;
}

body:where(.wat-app).repair-ui-portal .collection-patterns a.portal-ui-customer-repair-card__order-number:hover {
    color: var(--wat-blue);
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__order-number :where(i, svg) {
    width: 13px;
    height: 13px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    gap: 12px;
    padding: 8px 14px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__meta {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0;
    margin: 0;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__meta > div {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
    padding: 0 12px;
    border-left: 1px solid var(--border);
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__meta > div:first-child {
    padding-left: 0;
    border-left: 0;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__meta :where(i, svg) {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: var(--muted);
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__meta dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--muted);
    font-size: 11px;
    font-weight: 550;
    line-height: 1.35;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__footer .button {
    min-height: 38px;
    padding-inline: 13px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-impact-card .portal-ui-customer-repair-card__meta {
    flex: 1 1 auto;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-impact-card .portal-ui-customer-repair-card__meta > div {
    flex: 1 1 0;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-impact-card__documents {
    display: flex;
    grid-column: 1 / -1;
    min-width: 0;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 14px;
    border-top: 1px solid var(--border);
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__mobile-action,
body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__details {
    display: none;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-orders {
    display: grid;
    min-width: 0;
    gap: 16px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-tabs {
    display: none;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-kanban {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-lane {
    --repair-lane-accent: #4c617a;
    --repair-lane-border: #d7e0e7;
    --repair-lane-soft: #eef4f8;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-top: 3px solid var(--repair-lane-accent);
    border-radius: 12px;
    background: #fdfefe;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-lane.is-action {
    --repair-lane-accent: #00a4bf;
    --repair-lane-border: #a8dfe6;
    --repair-lane-soft: #eaf9fb;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-lane.is-repairing {
    --repair-lane-accent: var(--wat-blue);
    --repair-lane-border: #b9dafa;
    --repair-lane-soft: #eaf5ff;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-lane__header {
    position: static;
    display: flex;
    top: auto;
    width: auto;
    height: auto;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    gap: 10px;
    margin: 0;
    padding: 13px 14px;
    border-bottom: 1px solid var(--border);
    background: #fff;
    font-family: inherit;
    backdrop-filter: none;
    z-index: auto;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-lane__header > div {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-lane__header > :where(i, svg) {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    color: var(--muted);
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-lane__icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--repair-lane-accent);
    background: var(--repair-lane-soft);
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-lane__icon :where(i, svg) {
    width: 17px;
    height: 17px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-lane__header h2 {
    margin: 0;
    color: var(--text);
    font-size: 16px;
    font-weight: 720;
    line-height: 1.2;
}

body:where(.wat-app).repair-ui-portal .collection-patterns :where(
    .portal-ui-repairer-lane__count,
    .portal-ui-repairer-tabs button span
) {
    display: inline-flex;
    min-width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: var(--repair-lane-accent, var(--muted));
    background: var(--repair-lane-soft, var(--surface-soft));
    font-size: 11px;
    font-weight: 750;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-lane__cards {
    display: grid;
    gap: 20px;
    padding: 10px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repair-ticket {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    min-width: 0;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 7px 18px rgba(4, 67, 86, 0.045);
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repair-ticket__device-rail {
    display: flex;
    min-width: 0;
    min-height: 142px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 11px;
    padding: 12px 8px;
    color: #fff;
    background: linear-gradient(180deg, #007dde 0%, #00a4bf 100%);
    text-align: center;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repair-ticket__device-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repair-ticket__device-icons :where(i, svg) {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    stroke-width: 2;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repair-ticket__device-rail strong {
    overflow-wrap: anywhere;
    color: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repair-ticket__content {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 7px;
    padding: 12px 12px 10px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repair-ticket__heading {
    position: static;
    display: flex;
    width: 100%;
    height: auto;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    z-index: auto;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repair-ticket__heading-meta {
    display: inline-flex;
    min-width: 0;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repair-ticket__total {
    display: inline-flex;
    width: max-content;
    align-items: center;
    border-radius: 6px;
    padding: 4px 7px;
    color: var(--wat-blue-deep);
    background: #eaf4ff;
    font-size: 11.5px;
    font-weight: 720;
    line-height: 1;
    white-space: nowrap;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repair-ticket__age {
    display: inline-flex;
    width: max-content;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    padding: 4px 7px;
    border-radius: 6px;
    color: var(--repair-lane-accent);
    background: var(--repair-lane-soft);
    font-size: 11.5px;
    font-weight: 720;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repair-ticket__age :where(i, svg) {
    width: 14px;
    height: 14px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-lane.is-action .portal-ui-repair-ticket__age {
    color: var(--wat-neutral);
    background: var(--wat-neutral-soft);
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-lane.is-action .portal-ui-repair-ticket__age.is-warning {
    color: var(--wat-warning);
    background: var(--wat-warning-soft);
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-lane.is-action .portal-ui-repair-ticket__age.is-critical {
    color: var(--wat-danger);
    background: var(--wat-danger-soft);
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repair-ticket h3 {
    min-width: 0;
    margin: 0;
    color: var(--text);
    font-size: 16px;
    font-weight: 760;
    line-height: 1.2;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repair-ticket h3 a {
    color: inherit;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repair-ticket h3 a:hover {
    color: var(--wat-blue);
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repair-ticket__customer {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    overflow-wrap: anywhere;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 580;
    line-height: 1.3;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repair-ticket__products {
    display: grid;
    min-width: 0;
    gap: 6px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repair-ticket__product {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 7px;
    color: var(--text);
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repair-ticket__product :where(i, svg) {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--muted);
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repair-ticket__product span {
    min-width: 20px;
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 650;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repair-ticket__product strong {
    overflow-wrap: anywhere;
    font-size: 13px;
    font-weight: 700;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repair-ticket__issues {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repair-ticket__issues > span {
    margin-right: 2px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 650;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repair-ticket__issues ul {
    display: contents;
    margin: 0;
    padding: 0;
    list-style: none;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repair-ticket__issues li {
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 3px 7px;
    border: 1px solid #cde5f7;
    border-radius: 999px;
    color: var(--wat-blue-deep);
    background: #eef8ff;
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.2;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repair-ticket footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    margin-top: 1px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repair-ticket footer > a {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: var(--wat-blue);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.3;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repair-ticket footer > a:hover {
    color: var(--wat-blue-deep);
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repair-ticket footer > a :where(i, svg) {
    width: 16px;
    height: 16px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-lane__empty {
    min-height: 74px;
    margin: 0;
    display: grid;
    place-items: center;
    padding: 14px;
    border: 1px dashed var(--border);
    border-radius: 9px;
    color: var(--muted);
    font-size: 11px;
    text-align: center;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history {
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-left: 3px solid #16a085;
    border-radius: 12px;
    background: #fff;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history.is-cancelled {
    border-left-color: #d6534d;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history > summary {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    color: var(--text);
    cursor: pointer;
    list-style: none;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history > summary::-webkit-details-marker,
body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history-row > summary::-webkit-details-marker {
    display: none;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history__title,
body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history__title > :where(i, svg) {
    width: 22px;
    height: 22px;
    color: #096b59;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history.is-cancelled .portal-ui-repairer-history__title > :where(i, svg) {
    color: #9e302b;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history__title strong {
    font-size: 14px;
    font-weight: 720;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history__title > span {
    display: inline-flex;
    min-width: 26px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #096b59;
    background: #e7f9f3;
    font-size: 10.5px;
    font-weight: 750;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history.is-cancelled .portal-ui-repairer-history__title > span {
    color: #9e302b;
    background: #fff0ef;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history__toggle {
    color: #096b59;
    font-size: 11px;
    font-weight: 680;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history.is-cancelled .portal-ui-repairer-history__toggle {
    color: #9e302b;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history__toggle :where(i, svg) {
    width: 15px;
    height: 15px;
    transition: transform 140ms ease;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history[open] > summary {
    border-bottom: 1px solid var(--border);
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history[open] > summary .portal-ui-repairer-history__toggle :where(i, svg) {
    transform: rotate(180deg);
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history__rows {
    display: grid;
    padding: 0 12px 12px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history__empty {
    display: flex;
    min-height: 68px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px dashed var(--border);
    border-radius: 9px;
    color: var(--muted);
    background: var(--surface-soft);
    font-size: 11.5px;
    text-align: center;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history__empty :where(i, svg) {
    width: 17px;
    height: 17px;
    color: var(--faint);
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history-row {
    min-width: 0;
    border: 1px solid var(--border);
    border-top: 0;
    background: #fff;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history-row:first-child {
    border-top: 1px solid var(--border);
    border-radius: 9px 9px 0 0;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history-row:last-child {
    border-radius: 0 0 9px 9px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history-row:only-child {
    border-radius: 9px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history-row > summary {
    display: grid;
    grid-template-columns: minmax(105px, 0.55fr) minmax(180px, 1.4fr) minmax(125px, 0.75fr) auto 18px;
    align-items: center;
    gap: 12px;
    padding: 9px 11px;
    color: var(--text);
    cursor: pointer;
    list-style: none;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history-row__order,
body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history-row__date {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history-row__order :where(i, svg) {
    width: 16px;
    height: 16px;
    color: #096b59;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history-row__date {
    color: var(--muted);
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history-row__date :where(i, svg) {
    width: 14px;
    height: 14px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history-row__device {
    display: grid;
    min-width: 0;
    gap: 2px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history-row__device strong {
    overflow-wrap: anywhere;
    font-size: 11.5px;
    font-weight: 680;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history-row__device small {
    overflow-wrap: anywhere;
    color: var(--muted);
    font-size: 10px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history-row__badge {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 7px;
    color: #096b59;
    background: #e7f9f3;
    font-size: 10px;
    font-weight: 720;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history-row__chevron {
    width: 15px;
    height: 15px;
    color: #096b59;
    transition: transform 140ms ease;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history-row[open] > summary .portal-ui-repairer-history-row__chevron {
    transform: rotate(180deg);
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history-row__body {
    display: grid;
    grid-template-columns: minmax(190px, 1.3fr) minmax(140px, 0.7fr) minmax(140px, 0.7fr) auto;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-top: 1px solid var(--border);
    background: #fbfefd;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history-row__body > div {
    display: grid;
    align-self: stretch;
    align-content: center;
    gap: 2px;
    padding-right: 12px;
    border-right: 1px solid var(--border);
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history-row__body span {
    color: var(--muted);
    font-size: 9.5px;
    font-weight: 720;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history-row__body strong {
    color: var(--text);
    font-size: 11px;
    font-weight: 680;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history-row__body small {
    color: var(--muted);
    font-size: 10px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history-row__body .button {
    justify-self: end;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-cancelled-row {
    display: grid;
    grid-template-columns: minmax(110px, 0.5fr) minmax(180px, 1fr) minmax(150px, 0.75fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 11px;
    border: 1px solid var(--border);
    border-top: 0;
    color: var(--muted);
    font-size: 11px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-cancelled-row:first-child {
    border-top: 1px solid var(--border);
    border-radius: 9px 9px 0 0;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-cancelled-row:last-child {
    border-radius: 0 0 9px 9px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-cancelled-row:only-child {
    border-radius: 9px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-cancelled-row strong {
    color: var(--text);
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-cancelled-row a {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 5px;
    color: var(--wat-blue);
    font-weight: 680;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-cancelled-row a :where(i, svg) {
    width: 14px;
    height: 14px;
}

@media (max-width: 900px) {
    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card {
        display: block;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__device {
        border-right: 0;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__footer {
        border-top: 1px solid var(--border);
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__meta > div {
        padding: 0 12px;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history-row > summary {
        grid-template-columns: minmax(105px, 0.55fr) minmax(160px, 1fr) auto 18px;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history-row__date {
        display: none;
    }
}

@media (max-width: 760px) {
    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: 11px;
        background: #fff;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-tabs button {
        display: inline-flex;
        min-width: 0;
        min-height: 48px;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border: 0;
        border-left: 1px solid var(--border);
        border-bottom: 3px solid transparent;
        color: var(--muted);
        background: #fff;
        font: inherit;
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-tabs button:first-child {
        border-left: 0;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-tabs button.is-active {
        border-bottom-color: #00a4bf;
        color: #006a7b;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-tabs button[data-repairer-lane-tab="repairing"].is-active {
        border-bottom-color: var(--wat-blue);
        color: var(--wat-blue-deep);
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-tabs button[data-repairer-lane-tab="waiting"].is-active {
        border-bottom-color: #4c617a;
        color: var(--text);
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-kanban {
        display: block;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-lane {
        display: none;
        border-top-width: 1px;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-lane.is-mobile-active {
        display: block;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-lane__header {
        display: none;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history-row > summary {
        grid-template-columns: minmax(100px, 0.65fr) minmax(150px, 1fr) auto 18px;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history-row__body {
        grid-template-columns: minmax(0, 1fr);
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history-row__body > div {
        padding: 0 0 8px;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history-row__body .button {
        justify-self: stretch;
    }
}

@media (max-width: 640px) {
    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repair-ticket {
        grid-template-columns: 84px minmax(0, 1fr);
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repair-ticket__device-rail {
        min-height: 136px;
        padding: 10px 6px;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repair-ticket__device-icons :where(i, svg) {
        width: 32px;
        height: 32px;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repair-ticket__content {
        padding: 11px 10px 9px;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__status {
        padding: 11px 13px;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__status-icon {
        display: none;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__status h2 {
        font-size: clamp(15px, 4.5vw, 18px);
        white-space: nowrap;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__status p {
        font-size: 12px;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__device {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 12px;
        padding: 11px 13px;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__device-copy > strong {
        font-size: 15px;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__footer {
        display: none;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__mobile-action {
        display: flex;
        justify-content: center;
        margin: 0 13px 10px;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__details {
        display: block;
        border-top: 1px solid var(--border);
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-impact-card__documents {
        padding: 8px 13px;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__details > summary {
        display: flex;
        min-height: 44px;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 13px;
        color: var(--text);
        font-size: 12px;
        font-weight: 680;
        cursor: pointer;
        list-style: none;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__details > summary::-webkit-details-marker {
        display: none;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__details > summary span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__details > summary :where(i, svg) {
        width: 16px;
        height: 16px;
        transition: transform 140ms ease;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__details[open] > summary > :where(i, svg) {
        transform: rotate(180deg);
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__details-body {
        display: grid;
        gap: 12px;
        padding: 0 13px 13px;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__details-body dl {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin: 0;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__details-body dl > div {
        min-width: 0;
        padding: 8px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface-soft);
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__details-body dt,
    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__services > span {
        color: var(--muted);
        font-size: 9px;
        font-weight: 750;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__details-body dd {
        margin: 3px 0 0;
        overflow-wrap: anywhere;
        color: var(--text);
        font-size: 10.5px;
        font-weight: 650;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__services ul {
        display: grid;
        gap: 6px;
        margin: 7px 0 0;
        padding: 0;
        list-style: none;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__services li {
        display: grid;
        gap: 2px;
        padding: 8px;
        border: 1px solid var(--border);
        border-radius: 8px;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__services strong {
        color: var(--text);
        font-size: 10.5px;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__services small {
        color: var(--muted);
        font-size: 10px;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history > summary {
        min-height: 50px;
        padding: 10px 12px;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history__toggle {
        font-size: 0;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history__toggle :where(i, svg) {
        width: 16px;
        height: 16px;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history-row > summary {
        grid-template-columns: minmax(95px, auto) minmax(0, 1fr) 16px;
        gap: 8px;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-history-row__badge {
        display: none;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-cancelled-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-cancelled-row > span {
        grid-column: 1 / -1;
    }
}

@media (max-width: 380px) {
    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-customer-repair-card__status h2 {
        white-space: normal;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-repairer-tabs button {
        gap: 4px;
        padding: 0 5px;
        font-size: 10px;
    }
}

/* #endregion */

/* #region Shared Repair foundation */
/*
 * WAT WAT Repair surfaces.
 *
 * This stylesheet is intentionally scoped to .repair-ui-body. Historical
 * pages continue to use their existing visual system unchanged.
 */
/* DM Sans is declared once in the shared engine above. */
body:where(.wat-app).repair-ui-body {
    --wat-primary: #007fde;
    --wat-primary-deep: #0029a5;
    --wat-teal: #00b49c;
    --wat-mint: #29eec6;
    --wat-canvas: #f7fbfb;
    --wat-surface: #fff;
    --wat-surface-soft: #f8fbff;
    --wat-nav-active: #e2f2ff;
    --wat-border: #dcebea;
    --wat-border-strong: #c8dddc;
    --wat-text: #0b263e;
    --wat-muted: #667b88;
    --wat-faint: #9caabe;
    --wat-success: #096b59;
    --wat-success-soft: #e7f9f3;
    --wat-warning: #87520b;
    --wat-warning-soft: #fff5df;
    --wat-danger: #b42318;
    --wat-danger-soft: #fff1f0;
    --wat-error: #b72239;
    --wat-error-soft: #fff0f2;
    --wat-neutral: #4c617a;
    --wat-neutral-soft: #eef4f8;
    --wat-gradient: linear-gradient(135deg, #007dde, #00a4bf);
    --wat-command-gradient: linear-gradient(135deg, #052965 0%, #006fcf 62%, #00b49c 100%);
    --wat-shadow: 0 8px 25px rgba(4, 67, 86, 0.055);
    --wat-elevated-shadow: 0 18px 44px rgba(4, 67, 86, 0.065);
    --wat-action-shadow: 0 12px 26px rgba(0, 164, 191, 0.17);
    min-width: 0;
    margin: 0;
    background:
        linear-gradient(180deg, rgba(0, 127, 222, 0.05), transparent 280px),
        var(--wat-canvas);
    color: var(--wat-text);
    font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13.5px;
    line-height: 1.45;
}

body:where(.wat-app).repair-ui-body *,
body:where(.wat-app).repair-ui-body *::before,
body:where(.wat-app).repair-ui-body *::after {
    box-sizing: border-box;
}

body:where(.wat-app).repair-ui-body [hidden],
body:where(.wat-app).repair-ui-body .hidden {
    display: none !important;
}

body:where(.wat-app).repair-ui-body :where(button, input, select, textarea) {
    font: inherit;
}

body:where(.wat-app).repair-ui-body :where(a, button, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--wat-primary);
    outline-offset: 3px;
}

body:where(.wat-app).repair-ui-body a {
    color: var(--wat-primary);
    text-underline-offset: 2px;
}

body:where(.wat-app).repair-ui-body :where(h1, h2, h3, h4, p, dl, dd) {
    margin-top: 0;
}

body:where(.wat-app).repair-ui-body :where(h1, h2, h3, h4, strong, b) {
    color: var(--wat-text);
}

body:where(.wat-app).repair-ui-body .repair-ui-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
    color: var(--wat-primary-deep);
    font-size: 11px;
    font-weight: 760;
    letter-spacing: 0.065em;
    line-height: 1.2;
    text-transform: uppercase;
}

body:where(.wat-app).repair-ui-body :where(svg.lucide, i[data-lucide]) {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    stroke-width: 2.1;
}

body:where(.wat-app).repair-ui-body :where(.button-blue, .button-blue-2, .button-red-2, button) :where(svg.lucide, i[data-lucide]) {
    width: 16px;
    height: 16px;
}

body:where(.wat-app).repair-ui-body .muted,
body:where(.wat-app).repair-ui-body small {
    color: var(--wat-muted);
}

body:where(.wat-app).repair-ui-body .indicator-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    background: rgba(11, 38, 62, 0.78);
    opacity: 0;
    pointer-events: none;
}

body:where(.wat-app).repair-ui-body .indicator-spinner {
    max-width: 100%;
    max-height: 100%;
    pointer-events: none;
}

body:where(.wat-app).repair-ui-body .htmx-request .htmx-indicator,
body:where(.wat-app).repair-ui-body .htmx-request.htmx-indicator {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 160ms step-end;
}

/* Shared application shell */
:where(body.wat-app.repair-ui-body) .repair-ui-shell {
    display: grid;
    grid-template-columns: 216px minmax(0, 1fr);
    min-height: 100vh;
}

:where(body.wat-app.repair-ui-body) .repair-ui-sidebar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    height: 100vh;
    min-width: 0;
    flex-direction: column;
    gap: 24px;
    overflow: hidden;
    padding: 24px 16px 18px;
    border-right: 1px solid var(--wat-border);
    background: rgba(255, 255, 255, 0.93);
}

:where(body.wat-app.repair-ui-body) .repair-ui-brand {
    display: flex;
    min-height: 42px;
    align-items: center;
    padding-inline: 4px;
}

:where(body.wat-app.repair-ui-body) .repair-ui-brand img {
    display: block;
    width: 126px;
    height: auto;
}

:where(body.wat-app.repair-ui-body) .repair-ui-nav {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    gap: 28px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
}

/* Shared Repair workflow timeline (admin and portal). */
body:where(.wat-app).repair-ui-body .repair-ui-workflow {
    margin: 0 0 18px;
    overflow: hidden;
    border: 1px solid var(--wat-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: var(--wat-shadow);
}

body:where(.wat-app).repair-ui-body .repair-ui-workflow-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--wat-border);
    background: var(--wat-surface-soft);
}

body:where(.wat-app).repair-ui-body .repair-ui-workflow-header h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 680;
}

body:where(.wat-app).repair-ui-body .repair-ui-workflow-header span {
    color: var(--wat-muted);
    font-size: 11px;
}

body:where(.wat-app).repair-ui-body .timeline.repair-ui-timeline {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(9, minmax(86px, 1fr));
    gap: 0;
    margin: 0;
    padding: 15px 12px 13px;
    overflow-x: auto;
    background: transparent;
    color: inherit;
}

body:where(.wat-app).repair-ui-body .timeline.repair-ui-timeline .timeline_cell {
    position: relative;
    display: block;
    min-width: 86px;
    min-height: 70px;
    flex: none;
    padding: 0 5px;
    border: 0;
    background: transparent;
    color: var(--wat-muted);
    text-align: center;
}

body:where(.wat-app).repair-ui-body .timeline.repair-ui-timeline .timeline_cell::before {
    position: absolute;
    top: 13px;
    right: 50%;
    left: -50%;
    height: 2px;
    background: #dce8ed;
    content: "";
}

body:where(.wat-app).repair-ui-body .timeline.repair-ui-timeline .timeline_cell:first-child::before {
    display: none;
}

body:where(.wat-app).repair-ui-body .timeline.repair-ui-timeline .timeline_cell.is-complete::before,
body:where(.wat-app).repair-ui-body .timeline.repair-ui-timeline .timeline_cell.--active::before {
    background: linear-gradient(90deg, var(--wat-teal), var(--wat-primary));
}

body:where(.wat-app).repair-ui-body .repair-ui-timeline-marker {
    position: relative;
    z-index: 1;
    display: grid;
    width: 28px;
    height: 28px;
    margin: 0 auto 8px;
    place-items: center;
    border: 2px solid #d3e1e6;
    border-radius: 999px;
    background: #fff;
    color: var(--wat-faint);
}

body:where(.wat-app).repair-ui-body .repair-ui-timeline-marker :where(i[data-lucide], svg.lucide) {
    width: 14px;
    height: 14px;
}

body:where(.wat-app).repair-ui-body .timeline_cell.is-complete .repair-ui-timeline-marker {
    border-color: var(--wat-teal);
    background: var(--wat-success-soft);
    color: var(--wat-success);
}

body:where(.wat-app).repair-ui-body .timeline_cell.--active .repair-ui-timeline-marker {
    border-color: transparent;
    background: var(--wat-gradient);
    color: #fff;
    box-shadow: 0 0 0 5px rgba(0, 127, 222, 0.11);
}

body:where(.wat-app).repair-ui-body .timeline.--cancelled .timeline_cell.--active .repair-ui-timeline-marker {
    background: var(--wat-danger);
    box-shadow: 0 0 0 5px rgba(180, 35, 24, 0.1);
}

body:where(.wat-app).repair-ui-body .timeline.repair-ui-timeline .timeline_cell_arrow {
    display: block;
    height: auto;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 10.5px;
    font-weight: 630;
    line-height: 1.2;
}

body:where(.wat-app).repair-ui-body .timeline.repair-ui-timeline .timeline_cell.--active .timeline_cell_arrow {
    color: var(--wat-primary-deep);
    font-weight: 760;
}

body:where(.wat-app).repair-ui-body .timeline.repair-ui-timeline .timeline_cell_details {
    position: static;
    min-height: 0;
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--wat-faint);
    font-size: 9.5px;
    line-height: 1.2;
}

body:where(.wat-app).repair-ui-body .timeline.repair-ui-timeline .timeline_cell_details::before {
    display: none;
}

:where(body.wat-app.repair-ui-body) .repair-ui-nav-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

:where(body.wat-app.repair-ui-body) .repair-ui-nav-group > summary {
    display: flex;
    min-height: 28px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 8px;
    padding: 4px 8px;
    border-radius: 8px;
    color: #71819a;
    cursor: pointer;
    font-size: 11px;
    font-weight: 760;
    letter-spacing: 0.02em;
    list-style: none;
    text-transform: uppercase;
}

:where(body.wat-app.repair-ui-body) .repair-ui-nav-group > summary::-webkit-details-marker {
    display: none;
}

:where(body.wat-app.repair-ui-body) .repair-ui-nav-group > summary:is(:hover, :focus-visible) {
    background: #edf5ff;
    color: #405676;
}

:where(body.wat-app.repair-ui-body) .repair-ui-nav-group > summary :where(svg, i[data-lucide]) {
    width: 14px;
    height: 14px;
    transition: transform 150ms ease;
}

:where(body.wat-app.repair-ui-body) .repair-ui-nav-group:not([open]) > summary :where(svg, i[data-lucide]) {
    transform: rotate(-90deg);
}

:where(body.wat-app.repair-ui-body) .repair-ui-nav-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

:where(body.wat-app.repair-ui-body) .repair-ui-nav-link {
    position: relative;
    display: flex;
    min-height: 36px;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: #405676 !important;
    font-size: 13px;
    font-weight: 630;
    line-height: 1.2;
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
}

:where(body.wat-app.repair-ui-body) .repair-ui-nav-link :where(svg, i[data-lucide]) {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    stroke-width: 2.1;
}

:where(body.wat-app.repair-ui-body) .repair-ui-nav-link:is(:hover, :focus-visible) {
    background: #edf5ff;
    color: var(--wat-primary-deep) !important;
}

:where(body.wat-app.repair-ui-body) .repair-ui-nav-link.is-active {
    background: var(--wat-nav-active);
    color: var(--wat-primary-deep) !important;
    box-shadow: inset 3px 0 0 var(--wat-primary);
}

:where(body.wat-app.repair-ui-body) .repair-ui-nav-link.is-parent-active:not(.is-active) {
    color: var(--wat-primary-deep) !important;
}

:where(body.wat-app.repair-ui-body) .repair-ui-sidebar-footer {
    display: grid;
    gap: 10px;
    padding: 14px 8px 0;
    border-top: 1px solid var(--wat-border);
}

:where(body.wat-app.repair-ui-body) .repair-ui-sidebar-account {
    min-width: 0;
}

:where(body.wat-app.repair-ui-body) .repair-ui-sidebar-account strong,
:where(body.wat-app.repair-ui-body) .repair-ui-sidebar-account span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:where(body.wat-app.repair-ui-body) .repair-ui-sidebar-account strong {
    font-size: 12px;
    font-weight: 680;
}

:where(body.wat-app.repair-ui-body) .repair-ui-sidebar-account span {
    color: var(--wat-muted);
    font-size: 11px;
}

:where(body.wat-app.repair-ui-body) .repair-ui-main {
    min-width: 0;
}

:where(body.wat-app.repair-ui-body) .repair-ui-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    min-width: 0;
    height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-inline: 32px;
    border-bottom: 1px solid var(--wat-border);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
}

:where(body.wat-app.repair-ui-body) .repair-ui-topbar-title {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    color: #355075;
    font-size: 13px;
    font-weight: 680;
}

:where(body.wat-app.repair-ui-body) .repair-ui-topbar-title :where(svg, i[data-lucide]) {
    width: 18px;
    height: 18px;
    color: var(--wat-primary);
}

:where(body.wat-app.repair-ui-body) .repair-ui-topbar-context {
    min-width: 0;
    color: #405676;
    font-size: 12px;
    font-weight: 630;
}

:where(body.wat-app.repair-ui-body) .repair-ui-topbar-context span {
    display: block;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:where(body.wat-app.repair-ui-body) .repair-ui-mobile-open,
:where(body.wat-app.repair-ui-body) .repair-ui-mobile-close,
:where(body.wat-app.repair-ui-body) .repair-ui-backdrop {
    display: none;
}

:where(body.wat-app.repair-ui-body) .repair-ui-content,
body:where(.wat-app).repair-ui-body .portal_content {
    min-width: 0;
}

:where(body.wat-app.repair-ui-body) .repair-ui-content > .portal_content {
    display: block;
    min-height: 0;
    overflow: visible;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

:where(body.wat-app.repair-ui-body) .repair-ui-content > .portal_content > .card + .card {
    margin-top: 16px;
}

:where(body.wat-app.repair-ui-body) .repair-ui-content {
    width: 100%;
    max-width: 1680px;
    margin: 0 auto;
    padding: 28px 32px 44px;
}

/* Page identity */
body:where(.wat-app).repair-ui-body .page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin: 0 0 24px;
    padding: 0;
    border: 0;
    background: transparent;
}

body:where(.wat-app).repair-ui-body .page-header_title {
    min-width: 0;
}

body:where(.wat-app).repair-ui-body .page-header h1 {
    margin: 0;
    color: var(--wat-text);
    font-size: clamp(44px, 4vw, 49px);
    font-weight: 760;
    letter-spacing: -0.045em;
    line-height: 0.98;
}

body:where(.wat-app).repair-ui-body .page-header h1 a {
    color: inherit;
    text-decoration-color: rgba(11, 38, 62, 0.22);
}

body:where(.wat-app).repair-ui-body .page-header_subtitle {
    max-width: 760px;
    margin: 9px 0 0;
    color: var(--wat-muted);
    font-size: 13.5px;
    line-height: 1.45;
}

body:where(.wat-app).repair-ui-body .page-header_actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
}

/* Panels, cards and focal work */
body:where(.wat-app).repair-ui-body .card,
body:where(.wat-app).repair-ui-body details.card,
body:where(.wat-app).repair-ui-body .e-waste-card,
body:where(.wat-app).repair-ui-body .repair-request {
    border: 1px solid var(--wat-border);
    border-radius: 12px;
    background: var(--wat-surface);
    box-shadow: var(--wat-shadow);
}

body:where(.wat-app).repair-ui-body .card,
body:where(.wat-app).repair-ui-body .e-waste-card,
body:where(.wat-app).repair-ui-body .repair-request {
    padding: 14px;
}

body:where(.wat-app).repair-ui-body details.card {
    overflow: clip;
    padding: 0;
}

body:where(.wat-app).repair-ui-body details.card > summary {
    min-height: 48px;
    padding: 14px 18px 12px;
    cursor: pointer;
}

body:where(.wat-app).repair-ui-body details.card > :not(summary) {
    margin-right: 14px;
    margin-left: 14px;
}

body:where(.wat-app).repair-ui-body details.card > :last-child {
    margin-bottom: 14px;
}

body:where(.wat-app).repair-ui-body .card-title,
body:where(.wat-app).repair-ui-body h2.card-title,
body:where(.wat-app).repair-ui-body .e-waste-card_label {
    margin: 0;
    color: var(--wat-text);
    font-size: 16px;
    font-weight: 680;
    line-height: 1.12;
}

body:where(.wat-app).repair-ui-body .card.--warning {
    border-color: #f0d79e;
    background: var(--wat-warning-soft);
}

body:where(.wat-app).repair-ui-body .card.--danger {
    border-color: #f4c9c5;
    background: var(--wat-danger-soft);
}

body:where(.wat-app).repair-ui-body .repair-ui-command {
    overflow: hidden;
    border-color: rgba(0, 180, 156, 0.38);
    background: linear-gradient(180deg, #fff, #f2fffc);
    box-shadow:
        0 24px 62px rgba(0, 127, 222, 0.13),
        0 0 0 5px rgba(0, 180, 156, 0.08),
        0 0 0 1px rgba(0, 180, 156, 0.12);
}

body:where(.wat-app).repair-ui-body .repair-ui-command > :is(.card-title, .quote-card-header, .repair-ui-command-header):first-child {
    margin: -14px -14px 14px;
    padding: 14px 18px 12px;
    background: var(--wat-command-gradient);
    color: #fff;
}

body:where(.wat-app).repair-ui-body .repair-ui-command > :is(.card-title, .quote-card-header, .repair-ui-command-header):first-child :where(h2, h3, .card-title),
body:where(.wat-app).repair-ui-body .repair-ui-command > .card-title:first-child {
    color: #fff;
}

/* Historical service availability cards draw a large crossed-out overlay. WAT
   surfaces keep the unavailable state through tone and copy instead. */
body:where(.wat-app).repair-ui-body .rsx-card--none::before,
body:where(.wat-app).repair-ui-body .rsx-card--none::after {
    display: none;
}

/* Actions */
body:where(.wat-app).repair-ui-body :where(.button-blue, .button-blue-2, .button-red-2, .text-button, button) {
    border-radius: 10px;
    font-family: inherit;
}

body:where(.wat-app).repair-ui-body :where(.button-blue, .button-blue-2, .button-red-2) {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    padding: 9px 14px;
    font-size: 13.5px;
    font-weight: 680;
    line-height: 1;
    text-align: center;
    text-decoration: none;
}

body:where(.wat-app).repair-ui-body .button-blue {
    background: var(--wat-gradient);
    color: #fff;
    box-shadow: var(--wat-action-shadow);
}

body:where(.wat-app).repair-ui-body .button-blue:is(:hover, :focus-visible) {
    color: #fff;
    filter: saturate(1.06) brightness(0.98);
}

body:where(.wat-app).repair-ui-body .button-blue-2 {
    border-color: rgba(0, 127, 222, 0.24);
    background: #fff;
    color: var(--wat-primary-deep);
    box-shadow: none;
}

body:where(.wat-app).repair-ui-body .button-blue-2:is(:hover, :focus-visible) {
    background: var(--wat-nav-active);
    color: var(--wat-primary-deep);
}

body:where(.wat-app).repair-ui-body .button-red-2 {
    border-color: rgba(180, 35, 24, 0.2);
    background: var(--wat-danger-soft);
    color: var(--wat-danger);
    box-shadow: none;
}

body:where(.wat-app).repair-ui-body :where(.button-blue, .button-blue-2, .button-red-2).small {
    min-height: 36px;
    padding: 7px 11px;
    font-size: 12.5px;
}

body:where(.wat-app).repair-ui-body :where(button, .button-blue, .button-blue-2, .button-red-2):disabled,
body:where(.wat-app).repair-ui-body :where(button, .button-blue, .button-blue-2, .button-red-2)[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
    box-shadow: none;
}

body:where(.wat-app).repair-ui-body .buttons-row,
body:where(.wat-app).repair-ui-body .table-buttons-row,
body:where(.wat-app).repair-ui-body .quote-actions,
body:where(.wat-app).repair-ui-body .quote-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Forms */
body:where(.wat-app).repair-ui-body label {
    color: #233b5c;
    font-weight: 560;
}

body:where(.wat-app).repair-ui-body :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    max-width: 100%;
    min-height: 38px;
    border: 1px solid #d2e2e8;
    border-radius: 8px;
    background: #fff;
    color: var(--wat-text);
    padding: 8px 10px;
    outline: none;
}

body:where(.wat-app).repair-ui-body textarea {
    min-height: 96px;
    resize: vertical;
}

body:where(.wat-app).repair-ui-body :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
    border-color: var(--wat-primary);
    box-shadow: 0 0 0 3px rgba(0, 127, 222, 0.12);
}

body:where(.wat-app).repair-ui-body :where(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--wat-primary);
}

body:where(.wat-app).repair-ui-body fieldset {
    min-width: 0;
    margin-inline: 0;
    padding: 14px;
    border: 1px solid var(--wat-border);
    border-radius: 12px;
}

body:where(.wat-app).repair-ui-body legend {
    padding-inline: 6px;
    color: var(--wat-text);
    font-weight: 680;
}

body:where(.wat-app).repair-ui-body .checkbox-label {
    align-items: flex-start;
    gap: 9px;
}

/* State and feedback */
body:where(.wat-app).repair-ui-body .status-badge,
body:where(.wat-app).repair-ui-body .badge,
body:where(.wat-app).repair-ui-body .quote-pill,
body:where(.wat-app).repair-ui-body .repair-request-service-quantity-pill {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9999px;
    background: var(--wat-neutral-soft);
    color: var(--wat-neutral);
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 630;
    line-height: 1.2;
}

body:where(.wat-app).repair-ui-body .status-badge--success {
    background: var(--wat-success-soft);
    color: var(--wat-success);
}

body:where(.wat-app).repair-ui-body :where(.status-badge--warning, .status-badge--pending) {
    background: var(--wat-warning-soft);
    color: var(--wat-warning);
}

body:where(.wat-app).repair-ui-body :where(.status-badge--danger, .quote-pill--danger) {
    background: var(--wat-danger-soft);
    color: var(--wat-danger);
}

body:where(.wat-app).repair-ui-body :where(.feedback, .alert-warning, .form-feedback) {
    min-height: 0;
    border: 1px solid #cfe6f4;
    border-radius: 8px;
    background: #eef7ff;
    color: #31536d;
    padding: 10px 12px;
}

body:where(.wat-app).repair-ui-body :where(.feedback, .form-feedback):empty {
    display: none;
}

body:where(.wat-app).repair-ui-body .form-feedback:has(> .feedback:only-child:empty) {
    display: none;
}

body:where(.wat-app).repair-ui-body :where(.feedback.warning, .alert-warning) {
    border-color: #f1d591;
    background: var(--wat-warning-soft);
    color: var(--wat-warning);
}

body:where(.wat-app).repair-ui-body :where(.feedback.error, .form-feedback.error) {
    border-color: rgba(183, 34, 57, 0.22);
    background: var(--wat-error-soft);
    color: var(--wat-error);
}

body:where(.wat-app).repair-ui-body :where(.feedback.success, .form-feedback.success) {
    border-color: rgba(9, 107, 89, 0.2);
    background: var(--wat-success-soft);
    color: var(--wat-success);
}

/* Shared Repair order fragments render in both admin and portal shells. */
body:where(.wat-app).repair-ui-body .repair-ui-alert {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    margin: 0 0 16px;
    border: 1px solid #f0d79e;
    border-radius: 12px;
    background: var(--wat-warning-soft);
    padding: 13px 14px;
    box-shadow: var(--wat-shadow);
}

body:where(.wat-app).repair-ui-body .repair-ui-alert.is-danger {
    border-color: #f4c9c5;
    background: var(--wat-danger-soft);
}

body:where(.wat-app).repair-ui-body .repair-ui-alert-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--wat-warning);
}

body:where(.wat-app).repair-ui-body .repair-ui-alert.is-danger .repair-ui-alert-icon {
    color: var(--wat-danger);
}

body:where(.wat-app).repair-ui-body .repair-ui-alert-title {
    margin: 0;
    font-size: 13px;
    font-weight: 720;
}

body:where(.wat-app).repair-ui-body .repair-ui-alert-meta {
    margin: 2px 0 0;
    color: var(--wat-muted);
    font-size: 12px;
}

body:where(.wat-app).repair-ui-body .repair-ui-alert blockquote {
    margin: 8px 0 0;
    border-left: 3px solid currentColor;
    color: var(--wat-text);
    padding: 2px 0 2px 10px;
    font-style: normal;
}

body:where(.wat-app).repair-ui-body .repair-order-booking-mode {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    margin: 0;
    border: 0;
    border-radius: 10px;
    background: #f4faff;
    padding: 12px;
}

body:where(.wat-app).repair-ui-body .repair-order-booking-mode__body,
body:where(.wat-app).repair-ui-body .repair-order-service-card__heading {
    min-width: 0;
}

body:where(.wat-app).repair-ui-body .repair-order-booking-mode__icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(0, 127, 222, 0.12);
    border-radius: 10px;
    background: #fff;
    color: var(--wat-primary);
}

body:where(.wat-app).repair-ui-body .repair-order-booking-mode__icon :where(i[data-lucide], svg.lucide) {
    width: 20px;
    height: 20px;
}

body:where(.wat-app).repair-ui-body .repair-order-booking-mode__eyebrow,
body:where(.wat-app).repair-ui-body .repair-order-request-details__label {
    margin: 0 0 3px;
    color: var(--wat-muted);
    font-size: 10px;
    font-weight: 720;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

body:where(.wat-app).repair-ui-body .repair-order-booking-mode__title {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
}

body:where(.wat-app).repair-ui-body .repair-order-booking-mode__description {
    margin: 2px 0 0;
    color: var(--wat-muted);
    font-size: 11.5px;
}

body:where(.wat-app).repair-ui-body .repair-order-booking-mode__context {
    display: grid;
    gap: 2px;
    margin-top: 8px;
    border-top: 1px solid rgba(0, 127, 222, 0.1);
    padding-top: 8px;
}

body:where(.wat-app).repair-ui-body .repair-order-booking-mode__context-label {
    color: var(--wat-muted);
    font-size: 10px;
    font-weight: 620;
    letter-spacing: 0;
    text-transform: none;
}

body:where(.wat-app).repair-ui-body .repair-order-booking-mode__context-value {
    color: var(--wat-text);
    font-size: 11.5px;
    font-weight: 650;
}

body:where(.wat-app).repair-ui-body .repair-order-request-details {
    display: grid;
    gap: 12px;
}

body:where(.wat-app).repair-ui-body .repair-order-request-details__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body:where(.wat-app).repair-ui-body .repair-order-request-details__item {
    min-width: 0;
    border-radius: 9px;
    background: var(--wat-surface-soft);
    padding: 10px 11px;
}

body:where(.wat-app).repair-ui-body .repair-order-request-details__item--full {
    grid-column: 1 / -1;
}

body:where(.wat-app).repair-ui-body .repair-order-request-details__stack {
    display: grid;
    gap: 5px;
}

body:where(.wat-app).repair-ui-body .repair-order-request-details__value {
    color: var(--wat-text);
    font-size: 12.5px;
    line-height: 1.45;
}

body:where(.wat-app).repair-ui-body .repair-order-request-details__value--message,
body:where(.wat-app).repair-ui-body .repair-order-request-details__value--muted {
    color: var(--wat-muted);
}

body:where(.wat-app).repair-ui-body .repair-order-request-details__value--message {
    white-space: pre-wrap;
}

body:where(.wat-app).repair-ui-body .repair-order-services {
    display: grid;
    gap: 10px;
}

body:where(.wat-app).repair-ui-body .repair-order-service-card {
    overflow: hidden;
    border: 1px solid var(--wat-border);
    border-radius: 10px;
    background: #fff;
}

body:where(.wat-app).repair-ui-body .repair-order-service-card__header {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    border-bottom: 1px solid #e8f0f2;
    background: var(--wat-surface-soft);
    padding: 10px 11px;
}

body:where(.wat-app).repair-ui-body .repair-order-service-card__icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 9px;
    background: #e7f4ff;
    color: var(--wat-primary);
}

body:where(.wat-app).repair-ui-body .repair-order-service-card__icon :where(i[data-lucide], svg.lucide) {
    width: 17px;
    height: 17px;
}

body:where(.wat-app).repair-ui-body .repair-order-service-card__title {
    margin: 0;
    font-size: 13px;
    font-weight: 680;
}

body:where(.wat-app).repair-ui-body .repair-order-service-card__meta {
    margin: 1px 0 0;
    color: var(--wat-muted);
    font-size: 11px;
}

body:where(.wat-app).repair-ui-body .repair-order-service-card__meta--issue {
    color: #405b70;
}

body:where(.wat-app).repair-ui-body .repair-order-service-card__rows {
    display: grid;
}

body:where(.wat-app).repair-ui-body .repair-order-service-card__row {
    padding: 9px 11px;
    border-top: 1px solid #eef3f5;
}

body:where(.wat-app).repair-ui-body .repair-order-service-card__row:first-child {
    border-top: 0;
}

body:where(.wat-app).repair-ui-body .repair-order-service-card__device-row {
    display: flex;
    align-items: center;
    gap: 7px;
}

body:where(.wat-app).repair-ui-body .repair-order-service-card__device {
    font-size: 12px;
    font-weight: 630;
}

body:where(.wat-app).repair-ui-body .quote-lines,
body:where(.wat-app).repair-ui-body .quote-items {
    display: grid;
    gap: 8px;
}

body:where(.wat-app).repair-ui-body .quote-service > .quote-line {
    border-bottom: 1px solid #e8f0f2;
    background: var(--wat-surface-soft);
    padding: 10px 11px;
}

body:where(.wat-app).repair-ui-body .quote-line__label {
    color: var(--wat-text);
    font-size: 12.5px;
    font-weight: 650;
}

body:where(.wat-app).repair-ui-body .quote-line__header {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
}

body:where(.wat-app).repair-ui-body .quote-line__meta {
    margin-top: 2px;
    color: var(--wat-muted);
    font-size: 10.5px;
    line-height: 1.35;
}

body:where(.wat-app).repair-ui-body .quote-line__meta--preliminary {
    white-space: nowrap;
}

body:where(.wat-app).repair-ui-body .quote-step-list {
    display: grid;
    gap: 6px;
    margin-top: 7px;
    border-left: 2px solid #dcecf3;
    padding-left: 9px;
}

body:where(.wat-app).repair-ui-body .quote-totals th,
body:where(.wat-app).repair-ui-body .quote-totals td {
    padding: 9px 10px;
    text-align: right;
}

body:where(.wat-app).repair-ui-body .quote-totals th:first-child,
body:where(.wat-app).repair-ui-body .quote-totals td:first-child {
    text-align: left;
}

body:where(.wat-app).repair-ui-body .quote-totals tbody tr:nth-child(odd) {
    background: transparent;
}

body:where(.wat-app).repair-ui-body .quote-totals tfoot {
    border-top: 1px solid var(--wat-border-strong);
    background: #f3f9fb;
}

body:where(.wat-app).repair-ui-body .chat-message {
    width: min(78%, 560px);
    border: 1px solid #dce8ed;
    border-radius: 11px 11px 11px 3px;
    background: #fff;
    color: var(--wat-text);
    padding: 9px 10px;
    box-shadow: 0 4px 12px rgba(4, 67, 86, 0.04);
}

body:where(.wat-app).repair-ui-body .chat.--repairer .chat-message.--repairer,
body:where(.wat-app).repair-ui-body .chat.--customer .chat-message.--customer {
    align-self: flex-end;
    border-color: rgba(0, 127, 222, 0.15);
    border-radius: 11px 11px 3px 11px;
    background: #eaf5ff;
}

body:where(.wat-app).repair-ui-body .chat-message__date {
    display: block;
    margin-top: 5px;
    color: var(--wat-faint);
    font-size: 9.5px;
}

body:where(.wat-app).repair-ui-body .repair-ui-empty-state {
    display: grid;
    min-height: 190px;
    place-items: center;
    border: 1px dashed var(--wat-border-strong);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.55);
    padding: 24px;
    color: var(--wat-muted);
    text-align: center;
}

body:where(.wat-app).repair-ui-body .repair-ui-empty-state > div {
    display: grid;
    justify-items: center;
    gap: 7px;
}

body:where(.wat-app).repair-ui-body .repair-ui-empty-state :where(i[data-lucide], svg.lucide) {
    width: 32px;
    height: 32px;
    color: var(--wat-faint);
}

/* Metrics and dense data */
body:where(.wat-app).repair-ui-body .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

body:where(.wat-app).repair-ui-body .stat-card {
    min-width: 0;
    border: 1px solid var(--wat-border);
    border-radius: 12px;
    background: var(--wat-surface);
    padding: 14px;
    box-shadow: var(--wat-shadow);
}

body:where(.wat-app).repair-ui-body .stat-card_label {
    display: block;
    margin-bottom: 8px;
    color: var(--wat-muted);
    font-size: 11px;
    font-weight: 560;
    line-height: 1.3;
}

body:where(.wat-app).repair-ui-body .stat-card_value {
    display: block;
    color: var(--wat-text);
    font-size: 26px;
    font-weight: 730;
    letter-spacing: -0.035em;
    line-height: 1;
}

body:where(.wat-app).repair-ui-body .stat-card_detail {
    margin-top: 7px;
    color: var(--wat-muted);
    font-size: 12px;
}

body:where(.wat-app).repair-ui-body :where(.table-container, .repair-atlas-review-table-wrap) {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--wat-border);
    border-radius: 12px;
    background: #fff;
}

body:where(.wat-app).repair-ui-body :where(table, .table, .quote-totals, .repair-atlas-review-table) {
    width: 100%;
    border-collapse: collapse;
    color: var(--wat-text);
}

body:where(.wat-app).repair-ui-body :where(th, td) {
    padding: 10px 12px;
    border-bottom: 1px solid #e6eef2;
    text-align: left;
    vertical-align: middle;
}

body:where(.wat-app).repair-ui-body th {
    background: var(--wat-surface-soft);
    color: var(--wat-muted);
    font-size: 11px;
    font-weight: 680;
    letter-spacing: 0.01em;
    text-transform: none;
}

body:where(.wat-app).repair-ui-body tr:last-child > td {
    border-bottom: 0;
}

/* Modals and transient feedback */
body:where(.wat-app).repair-ui-body #modalContainer,
body:where(.wat-app).repair-ui-body #flashMessageContainer {
    position: fixed;
    z-index: 1000;
}

body:where(.wat-app).repair-ui-body #modalContainer {
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(5, 24, 43, 0.38);
    backdrop-filter: blur(2px);
}

body:where(.wat-app).repair-ui-body #modalContainer:has(.modal) {
    display: grid;
    place-items: center;
}

body:where(.wat-app).repair-ui-body:has(#modalContainer > .modal) {
    overflow: hidden;
}

body:where(.wat-app).repair-ui-body #modalContainer > .modal {
    position: relative;
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow: auto;
    border: 1px solid var(--wat-border);
    border-radius: 14px;
    background: #fff;
    padding: 20px;
    box-shadow: 0 30px 90px rgba(5, 24, 43, 0.22);
}

body:where(.wat-app).repair-ui-body .modal-title {
    margin: 0 0 16px;
    color: var(--wat-text);
    font-size: 18px;
    font-weight: 680;
}

body:where(.wat-app).repair-ui-body .modal-close {
    border: 0;
    background: transparent;
    color: var(--wat-muted);
}

body:where(.wat-app).repair-ui-body #flashMessageContainer {
    bottom: 0;
    left: 50%;
    right: auto;
    display: grid;
    width: min(800px, calc(100vw - 36px));
    max-width: calc(100vw - 36px);
    justify-items: center;
    transform: translateX(-50%);
    pointer-events: none;
}

body:where(.wat-app).repair-ui-body #flashMessageContainer > .feedback {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: min(50vh, 360px);
    overflow-x: hidden;
    overflow-y: auto;
    pointer-events: auto;
    user-select: text;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Public shell; selected historical bodies opt into only this header/footer contract. */
body.wat-old-public {
    --wat-primary: #007fde;
    --wat-primary-deep: #0029a5;
    --wat-border: #dcebea;
    --wat-text: #0b263e;
}

body.wat-old-public :where(#header, #footer) {
    font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body:where(.wat-app).repair-ui-public {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body:where(.wat-app).repair-ui-public #header {
    position: sticky;
    top: 0;
    z-index: 40;
    min-height: 64px;
    border-bottom: 1px solid var(--wat-border);
    background: rgba(255, 255, 255, 0.94);
    font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    box-shadow: none;
    backdrop-filter: blur(12px);
}

body:where(.wat-app).repair-ui-public #header .header-row {
    display: flex;
    width: 100%;
    min-height: 64px;
    align-items: center;
    gap: 18px;
    margin: 0 auto;
    padding: 12px 24px;
    font-family: inherit !important;
    font-size: 13.5px;
    white-space: nowrap;
}

body:where(.wat-app).repair-ui-public #header .header-row:first-child {
    display: none;
}

body:where(.wat-app).repair-ui-public #header a:not(.button-blue) {
    color: var(--wat-text);
    font-weight: 630;
    text-decoration: none;
}

body:where(.wat-app).repair-ui-public #header a:not(.button-blue):is(:hover, :focus-visible) {
    color: var(--wat-primary-deep);
}

body:where(.wat-app).repair-ui-public #header .header-row > a:first-child img {
    display: block;
    width: 112px;
    height: auto;
}

body:where(.wat-app).repair-ui-public #header :where(.flex-grow) {
    flex: 1 1 auto;
}

body:where(.wat-app).repair-ui-public #header :where(.flex-row) {
    display: flex;
}

body:where(.wat-app).repair-ui-public #header :where(.align-items-center) {
    align-items: center;
}

body:where(.wat-app).repair-ui-public #header :where(.gap-10) {
    gap: 10px;
}

body:where(.wat-app).repair-ui-public #header :where(.d-block) {
    display: block;
}

body:where(.wat-app).repair-ui-public #header :where(.fz-12) {
    font-size: 12px;
}

body:where(.wat-app).repair-ui-public #header .avatar {
    display: block;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border: 1px solid rgba(0, 127, 222, 0.16);
    border-radius: 9999px;
    object-fit: cover;
}

body:where(.wat-app).repair-ui-public #header .mobile-header-menu-container {
    display: none;
}

body:where(.wat-app).repair-ui-public #header .mobile-header-menu-container > button {
    width: 40px;
    height: 40px;
    border: 1px solid var(--wat-border);
    border-radius: 9px;
    background:
        linear-gradient(var(--wat-text), var(--wat-text)) center 12px / 18px 2px no-repeat,
        linear-gradient(var(--wat-text), var(--wat-text)) center / 18px 2px no-repeat,
        linear-gradient(var(--wat-text), var(--wat-text)) center 26px / 18px 2px no-repeat,
        #fff;
    cursor: pointer;
}

body:where(.wat-app).repair-ui-public #header .mobile-header-menu {
    position: absolute;
    top: 100%;
    right: 12px;
    left: 12px;
    width: auto;
    max-height: 0;
    overflow: hidden;
    border: 0 solid var(--wat-border);
    border-radius: 0 0 12px 12px;
    background: #fff;
    box-shadow: none;
    transition: max-height 160ms ease, box-shadow 160ms ease, border-width 160ms ease;
}

body:where(.wat-app).repair-ui-public #header .mobile-header-menu-content {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 8px 14px 16px;
}

body:where(.wat-app).repair-ui-public #header .mobile-header-menu-content > * {
    width: 100%;
    min-height: 42px;
    padding: 10px 4px;
    border-top: 1px solid var(--wat-border);
}

body:where(.wat-app).repair-ui-public #header .mobile-header-menu-content > :first-child {
    border-top: 0;
}

body:where(.wat-app).repair-ui-public #header .mobile-header-menu-container.toggled > button {
    background:
        linear-gradient(45deg, transparent 46%, var(--wat-text) 47% 53%, transparent 54%) center / 18px 18px no-repeat,
        linear-gradient(-45deg, transparent 46%, var(--wat-text) 47% 53%, transparent 54%) center / 18px 18px no-repeat,
        #fff;
}

body:where(.wat-app).repair-ui-public #header .mobile-header-menu-container.toggled > .mobile-header-menu {
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    border-width: 0 1px 1px;
    box-shadow: 0 14px 30px rgba(4, 67, 86, 0.11);
}

:where(body.wat-app.repair-ui-body) .repair-ui-public-main {
    width: min(1240px, calc(100% - 32px));
    flex: 1 0 auto;
    margin: 0 auto;
    padding: 42px 0 64px;
}

body:where(.wat-app).repair-ui-public #footer {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: #063f5b;
    color: #fff;
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.45;
    padding: 28px 24px 32px;
}

body:where(.wat-app).repair-ui-public #footer .footer-content {
    display: grid;
    width: min(1240px, 100%);
    grid-template-columns: minmax(180px, 1.35fr) repeat(4, minmax(120px, 1fr));
    gap: 30px;
    align-items: start;
    margin: 0 auto;
}

body:where(.wat-app).repair-ui-public #footer .footer-content_images {
    min-width: 0;
}

body:where(.wat-app).repair-ui-public #footer .footer-content_images > a > img {
    display: block;
    width: 112px;
    height: auto;
}

body:where(.wat-app).repair-ui-public #footer .footer-section {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

body:where(.wat-app).repair-ui-public #footer :where(h3, a, span, .copyright) {
    color: #fff;
}

body:where(.wat-app).repair-ui-public #footer h3 {
    margin: 0 0 4px;
    font-size: 13.5px;
    font-weight: 720;
}

body:where(.wat-app).repair-ui-public #footer a {
    display: block;
    font-size: 13px;
    line-height: 1.45;
    text-decoration: none;
}

body:where(.wat-app).repair-ui-public #footer .copyright {
    max-width: 230px;
    margin-top: 16px;
    font-size: 12px;
    overflow-wrap: anywhere;
}

body:where(.wat-app).repair-ui-public #footer .footer-socials {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}

body:where(.wat-app).repair-ui-public #footer a:is(:hover, :focus-visible) {
    color: #fff;
    text-decoration: underline;
}

body.wat-old-public #footer {
    font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body:where(.wat-app).repair-ui-public :where(.mt-0) {
    margin-top: 0 !important;
}

body:where(.wat-app).repair-ui-public :where(.mb-0) {
    margin-bottom: 0 !important;
}

body:where(.wat-app).repair-ui-public :where(.clickable) {
    cursor: pointer;
}

body:where(.wat-app).repair-ui-public .mobile-sticky-tel {
    display: none;
}

@media (max-width: 1060px) {
    body:where(.wat-app).repair-ui-public #header .header-row > a:not(:first-child),
    body:where(.wat-app).repair-ui-public #header .header-row > .pwa-install-button--header {
        display: none;
    }

    body:where(.wat-app).repair-ui-public #header .mobile-header-menu-container {
        display: block;
    }

    body:where(.wat-app).repair-ui-public #footer .footer-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:where(.wat-app).repair-ui-public #footer .footer-content_images {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    body:where(.wat-app).repair-ui-public #header {
        min-height: 58px;
    }

    body:where(.wat-app).repair-ui-public #header .header-row {
        min-height: 58px;
        padding: 9px 12px;
    }

    body:where(.wat-app).repair-ui-public #header .header-row > a:first-child img {
        width: 104px;
    }

    body:where(.wat-app).repair-ui-public #footer {
        padding: 24px 18px 28px;
    }

    body:where(.wat-app).repair-ui-public #footer .footer-content {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    body:where(.wat-app).repair-ui-public #footer .footer-content_images {
        grid-column: auto;
    }
}

/* Responsive shell */
@media (max-width: 1180px) {
    body:where(.wat-app.repair-ui-body).is-repair-ui-nav-open {
        overflow: hidden;
    }

    :where(body.wat-app.repair-ui-body) .repair-ui-shell {
        display: block;
    }

    :where(body.wat-app.repair-ui-body) .repair-ui-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 80;
        width: min(320px, calc(100vw - 44px));
        height: 100dvh;
        box-shadow: 24px 0 60px rgba(5, 24, 43, 0.2);
        transform: translateX(-105%);
        transition: transform 180ms ease;
    }

    body:where(.wat-app.repair-ui-body).is-repair-ui-nav-open .repair-ui-sidebar {
        transform: translateX(0);
    }

    :where(body.wat-app.repair-ui-body) .repair-ui-mobile-open,
:where(body.wat-app.repair-ui-body) .repair-ui-mobile-close,
:where(body.wat-app.repair-ui-body) .repair-ui-backdrop {
        display: inline-flex;
    }

    :where(body.wat-app.repair-ui-body) .repair-ui-mobile-open {
        min-height: 36px;
        align-items: center;
        gap: 7px;
        border: 1px solid var(--wat-border);
        border-radius: 8px;
        background: #fff;
        color: var(--wat-primary-deep);
        padding: 7px 10px;
        font-weight: 680;
    }

    :where(body.wat-app.repair-ui-body) .repair-ui-mobile-open :where(svg, i[data-lucide]),
:where(body.wat-app.repair-ui-body) .repair-ui-mobile-close :where(svg, i[data-lucide]) {
        width: 18px;
        height: 18px;
    }

    :where(body.wat-app.repair-ui-body) .repair-ui-mobile-close {
        position: absolute;
        top: 18px;
        right: 14px;
        width: 36px;
        height: 36px;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--wat-border);
        border-radius: 8px;
        background: #fff;
        color: var(--wat-text);
    }

    :where(body.wat-app.repair-ui-body) .repair-ui-backdrop {
        position: fixed;
        inset: 0;
        z-index: 70;
        border: 0;
        background: rgba(5, 24, 43, 0.38);
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease;
    }

    body:where(.wat-app.repair-ui-body).is-repair-ui-nav-open .repair-ui-backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    :where(body.wat-app.repair-ui-body) .repair-ui-topbar-title {
        margin-right: auto;
    }

    :where(body.wat-app.repair-ui-body) .repair-ui-content {
        padding-top: 24px;
    }

    body:where(.wat-app).repair-ui-body .page-header h1 {
        font-size: 44px;
    }
}

@media (max-width: 900px) {
    body:where(.wat-app).repair-ui-body {
        font-size: 13px;
    }

    :where(body.wat-app.repair-ui-body) .repair-ui-topbar {
        height: 58px;
        gap: 10px;
        padding-inline: 12px;
    }

    :where(body.wat-app.repair-ui-body) .repair-ui-topbar-context {
        display: none;
    }

    :where(body.wat-app.repair-ui-body) .repair-ui-content {
        padding: 18px 12px 36px;
    }

    body:where(.wat-app).repair-ui-body .page-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
        margin-bottom: 20px;
    }

    body:where(.wat-app).repair-ui-body .page-header h1 {
        font-size: 35px;
        line-height: 1;
    }

    body:where(.wat-app).repair-ui-body .page-header_actions {
        width: 100%;
        flex-wrap: wrap;
    }

    body:where(.wat-app).repair-ui-body .stats-grid {
        display: flex;
        margin-inline: -12px;
        padding: 0 12px 8px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    body:where(.wat-app).repair-ui-body .stat-card {
        width: min(78vw, 280px);
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    body:where(.wat-app).repair-ui-body :where(.buttons-row, .table-buttons-row, .quote-actions, .quote-form-actions) {
        flex-wrap: wrap;
    }

    :where(body.wat-app.repair-ui-body) .repair-ui-public-main {
        width: min(100% - 24px, 1240px);
        padding: 28px 0 48px;
    }
}

@media (max-width: 760px) {
    body:where(.wat-app).repair-ui-body .repair-ui-workflow-header span {
        display: none;
    }

    body:where(.wat-app).repair-ui-body .timeline.repair-ui-timeline {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 10px 12px;
        overflow: visible;
    }

    body:where(.wat-app).repair-ui-body .timeline.repair-ui-timeline .timeline_cell {
        display: grid;
        min-width: 0;
        min-height: 45px;
        grid-template-columns: 32px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 9px;
        row-gap: 2px;
        align-items: center;
        padding: 4px 0;
        text-align: left;
    }

    body:where(.wat-app).repair-ui-body .timeline.repair-ui-timeline .timeline_cell::before {
        top: -50%;
        right: auto;
        bottom: 50%;
        left: 15px;
        width: 2px;
        height: auto;
    }

    body:where(.wat-app).repair-ui-body .repair-ui-timeline-marker {
        width: 30px;
        height: 30px;
        grid-row: 1 / span 2;
        margin: 0;
    }

    body:where(.wat-app).repair-ui-body .timeline.repair-ui-timeline .timeline_cell_arrow {
        grid-column: 2;
        grid-row: 1;
        font-size: 11.5px;
    }

    body:where(.wat-app).repair-ui-body .timeline.repair-ui-timeline .timeline_cell_details {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
        font-size: 10px;
        text-align: left;
    }
}

@media (max-width: 640px) {
    body:where(.wat-app).repair-ui-body .repair-order-request-details__grid {
        grid-template-columns: 1fr;
    }

    body:where(.wat-app).repair-ui-body .chat-message {
        width: 88%;
    }

    body:where(.wat-app).repair-ui-body :where(.button-blue, .button-blue-2, .button-red-2) {
        white-space: normal;
    }

    body:where(.wat-app).repair-ui-body #modalContainer {
        align-items: end;
        padding: 0;
    }

    body:where(.wat-app).repair-ui-body #modalContainer > .modal {
        width: 100vw;
        max-height: min(92dvh, 900px);
        border-radius: 14px 14px 0 0;
        padding: 18px 14px calc(18px + env(safe-area-inset-bottom));
    }
}

@media (prefers-reduced-motion: reduce) {
    body:where(.wat-app).repair-ui-body *,
body:where(.wat-app).repair-ui-body *::before,
body:where(.wat-app).repair-ui-body *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* #endregion */

/* #region Admin Repair */
/*
 * Admin Repair workspace for WAT WAT.
 *
 * Every selector is scoped to the explicit WAT admin shell so none of these
 * rules can leak into historical admin or CRM surfaces.
 */

body:where(.wat-app).repair-ui-admin {
    overflow-x: hidden;
}

:where(body.wat-app).repair-ui-admin .repair-admin-page {
    display: grid;
    min-width: 0;
    gap: 20px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-page > :where(.card, details.card, section, form) {
    min-width: 0;
}

:where(body.wat-app).repair-ui-admin .repair-admin-page .page-header {
    margin-bottom: 2px;
}

:where(body.wat-app).repair-ui-admin .repair-ui-eyebrow :where(svg, i[data-lucide]) {
    width: 15px;
    height: 15px;
    stroke-width: 2.1;
}

:where(body.wat-app).repair-ui-admin .repair-ui-eyebrow a {
    color: inherit;
    text-decoration: none;
}

:where(body.wat-app).repair-ui-admin .repair-ui-eyebrow a:is(:hover, :focus-visible) {
    color: var(--wat-primary);
    text-decoration: underline;
}

:where(body.wat-app).repair-ui-admin .repair-ui-status-pill {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    gap: 8px;
    border-radius: 9999px;
    background: var(--wat-gradient);
    color: #fff;
    padding: 10px 16px;
    box-shadow: var(--wat-action-shadow);
    font-size: 15px;
    font-weight: 820;
    line-height: 1;
}

:where(body.wat-app).repair-ui-admin .repair-ui-status-pill :where(svg, i[data-lucide]) {
    width: 18px;
    height: 18px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-panel-heading,
:where(body.wat-app).repair-ui-admin .repair-admin-command-header,
:where(body.wat-app).repair-ui-admin .repair-admin-modal-heading {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-panel-heading__identity,
:where(body.wat-app).repair-ui-admin .repair-admin-command-header__identity,
:where(body.wat-app).repair-ui-admin .repair-admin-modal-heading__identity {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 11px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-panel-heading__icon,
:where(body.wat-app).repair-ui-admin .repair-admin-modal-heading__icon,
:where(body.wat-app).repair-ui-admin .repair-admin-stat-icon {
    display: inline-flex;
    width: 37px;
    height: 37px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--wat-nav-active);
    color: var(--wat-primary-deep);
}

:where(body.wat-app).repair-ui-admin .repair-admin-panel-heading__icon :where(svg, i[data-lucide]),
:where(body.wat-app).repair-ui-admin .repair-admin-modal-heading__icon :where(svg, i[data-lucide]),
:where(body.wat-app).repair-ui-admin .repair-admin-stat-icon :where(svg, i[data-lucide]) {
    width: 19px;
    height: 19px;
    stroke-width: 2.1;
}

:where(body.wat-app).repair-ui-admin .repair-admin-panel-heading h2,
:where(body.wat-app).repair-ui-admin .repair-admin-panel-heading h3,
:where(body.wat-app).repair-ui-admin .repair-admin-command-header h2,
:where(body.wat-app).repair-ui-admin .repair-admin-command-header h3,
:where(body.wat-app).repair-ui-admin .repair-admin-modal-heading h2,
:where(body.wat-app).repair-ui-admin .repair-admin-modal-heading h3 {
    margin: 0;
    color: inherit;
    font-size: 16px;
    font-weight: 680;
    line-height: 1.15;
}

:where(body.wat-app).repair-ui-admin .repair-admin-panel-heading p,
:where(body.wat-app).repair-ui-admin .repair-admin-command-header p,
:where(body.wat-app).repair-ui-admin .repair-admin-modal-heading p {
    margin: 4px 0 0;
    color: var(--wat-muted);
    font-size: 12px;
    line-height: 1.4;
}

:where(body.wat-app).repair-ui-admin .repair-admin-command-header {
    margin: -14px -14px 14px;
    padding: 14px 18px 12px;
    background: var(--wat-command-gradient);
    color: #fff;
}

:where(body.wat-app).repair-ui-admin .repair-admin-command-header p,
:where(body.wat-app).repair-ui-admin .repair-admin-command-header a {
    color: rgba(255, 255, 255, 0.82);
}

:where(body.wat-app).repair-ui-admin .repair-admin-command-header__icon {
    display: inline-flex;
    width: 37px;
    height: 37px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.13);
    color: #fff;
}

:where(body.wat-app).repair-ui-admin .repair-admin-command-header__icon :where(svg, i[data-lucide]) {
    width: 19px;
    height: 19px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-page :where(.card, details.card) {
    margin: 0;
}

:where(body.wat-app).repair-ui-admin .repair-admin-page .card + .card,
:where(body.wat-app).repair-ui-admin .repair-admin-page details.card + .card,
:where(body.wat-app).repair-ui-admin .repair-admin-page .card + details.card {
    margin-top: 0;
}

:where(body.wat-app).repair-ui-admin .repair-admin-page hr {
    height: 1px;
    margin: 20px 0;
    border: 0;
    background: var(--wat-border);
}

:where(body.wat-app).repair-ui-admin .repair-admin-page :where(.empty-state, .repair-admin-empty) {
    display: grid;
    min-height: 138px;
    place-items: center;
    align-content: center;
    gap: 8px;
    border: 1px dashed var(--wat-border-strong);
    border-radius: 10px;
    background: var(--wat-surface-soft);
    color: var(--wat-muted);
    padding: 22px;
    text-align: center;
}

:where(body.wat-app).repair-ui-admin .repair-admin-empty :where(svg, i[data-lucide]) {
    width: 26px;
    height: 26px;
    color: var(--wat-primary);
}

:where(body.wat-app).repair-ui-admin .repair-admin-empty p {
    margin: 0;
}

/* Buttons and compact action groups */
:where(body.wat-app).repair-ui-admin .repair-admin-page :where(.button-blue, .button-blue-2, .button-red-2) :where(svg, i[data-lucide]),
:where(body.wat-app).repair-ui-admin #modalContainer :where(.button-blue, .button-blue-2, .button-red-2) :where(svg, i[data-lucide]) {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    stroke-width: 2.1;
}

:where(body.wat-app).repair-ui-admin .repair-admin-icon-button {
    width: 38px;
    min-width: 38px;
    padding: 7px !important;
}

:where(body.wat-app).repair-ui-admin .repair-admin-page .a,
:where(body.wat-app).repair-ui-admin #modalContainer .a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 0;
    background: transparent;
    color: var(--wat-primary);
    padding: 0;
    font-weight: 630;
    text-decoration: underline;
    text-underline-offset: 2px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-page .a:is(:hover, :focus-visible),
:where(body.wat-app).repair-ui-admin #modalContainer .a:is(:hover, :focus-visible) {
    color: var(--wat-primary-deep);
}

:where(body.wat-app).repair-ui-admin .repair-admin-page .buttons-row,
:where(body.wat-app).repair-ui-admin #modalContainer .buttons-row {
    flex-wrap: wrap;
}

/* Dashboard summary */
:where(body.wat-app).repair-ui-admin .repair-admin-dashboard .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

:where(body.wat-app).repair-ui-admin .repair-admin-dashboard .stat-card {
    position: relative;
    display: flex;
    min-height: 166px;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
    text-align: left;
}

:where(body.wat-app).repair-ui-admin .repair-admin-dashboard .stat-card::before {
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--wat-primary), var(--wat-teal));
    content: "";
}

:where(body.wat-app).repair-ui-admin .repair-admin-dashboard .stat-card--muted::before {
    background: linear-gradient(90deg, #8ca8bc, #b9c9d5);
}

:where(body.wat-app).repair-ui-admin .repair-admin-dashboard .stat-card--warning::before,
:where(body.wat-app).repair-ui-admin .repair-admin-dashboard .repair-atlas-review-stat-card.stat-card--warning::before {
    background: linear-gradient(90deg, #d79a2d, #f2c45f);
}

:where(body.wat-app).repair-ui-admin .repair-admin-stat-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-stat-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-stat-icon :where(svg, i[data-lucide]) {
    width: 16px;
    height: 16px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-dashboard .stat-card_label {
    margin: 0;
}

:where(body.wat-app).repair-ui-admin .repair-admin-dashboard .e-waste-dashboard-primary-metric {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 10px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-dashboard .stat-card_value {
    font-size: 30px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-dashboard .stat-card_detail {
    margin-top: 4px;
}

:where(body.wat-app).repair-ui-admin .repair-atlas-review-stat-card {
    width: 100%;
    border: 1px solid var(--wat-border);
    cursor: pointer;
}

:where(body.wat-app).repair-ui-admin .repair-atlas-review-stat-card:is(:hover, :focus-visible) {
    border-color: rgba(0, 127, 222, 0.36);
    background: #f7fcff;
    transform: translateY(-1px);
}

:where(body.wat-app).repair-ui-admin .repair-admin-orders-workbench {
    padding: 14px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-orders-list {
    display: grid;
    gap: 10px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-card {
    position: relative;
    display: grid;
    gap: 12px;
    overflow: hidden;
    padding: 14px 16px;
    border-left: 4px solid var(--wat-primary) !important;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-card.--warning {
    border-left-color: #d99a25 !important;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-card.--danger {
    border-left-color: var(--wat-danger) !important;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-card__header {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-card__identity {
    min-width: 0;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-card__identity h2 {
    margin: 2px 0 0;
    font-size: 19px;
    font-weight: 730;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-card__identity h2 a {
    color: var(--wat-text);
    text-decoration: none;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-card__identity h2 a:is(:hover, :focus-visible) {
    color: var(--wat-primary);
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-card__status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    color: var(--wat-muted);
    font-size: 12px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-card__badges {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-card__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--wat-surface-soft);
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-card__meta p {
    margin: 0;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-card__age {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--wat-muted);
    font-size: 11.5px;
    font-style: normal;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-card__age :where(svg, i[data-lucide]) {
    width: 14px;
    height: 14px;
}

/* Repairer directory and form */
:where(body.wat-app).repair-ui-admin .repair-admin-repairers .repair-admin-default-services,
:where(body.wat-app).repair-ui-admin .repair-admin-directory {
    padding: 0;
}

:where(body.wat-app).repair-ui-admin details.repair-admin-repairer-form.repair-ui-command {
    overflow: hidden;
    border-color: rgba(0, 180, 156, 0.38);
    background: linear-gradient(180deg, #fff, #f2fffc);
}

:where(body.wat-app).repair-ui-admin details.repair-admin-repairer-form.repair-ui-command > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    background: var(--wat-command-gradient);
    color: #fff;
    list-style: none;
}

:where(body.wat-app).repair-ui-admin details.repair-admin-repairer-form.repair-ui-command > summary::-webkit-details-marker {
    display: none;
}

:where(body.wat-app).repair-ui-admin details.repair-admin-repairer-form.repair-ui-command > summary h2 {
    margin: 0;
    color: #fff;
    font-size: 16px;
}

:where(body.wat-app).repair-ui-admin details.repair-admin-repairer-form.repair-ui-command > summary::after {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    background: currentColor;
    content: "";
    clip-path: polygon(20% 35%, 50% 65%, 80% 35%, 88% 43%, 50% 81%, 12% 43%);
    transition: transform 150ms ease;
}

:where(body.wat-app).repair-ui-admin details.repair-admin-repairer-form.repair-ui-command[open] > summary::after {
    transform: rotate(180deg);
}

:where(body.wat-app).repair-ui-admin .repair-admin-repairer-form > form {
    display: grid;
    gap: 14px;
    padding-top: 6px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-repairer-form .form-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-repairer-form label:not(.rsx-card) {
    display: grid;
    gap: 5px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-repairer-form :where(.avatar-wrapper, .avatar-edit-container) {
    width: 104px;
    height: 104px;
    margin: 0;
    border: 1px solid var(--wat-border);
    border-radius: 12px;
    background: #fff;
    padding: 2px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-repairer-form :where(.avatar, #profilePictureRenderingCanvas) {
    width: 98px;
    height: 98px;
    border-radius: 9px;
    object-fit: cover;
}

:where(body.wat-app).repair-ui-admin .repair-admin-repairer-form details.no-background {
    overflow: hidden;
    border: 1px solid var(--wat-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
}

:where(body.wat-app).repair-ui-admin .repair-admin-repairer-form details.no-background > summary {
    padding: 12px 14px;
    border-bottom: 1px solid transparent;
    cursor: pointer;
}

:where(body.wat-app).repair-ui-admin .repair-admin-repairer-form details.no-background[open] > summary {
    border-bottom-color: var(--wat-border);
    background: var(--wat-surface-soft);
}

:where(body.wat-app).repair-ui-admin .repair-admin-repairer-form details.no-background > summary h3 {
    margin: 0;
    font-size: 15px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-repairer-form details.no-background > :not(summary) {
    margin-right: 14px;
    margin-left: 14px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-repairer-form details.no-background > :last-child {
    margin-bottom: 14px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-repairer-form .address-row {
    display: grid;
    grid-template-columns: 28px minmax(220px, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-width: 0;
    margin-bottom: 8px;
    padding: 8px;
    border: 1px solid var(--wat-border);
    border-radius: 9px;
    background: #fff;
}

:where(body.wat-app).repair-ui-admin .repair-admin-repairer-form .address-row_number {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 8px;
    background: var(--wat-nav-active);
    color: var(--wat-primary-deep);
    font-size: 11px;
    font-weight: 680;
}

:where(body.wat-app).repair-ui-admin .repair-admin-repairer-form .map {
    min-height: 300px;
    overflow: hidden;
    border: 1px solid var(--wat-border);
    border-radius: 12px;
    background: var(--wat-surface-soft);
}

:where(body.wat-app).repair-ui-admin .repair-admin-repairer-list {
    display: grid;
    gap: 14px;
    margin-top: 14px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-repairer-bucket {
    min-width: 0;
    overflow-x: auto;
    padding: 14px;
    border: 1px solid var(--wat-border);
    border-radius: 10px;
    background: var(--wat-surface-soft);
}

:where(body.wat-app).repair-ui-admin .repair-admin-repairer-bucket__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-repairer-bucket__heading h3 {
    margin: 0;
    font-size: 15px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-repairer-bucket .table-container {
    margin-top: 10px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-repairer-bucket td:last-child {
    white-space: nowrap;
}

/* Shared repair service selection, only while rendered inside this admin shell. */
:where(body.wat-app).repair-ui-admin .repair-admin-page .rsx-root {
    min-width: 0;
}

:where(body.wat-app).repair-ui-admin .repair-admin-page .rsx-grid,
:where(body.wat-app).repair-ui-admin .repair-admin-page .e-waste-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-page .e-waste-card {
    position: relative;
    display: grid;
    min-width: 0;
    justify-content: stretch;
    gap: 10px;
    align-content: start;
    padding: 14px;
    border-color: var(--wat-border);
    border-radius: 10px;
    box-shadow: none;
}

:where(body.wat-app).repair-ui-admin .repair-admin-page .e-waste-card_icon {
    display: inline-flex;
    width: 37px;
    height: 37px;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--wat-nav-active);
    color: var(--wat-primary-deep);
}

:where(body.wat-app).repair-ui-admin .repair-admin-page .e-waste-card_icon :where(svg, i[data-lucide]) {
    width: 19px;
    height: 19px;
    stroke-width: 2.1;
}

:where(body.wat-app).repair-ui-admin .repair-admin-page .e-waste-card_body {
    display: grid;
    gap: 4px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-page .rsx-card {
    cursor: pointer;
    align-content: center;
    justify-items: center;
    text-align: center;
}

:where(body.wat-app).repair-ui-admin .repair-admin-page input.rsx-card-toggle:checked + label.rsx-card,
:where(body.wat-app).repair-ui-admin .repair-admin-page .rsx-card--full {
    border-color: rgba(0, 180, 156, 0.42);
    background: var(--wat-success-soft);
    box-shadow: inset 0 0 0 1px rgba(0, 180, 156, 0.12);
}

:where(body.wat-app).repair-ui-admin .repair-admin-page .rsx-card--partial {
    border-color: rgba(0, 127, 222, 0.35);
    background: #eef8ff;
}

:where(body.wat-app).repair-ui-admin .repair-admin-page .rsx-card--none {
    background: #fff;
    opacity: 0.85;
}

:where(body.wat-app).repair-ui-admin .repair-admin-page .rsx-breadcrumb,
:where(body.wat-app).repair-ui-admin .repair-admin-page .cards-grid-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
    padding: 9px 11px;
    border-radius: 8px;
    background: var(--wat-surface-soft);
}

/* Service types */
:where(body.wat-app).repair-ui-admin .repair-admin-service-types .repair-admin-service-types-workbench {
    padding: 0;
}

:where(body.wat-app).repair-ui-admin .repair-admin-service-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-service-type-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 150px;
    padding: 16px;
    border: 1px solid var(--wat-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--wat-shadow);
}

:where(body.wat-app).repair-ui-admin .repair-admin-service-type-card::before {
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    border-radius: 12px 12px 0 0;
    background: linear-gradient(90deg, var(--wat-primary), var(--wat-teal));
    content: "";
}

:where(body.wat-app).repair-ui-admin .repair-admin-service-type-card .e-waste-card_icon {
    grid-row: 1 / span 2;
}

:where(body.wat-app).repair-ui-admin .repair-admin-service-type-card__actions {
    display: flex;
    grid-column: 1 / -1;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--wat-border);
}

:where(body.wat-app).repair-ui-admin .repair-admin-service-type-card__order,
:where(body.wat-app).repair-ui-admin .repair-admin-service-type-card__manage {
    display: flex;
    gap: 7px;
}

/* Booking defaults */
:where(body.wat-app).repair-ui-admin .repair-admin-booking-defaults .repair-admin-booking-card {
    padding: 16px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-booking-defaults .repair-admin-booking-card > form,
:where(body.wat-app).repair-ui-admin .repair-admin-booking-defaults .repair-admin-booking-issues > form {
    display: grid;
    gap: 14px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-booking-defaults .repair-admin-booking-issues {
    padding: 14px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-booking-defaults .repair-admin-booking-issues > .repair-admin-command-header {
    margin-bottom: 14px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-booking-defaults textarea[name="issues"] {
    width: 100%;
    min-height: 150px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-booking-defaults .category-card-clickable {
    min-height: 170px;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}

:where(body.wat-app).repair-ui-admin .repair-admin-booking-defaults .category-card-clickable:is(:hover, :focus-visible) {
    border-color: rgba(0, 127, 222, 0.34);
    background: #f7fcff;
    transform: translateY(-1px);
}

:where(body.wat-app).repair-ui-admin .repair-admin-booking-defaults .cards-grid_actions {
    margin-top: auto;
}

:where(body.wat-app).repair-ui-admin .admin-repair-booking-dev-action--disabled {
    border-style: dashed;
}

:where(body.wat-app).repair-ui-admin .admin-repair-booking-issue-readonly-list {
    width: 100%;
    background: var(--wat-surface-soft);
    color: var(--wat-muted);
}

:where(body.wat-app).repair-ui-admin .repair-admin-booking-defaults .popup-anchor {
    position: relative;
}

/* Payout statements */
:where(body.wat-app).repair-ui-admin .repair-admin-settlements .repair-admin-settlements-panel {
    padding: 0;
}

:where(body.wat-app).repair-ui-admin .repair-admin-settlements .table-container {
    margin-top: 14px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-settlements td:nth-child(n+3):nth-child(-n+5) {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

:where(body.wat-app).repair-ui-admin .repair-admin-statement-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 630;
    white-space: nowrap;
}

:where(body.wat-app).repair-ui-admin .repair-admin-statement-link :where(svg, i[data-lucide]) {
    width: 15px;
    height: 15px;
}

/* Repair order detail */
:where(body.wat-app).repair-ui-admin .repair-admin-order-detail .page-header_subtitle {
    display: grid;
    gap: 3px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-detail .repair-admin-order-context {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 16px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-detail .repair-admin-order-context span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-detail .repair-admin-order-context :where(svg, i[data-lucide]) {
    width: 15px;
    height: 15px;
    color: var(--wat-primary);
}

:where(body.wat-app).repair-ui-admin .repair-admin-operator-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: -8px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-detail > .timeline,
:where(body.wat-app).repair-ui-admin .repair-admin-order-detail .repair-order-timeline {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--wat-border);
    border-radius: 12px;
    background: #fff;
    padding: 12px;
    box-shadow: var(--wat-shadow);
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-detail .timeline:not(.--wrap) {
    min-width: 760px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-status {
    padding: 0;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-status__copy {
    margin: 0 0 12px;
    color: #233b5c;
    font-size: 14px;
    font-weight: 560;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0 0;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-fact {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid var(--wat-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.82);
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-fact span,
:where(body.wat-app).repair-ui-admin .repair-admin-order-fact strong {
    display: block;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-fact span {
    margin-bottom: 3px;
    color: var(--wat-muted);
    font-size: 11px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-fact strong {
    overflow-wrap: anywhere;
    font-size: 12.5px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-status .form {
    display: grid;
    gap: 10px;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(180, 35, 24, 0.18);
    border-radius: 10px;
    background: rgba(255, 241, 240, 0.72);
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-status .label-row {
    display: grid;
    gap: 5px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-detail .quote-panel {
    overflow: hidden;
    padding: 0;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-detail .quote-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0;
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--wat-border);
    background: var(--wat-surface-soft);
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-detail .quote-summary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.8fr);
    gap: 16px;
    padding: 16px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-detail .quote-service {
    overflow: hidden;
    border: 1px solid var(--wat-border);
    border-radius: 10px;
    background: #fff;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-detail .quote-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-detail .quote-items {
    border-top: 1px solid var(--wat-border);
    background: var(--wat-surface-soft);
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-detail .quote-item-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--wat-border);
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-detail .quote-item-row:last-child {
    border-bottom: 0;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-detail .quote-step-list {
    margin-top: 7px;
    padding-left: 10px;
    border-left: 2px solid var(--wat-border-strong);
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-detail .quote-step-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-detail .quote-totals {
    overflow: hidden;
    border: 1px solid var(--wat-border);
    border-radius: 10px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-detail .quote-totals tfoot td {
    background: #eef8ff;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-detail details.card > summary.card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-detail details.card > summary.card-title h2 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 16px;
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-detail details.card > summary.card-title h2 :where(svg, i[data-lucide]) {
    width: 19px;
    height: 19px;
    color: var(--wat-primary);
}

:where(body.wat-app).repair-ui-admin .repair-admin-section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px !important;
}

:where(body.wat-app).repair-ui-admin .repair-admin-section-title :where(svg, i[data-lucide]) {
    width: 19px;
    height: 19px;
    color: var(--wat-primary);
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-detail .attachment-image {
    display: block;
    width: min(220px, 100%);
    max-height: 190px;
    border: 1px solid var(--wat-border);
    border-radius: 10px;
    object-fit: cover;
    box-shadow: var(--wat-shadow);
}

:where(body.wat-app).repair-ui-admin .repair-admin-order-detail .chat {
    display: flex;
    max-height: min(400px, 80vh);
    align-items: flex-start;
    flex-direction: column-reverse;
    gap: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid var(--wat-border);
    border-radius: 10px;
    background: var(--wat-surface-soft);
    padding: 12px;
}

/* Modal family */
:where(body.wat-app).repair-ui-admin #modalContainer > .modal {
    color: var(--wat-text);
}

:where(body.wat-app).repair-ui-admin #modalContainer > .modal > :first-child {
    padding-right: 34px;
}

:where(body.wat-app).repair-ui-admin #modalContainer .modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--wat-border);
    border-radius: 8px;
    background: #fff;
    color: var(--wat-muted);
    cursor: pointer;
}

:where(body.wat-app).repair-ui-admin #modalContainer .modal-close :where(svg, i[data-lucide]) {
    width: 17px;
    height: 17px;
}

:where(body.wat-app).repair-ui-admin #modalContainer .modal-close:is(:hover, :focus-visible) {
    background: var(--wat-nav-active);
    color: var(--wat-primary-deep);
}

:where(body.wat-app).repair-ui-admin #modalContainer .repair-admin-modal-heading {
    margin-bottom: 14px;
}

:where(body.wat-app).repair-ui-admin #modalContainer .table-container {
    max-height: min(52vh, 520px);
}

:where(body.wat-app).repair-ui-admin #modalContainer textarea {
    width: 100%;
}

:where(body.wat-app).repair-ui-admin #modalContainer .icon-picker {
    display: grid;
    gap: 8px;
    margin-top: 14px;
    padding: 12px;
    border: 1px solid var(--wat-border);
    border-radius: 10px;
    background: var(--wat-surface-soft);
}

:where(body.wat-app).repair-ui-admin #modalContainer .icon-grid {
    max-height: 230px;
    overflow: auto;
    border-radius: 8px;
    background: #fff;
}

:where(body.wat-app).repair-ui-admin #modalContainer .repair-admin-shop-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

:where(body.wat-app).repair-ui-admin #modalContainer .repair-admin-shop-card {
    padding: 12px;
    border: 1px solid var(--wat-border);
    border-radius: 10px;
    background: var(--wat-surface-soft);
}

:where(body.wat-app).repair-ui-admin #modalContainer .repair-admin-shop-card > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 680;
}

:where(body.wat-app).repair-ui-admin #modalContainer .repair-admin-shop-card dl {
    display: grid;
    grid-template-columns: minmax(90px, auto) minmax(0, 1fr);
    gap: 5px 12px;
    margin: 10px 0 0;
}

:where(body.wat-app).repair-ui-admin #modalContainer .repair-admin-shop-card dt {
    color: var(--wat-muted);
    font-size: 11px;
    font-weight: 560;
}

:where(body.wat-app).repair-ui-admin #modalContainer .repair-admin-shop-card dd {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Responsive */
@media (max-width: 1320px) {
    :where(body.wat-app).repair-ui-admin .repair-admin-dashboard .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :where(body.wat-app).repair-ui-admin .repair-admin-order-detail .quote-summary-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    :where(body.wat-app).repair-ui-admin .repair-admin-page {
        gap: 14px;
    }

    :where(body.wat-app).repair-ui-admin .repair-admin-dashboard .stats-grid {
        display: flex;
        grid-template-columns: none;
    }

    :where(body.wat-app).repair-ui-admin .repair-admin-dashboard .stat-card {
        min-height: 158px;
    }

    :where(body.wat-app).repair-ui-admin .repair-admin-order-card__header,
:where(body.wat-app).repair-ui-admin .repair-admin-panel-heading,
:where(body.wat-app).repair-ui-admin .repair-admin-command-header {
        align-items: flex-start;
        flex-direction: column;
    }

    :where(body.wat-app).repair-ui-admin .repair-admin-order-card__badges {
        justify-content: flex-start;
    }

    :where(body.wat-app).repair-ui-admin .repair-admin-order-card__meta,
:where(body.wat-app).repair-ui-admin .repair-admin-order-facts,
:where(body.wat-app).repair-ui-admin .repair-admin-repairer-form .form-row {
        grid-template-columns: minmax(0, 1fr);
    }

    :where(body.wat-app).repair-ui-admin .repair-admin-page .e-waste-card-grid,
:where(body.wat-app).repair-ui-admin .repair-admin-service-type-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    :where(body.wat-app).repair-ui-admin .repair-admin-repairer-bucket td:last-child {
        white-space: normal;
    }
}

@media (max-width: 640px) {
    :where(body.wat-app).repair-ui-admin .repair-ui-status-pill {
        min-height: 32px;
        padding: 8px 12px;
        font-size: 13px;
    }

    :where(body.wat-app).repair-ui-admin .repair-admin-page .e-waste-card-grid,
:where(body.wat-app).repair-ui-admin .repair-admin-service-type-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    :where(body.wat-app).repair-ui-admin .repair-admin-repairer-form .address-row {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    :where(body.wat-app).repair-ui-admin .repair-admin-repairer-form .address-row > button {
        grid-column: 2;
        justify-self: start;
    }

    :where(body.wat-app).repair-ui-admin .repair-admin-order-card__meta {
        padding: 9px;
    }

    :where(body.wat-app).repair-ui-admin .repair-admin-order-detail .quote-card-header,
:where(body.wat-app).repair-ui-admin .repair-admin-order-detail .quote-line,
:where(body.wat-app).repair-ui-admin .repair-admin-order-detail .quote-item-row {
        align-items: flex-start;
        flex-direction: column;
    }

    :where(body.wat-app).repair-ui-admin .repair-admin-service-type-card__actions {
        align-items: stretch;
        flex-direction: column;
    }

    :where(body.wat-app).repair-ui-admin .repair-admin-service-type-card__order,
:where(body.wat-app).repair-ui-admin .repair-admin-service-type-card__manage {
        width: 100%;
    }

    :where(body.wat-app).repair-ui-admin .repair-admin-service-type-card__manage > * {
        flex: 1;
    }

    :where(body.wat-app).repair-ui-admin #modalContainer .repair-admin-shop-card dl {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(body.wat-app).repair-ui-admin .repair-atlas-review-stat-card,
:where(body.wat-app).repair-ui-admin .repair-admin-booking-defaults .category-card-clickable,
:where(body.wat-app).repair-ui-admin details.repair-admin-repairer-form.repair-ui-command > summary::after {
        transform: none !important;
    }
}

/* #endregion */

/* #region Public Repair booking and provider pages */
/*
 * WAT public repair booking and provider details.
 *
 * This route-owned layer is intentionally scoped to the two public Repair
 * body classes. The historical public and portal surfaces remain untouched.
 */

body:where(.wat-app).repair-ui-booking-page,
body:where(.wat-app).repair-ui-provider-page {
    --wat-booking-workspace: min(100%, 1120px);
    --wat-booking-panel-shadow: 0 8px 25px rgba(4, 67, 86, 0.055);
    --wat-booking-selected-shadow: 0 12px 30px rgba(0, 127, 222, 0.11);
}

body:where(.wat-app).repair-ui-booking-page .repair-ui-public-main,
body:where(.wat-app).repair-ui-provider-page .repair-ui-public-main {
    width: min(1180px, calc(100% - 40px));
    padding-top: 38px;
}

body:where(.wat-app).repair-ui-booking-page .repair-ui-page,
body:where(.wat-app).repair-ui-provider-page .repair-ui-page {
    min-width: 0;
}

/* Page identity */
body:where(.wat-app).repair-ui-booking-page .repair-ui-booking-hero {
    width: var(--wat-booking-workspace);
    margin: 0 auto 26px;
}

body:where(.wat-app).repair-ui-provider-page .repair-ui-provider-hero {
    margin-bottom: 26px;
}

:where(body.wat-app.repair-ui-public) .repair-ui-provider-hero__identity {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    column-gap: 15px;
    align-items: center;
}

:where(body.wat-app.repair-ui-public) .repair-ui-provider-hero__icon {
    grid-row: 1 / span 3;
    display: inline-grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border: 1px solid rgba(0, 127, 222, 0.16);
    border-radius: 14px;
    background: linear-gradient(145deg, #fff, #eaf8ff);
    color: var(--wat-primary);
    box-shadow: var(--wat-shadow);
}

:where(body.wat-app.repair-ui-public) .repair-ui-provider-hero__icon :where(svg, i[data-lucide]) {
    width: 26px;
    height: 26px;
    stroke-width: 2.1;
}

:where(body.wat-app.repair-ui-public) .repair-ui-booking-hero__eyebrow,
:where(body.wat-app.repair-ui-public) .repair-ui-provider-hero__eyebrow,
:where(body.wat-app.repair-ui-public) .repair-ui-provider-card__eyebrow {
    align-self: end;
    margin-bottom: 4px;
    color: var(--wat-primary);
    font-size: 11.5px;
    font-weight: 680;
    letter-spacing: 0.015em;
}

:where(body.wat-app.repair-ui-public) .repair-ui-provider-hero__identity h1 {
    grid-column: 2;
}

:where(body.wat-app.repair-ui-public) .repair-ui-provider-hero__identity .page-header_subtitle {
    grid-column: 2;
}

:where(body.wat-app.repair-ui-public) .repair-ui-booking-workspace {
    width: var(--wat-booking-workspace);
    min-width: 0;
    margin-inline: auto;
}

:where(body.wat-app.repair-ui-public) .repair-ui-booking-availability {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 16px;
    border: 1px solid #f0d79e;
    border-radius: 12px;
    background: var(--wat-warning-soft);
    color: var(--wat-warning);
    box-shadow: var(--wat-booking-panel-shadow);
}

:where(body.wat-app.repair-ui-public) .repair-ui-booking-availability > :where(svg, i[data-lucide]) {
    width: 38px;
    height: 38px;
    padding: 9px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.72);
}

:where(body.wat-app.repair-ui-public) .repair-ui-booking-availability .feedback {
    margin: 0;
    border: 0;
    background: transparent;
    padding: 8px 0 0;
    color: inherit;
}

/* The single Command Glow work area */
body:where(.wat-app).repair-ui-booking-page .repair-ui-booking-command {
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(0, 180, 156, 0.34);
    border-radius: 14px;
    background: linear-gradient(180deg, #fff 0%, #f7fffd 100%);
    padding: 0 0 18px;
    box-shadow:
        0 24px 62px rgba(0, 127, 222, 0.13),
        0 0 0 5px rgba(0, 180, 156, 0.08),
        0 0 0 1px rgba(0, 180, 156, 0.12);
}

body:where(.wat-app).repair-ui-booking-page .repair-ui-booking-command > .loading-spinner {
    z-index: 8;
}

/* A compact current-step summary keeps the five-step domain rail easy to scan. */
body:where(.wat-app).repair-ui-booking-page .repair-booking-trail {
    --repair-booking-trail-progress: 0%;
    position: relative;
    display: grid;
    grid-template-columns: minmax(210px, 28%) minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    min-height: 112px;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-bottom: 1px solid var(--wat-border);
    border-radius: 0;
    background: linear-gradient(90deg, #fff 0%, var(--wat-surface-soft) 100%);
    color: var(--wat-text);
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-trail::before {
    content: none;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-trail--issue {
    --repair-booking-trail-progress: 25%;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-trail--mode {
    --repair-booking-trail-progress: 50%;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-trail--location {
    --repair-booking-trail-progress: 75%;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-trail--confirm {
    --repair-booking-trail-progress: 100%;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-trail__summary {
    display: grid;
    min-width: 0;
    align-content: center;
    gap: 6px;
    padding: 20px 24px;
    background: var(--wat-command-gradient);
    color: #fff;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-trail__summary-step {
    color: rgba(255, 255, 255, 0.86);
    font-size: 13px;
    font-weight: 560;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-trail__summary-label {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    font-size: 30px;
    font-weight: 760;
    letter-spacing: -0.025em;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-trail__steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(54px, 1fr));
    min-width: 0;
    align-items: start;
    gap: 0;
    margin: 0;
    padding: 20px 24px 16px;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: thin;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-trail__steps::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 37px;
    right: calc(10% + 18px);
    left: calc(10% + 18px);
    height: 2px;
    background: linear-gradient(
        90deg,
        rgba(0, 127, 222, 0.72) 0%,
        rgba(0, 180, 156, 0.72) var(--repair-booking-trail-progress),
        #d7e3ed var(--repair-booking-trail-progress),
        #d7e3ed 100%
    );
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-trail__step {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    align-items: center;
    flex-direction: column;
    gap: 0;
    justify-content: center;
    padding: 0;
    color: var(--wat-muted);
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-trail__control {
    appearance: none;
    display: inline-flex;
    width: 100%;
    min-width: 0;
    min-height: 72px;
    align-items: center;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    padding: 0 4px;
    color: inherit;
    box-shadow: none;
    cursor: default;
    font: inherit;
    line-height: 1.15;
    opacity: 1;
    text-align: center;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-trail__step.clickable .repair-booking-trail__control {
    cursor: pointer;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-trail__control:disabled {
    cursor: default;
    opacity: 1;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-trail__step.clickable .repair-booking-trail__control:is(:hover, :focus-visible) {
    color: var(--wat-primary-deep);
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-trail__step.clickable .repair-booking-trail__control:focus-visible {
    outline: 3px solid rgba(0, 127, 222, 0.3);
    outline-offset: -3px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-trail__index {
    display: inline-grid;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid #bfd1e3;
    border-radius: 9999px;
    background: #fff;
    color: var(--wat-primary-deep);
    box-shadow: 0 6px 16px rgba(4, 67, 86, 0.06);
    font-size: 13px;
    font-weight: 680;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-trail__label {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: inherit;
    font-size: 12px;
    font-weight: 560;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-trail__step.completed {
    color: var(--wat-primary-deep);
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-trail__step.completed .repair-booking-trail__index {
    border-color: rgba(0, 127, 222, 0.34);
    background: var(--wat-nav-active);
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-trail__step.active {
    color: var(--wat-text);
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-trail__step.active .repair-booking-trail__index {
    border-color: transparent;
    background: var(--wat-gradient);
    color: #fff;
    box-shadow: 0 10px 22px rgba(0, 127, 222, 0.2);
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-trail__step.active .repair-booking-trail__label {
    font-weight: 680;
}

/* Stable request context */
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__confirm-overview {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(250px, 0.9fr);
    align-items: stretch;
    gap: 12px;
    margin: 0;
    padding: 14px 18px;
    border: 0;
    border-bottom: 1px solid var(--wat-border);
    border-radius: 0;
    background: rgba(248, 251, 255, 0.86);
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__confirm-block {
    min-width: 0;
    border: 1px solid var(--wat-border);
    border-radius: 10px;
    background: #fff;
    padding: 14px;
    box-shadow: none;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__confirm-block--request {
    gap: 10px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__confirm-block--mode {
    align-content: start;
    gap: 10px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__confirm-block--location {
    grid-column: 1 / -1;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__booking-mode-summary {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    min-width: 0;
    align-items: center;
    gap: 13px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__booking-mode-icon {
    display: inline-grid;
    width: 62px;
    height: 62px;
    place-items: center;
    border: 1px solid rgba(0, 127, 222, 0.12);
    border-radius: 12px;
    background: var(--wat-nav-active);
    color: var(--wat-primary-deep);
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__booking-mode-icon :where(svg, i[data-lucide]) {
    width: 30px;
    height: 30px;
    stroke-width: 2.05;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__booking-mode-copy {
    display: grid;
    min-width: 0;
    gap: 7px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__booking-mode-copy > strong {
    color: var(--wat-text);
    font-size: 15px;
    font-weight: 680;
    line-height: 1.2;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__booking-mode-status {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 5px;
    color: var(--wat-primary-deep);
    font-size: 11.5px;
    font-weight: 630;
    line-height: 1.2;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__booking-mode-status :where(svg, i[data-lucide]) {
    width: 15px;
    height: 15px;
    stroke-width: 2.2;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__confirm-copy strong {
    font-size: 13.5px;
    font-weight: 680;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__eyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--wat-primary);
    font-size: 11px;
    font-style: normal;
    font-weight: 680;
    letter-spacing: 0.01em;
    line-height: 1.25;
    text-transform: none;
}

/* Active step panel */
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__section,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__section--hero,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__section--progressive {
    min-width: 0;
    margin: 16px 18px 0;
    gap: 14px;
    border: 1px solid var(--wat-border);
    border-radius: 12px;
    background: #fff;
    padding: 18px;
    box-shadow: var(--wat-booking-panel-shadow);
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__section--compact {
    max-width: none;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__section-header {
    position: relative;
    gap: 2px;
    min-width: 0;
    padding-right: 48px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__section-header > h3,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__repairer-heading > h3 {
    margin: 0;
    color: var(--wat-text);
    font-size: 20px;
    font-weight: 680;
    letter-spacing: -0.02em;
    line-height: 1.16;
}

:where(body.wat-app.repair-ui-public) .repair-ui-booking-stage-icon {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 10px;
    background: var(--wat-nav-active);
    color: var(--wat-primary);
}

:where(body.wat-app.repair-ui-public) .repair-ui-booking-stage-icon :where(svg, i[data-lucide]) {
    width: 19px;
    height: 19px;
    stroke-width: 2.1;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__helper,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__search-intro,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__repairer-hint {
    color: var(--wat-muted);
    font-size: 12.5px;
    line-height: 1.4;
}

/* Device step */
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-chooser {
    display: grid;
    gap: 14px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-shortcuts,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-results {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-option,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__other-device-button {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 112px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--wat-border);
    border-radius: 12px;
    background: #fff;
    color: var(--wat-text);
    padding: 14px;
    box-shadow: none;
    text-align: left;
    transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-option:is(:hover, :focus-visible),
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__other-device-button:is(:hover, :focus-visible) {
    border-color: rgba(0, 127, 222, 0.38);
    background: var(--wat-surface-soft);
    box-shadow: 0 10px 24px rgba(0, 127, 222, 0.08);
    transform: translateY(-1px);
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-option.--selected,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__other-device-button.--selected {
    border-color: var(--wat-primary);
    background: linear-gradient(180deg, #fff, #eef8ff);
    box-shadow: inset 0 0 0 1px rgba(0, 127, 222, 0.1), var(--wat-booking-selected-shadow);
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-figure {
    display: inline-grid;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(0, 127, 222, 0.12);
    border-radius: 12px;
    background: var(--wat-nav-active);
    color: var(--wat-primary-deep);
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-figure :where(svg, i[data-lucide]) {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.1;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-figure--compact {
    width: 38px;
    height: 38px;
    border-radius: 10px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-figure--compact :where(svg, i[data-lucide]) {
    width: 20px;
    height: 20px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-option-label,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-option > span:last-child {
    min-width: 0;
    color: var(--wat-text);
    font-size: 13px;
    font-weight: 680;
    line-height: 1.25;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-search {
    display: grid;
    gap: 10px;
    border: 1px solid var(--wat-border);
    border-radius: 12px;
    background: var(--wat-surface-soft);
    padding: 14px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__search-field,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-details-field,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__other-issue-field,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__auth-field,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__notes-field,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__attachments-field,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__address-field {
    display: grid;
    min-width: 0;
    gap: 6px;
    color: var(--wat-muted);
    font-size: 11.5px;
    font-weight: 560;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-results {
    max-height: 340px;
    overflow-y: auto;
    padding: 2px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-results .repair-booking-form__device-option {
    min-height: 82px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__selected-devices,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-details,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__impact-preview {
    min-width: 0;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__selected-summary {
    border: 1px solid var(--wat-border);
    border-radius: 12px;
    background: var(--wat-surface-soft);
    padding: 10px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__selected-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 8px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__selected-cards--overview {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--wat-border);
    border-radius: 10px;
    background: #fff;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__selected-card {
    display: grid;
    min-width: 0;
    gap: 9px;
    border: 1px solid var(--wat-border);
    border-radius: 10px;
    background: #fff;
    padding: 10px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__selected-card--recap {
    grid-template-columns: minmax(180px, 0.95fr) minmax(150px, 1.05fr);
    align-items: center;
    gap: 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 10px 12px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__selected-card--recap + .repair-booking-form__selected-card--recap {
    border-top: 1px solid var(--wat-border);
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__selected-card-main {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__selected-card--recap .repair-booking-form__selected-card-main {
    padding: 0;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__selected-summary-copy,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__selected-summary-title-row {
    min-width: 0;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__selected-card-name {
    color: var(--wat-text);
    font-size: 13px;
    font-weight: 680;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__selected-summary-details,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__selected-summary-issue {
    color: var(--wat-muted);
    font-size: 11.5px;
    line-height: 1.35;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__selected-summary-issues {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    min-width: 0;
    align-items: center;
    gap: 8px;
    border-left: 1px solid var(--wat-border);
    padding-left: 12px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__selected-summary-meta-label {
    color: var(--wat-muted);
    font-size: 10.5px;
    font-weight: 560;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: none;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__selected-summary-issue-tags {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 6px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__selected-summary-issue-tag {
    display: inline-flex;
    min-width: 0;
    min-height: 26px;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(0, 127, 222, 0.2);
    border-radius: 8px;
    background: var(--wat-nav-active);
    color: var(--wat-primary-deep);
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 630;
    line-height: 1.2;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__selected-summary-issue-tag :where(svg, i[data-lucide]) {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    stroke-width: 2.2;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__selected-summary-quantity,
body:where(.wat-app).repair-ui-booking-page .repairer-distance-tag,
body:where(.wat-app).repair-ui-booking-page .repairer-filter-tag {
    border: 0;
    border-radius: 9999px;
    background: var(--wat-neutral-soft);
    color: var(--wat-neutral);
    padding: 4px 8px;
    font-size: 10.5px;
    font-style: normal;
    font-weight: 680;
    line-height: 1.2;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-details-list {
    display: grid;
    gap: 10px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-details-card {
    display: grid;
    gap: 14px;
    border: 1px solid var(--wat-border);
    border-radius: 12px;
    background: var(--wat-surface-soft);
    padding: 14px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-details-header {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-details-summary-block {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-details-controls {
    display: flex;
    min-width: 0;
    align-items: flex-end;
    gap: 10px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-details-heading {
    display: grid;
    min-width: 0;
    gap: 2px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-details-title {
    font-size: 13.5px;
    font-weight: 680;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-details-summary {
    color: var(--wat-muted);
    font-size: 11.5px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__catalog-selector {
    display: grid;
    position: relative;
    min-width: 0;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__catalog-trigger {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--wat-border-strong);
    border-radius: 8px;
    background: var(--wat-surface);
    color: var(--wat-text);
    padding: 0 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 560;
    text-align: left;
    transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__catalog-trigger:hover {
    border-color: rgba(0, 127, 222, 0.42);
    background: var(--wat-surface-soft);
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__catalog-trigger:focus-visible,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__catalog-trigger[aria-expanded="true"] {
    border-color: var(--wat-primary);
    box-shadow: 0 0 0 3px rgba(0, 127, 222, 0.1);
    outline: 0;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__catalog-trigger > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__catalog-trigger :where(svg, i[data-lucide]) {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    color: var(--wat-primary);
    stroke-width: 2.1;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__catalog-popup-anchor {
    display: block;
    position: relative;
    width: 100%;
    height: 0;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__catalog-popup {
    display: grid;
    position: fixed;
    z-index: 420;
    width: min(420px, calc(100vw - 24px));
    max-width: none;
    max-height: min(520px, calc(100vh - 24px));
    gap: 10px;
    overflow: hidden;
    border: 1px solid var(--wat-border-strong);
    border-radius: 12px;
    background: var(--wat-surface);
    padding: 12px;
    box-shadow: 0 18px 44px rgba(4, 67, 86, 0.16);
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__catalog-popup > .repair-booking-form__catalog-search-field {
    display: grid;
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    flex-direction: column;
    gap: 6px;
    color: var(--wat-muted);
    font-size: 11.5px;
    font-weight: 560;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__catalog-popup > .repair-booking-form__catalog-search-field input[type="search"] {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    flex-grow: 0;
    border: 1px solid var(--wat-border-strong);
    border-radius: 8px;
    background: var(--wat-surface);
    color: var(--wat-text);
    padding: 0 11px;
    font: inherit;
    font-size: 13px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__catalog-popup > .repair-booking-form__catalog-search-field input[type="search"]:focus {
    border-color: var(--wat-primary);
    box-shadow: 0 0 0 3px rgba(0, 127, 222, 0.1);
    outline: 0;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__catalog-popup .popup-list {
    display: grid;
    min-height: 58px;
    max-height: min(38vh, 300px);
    align-content: start;
    gap: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__catalog-option {
    display: flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--wat-border);
    border-radius: 8px;
    background: var(--wat-surface-soft);
    color: var(--wat-text);
    padding: 8px 10px;
    font: inherit;
    font-size: 13px;
    font-weight: 560;
    text-align: left;
    transition: border-color 120ms ease, background-color 120ms ease;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__catalog-option:is(:hover, :focus-visible),
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__catalog-option.--selected {
    border-color: rgba(0, 127, 222, 0.38);
    background: var(--wat-nav-active);
    color: var(--wat-primary-deep);
    outline: 0;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__catalog-option :where(svg, i[data-lucide]) {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--wat-primary);
    stroke-width: 2.1;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__catalog-popup-footer {
    border-top: 1px solid var(--wat-border);
    padding-top: 10px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__catalog-option--other {
    background: var(--wat-surface);
    color: var(--wat-primary-deep);
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__catalog-popup-empty {
    align-self: center;
    margin: 0;
    color: var(--wat-muted);
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-details-field--wide {
    grid-column: 1 / -1;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-details-field--quantity-inline {
    display: flex;
    align-items: center;
    gap: 7px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-quantity-input {
    width: 68px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__service-secondary-row {
    border-top: 1px solid var(--wat-border);
    padding-top: 12px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__service-details {
    border: 0;
    background: transparent;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__service-summary {
    color: var(--wat-primary-deep);
    font-size: 12px;
    font-weight: 630;
}

/* Issue step */
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__issue-cards {
    display: grid;
    gap: 12px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__issue-card {
    display: grid;
    gap: 14px;
    border: 1px solid var(--wat-border);
    border-radius: 12px;
    background: var(--wat-surface-soft);
    padding: 14px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__problem-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__problem-chip {
    position: relative;
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--wat-border-strong);
    border-radius: 9999px;
    background: #fff;
    color: var(--wat-text);
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 560;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__problem-chip:is(:hover, :focus-within) {
    border-color: rgba(0, 127, 222, 0.42);
    background: #f8fcff;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__problem-chip.--selected {
    border-color: var(--wat-primary);
    background: var(--wat-nav-active);
    color: var(--wat-primary-deep);
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__problem-chip input {
    width: 16px;
    height: 16px;
    margin: 0;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__issue-actions {
    display: flex;
    justify-content: flex-start;
}

/* Booking mode */
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__mode-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__mode-option {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 11px;
    min-width: 0;
    align-items: center;
    border: 1px solid var(--wat-border);
    border-radius: 12px;
    background: #fff;
    padding: 14px;
    cursor: pointer;
    box-shadow: none;
    transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__mode-option > input {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 16px;
    height: 16px;
    margin: 0;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__mode-option:is(:hover, :focus-within) {
    border-color: rgba(0, 127, 222, 0.42);
    background: var(--wat-surface-soft);
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__mode-option.--selected {
    border-color: var(--wat-teal);
    background: linear-gradient(180deg, #fff, #f0fffb);
    box-shadow: var(--wat-booking-selected-shadow);
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__mode-option--demoted {
    background: #fbfcfd;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__mode-icon {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 10px;
    background: var(--wat-nav-active);
    color: var(--wat-primary);
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__mode-icon :where(svg, i[data-lucide]) {
    width: 21px;
    height: 21px;
    stroke-width: 2.1;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__mode-copy {
    display: grid;
    min-width: 0;
    gap: 6px;
    padding-right: 12px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__mode-title-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__mode-title-row strong {
    font-size: 13.5px;
    font-weight: 680;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__mode-description {
    color: var(--wat-muted);
    font-size: 11.5px;
    line-height: 1.4;
}

/* Location and matching */
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__location-stack {
    display: grid;
    gap: 12px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__location-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: minmax(40px, auto);
    column-gap: 10px;
    align-items: stretch;
    margin-top: 0;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__locate-button {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    height: 40px;
    min-height: 40px;
    margin: 0;
    white-space: nowrap;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__address-field {
    grid-column: 2;
    grid-row: 1;
    grid-template-rows: minmax(40px, auto);
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__address-field > input[type="text"] {
    height: 40px;
    min-height: 40px;
    margin: 0;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__location-map,
body:where(.wat-app).repair-ui-provider-page .repair-ui-provider-card--map .map {
    width: 100%;
    min-height: 280px;
    overflow: hidden;
    border: 1px solid var(--wat-border);
    border-radius: 12px;
    background: var(--wat-surface-soft);
    box-shadow: none;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__match-button-row {
    display: flex;
    justify-content: flex-end;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__match-primary-action {
    min-width: 150px;
    min-height: 44px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__match-result {
    display: grid;
    gap: 12px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking__warning {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border: 1px solid #f0d79e;
    border-radius: 10px;
    background: var(--wat-warning-soft);
    color: var(--wat-warning);
    padding: 12px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking__warning > :where(svg, i[data-lucide]) {
    width: 38px;
    height: 38px;
    padding: 9px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.68);
}

body:where(.wat-app).repair-ui-booking-page .repair-booking__warning-copy {
    display: grid;
    min-width: 0;
    gap: 4px;
    font-size: 12px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking__partial-match {
    position: relative;
    display: grid;
    min-width: 220px;
    gap: 6px;
    border: 1px solid var(--wat-border);
    border-radius: 12px;
    background: #fff;
    color: var(--wat-text);
    padding: 14px;
    text-align: left;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking__partial-match:is(:hover, :focus-visible) {
    border-color: var(--wat-primary);
    background: var(--wat-surface-soft);
}

body:where(.wat-app).repair-ui-booking-page .repair-booking__partial-match-icon {
    display: inline-grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 9px;
    background: var(--wat-nav-active);
    color: var(--wat-primary);
}

body:where(.wat-app).repair-ui-booking-page .repair-booking__partial-match-icon :where(svg, i[data-lucide]) {
    width: 18px;
    height: 18px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking__partial-match__row,
body:where(.wat-app).repair-ui-booking-page .repair-booking__partial-match__row-unavailable {
    font-size: 11.5px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking__partial-match__row-unavailable {
    color: var(--wat-muted);
    text-decoration: line-through;
}

/* Provider selection */
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__repairer-header {
    position: relative;
    min-height: 44px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__repairer-heading {
    position: relative;
    min-width: 0;
    padding-right: 48px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__repairer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

body:where(.wat-app).repair-ui-booking-page #repairersList .repairer-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, 200px);
    justify-content: start;
    gap: 10px;
}

body:where(.wat-app).repair-ui-booking-page #repairersList .repairer-card {
    width: 100%;
}

body:where(.wat-app).repair-ui-booking-page .repairer-card {
    position: relative;
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 8px;
    border: 1px solid var(--wat-border);
    border-radius: 12px;
    background: #fff;
    color: var(--wat-text);
    padding: 14px;
    box-shadow: none;
    font-style: normal;
    text-decoration: none;
    transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

body:where(.wat-app).repair-ui-booking-page :where(a.repairer-card, label.repairer-card):is(:hover, :focus-visible, :focus-within) {
    border-color: rgba(0, 127, 222, 0.42);
    background: var(--wat-surface-soft);
    box-shadow: 0 12px 28px rgba(0, 127, 222, 0.09);
    transform: translateY(-1px);
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__repairer-card.--selected {
    border-color: var(--wat-teal);
    background: linear-gradient(180deg, #fff, #f0fffb);
    box-shadow: var(--wat-booking-selected-shadow);
}

body:where(.wat-app).repair-ui-booking-page .repairer-card_logo,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__repairer-badge {
    display: inline-grid;
    width: 46px;
    height: 46px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--wat-border);
    border-radius: 12px;
    background: var(--wat-surface-soft);
    color: var(--wat-primary);
    font-size: 14px;
    font-style: normal;
    font-weight: 680;
}

body:where(.wat-app).repair-ui-booking-page .repairer-card_logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

body:where(.wat-app).repair-ui-booking-page .repairer-card_logo :where(svg, i[data-lucide]) {
    width: 22px;
    height: 22px;
}

body:where(.wat-app).repair-ui-booking-page .repairer-card_name {
    min-width: 0;
    color: var(--wat-text);
    font-size: 13.5px;
    font-style: normal;
    font-weight: 680;
    line-height: 1.25;
}

body:where(.wat-app).repair-ui-booking-page .repairer-card_address,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__repairer-meta {
    color: var(--wat-muted);
    font-size: 11.5px;
    font-style: normal;
    line-height: 1.4;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__repairer-summary {
    max-width: 520px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__repairer-card--locked {
    grid-template-columns: 46px minmax(0, 1fr);
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__repairer-card--locked > :where(.repairer-card_address, .repair-booking-form__repairer-meta, .repairer-distance-tag) {
    grid-column: 2;
    min-width: 0;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__stage-actions {
    display: flex;
    justify-content: flex-end;
}

/* Authentication and final details */
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__auth-toggle-group,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__details-fields .toggle-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    max-width: 520px;
    border: 1px solid var(--wat-border);
    border-radius: 10px;
    background: var(--wat-surface-soft);
    padding: 4px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__auth-toggle-group input,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__details-fields .toggle-group input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__auth-toggle-group label,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__details-fields .toggle-group label {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--wat-muted);
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 630;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__auth-toggle-group input:checked + label,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__details-fields .toggle-group input:checked + label {
    background: #fff;
    color: var(--wat-primary-deep);
    box-shadow: 0 4px 16px rgba(4, 67, 86, 0.08);
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__auth-toggle-group input:focus-visible + label,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__details-fields .toggle-group input:focus-visible + label {
    outline: 2px solid var(--wat-primary);
    outline-offset: 2px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__compact-auth,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__final-panel {
    display: grid;
    gap: 14px;
    border: 1px solid var(--wat-border);
    border-radius: 12px;
    background: var(--wat-surface-soft);
    padding: 14px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__compact-auth-fields,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__signup-identity-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__signup-identity-row {
    grid-template-columns: minmax(110px, 0.6fr) repeat(2, minmax(0, 1fr));
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__compact-auth-links {
    display: flex;
    justify-content: flex-end;
    font-size: 11.5px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__auth-terms {
    display: flex;
    min-height: 38px;
    align-items: flex-start;
    gap: 9px;
    color: var(--wat-muted);
    font-size: 11.5px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__auth-terms input {
    margin-top: 2px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__details-fields {
    display: grid;
    gap: 14px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__details-fields fieldset {
    padding: 0;
    border: 0;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__details-fields legend {
    margin-bottom: 8px;
    padding: 0;
    font-size: 12px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__notes-field textarea {
    min-height: 92px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__attachments-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__attachments-picker {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    border: 1px dashed var(--wat-border-strong);
    border-radius: 10px;
    background: #fff;
    padding: 10px;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__attachments-summary {
    min-width: 0;
    overflow: hidden;
    color: var(--wat-muted);
    font-size: 11.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Environmental impact is result context, never another glow. */
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__impact-preview {
    margin: 12px 18px 0;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__impact-preview-card,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__impact-preview-empty {
    overflow: hidden;
    border: 1px solid rgba(0, 180, 156, 0.2);
    border-radius: 12px;
    background: var(--wat-success-soft);
    padding: 14px;
    box-shadow: none;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__impact-preview-card::before,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__impact-preview-empty::before {
    content: "";
    display: block;
    height: 4px;
    margin: -14px -14px 12px;
    background: var(--wat-mint);
}

body:where(.wat-app).repair-ui-booking-page .carbon-calculator_result-inner,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__impact-preview-summary {
    display: grid;
    gap: 10px;
    border: 0;
    background: transparent;
    padding: 0;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__impact-preview-summary {
    position: static;
    overflow: visible;
    border-radius: 0;
    color: inherit;
    box-shadow: none;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__impact-preview-summary::after {
    display: none;
}

body:where(.wat-app).repair-ui-booking-page .co2-saved_subtitle {
    margin: 0;
    color: var(--wat-success);
    font-size: 11.5px;
    font-weight: 560;
}

body:where(.wat-app).repair-ui-booking-page .co2-value {
    color: var(--wat-text);
    font-size: 26px;
    font-weight: 730;
    letter-spacing: -0.035em;
    line-height: 1;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__impact-preview-visualizations {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body:where(.wat-app).repair-ui-booking-page .carbon-visualization-report {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(9, 107, 89, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.72);
    padding: 7px 9px;
}

body:where(.wat-app).repair-ui-booking-page .carbon-visualization-report_icon {
    display: inline-grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 8px;
    background: #fff;
    color: var(--wat-success);
}

body:where(.wat-app).repair-ui-booking-page .carbon-visualization-report_icon :where(svg, i[data-lucide]) {
    width: 15px;
    height: 15px;
}

body:where(.wat-app).repair-ui-booking-page .carbon-visualization-report_value {
    color: var(--wat-text);
    font-size: 11.5px;
    font-weight: 630;
}

/* Validation, loading and navigation actions */
body:where(.wat-app).repair-ui-booking-page .repair-ui-booking-command > .feedback,
body:where(.wat-app).repair-ui-booking-page .repair-ui-booking-command > .form-feedback {
    margin: 12px 18px 0;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__step-actions {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 16px 18px 0;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__step-actions:empty {
    display: none;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__continue-button,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__submit-button {
    min-width: 140px;
    min-height: 44px;
}

body:where(.wat-app).repair-ui-booking-page :where(.button-blue, .button-blue-2, .button-red-2) :where(svg, i[data-lucide]) {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    stroke-width: 2.1;
}

body:where(.wat-app).repair-ui-booking-page .repair-booking-form__continue-button--pending,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__continue-button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.62;
    box-shadow: none;
}

/* Secondary repairer discovery */
body:where(.wat-app).repair-ui-booking-page .repairers-secondary {
    width: var(--wat-booking-workspace);
    margin: 30px auto 0;
}

body:where(.wat-app).repair-ui-booking-page .repair-ui-booking-browse {
    border-color: var(--wat-border);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--wat-booking-panel-shadow);
}

body:where(.wat-app).repair-ui-booking-page .repairers-secondary__summary {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 20px;
    gap: 12px;
    align-items: center;
    min-height: 66px;
    padding: 13px 16px;
}

body:where(.wat-app).repair-ui-booking-page .repairers-secondary__summary::after {
    content: none;
}

body:where(.wat-app).repair-ui-booking-page .repairers-secondary__summary-icon {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 10px;
    background: var(--wat-nav-active);
    color: var(--wat-primary);
}

body:where(.wat-app).repair-ui-booking-page .repairers-secondary__summary-icon :where(svg, i[data-lucide]),
body:where(.wat-app).repair-ui-booking-page .repairers-secondary__summary-chevron {
    width: 18px;
    height: 18px;
}

body:where(.wat-app).repair-ui-booking-page .repairers-secondary__summary-copy {
    display: grid;
    gap: 2px;
}

body:where(.wat-app).repair-ui-booking-page .repairers-secondary__summary-label {
    color: var(--wat-text);
    font-size: 13.5px;
    font-weight: 680;
}

body:where(.wat-app).repair-ui-booking-page .repairers-secondary__summary-hint {
    color: var(--wat-muted);
    font-size: 11.5px;
    font-weight: 400;
}

body:where(.wat-app).repair-ui-booking-page .repairers-secondary__summary-chevron {
    color: var(--wat-muted);
    transition: transform 150ms ease;
}

body:where(.wat-app).repair-ui-booking-page .repairers-secondary__details[open] .repairers-secondary__summary-chevron {
    transform: rotate(180deg);
}

body:where(.wat-app).repair-ui-booking-page .repairers-secondary__details[open] .repairers-secondary__summary {
    border-bottom-color: var(--wat-border);
}

body:where(.wat-app).repair-ui-booking-page .repairers-secondary__content {
    display: grid;
    gap: 18px;
    padding: 16px 2px 2px;
}

body:where(.wat-app).repair-ui-booking-page .repairers-secondary__filters,
body:where(.wat-app).repair-ui-booking-page .repairers-secondary__block {
    display: grid;
    min-width: 0;
    gap: 10px;
    border: 1px solid var(--wat-border);
    border-radius: 12px;
    background: var(--wat-surface-soft);
    padding: 14px;
}

body:where(.wat-app).repair-ui-booking-page .repairers-secondary__block--list {
    background: #fff;
}

body:where(.wat-app).repair-ui-booking-page .repairers-secondary__block-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

body:where(.wat-app).repair-ui-booking-page .repairers-secondary__block-title :where(svg, i[data-lucide]) {
    width: 18px;
    height: 18px;
    color: var(--wat-primary);
}

body:where(.wat-app).repair-ui-booking-page .repairers-secondary__block-title h3,
body:where(.wat-app).repair-ui-booking-page #repairersList h2,
body:where(.wat-app).repair-ui-booking-page #repairersList h3 {
    margin: 0;
    color: var(--wat-text);
    font-size: 15px;
    font-weight: 680;
}

body:where(.wat-app).repair-ui-booking-page .repairer-filters_services {
    display: grid;
    gap: 10px;
}

body:where(.wat-app).repair-ui-booking-page .service-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

body:where(.wat-app).repair-ui-booking-page .service-tag {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(0, 127, 222, 0.18);
    border-radius: 9999px;
    background: var(--wat-nav-active);
    color: var(--wat-primary-deep);
    padding: 5px 6px 5px 10px;
    font-size: 11.5px;
    font-weight: 630;
}

body:where(.wat-app).repair-ui-booking-page .service-tag .tag-delete {
    display: inline-grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 0;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.68);
    color: var(--wat-primary-deep);
    padding: 0;
}

body:where(.wat-app).repair-ui-booking-page .service-tag .tag-delete :where(svg, i[data-lucide]) {
    width: 14px;
    height: 14px;
}

body:where(.wat-app).repair-ui-booking-page #repairersList {
    display: grid;
    min-width: 0;
    gap: 10px;
}

body:where(.wat-app).repair-ui-booking-page #repairersList > p {
    margin: -4px 0 2px;
    color: var(--wat-muted);
    font-size: 12px;
}

body:where(.wat-app).repair-ui-booking-page #repairersList .repairer-cards-row + h2 {
    margin-top: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--wat-border);
}

body:where(.wat-app).repair-ui-booking-page #repairersList .flex-grow {
    display: none;
}

/* Service browser modals */
body:where(.wat-app).repair-ui-booking-page .repair-ui-booking-modal {
    display: grid;
    gap: 14px;
}

body:where(.wat-app).repair-ui-booking-page .repair-ui-booking-modal .modal-title {
    display: grid;
    gap: 6px;
    margin: 0;
}

body:where(.wat-app).repair-ui-booking-page .repair-ui-booking-modal .modal-title > .flex-row {
    gap: 4px;
}

:where(body.wat-app.repair-ui-public) .repair-ui-booking-breadcrumb-separator {
    width: 14px;
    height: 14px;
    color: var(--wat-faint);
}

body:where(.wat-app).repair-ui-booking-page .repair-ui-booking-modal .e-waste-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 9px;
}

body:where(.wat-app).repair-ui-booking-page .repair-ui-booking-modal .e-waste-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    min-width: 0;
    min-height: 66px;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--wat-border);
    border-radius: 10px;
    background: #fff;
    color: var(--wat-text);
    padding: 10px;
    box-shadow: none;
    text-align: left;
}

body:where(.wat-app).repair-ui-booking-page .repair-ui-booking-modal .e-waste-card:is(:hover, :focus-visible) {
    border-color: var(--wat-primary);
    background: var(--wat-surface-soft);
}

body:where(.wat-app).repair-ui-booking-page .repair-ui-booking-modal .e-waste-card_icon {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 10px;
    background: var(--wat-nav-active);
    color: var(--wat-primary);
}

body:where(.wat-app).repair-ui-booking-page .repair-ui-booking-modal .e-waste-card_icon :where(svg, i[data-lucide]) {
    width: 19px;
    height: 19px;
}

body:where(.wat-app).repair-ui-booking-page .repair-ui-booking-modal .e-waste-card_label {
    font-size: 12.5px;
    font-weight: 630;
}

body:where(.wat-app).repair-ui-booking-page .repair-ui-booking-modal :where(.popup-list, .search-results) {
    display: grid;
    gap: 6px;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--wat-border);
    border-radius: 10px;
    background: var(--wat-surface-soft);
    padding: 6px;
}

body:where(.wat-app).repair-ui-booking-page .repair-ui-booking-modal :where(.popup-list, .search-results):empty {
    display: none;
}

body:where(.wat-app).repair-ui-booking-page .repair-ui-booking-modal .popup-button {
    display: flex;
    min-height: 40px;
    align-items: center;
    gap: 9px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: var(--wat-text);
    padding: 8px 10px;
    text-align: left;
}

body:where(.wat-app).repair-ui-booking-page .repair-ui-booking-modal .popup-button:is(:hover, :focus-visible) {
    background: var(--wat-nav-active);
    color: var(--wat-primary-deep);
}

body:where(.wat-app).repair-ui-booking-page .repair-ui-booking-modal .popup-button :where(svg, i[data-lucide]) {
    width: 17px;
    height: 17px;
    color: var(--wat-primary);
}

/* Standalone entry/success fragments */
body:where(.wat-app).repair-ui-booking-page .repair-ui-book-repair-entry,
body:where(.wat-app).repair-ui-booking-page .repair-ui-booking-success {
    display: grid;
    gap: 12px;
    border-color: rgba(0, 180, 156, 0.24);
    background: linear-gradient(180deg, #fff, #f2fffc);
}

:where(body.wat-app.repair-ui-public) .repair-ui-booking-success__icon {
    display: inline-grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 12px;
    background: var(--wat-success-soft);
    color: var(--wat-success);
}

:where(body.wat-app.repair-ui-public) .repair-ui-booking-success__icon :where(svg, i[data-lucide]) {
    width: 24px;
    height: 24px;
}

/* Provider detail page */
body:where(.wat-app).repair-ui-provider-page .repair-ui-page {
    display: grid;
    grid-template-columns: minmax(300px, 0.85fr) minmax(420px, 1.15fr);
    gap: 16px;
}

body:where(.wat-app).repair-ui-provider-page .repair-ui-provider-hero {
    grid-column: 1 / -1;
}

body:where(.wat-app).repair-ui-provider-page .repair-ui-provider-card {
    min-width: 0;
    margin: 0;
    padding: 18px;
}

body:where(.wat-app).repair-ui-provider-page .repairer-detail {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

body:where(.wat-app).repair-ui-provider-page .repairer-detail_logo {
    display: grid;
    width: 108px;
    height: 108px;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--wat-border);
    border-radius: 14px;
    background: var(--wat-surface-soft);
    padding: 10px;
}

body:where(.wat-app).repair-ui-provider-page .repairer-detail_logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

body:where(.wat-app).repair-ui-provider-page .repairer-detail_body {
    min-width: 0;
}

body:where(.wat-app).repair-ui-provider-page .repairer-detail_body > p {
    margin: 4px 0 14px;
    color: var(--wat-muted);
    font-size: 12.5px;
    line-height: 1.45;
}

body:where(.wat-app).repair-ui-provider-page .repairer-detail_meta {
    display: grid;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--wat-border);
    border-radius: 10px;
    background: var(--wat-surface-soft);
}

body:where(.wat-app).repair-ui-provider-page .repairer-detail_meta > div {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 10px 12px;
    border-bottom: 1px solid var(--wat-border);
    color: var(--wat-text);
    font-size: 12px;
    font-style: normal;
    line-height: 1.35;
}

body:where(.wat-app).repair-ui-provider-page .repairer-detail_meta > div:last-child {
    border-bottom: 0;
}

body:where(.wat-app).repair-ui-provider-page .repairer-detail_meta b {
    color: var(--wat-muted);
    font-size: 10.5px;
    font-weight: 560;
}

body:where(.wat-app).repair-ui-provider-page .repair-ui-provider-card__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

body:where(.wat-app).repair-ui-provider-page .repair-ui-provider-card__title > span {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 10px;
    background: var(--wat-nav-active);
    color: var(--wat-primary);
}

body:where(.wat-app).repair-ui-provider-page .repair-ui-provider-card__title > span :where(svg, i[data-lucide]) {
    width: 19px;
    height: 19px;
}

body:where(.wat-app).repair-ui-provider-page .repair-ui-provider-card__title h2 {
    margin: 0;
    color: var(--wat-text);
    font-size: 16px;
    font-weight: 680;
}

body:where(.wat-app).repair-ui-provider-page .repair-ui-provider-card__title p {
    margin: 2px 0 0;
    color: var(--wat-muted);
    font-size: 11.5px;
    font-weight: 400;
}

body:where(.wat-app).repair-ui-provider-page .repair-ui-provider-card--map .map-feedback {
    margin-bottom: 10px;
}

/* Responsive adaptations follow the immediate task rather than desktop order. */
@media (max-width: 1020px) {
    body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-shortcuts,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-results {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-form__mode-options,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__repairer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:where(.wat-app).repair-ui-provider-page .repair-ui-page {
        grid-template-columns: 1fr;
    }

    body:where(.wat-app).repair-ui-provider-page .repair-ui-provider-hero {
        grid-column: 1;
    }
}

@media (max-width: 760px) {
    body:where(.wat-app).repair-ui-booking-page .repair-ui-public-main,
body:where(.wat-app).repair-ui-provider-page .repair-ui-public-main {
        width: min(100% - 24px, 1180px);
        padding-top: 28px;
    }

    :where(body.wat-app.repair-ui-public) .repair-ui-provider-hero__identity {
        grid-template-columns: 46px minmax(0, 1fr);
        column-gap: 12px;
    }

    :where(body.wat-app.repair-ui-public) .repair-ui-provider-hero__icon {
        width: 46px;
        height: 46px;
        border-radius: 12px;
    }

    :where(body.wat-app.repair-ui-public) .repair-ui-provider-hero__icon :where(svg, i[data-lucide]) {
        width: 22px;
        height: 22px;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-trail {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-trail__summary {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: baseline;
        gap: 12px;
        padding: 12px 14px;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-trail__summary-step {
        font-size: 11.5px;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-trail__summary-label {
        font-size: 20px;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-trail__steps {
        grid-template-columns: repeat(5, minmax(54px, 1fr));
        padding: 12px 8px 10px;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-trail__steps::before {
        top: 27px;
        right: calc(10% + 15px);
        left: calc(10% + 15px);
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-trail__control {
        min-height: 56px;
        gap: 5px;
        padding-inline: 1px;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-trail__index {
        width: 30px;
        height: 30px;
        font-size: 11.5px;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-trail__label {
        font-size: 10.5px;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-form__confirm-overview {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-form__section,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__section--hero,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__section--progressive {
        margin: 12px 12px 0;
        padding: 14px;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-form__impact-preview {
        margin: 10px 12px 0;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-ui-booking-command {
        padding-bottom: 16px;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-ui-booking-command > .feedback,
body:where(.wat-app).repair-ui-booking-page .repair-ui-booking-command > .form-feedback {
        margin: 10px 12px 0;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-form__step-actions {
        padding: 14px 12px 0;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-shortcuts,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-results,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__mode-options,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__repairer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-details-header {
        align-items: flex-start;
        flex-direction: column;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-details-controls {
        width: 100%;
        justify-content: space-between;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-form__location-row,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__compact-auth-fields,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__signup-identity-row {
        grid-template-columns: 1fr;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-form__location-row {
        grid-template-rows: auto;
        row-gap: 10px;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-form__address-field,
    body:where(.wat-app).repair-ui-booking-page .repair-booking-form__locate-button {
        grid-column: 1;
        grid-row: auto;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-form__locate-button {
        width: 100%;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking__warning {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking__warning-button {
        grid-column: 1 / -1;
        width: 100%;
    }

    body:where(.wat-app).repair-ui-booking-page .repairers-secondary__summary-hint {
        display: none;
    }

    body:where(.wat-app).repair-ui-provider-page .repairer-detail {
        grid-template-columns: 82px minmax(0, 1fr);
        gap: 14px;
    }

    body:where(.wat-app).repair-ui-provider-page .repairer-detail_logo {
        width: 82px;
        height: 82px;
        border-radius: 12px;
    }
}

@media (max-width: 520px) {
    body:where(.wat-app).repair-ui-booking-page .repair-ui-public-main,
body:where(.wat-app).repair-ui-provider-page .repair-ui-public-main {
        width: min(100% - 16px, 1180px);
        padding-top: 22px;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-ui-booking-command {
        border-radius: 12px;
        box-shadow:
            0 16px 40px rgba(0, 127, 222, 0.11),
            0 0 0 3px rgba(0, 180, 156, 0.07);
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-trail {
        border-radius: 0;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-trail__summary {
        gap: 10px;
        padding: 11px 12px;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-trail__summary-label {
        font-size: 18px;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-trail__steps {
        padding: 11px 6px 9px;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-trail__steps::before {
        top: 25px;
        right: calc(10% + 14px);
        left: calc(10% + 14px);
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-trail__control {
        min-height: 52px;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-trail__index {
        width: 28px;
        height: 28px;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-trail__label {
        font-size: 10px;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-form__section-header > h3,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__repairer-heading > h3 {
        font-size: 18px;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-shortcuts,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-results,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__mode-options,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__repairer-grid,
body:where(.wat-app).repair-ui-booking-page #repairersList .repairer-cards-row,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-details-grid {
        grid-template-columns: 1fr;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-shortcuts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-option,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__other-device-button {
        min-height: 100px;
        align-items: center;
        padding: 11px;
        text-align: center;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-results .repair-booking-form__device-option {
        min-height: 68px;
        align-items: center;
        text-align: left;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-form__mode-option {
        grid-template-columns: 38px minmax(0, 1fr);
        padding: 12px;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-form__mode-icon {
        width: 38px;
        height: 38px;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-form__selected-card--recap {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-form__selected-summary-issues {
        border-top: 1px solid var(--wat-border);
        border-left: 0;
        padding-top: 8px;
        padding-left: 0;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-form__booking-mode-summary {
        grid-template-columns: 52px minmax(0, 1fr);
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-form__booking-mode-icon {
        width: 52px;
        height: 52px;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-form__booking-mode-icon :where(svg, i[data-lucide]) {
        width: 25px;
        height: 25px;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-form__attachments-picker {
        align-items: stretch;
        flex-direction: column;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-form__attachments-summary {
        white-space: normal;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-form__step-actions {
        align-items: stretch;
        flex-wrap: wrap;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-form__step-actions > :where(button, a):last-child {
        margin-left: auto;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-booking-form__continue-button,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__submit-button {
        min-width: 132px;
    }

    body:where(.wat-app).repair-ui-booking-page .repairers-secondary {
        margin-top: 22px;
    }

    body:where(.wat-app).repair-ui-booking-page .repairers-secondary__summary {
        grid-template-columns: 34px minmax(0, 1fr) 18px;
        padding: 11px 12px;
    }

    body:where(.wat-app).repair-ui-booking-page .repairers-secondary__summary-icon {
        width: 34px;
        height: 34px;
    }

    body:where(.wat-app).repair-ui-booking-page .repair-ui-booking-modal .e-waste-card-grid {
        grid-template-columns: 1fr;
    }

    body:where(.wat-app).repair-ui-provider-page .repairer-detail {
        grid-template-columns: 1fr;
    }

    body:where(.wat-app).repair-ui-provider-page .repairer-detail_logo {
        width: 88px;
        height: 88px;
    }

    body:where(.wat-app).repair-ui-provider-page .repair-ui-provider-card {
        padding: 14px;
    }

    body:where(.wat-app).repair-ui-provider-page .repair-ui-provider-card--map .map {
        min-height: 240px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:where(.wat-app).repair-ui-booking-page .repair-booking-form__device-option,
body:where(.wat-app).repair-ui-booking-page .repair-booking-form__other-device-button,
body:where(.wat-app).repair-ui-booking-page .repairer-card,
body:where(.wat-app).repair-ui-booking-page .repairers-secondary__summary-chevron {
        transform: none !important;
    }
}

/* #endregion */

/* #region Customer and repairer portal */
/*
 * WAT WAT — Repair portal workspace.
 *
 * Loaded only by wrapper_portal.gohtml. Every selector remains
 * scoped to the Repair portal body so historical portal pages stay unchanged.
 */

body:where(.wat-app).repair-ui-portal {
    --repair-portal-main-column: minmax(0, 1.55fr);
    --repair-portal-context-column: minmax(280px, 0.72fr);
    --repair-portal-section-gap: 16px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-page {
    width: 100%;
}

body:where(.wat-app).repair-ui-portal .repair-ui-page > :last-child,
body:where(.wat-app).repair-ui-portal .repair-ui-order-page > :last-child {
    margin-bottom: 0;
}

body:where(.wat-app).repair-ui-portal .repair-ui-page :where(i[data-lucide], svg.lucide) {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    stroke-width: 2.1;
}

body:where(.wat-app).repair-ui-portal .repair-ui-page-eyebrow,
body:where(.wat-app).repair-ui-portal .repair-ui-section-eyebrow,
body:where(.wat-app).repair-ui-portal .repair-ui-command-eyebrow {
    margin: 0 0 5px;
    color: var(--wat-primary);
    font-size: 10.5px;
    font-weight: 760;
    letter-spacing: 0.075em;
    line-height: 1.2;
    text-transform: uppercase;
}

body:where(.wat-app).repair-ui-portal .repair-ui-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--wat-muted);
}

body:where(.wat-app).repair-ui-portal .repair-ui-breadcrumbs :where(a, span) {
    color: inherit;
}

body:where(.wat-app).repair-ui-portal .repair-ui-breadcrumbs :where(i[data-lucide], svg.lucide) {
    width: 13px;
    height: 13px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-header-meta {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 10px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-order-status {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    background: var(--wat-neutral-soft);
    color: var(--wat-neutral);
    padding: 5px 10px;
    font-size: 11.5px;
    font-weight: 680;
}

body:where(.wat-app).repair-ui-portal .repair-ui-order-status.is-action {
    background: var(--wat-warning-soft);
    color: var(--wat-warning);
}

body:where(.wat-app).repair-ui-portal .repair-ui-order-status.is-progress {
    background: #eaf5ff;
    color: #155b93;
}

body:where(.wat-app).repair-ui-portal .repair-ui-order-status.is-complete {
    background: var(--wat-success-soft);
    color: var(--wat-success);
}

body:where(.wat-app).repair-ui-portal .repair-ui-order-status.is-cancelled {
    background: var(--wat-danger-soft);
    color: var(--wat-danger);
}

body:where(.wat-app).repair-ui-portal .portal-notifications-banner-slot {
    position: sticky;
    top: 12px;
    z-index: 6;
    margin: 0 0 16px;
    padding: 0;
    border-radius: 0;
    background: transparent;
}

body:where(.wat-app).repair-ui-portal .portal-notifications-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid #cfe6f4;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(235, 247, 255, 0.98));
    padding: 12px 14px;
    box-shadow: var(--wat-shadow);
}

body:where(.wat-app).repair-ui-portal .portal-notifications-banner__copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 4px;
}

body:where(.wat-app).repair-ui-portal .portal-notifications-banner__copy p {
    color: var(--wat-text);
}

body:where(.wat-app).repair-ui-portal .portal-notifications-banner__copy small {
    color: var(--wat-muted);
}

body:where(.wat-app).repair-ui-portal .portal-notifications-banner__cta {
    flex-shrink: 0;
}

/* Dashboard */
body:where(.wat-app).repair-ui-portal .repair-dashboard-command {
    margin-bottom: 18px;
}

body:where(.wat-app).repair-ui-portal .repair-dashboard-command .repair-ui-command-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

body:where(.wat-app).repair-ui-portal .repair-dashboard-command .repair-ui-command-eyebrow {
    color: rgba(255, 255, 255, 0.72);
}

body:where(.wat-app).repair-ui-portal .repair-dashboard-command .repair-ui-command-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 720;
}

body:where(.wat-app).repair-ui-portal .repair-dashboard-command .repair-ui-command-header > i,
body:where(.wat-app).repair-ui-portal .repair-dashboard-command .repair-ui-command-header > svg {
    width: 28px;
    height: 28px;
    color: #7ff7df;
}

body:where(.wat-app).repair-ui-portal .repair-dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

body:where(.wat-app).repair-ui-portal .repair-dashboard-metric {
    min-width: 0;
    border: 1px solid rgba(0, 127, 222, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.78);
    padding: 13px;
}

body:where(.wat-app).repair-ui-portal .repair-dashboard-metric.is-attention {
    border-color: rgba(135, 82, 11, 0.22);
    background: var(--wat-warning-soft);
}

body:where(.wat-app).repair-ui-portal .repair-dashboard-metric-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--wat-muted);
    font-size: 11px;
    font-weight: 630;
}

body:where(.wat-app).repair-ui-portal .repair-dashboard-metric-label :where(i[data-lucide], svg.lucide) {
    width: 15px;
    height: 15px;
    color: var(--wat-primary);
}

body:where(.wat-app).repair-ui-portal .repair-dashboard-metric strong {
    display: block;
    margin-top: 8px;
    font-size: 29px;
    font-weight: 760;
    letter-spacing: -0.045em;
    line-height: 1;
}

body:where(.wat-app).repair-ui-portal .repair-dashboard-grid {
    display: grid;
    grid-template-columns: var(--repair-portal-main-column) var(--repair-portal-context-column);
    gap: var(--repair-portal-section-gap);
    align-items: start;
}

body:where(.wat-app).repair-ui-portal .repair-readiness-card {
    min-height: 100%;
}

body:where(.wat-app).repair-ui-portal .repair-readiness-state {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 14px;
    border-radius: 10px;
    background: var(--wat-surface-soft);
    padding: 13px;
}

body:where(.wat-app).repair-ui-portal .repair-readiness-state > :where(i[data-lucide], svg.lucide) {
    width: 21px;
    height: 21px;
    color: var(--wat-primary);
}

body:where(.wat-app).repair-ui-portal .repair-readiness-state.is-ready {
    background: var(--wat-success-soft);
}

body:where(.wat-app).repair-ui-portal .repair-readiness-state.is-ready > :where(i[data-lucide], svg.lucide) {
    color: var(--wat-success);
}

body:where(.wat-app).repair-ui-portal .repair-readiness-state.is-warning {
    background: var(--wat-warning-soft);
}

body:where(.wat-app).repair-ui-portal .repair-readiness-state.is-warning > :where(i[data-lucide], svg.lucide) {
    color: var(--wat-warning);
}

body:where(.wat-app).repair-ui-portal .repair-readiness-state p {
    margin: 0;
}

body:where(.wat-app).repair-ui-portal .repair-dashboard-guide {
    display: grid;
    gap: 10px;
}

body:where(.wat-app).repair-ui-portal .repair-dashboard-guide-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

body:where(.wat-app).repair-ui-portal .repair-dashboard-guide-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 9px;
    background: #edf7ff;
    color: var(--wat-primary);
}

body:where(.wat-app).repair-ui-portal .repair-dashboard-guide-item strong,
body:where(.wat-app).repair-ui-portal .repair-dashboard-guide-item span {
    display: block;
}

body:where(.wat-app).repair-ui-portal .repair-dashboard-guide-item span {
    margin-top: 2px;
    color: var(--wat-muted);
    font-size: 12px;
}

/* Repair order workspace */
body:where(.wat-app).repair-ui-portal .repair-ui-order-columns {
    display: grid;
    grid-template-columns: var(--repair-portal-main-column) var(--repair-portal-context-column);
    gap: var(--repair-portal-section-gap);
    align-items: start;
}

body:where(.wat-app).repair-ui-portal .repair-ui-order-columns > .panel {
    margin-top: 0;
}

body:where(.wat-app).repair-ui-portal .repair-ui-order-main,
body:where(.wat-app).repair-ui-portal .repair-ui-order-context,
body:where(.wat-app).repair-ui-portal .repair-ui-order-footer {
    display: grid;
    min-width: 0;
    gap: var(--repair-portal-section-gap);
}

body:where(.wat-app).repair-ui-portal .repair-ui-order-footer {
    margin-top: var(--repair-portal-section-gap);
}

body:where(.wat-app).repair-ui-portal .repair-ui-order-columns :where(.card, details.card),
body:where(.wat-app).repair-ui-portal .repair-ui-order-footer :where(.card, details.card) {
    min-width: 0;
    margin: 0;
}

body:where(.wat-app).repair-ui-portal .repair-ui-command.repair-ui-now-card {
    padding: 16px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-now-card > .repair-ui-command-header:first-child {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin: -16px -16px 16px;
    padding: 14px 17px 13px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-now-card .repair-ui-command-eyebrow {
    color: rgba(255, 255, 255, 0.72);
}

body:where(.wat-app).repair-ui-portal .repair-ui-now-card .repair-ui-command-header h2 {
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 720;
}

body:where(.wat-app).repair-ui-portal .repair-ui-command-status {
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13);
    color: #fff;
    padding: 5px 9px;
    font-size: 10.5px;
    font-weight: 680;
    white-space: nowrap;
}

body:where(.wat-app).repair-ui-portal .repair-ui-command-status :where(i[data-lucide], svg.lucide) {
    width: 14px;
    height: 14px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-now-action {
    margin-top: 14px;
    border-top: 1px solid rgba(0, 127, 222, 0.1);
    padding-top: 14px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-now-action h3 {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
}

body:where(.wat-app).repair-ui-portal .repair-ui-now-action form {
    position: relative;
}

body:where(.wat-app).repair-ui-portal .repair-ui-state-action {
    display: grid;
    gap: 12px;
    margin: 14px 0;
    border: 1px solid rgba(0, 127, 222, 0.28);
    border-radius: 10px;
    background: #fff;
    padding: 14px;
    box-shadow: 0 10px 24px rgba(0, 127, 222, 0.09);
}

body:where(.wat-app).repair-ui-portal .repair-ui-state-action-header {
    display: grid;
    grid-template-columns: 37px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-state-action-header :where(h4, p) {
    margin: 0;
}

body:where(.wat-app).repair-ui-portal .repair-ui-state-action-header h4 {
    color: var(--text);
    font-size: 15px;
    font-weight: var(--title-weight);
    line-height: 1.25;
}

body:where(.wat-app).repair-ui-portal .repair-ui-state-action-header p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: var(--label-weight);
    line-height: 1.4;
}

body:where(.wat-app).repair-ui-portal .repair-ui-code-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 12px;
    border: 1px dashed rgba(0, 127, 222, 0.35);
    border-radius: 12px;
    background: #f7fbff;
    padding: 12px 14px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-code-panel-copy {
    min-width: 0;
}

body:where(.wat-app).repair-ui-portal .repair-ui-code-panel-copy strong,
body:where(.wat-app).repair-ui-portal .repair-ui-code-panel-copy span {
    display: block;
}

body:where(.wat-app).repair-ui-portal .repair-ui-code-panel-copy span {
    margin-top: 2px;
    color: var(--wat-muted);
    font-size: 11px;
}

body:where(.wat-app).repair-ui-portal .delivery-code {
    display: inline-flex;
    min-width: 148px;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 127, 222, 0.22);
    border-radius: 10px;
    background: #fff;
    color: var(--wat-primary-deep);
    padding: 8px 14px;
    font-family: "DM Sans", ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 23px;
    font-weight: 780;
    letter-spacing: 0.18em;
    line-height: 1;
    text-align: center;
    box-shadow: 0 7px 18px rgba(0, 127, 222, 0.08);
}

body:where(.wat-app).repair-ui-portal .repair-ui-confirm-form {
    position: relative;
    display: grid;
    grid-template-columns: minmax(130px, 0.55fr) minmax(190px, 1fr);
    gap: 10px;
    align-items: end;
}

body:where(.wat-app).repair-ui-portal .repair-ui-confirm-form label {
    display: grid;
    gap: 5px;
    margin: 0;
}

body:where(.wat-app).repair-ui-portal .repair-ui-confirm-form label > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: var(--label-weight);
}

body:where(.wat-app).repair-ui-portal .repair-ui-confirm-form input[name="code"] {
    width: 100%;
    min-height: 46px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
}

body:where(.wat-app).repair-ui-portal .repair-ui-state-action .repair-ui-confirm-form .button-primary {
    width: 100%;
    min-height: 46px;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 15px 30px rgba(0, 127, 222, 0.2);
}

body:where(.wat-app).repair-ui-portal .repair-ui-confirmation-choice {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    border: 1px solid rgba(0, 127, 222, 0.2);
    border-radius: 10px;
    background: #f7fbff;
    padding: 12px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-confirmation-choice > input {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--wat-blue);
    cursor: pointer;
}

body:where(.wat-app).repair-ui-portal .repair-ui-confirmation-choice label {
    display: block;
    margin: 0;
    color: var(--text);
    cursor: pointer;
    line-height: 1.35;
}

body:where(.wat-app).repair-ui-portal .repair-ui-confirmation-choice p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
}

body:where(.wat-app).repair-ui-portal .repair-ui-action-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

body:where(.wat-app).repair-ui-portal .repair-ui-action-row > form {
    margin: 0;
}

body:where(.wat-app).repair-ui-portal #repairPickupAcknowledgeBody {
    min-width: 0;
}

body:where(.wat-app).repair-ui-portal #repairPickupAcknowledgeBody .delivery-code {
    margin-top: 10px;
}

/* Stable context */
body:where(.wat-app).repair-ui-portal .repair-ui-context-card-header,
body:where(.wat-app).repair-ui-portal .repair-ui-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-panel-title {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

body:where(.wat-app).repair-ui-portal .repair-ui-panel-title > :where(i[data-lucide], svg.lucide) {
    color: var(--wat-primary);
}

body:where(.wat-app).repair-ui-portal .repair-ui-panel-title :where(h2, h3) {
    margin: 0;
    font-size: 16px;
    font-weight: 680;
}

body:where(.wat-app).repair-ui-portal .repair-ui-context-value {
    display: grid;
    gap: 4px;
    border-radius: 10px;
    background: var(--wat-surface-soft);
    padding: 12px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-context-value strong {
    font-size: 13px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-context-value span {
    color: var(--wat-muted);
    font-size: 12px;
}

body:where(.wat-app).repair-ui-portal details.repair-ui-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    list-style: none;
}

body:where(.wat-app).repair-ui-portal details.repair-ui-details > summary::-webkit-details-marker {
    display: none;
}

body:where(.wat-app).repair-ui-portal details.repair-ui-details > summary::after {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-right: 2px solid var(--wat-muted);
    border-bottom: 2px solid var(--wat-muted);
    content: "";
    transform: rotate(45deg);
    transition: transform 150ms ease;
}

body:where(.wat-app).repair-ui-portal details.repair-ui-details:not([open]) > summary::after {
    transform: rotate(-45deg);
}

body:where(.wat-app).repair-ui-portal details.repair-ui-details > summary .repair-ui-panel-title {
    margin: 0;
}

/* Quotations */
body:where(.wat-app).repair-ui-portal .repair-ui-quote-card,
body:where(.wat-app).repair-ui-portal .quote-panel {
    overflow: hidden;
}

body:where(.wat-app).repair-ui-portal .quote-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-card .quote-card-header > .card-title {
    margin: 0;
    border: 0;
    background: transparent;
    padding: 0;
}

body:where(.wat-app).repair-ui-portal .quote-summary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(230px, 0.75fr);
    gap: 14px;
    align-items: start;
}

body:where(.wat-app).repair-ui-portal .repair-ui-amount-summary {
    overflow: hidden;
    border: 1px solid var(--wat-border);
    border-radius: 10px;
    background: #fff;
}

body:where(.wat-app).repair-ui-portal .repair-ui-amount-summary .quote-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid var(--wat-border);
    padding: 10px 12px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-amount-summary .quote-row:last-child {
    border-bottom: 0;
}

body:where(.wat-app).repair-ui-portal .repair-ui-amount-summary .quote-row > span {
    color: var(--wat-muted);
    font-weight: 650;
}

body:where(.wat-app).repair-ui-portal .repair-ui-amount-summary .quote-row > b {
    color: var(--wat-text);
    font-weight: 760;
    text-align: right;
}

body:where(.wat-app).repair-ui-portal .repair-ui-amount-summary .quote-row > b small {
    display: block;
    margin-top: 2px;
    color: var(--wat-muted);
    font-size: 10px;
    font-weight: 620;
}

body:where(.wat-app).repair-ui-portal .repair-ui-amount-summary .quote-row.is-total {
    background: var(--wat-surface-soft);
}

body:where(.wat-app).repair-ui-portal .repair-ui-amount-summary .quote-row.is-total > :where(span, b) {
    color: var(--wat-text);
    font-size: 14px;
    font-weight: 800;
}

body:where(.wat-app).repair-ui-portal .quote-service {
    overflow: hidden;
    border: 1px solid var(--wat-border);
    border-radius: 10px;
    background: #fff;
    padding: 0;
}

body:where(.wat-app).repair-ui-portal .quote-service > .quote-line {
    border: 0;
    border-bottom: 1px solid #e8f0f2;
    border-radius: 0;
}

body:where(.wat-app).repair-ui-portal .quote-service > .repair-order-service-card__header {
    border-bottom: 1px solid #e8f0f2;
    background: var(--wat-surface-soft);
    padding: 10px 11px;
}

body:where(.wat-app).repair-ui-portal .quote-line,
body:where(.wat-app).repair-ui-portal .quote-item-row,
body:where(.wat-app).repair-ui-portal .quote-step-row {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

body:where(.wat-app).repair-ui-portal .quote-items {
    border-left: 0;
    padding: 9px 11px;
}

body:where(.wat-app).repair-ui-portal .quote-item-row {
    align-items: flex-start;
    border-radius: 8px;
    background: #fbfdfd;
    padding: 8px 9px;
}

body:where(.wat-app).repair-ui-portal .quote-step-list__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

body:where(.wat-app).repair-ui-portal .quote-step-row {
    min-width: 0;
    padding: 7px 9px;
}

body:where(.wat-app).repair-ui-portal .quote-step-list {
    gap: 2px;
    border-left: 0;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-card .quote-step-row {
    border: 0;
    border-radius: 0;
    background: #fff;
    padding: 5px 10px 5px 0;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-card .quote-item-row--breakdown {
    display: grid;
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0;
    align-items: stretch;
    border: 1px solid var(--wat-border);
    background: #fff;
    padding: 0;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-card .quote-item-row--breakdown > .width-fill {
    display: contents;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-card .quote-item-row--breakdown .quote-device-summary,
body:where(.wat-app).repair-ui-portal .repair-ui-quote-card .quote-item-row--breakdown .quote-device-total {
    background: var(--wat-surface-soft);
    padding: 8px 9px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-card .quote-item-row--breakdown .quote-device-summary {
    grid-row: 1;
    grid-column: 1;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-card .quote-item-row--breakdown .quote-device-total {
    grid-row: 1;
    grid-column: 2;
    text-align: right;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-card .quote-item-row--breakdown .quote-step-list {
    grid-row: 2;
    grid-column: 1 / -1;
    gap: 0;
    margin-top: 0;
    border-top: 1px solid #e8f0f2;
    background: #fff;
    padding: 3px 0 3px 26px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-card .quote-service--extras .quote-items {
    gap: 0;
    padding-block: 4px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-card .quote-service--extras .quote-item-row {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 4px 0;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-card .quote-service--extras .quote-item-row + .quote-item-row {
    border-top: 1px solid #e8f0f2;
}

body:where(.wat-app).repair-ui-portal .quote-totals {
    overflow: hidden;
    border: 1px solid var(--wat-border);
    border-radius: 10px;
}

body:where(.wat-app).repair-ui-portal .quote-actions {
    justify-content: flex-end;
    margin-top: 14px;
    border-top: 1px solid var(--wat-border);
    padding-top: 13px;
}

body:where(.wat-app).repair-ui-portal .quote-amount-input {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 5px;
    border: 1px solid #d2e2e8;
    border-radius: 8px;
    background: #fff;
    padding-left: 8px;
}

body:where(.wat-app).repair-ui-portal .quote-amount-input input {
    min-width: 76px;
    border: 0 !important;
    box-shadow: none !important;
}

body:where(.wat-app).repair-ui-portal .button-plus,
body:where(.wat-app).repair-ui-portal .repair-ui-icon-button {
    display: inline-grid;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    place-items: center;
    border: 1px solid rgba(0, 127, 222, 0.22);
    border-radius: 9px;
    background: #fff;
    color: var(--wat-primary);
    padding: 0;
}

body:where(.wat-app).repair-ui-portal .repair-ui-icon-button.is-danger {
    border-color: rgba(180, 35, 24, 0.18);
    background: var(--wat-danger-soft);
    color: var(--wat-danger);
}

/* Attachments and chat */
body:where(.wat-app).repair-ui-portal .repair-ui-attachments {
    display: grid;
    gap: 10px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-attachment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 9px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-attachment {
    display: block;
    overflow: hidden;
    border: 1px solid var(--wat-border);
    border-radius: 10px;
    background: var(--wat-surface-soft);
    color: var(--wat-text);
    text-decoration: none;
}

body:where(.wat-app).repair-ui-portal .repair-ui-attachment .attachment-image {
    display: block;
    width: 100%;
    height: 110px;
    object-fit: cover;
}

body:where(.wat-app).repair-ui-portal .repair-ui-file-list {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body:where(.wat-app).repair-ui-portal .repair-ui-file-list a {
    display: flex;
    align-items: center;
    gap: 7px;
    border-radius: 8px;
    background: var(--wat-surface-soft);
    padding: 8px 9px;
    text-decoration: none;
}

body:where(.wat-app).repair-ui-portal .repair-ui-discussion-card > p {
    color: var(--wat-muted);
}

body:where(.wat-app).repair-ui-portal .repair-ui-chat-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, 0.5fr);
    gap: 14px;
    align-items: stretch;
}

body:where(.wat-app).repair-ui-portal .chat.repair-ui-chat {
    display: flex;
    min-height: 220px;
    max-height: 430px;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    border: 1px solid var(--wat-border);
    border-radius: 11px;
    background: #f6fafc;
    padding: 11px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-chat-empty {
    display: grid;
    min-height: 190px;
    place-items: center;
    color: var(--wat-muted);
    text-align: center;
}

body:where(.wat-app).repair-ui-portal .repair-ui-chat-empty > div {
    display: grid;
    justify-items: center;
    gap: 6px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-chat-empty :where(i[data-lucide], svg.lucide) {
    width: 28px;
    height: 28px;
    color: var(--wat-faint);
}

body:where(.wat-app).repair-ui-portal .repair-ui-chat-composer {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 10px;
    border: 1px solid var(--wat-border);
    border-radius: 11px;
    background: #fff;
    padding: 12px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-chat-composer label {
    display: grid;
    gap: 6px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-chat-composer textarea {
    width: 100%;
    min-height: 132px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-chat-composer-actions {
    display: flex;
    justify-content: flex-end;
}

/* Order list and filters */
body:where(.wat-app).repair-ui-portal .repair-ui-filter-card {
    margin-bottom: 16px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-filter-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 13px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-filter-form .toggle-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    border: 0;
    padding: 0;
}

body:where(.wat-app).repair-ui-portal .repair-ui-filter-form .toggle-group > input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

body:where(.wat-app).repair-ui-portal .repair-ui-filter-form .toggle-group > label {
    min-height: 34px;
    border: 1px solid var(--wat-border);
    border-radius: 999px;
    background: #fff;
    color: var(--wat-muted);
    padding: 7px 11px;
    font-size: 11.5px;
    font-weight: 630;
    cursor: pointer;
}

body:where(.wat-app).repair-ui-portal .repair-ui-filter-form .toggle-group > input:checked + label {
    border-color: rgba(0, 127, 222, 0.22);
    background: var(--wat-nav-active);
    color: var(--wat-primary-deep);
}

body:where(.wat-app).repair-ui-portal .repair-ui-filter-form .toggle-group > input:focus-visible + label {
    outline: 2px solid var(--wat-primary);
    outline-offset: 2px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-orders {
    margin: 0;
}

body:where(.wat-app).repair-ui-portal .repair-ui-order-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-order-card {
    position: relative;
    display: grid;
    min-width: 0;
    gap: 12px;
    overflow: hidden;
    border: 1px solid var(--wat-border);
    border-radius: 12px;
    background: #fff;
    padding: 14px;
    box-shadow: var(--wat-shadow);
    transition: border-color 130ms ease, box-shadow 130ms ease, transform 130ms ease;
}

body:where(.wat-app).repair-ui-portal .repair-ui-order-card::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: #d6e4e8;
    content: "";
}

body:where(.wat-app).repair-ui-portal .repair-ui-order-card.is-action::before {
    background: #e2a128;
}

body:where(.wat-app).repair-ui-portal .repair-ui-order-card.is-done::before {
    background: var(--wat-teal);
}

body:where(.wat-app).repair-ui-portal .repair-ui-order-card:is(:hover, :focus-within) {
    border-color: rgba(0, 127, 222, 0.25);
    box-shadow: var(--wat-elevated-shadow);
    transform: translateY(-1px);
}

body:where(.wat-app).repair-ui-portal .repair-ui-order-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-order-card-title {
    min-width: 0;
}

body:where(.wat-app).repair-ui-portal .repair-ui-order-card-title h2 {
    margin: 0;
    font-size: inherit;
    line-height: 1.15;
}

body:where(.wat-app).repair-ui-portal .repair-ui-order-card-title a {
    color: var(--wat-text);
    font-size: 17px;
    font-weight: 720;
    letter-spacing: -0.02em;
    text-decoration: none;
}

body:where(.wat-app).repair-ui-portal .repair-ui-order-card-title p {
    margin: 3px 0 0;
    color: var(--wat-muted);
    font-size: 11px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-order-card-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 9px;
    background: var(--wat-neutral-soft);
    color: var(--wat-neutral);
}

body:where(.wat-app).repair-ui-portal .repair-ui-order-card.is-action .repair-ui-order-card-icon {
    background: var(--wat-warning-soft);
    color: var(--wat-warning);
}

body:where(.wat-app).repair-ui-portal .repair-ui-order-card.is-done .repair-ui-order-card-icon {
    background: var(--wat-success-soft);
    color: var(--wat-success);
}

body:where(.wat-app).repair-ui-portal .repair-ui-order-card-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

body:where(.wat-app).repair-ui-portal .repair-ui-order-card .repair-request__services {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 10px 0 0;
    border-top: 1px solid #edf2f4;
    list-style: none;
}

body:where(.wat-app).repair-ui-portal .repair-ui-order-card .repair-request__services li {
    position: relative;
    padding-left: 16px;
    color: #344c61;
    font-size: 12px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-order-card .repair-request__services li::before {
    position: absolute;
    top: 0.48em;
    left: 2px;
    width: 6px;
    height: 6px;
    border-radius: 99px;
    background: var(--wat-teal);
    content: "";
}

body:where(.wat-app).repair-ui-portal .repair-ui-order-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--wat-faint);
    font-size: 10.5px;
}

/* Shops */
body:where(.wat-app).repair-ui-portal #repairerShopsList {
    display: grid;
    gap: 16px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-shops-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-shop-card {
    position: relative;
    display: grid;
    min-width: 0;
    gap: 9px;
    border: 1px solid var(--wat-border);
    border-radius: 11px;
    background: var(--wat-surface-soft);
    padding: 12px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-shop-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-shop-card-title {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    min-width: 0;
}

body:where(.wat-app).repair-ui-portal .repair-ui-shop-card-icon {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 9px;
    background: #e7f4ff;
    color: var(--wat-primary);
}

body:where(.wat-app).repair-ui-portal .repair-ui-shop-card-title strong,
body:where(.wat-app).repair-ui-portal .repair-ui-shop-card-title span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

body:where(.wat-app).repair-ui-portal .repair-ui-shop-card-title strong {
    white-space: nowrap;
}

body:where(.wat-app).repair-ui-portal .repair-ui-shop-card-title span {
    margin-top: 1px;
    color: var(--wat-muted);
    font-size: 10.5px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-shop-warning-list {
    display: grid;
    gap: 3px;
    margin: 0;
    border-radius: 8px;
    background: var(--wat-warning-soft);
    color: var(--wat-warning);
    padding: 8px 9px 8px 24px;
    font-size: 10.5px;
}

body:where(.wat-app).repair-ui-portal .repairer-shops-form {
    display: grid;
    gap: 16px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-shop-intro {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-shop-benefit {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    border-radius: 10px;
    background: var(--wat-surface-soft);
    padding: 11px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-shop-benefit-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 9px;
    background: #e7f4ff;
    color: var(--wat-primary);
}

body:where(.wat-app).repair-ui-portal .repair-ui-shop-benefit > div > strong,
body:where(.wat-app).repair-ui-portal .repair-ui-shop-benefit > div > span {
    display: block;
}

body:where(.wat-app).repair-ui-portal .repair-ui-shop-benefit > div > span {
    margin-top: 2px;
    color: var(--wat-muted);
    font-size: 10.5px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-upload-zone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px dashed var(--wat-border-strong);
    border-radius: 11px;
    background: #fbfefe;
    padding: 12px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-upload-zone-copy {
    display: flex;
    align-items: center;
    gap: 9px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-upload-zone-copy > :where(i[data-lucide], svg.lucide) {
    color: var(--wat-primary);
}

body:where(.wat-app).repair-ui-portal .repair-ui-address-rows {
    display: grid;
    gap: 8px;
}

body:where(.wat-app).repair-ui-portal .repairer-shops-form .address-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    border: 1px solid var(--wat-border);
    border-radius: 10px;
    background: var(--wat-surface-soft);
    padding: 8px;
}

body:where(.wat-app).repair-ui-portal .repairer-shops-form .address-row_number {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 8px;
    background: #e7f4ff;
    color: var(--wat-primary-deep);
    font-size: 11px;
    font-weight: 720;
}

body:where(.wat-app).repair-ui-portal .repairer-shops-form .map,
body:where(.wat-app).repair-ui-portal .repair-ui-shop-modal .map {
    min-height: 300px;
    overflow: hidden;
    border: 1px solid var(--wat-border);
    border-radius: 11px;
    background: var(--wat-surface-soft);
}

body:where(.wat-app).repair-ui-portal .repair-ui-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    border-top: 1px solid var(--wat-border);
    padding-top: 14px;
}

body:where(.wat-app).repair-ui-portal #repairerDefaultServices form {
    display: grid;
    gap: 10px;
}

/* Settlements */
body:where(.wat-app).repair-ui-portal .repair-ui-settlements-card .table-container {
    margin-top: 12px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-amount {
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    white-space: nowrap;
}

body:where(.wat-app).repair-ui-portal .repair-ui-amount.is-net {
    color: var(--wat-success);
    font-weight: 730;
}

body:where(.wat-app).repair-ui-portal .repair-ui-statement-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 650;
    text-decoration: none;
}

body:where(.wat-app).repair-ui-portal .repair-ui-statement-link :where(i[data-lucide], svg.lucide) {
    width: 15px;
    height: 15px;
}

/* Notification handoff */
body:where(.wat-app).repair-ui-portal .repair-notification-landing__form {
    display: grid;
    width: min(620px, 100%);
    min-height: calc(100dvh - 170px);
    align-content: center;
    margin: 0 auto;
}

body:where(.wat-app).repair-ui-portal .repair-notification-landing,
body:where(.wat-app).repair-ui-portal .repair-notification-fallback {
    display: grid;
    justify-items: center;
    gap: 12px;
    text-align: center;
}

body:where(.wat-app).repair-ui-portal .repair-notification-landing[hidden],
body:where(.wat-app).repair-ui-portal .repair-notification-fallback[hidden] {
    display: none;
}

body:where(.wat-app).repair-ui-portal .repair-notification-icon {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border-radius: 14px;
    background: #e7f4ff;
    color: var(--wat-primary);
}

body:where(.wat-app).repair-ui-portal .repair-notification-icon :where(i[data-lucide], svg.lucide) {
    width: 25px;
    height: 25px;
}

body:where(.wat-app).repair-ui-portal .repair-notification-landing__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 999px;
    animation: repair-ui-spin 850ms linear infinite;
}

@keyframes repair-ui-spin {
    to { transform: rotate(360deg); }
}

/* Development and destructive actions */
body:where(.wat-app).repair-ui-portal .repair-ui-danger-card {
    border-color: rgba(180, 35, 24, 0.18);
    background: #fffafa;
}

body:where(.wat-app).repair-ui-portal .repair-ui-dev-area {
    border-style: dashed;
    background: #f8fafc;
}

body:where(.wat-app).repair-ui-portal .repair-ui-dev-section {
    display: grid;
    gap: 7px;
    margin-top: 12px;
    border-top: 1px solid var(--wat-border);
    padding-top: 12px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-dev-section h3 {
    margin: 0;
    font-size: 12px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-dev-list {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body:where(.wat-app).repair-ui-portal .repair-ui-dev-list li {
    border-radius: 7px;
    background: #fff;
    padding: 7px 8px;
    color: var(--wat-muted);
    font-size: 10.5px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-dev-controls {
    display: flex;
    align-items: end;
    gap: 9px;
    flex-wrap: wrap;
}

body:where(.wat-app).repair-ui-portal .repair-ui-dev-controls label {
    display: grid;
    gap: 4px;
    margin: 0;
}

/* Repair modals */
body:where(.wat-app).repair-ui-portal #modalContainer > .repair-ui-modal,
body:where(.wat-app).repair-ui-portal #modalContainer > .modal.repair-ui-quote-modal {
    width: min(720px, calc(100vw - 32px));
    align-items: stretch;
    padding: 0;
    overflow: hidden auto;
}

body:where(.wat-app).repair-ui-portal #modalContainer > .repair-ui-modal--compact {
    width: min(560px, calc(100vw - 32px));
}

body:where(.wat-app).repair-ui-portal #modalContainer > .modal.repair-ui-quote-modal {
    width: min(1080px, calc(100vw - 32px));
    overflow-anchor: none;
}

body:where(.wat-app).repair-ui-portal .repair-ui-modal-header {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    width: 100%;
    height: auto;
    flex: 0 0 auto;
    box-sizing: border-box;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid var(--wat-border);
    background: rgba(255, 255, 255, 0.97);
    padding: 17px 18px 14px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-modal-heading {
    display: grid;
    flex: 1;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    min-width: 0;
}

body:where(.wat-app).repair-ui-portal .repair-ui-modal-heading > div {
    min-width: 0;
}

body:where(.wat-app).repair-ui-portal .repair-ui-modal-heading-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 10px;
    background: #e7f4ff;
    color: var(--wat-primary);
}

body:where(.wat-app).repair-ui-portal .repair-ui-modal-heading-icon.is-danger {
    background: var(--wat-danger-soft);
    color: var(--wat-danger);
}

body:where(.wat-app).repair-ui-portal .repair-ui-modal-heading h2,
body:where(.wat-app).repair-ui-portal .repair-ui-modal-heading p {
    margin: 0;
}

body:where(.wat-app).repair-ui-portal .repair-ui-modal-heading h2 {
    font-size: 18px;
    font-weight: 720;
    line-height: 1.2;
}

body:where(.wat-app).repair-ui-portal .repair-ui-modal-heading p {
    margin-top: 2px;
    color: var(--wat-muted);
    font-size: 11px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-modal .modal-close,
body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .modal-close {
    position: static;
    display: grid;
    width: 34px;
    height: 34px;
    min-height: 34px;
    place-items: center;
    border: 1px solid var(--wat-border);
    border-radius: 9px;
    background: #fff;
    padding: 0;
}

body:where(.wat-app).repair-ui-portal .repair-ui-modal-body {
    display: grid;
    gap: 12px;
    padding: 16px 18px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-modal-body > :where(p, label) {
    margin: 0;
}

body:where(.wat-app).repair-ui-portal .repair-ui-modal-body label {
    display: grid;
    gap: 5px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-modal-body textarea {
    width: 100%;
    min-height: 120px;
    box-sizing: border-box;
    resize: vertical;
}

body:where(.wat-app).repair-ui-portal .repair-ui-modal-footer,
body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .quote-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin: 0;
    border-top: 1px solid var(--wat-border);
    background: rgba(255, 255, 255, 0.97);
    padding: 13px 18px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal > .repair-order-booking-mode,
body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal > .repair-order-request-details__stack,
body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal > form {
    margin-right: 18px;
    margin-left: 18px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal > .repair-order-booking-mode {
    grid-template-columns: 37px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    margin-top: 14px;
    padding: 12px 14px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .repair-order-booking-mode__icon {
    width: 37px;
    min-width: 37px;
    max-width: 37px;
    height: 37px;
    border: 0;
    border-radius: 50%;
    background: #eaf4ff;
    color: var(--wat-primary);
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .repair-order-booking-mode__icon :where(svg, i[data-lucide]) {
    width: 18px;
    height: 18px;
    stroke-width: 2.1;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .repair-order-booking-mode .row-label {
    margin: 0 0 4px;
    color: #7a8ba2;
    font-size: 12px;
    font-weight: 750;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .repair-order-booking-mode .row-value {
    margin: 0;
    color: var(--wat-text);
    font-weight: 780;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .repair-order-booking-mode .row-value > small {
    display: block;
    margin-top: 2px;
    color: var(--wat-muted);
    font-weight: 650;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .quote-service > .quote-items {
    margin-top: 0;
    border-left: 0;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal [data-quote-service] > .quote-items {
    gap: 0;
    padding-top: 0;
    padding-bottom: 0;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .quote-device-quote {
    align-items: stretch;
    gap: 0;
    border: 0;
    border-bottom: 1px solid var(--wat-border);
    border-radius: 0;
    background: transparent;
    padding: 10px 0;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .quote-device-quote:last-child {
    border-bottom: 0;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .quote-device-quote__top {
    width: 100%;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .quote-device-quote__identity {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    align-content: start;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .quote-device-quote__price {
    width: 144px;
    min-width: 144px;
    min-height: 40px;
    flex: 0 0 144px;
    justify-content: center;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .quote-amount-input {
    width: 144px;
    height: 40px;
    min-height: 40px;
    flex: 0 0 auto;
    padding: 0 8px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .quote-amount-input input {
    width: auto;
    height: 38px;
    min-width: 0;
    min-height: 38px;
    flex: 1 1 auto;
    padding-top: 0;
    padding-right: 22px;
    padding-bottom: 0;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .quote-breakdown-toggle {
    display: inline-flex;
    width: fit-content;
    min-height: 18px;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin: 5px 0 0;
    color: var(--wat-muted);
    font-size: 12px;
    font-weight: 630;
    line-height: 1.35;
    cursor: pointer;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .quote-breakdown-toggle input {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin: 0;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .quote-breakdown-toggle span {
    white-space: nowrap;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .quote-step-list {
    display: grid;
    gap: 8px;
    margin-top: 2px;
    border-left: 2px solid var(--wat-border-strong);
    background: transparent;
    padding: 0 0 0 12px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .quote-step-list > [data-quote-step-list] {
    display: grid;
    gap: 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .quote-step-row {
    width: 100%;
    gap: 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .quote-step-row > input[type="text"] {
    width: auto;
    height: 40px;
    min-width: 0;
    min-height: 40px;
    flex: 1 1 auto;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .quote-step-row__amount {
    margin-left: 0;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .quote-step-row > .repair-ui-icon-button {
    flex: 0 0 34px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .quote-step-list__add {
    display: flex;
    min-height: 34px;
    align-items: center;
    justify-content: flex-start;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .repair-ui-quote-step-add {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--wat-gradient);
    box-shadow: 0 8px 18px rgba(0, 164, 191, 0.16);
    color: #fff;
    cursor: pointer;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .repair-ui-quote-step-add :where(svg, i[data-lucide]) {
    width: 17px;
    height: 17px;
    stroke-width: 2.1;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .repair-ui-quote-step-add:focus-visible {
    outline: 2px solid var(--wat-primary);
    outline-offset: 3px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .repair-ui-quote-add-button {
    display: inline-flex;
    height: 38px;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 10px;
    background: var(--wat-gradient);
    box-shadow: 0 10px 22px rgba(0, 164, 191, 0.16);
    color: #fff;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 680;
    line-height: 1;
    white-space: nowrap;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .repair-ui-quote-add-button :where(svg, i[data-lucide]) {
    width: 17px;
    height: 17px;
    stroke-width: 2.1;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal > form {
    margin-bottom: 0;
}

body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal > form > .quote-summary-grid {
    width: 100%;
    margin-top: 14px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-shop-modal form {
    display: grid;
    gap: 11px;
}

body:where(.wat-app).repair-ui-portal .repair-ui-shop-modal .repair-ui-modal-footer {
    margin: 2px -18px -16px;
}

/* Responsive behavior */
@media (max-width: 1180px) {
    body:where(.wat-app).repair-ui-portal .repair-ui-order-columns,
body:where(.wat-app).repair-ui-portal .repair-dashboard-grid {
        grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
    }

    body:where(.wat-app).repair-ui-portal .repair-dashboard-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    body:where(.wat-app).repair-ui-portal .repair-ui-order-columns,
body:where(.wat-app).repair-ui-portal .repair-dashboard-grid {
        grid-template-columns: 1fr;
    }

    body:where(.wat-app).repair-ui-portal .repair-ui-order-context {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:where(.wat-app).repair-ui-portal .repair-ui-order-context > :only-child,
body:where(.wat-app).repair-ui-portal .repair-ui-order-context > details,
body:where(.wat-app).repair-ui-portal .repair-ui-order-context > .repair-ui-attachments-card {
        grid-column: 1 / -1;
    }

    body:where(.wat-app).repair-ui-portal .quote-summary-grid,
body:where(.wat-app).repair-ui-portal .repair-ui-chat-shell {
        grid-template-columns: 1fr;
    }

    body:where(.wat-app).repair-ui-portal .repair-ui-chat-composer textarea {
        min-height: 96px;
    }

    body:where(.wat-app).repair-ui-portal .repair-ui-shop-intro {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    body:where(.wat-app).repair-ui-portal .portal-notifications-banner-slot {
        position: static;
        top: auto;
    }

    body:where(.wat-app).repair-ui-portal .portal-notifications-banner {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    body:where(.wat-app).repair-ui-portal .portal-notifications-banner__cta {
        width: 100%;
    }

    body:where(.wat-app).repair-ui-portal .repair-ui-filter-form,
body:where(.wat-app).repair-ui-portal .repair-ui-upload-zone {
        align-items: stretch;
        flex-direction: column;
    }

    body:where(.wat-app).repair-ui-portal .repair-ui-order-list,
body:where(.wat-app).repair-ui-portal .repair-ui-shops-grid {
        grid-template-columns: 1fr;
    }

    body:where(.wat-app).repair-ui-portal .repair-ui-confirm-form {
        grid-template-columns: 1fr;
    }

    body:where(.wat-app).repair-ui-portal .repairer-shops-form .address-row {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    body:where(.wat-app).repair-ui-portal .repairer-shops-form .address-row > button {
        grid-column: 2;
        justify-self: start;
    }

    body:where(.wat-app).repair-ui-portal .repair-ui-settlements-card .table-container {
        border: 0;
        background: transparent;
        overflow: visible;
    }

    body:where(.wat-app).repair-ui-portal .repair-ui-settlements-card table,
body:where(.wat-app).repair-ui-portal .repair-ui-settlements-card tbody,
body:where(.wat-app).repair-ui-portal .repair-ui-settlements-card tr,
body:where(.wat-app).repair-ui-portal .repair-ui-settlements-card td {
        display: block;
        width: 100%;
    }

    body:where(.wat-app).repair-ui-portal .repair-ui-settlements-card thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    body:where(.wat-app).repair-ui-portal .repair-ui-settlements-card tr {
        margin-bottom: 10px;
        border: 1px solid var(--wat-border);
        border-radius: 10px;
        background: #fff;
        padding: 8px 10px;
    }

    body:where(.wat-app).repair-ui-portal .repair-ui-settlements-card td {
        display: grid;
        grid-template-columns: minmax(100px, 0.7fr) minmax(0, 1fr);
        gap: 8px;
        border: 0;
        padding: 5px 0;
        text-align: right;
    }

    body:where(.wat-app).repair-ui-portal .repair-ui-settlements-card td::before {
        color: var(--wat-muted);
        content: attr(data-label);
        font-size: 10.5px;
        font-weight: 630;
        text-align: left;
    }
}

@media (max-width: 560px) {
    body:where(.wat-app).repair-ui-portal .repair-dashboard-metrics,
body:where(.wat-app).repair-ui-portal .repair-ui-order-context {
        grid-template-columns: 1fr;
    }

    body:where(.wat-app).repair-ui-portal .repair-ui-now-card > .repair-ui-command-header:first-child,
body:where(.wat-app).repair-ui-portal .repair-dashboard-command .repair-ui-command-header,
body:where(.wat-app).repair-ui-portal .repair-ui-code-panel,
body:where(.wat-app).repair-ui-portal .repair-ui-panel-header,
body:where(.wat-app).repair-ui-portal .quote-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    body:where(.wat-app).repair-ui-portal .repair-ui-command-status {
        white-space: normal;
    }

    body:where(.wat-app).repair-ui-portal .delivery-code {
        width: 100%;
    }

    body:where(.wat-app).repair-ui-portal .repair-ui-chat-shell {
        gap: 10px;
    }

    body:where(.wat-app).repair-ui-portal .quote-line,
body:where(.wat-app).repair-ui-portal .quote-item-row,
body:where(.wat-app).repair-ui-portal .quote-step-row,
body:where(.wat-app).repair-ui-portal .quote-device-quote__top {
        align-items: stretch;
        flex-direction: column;
    }

    body:where(.wat-app).repair-ui-portal .repair-ui-quote-card .quote-step-row,
body:where(.wat-app).repair-ui-portal .repair-ui-quote-card .quote-service--extras .quote-item-row {
        align-items: center;
        flex-direction: row;
    }

    body:where(.wat-app).repair-ui-portal .quote-pill.ml-auto {
        margin-left: 0;
    }

    body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .quote-amount-input {
        width: 100%;
        flex-basis: auto;
    }

    body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .quote-device-quote__price {
        width: 100%;
        min-width: 0;
        flex-basis: auto;
        align-items: stretch;
    }

    body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .quote-step-row > .repair-ui-icon-button {
        align-self: flex-end;
    }

    body:where(.wat-app).repair-ui-portal .repair-ui-modal-footer,
body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .quote-form-actions,
body:where(.wat-app).repair-ui-portal .repair-ui-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    body:where(.wat-app).repair-ui-portal .repair-ui-modal-footer > *,
body:where(.wat-app).repair-ui-portal .repair-ui-quote-modal .quote-form-actions > *,
body:where(.wat-app).repair-ui-portal .repair-ui-form-actions > * {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:where(.wat-app).repair-ui-portal .repair-notification-landing__spinner {
        animation-duration: 1.6s !important;
    }
}

/* #endregion */

/* #region Canonical Collection patterns shared by Collection and Repair
 * These are the actual Collection components. Repair reuses this contract
 * verbatim; only content, step count, and declared responsive placement vary.
 */

body:where(.wat-app) .collection-patterns {
    --wat-blue: #007fde;
    --wat-blue-deep: #0029a5;
    --wat-mint: #29eec6;
    --wat-teal: #00b49c;
    --panel: #ffffff;
    --border: #dcebea;
    --border-strong: #c8dddc;
    --text: #0b263e;
    --muted: #667b88;
    --soft-shadow: 0 8px 25px rgba(4, 67, 86, 0.055);
    --radius: 12px;
    --font-ui: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --primary-gradient: linear-gradient(135deg, #007dde, #00a4bf);
    --action-shadow: 0 12px 26px rgba(0, 164, 191, 0.17);
    --panel-header-bg: linear-gradient(180deg, #fff, #fbfefe);
    --button-radius: 10px;
    --h1-weight: 760;
    --title-weight: 680;
    --strong-weight: 630;
    --label-weight: 560;
    min-width: 0;
    font-family: var(--font-ui);
    line-height: normal;
    color: var(--text);
}

body:where(.wat-app) .collection-patterns *,
body:where(.wat-app) .collection-patterns *::before,
body:where(.wat-app) .collection-patterns *::after {
    box-sizing: border-box;
}

body:where(.wat-app) .collection-patterns :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-ui);
}

body:where(.wat-app) .collection-patterns .hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 5px;
}

body:where(.wat-app) .collection-patterns .title-line {
    display: flex;
    align-items: center;
    gap: 16px;
}

body:where(.wat-app) .collection-patterns .hero h1 {
    margin: 0;
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 49px;
    font-weight: var(--h1-weight);
    line-height: 0.98;
    letter-spacing: 0;
}

body:where(.wat-app) .collection-patterns .status-pill {
    display: inline-flex;
    height: 42px;
    align-items: center;
    border-radius: 21px;
    padding: 0 18px;
    color: #fff;
    background: var(--primary-gradient);
    box-shadow: var(--action-shadow);
    font-size: 17px;
    font-weight: 820;
}

body:where(.wat-app) .collection-patterns .status-pill.is-cancelled {
    color: #fff;
    background: linear-gradient(135deg, #b42318, #e5484d);
    box-shadow: 0 14px 30px rgba(180, 35, 24, 0.2);
}

body:where(.wat-app) .collection-patterns .meta-line {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 10px;
    color: #3b64aa;
    font-weight: var(--label-weight);
}

body:where(.wat-app) .collection-patterns .meta-line span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body:where(.wat-app) .collection-patterns .meta-line :where(i[data-lucide], svg) {
    width: 16px;
    height: 16px;
}

body:where(.wat-app) .collection-patterns .primary-actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 5px;
}

body:where(.wat-app) .collection-patterns .button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: var(--button-radius);
    padding: 0 18px;
    font: inherit;
    font-weight: var(--strong-weight);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

body:where(.wat-app) .collection-patterns .button :where(i[data-lucide], svg) {
    width: 18px;
    height: 18px;
}

body:where(.wat-app) .collection-patterns .button > :where(.currency, .currency-value) {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

body:where(.wat-app) .collection-patterns .button-primary {
    color: #fff;
    background: var(--primary-gradient);
    box-shadow: var(--action-shadow);
    font-weight: var(--title-weight);
}

body:where(.wat-app) .collection-patterns .button-secondary {
    border: 1px solid #b9d4ff;
    color: var(--wat-blue-deep);
    background: #fff;
    box-shadow: none;
}

body:where(.wat-app) .collection-patterns .button-light {
    border: 1px solid #d6e9ff;
    color: var(--wat-blue-deep);
    background: #edf6ff;
    box-shadow: none;
}

body:where(.wat-app) .collection-patterns .button-danger {
    border: 1px solid #ffd1cc;
    color: #b42318;
    background: #fff1f0;
    box-shadow: none;
}

body:where(.wat-app) .collection-patterns .button:disabled {
    opacity: 0.62;
    box-shadow: none;
    cursor: default;
}

body:where(.wat-app) .collection-patterns .menu-popover {
    display: none;
    position: absolute;
    top: 54px;
    right: 0;
    width: 216px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow);
    z-index: 5;
    padding: 6px;
}

body:where(.wat-app) .collection-patterns .menu-popover.is-open {
    display: block;
}

body:where(.wat-app) .collection-patterns .menu-popover button {
    width: 100%;
    border: 0;
    background: transparent;
    border-radius: 6px;
    padding: 9px 10px;
    color: #365071;
    text-align: left;
    font-weight: 650;
}

body:where(.wat-app) .collection-patterns .menu-popover button:hover {
    background: #edf6ff;
}

body:where(.wat-app) .collection-patterns .menu-popover button.is-danger {
    color: #b94343;
}

body:where(.wat-app) .collection-patterns .menu-popover button.is-success {
    color: #0f7a55;
}

body:where(.wat-app) .collection-patterns .timeline {
    --timeline-step-width: 100px;
    display: block;
    margin: 32px 0 24px;
    padding: 0 58px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}

body:where(.wat-app) .collection-patterns .timeline-track {
    position: relative;
    display: grid;
    align-items: start;
}

body:where(.wat-app) .collection-patterns .timeline-track[data-step-count="15"] {
    --timeline-step-denominator: 14;
    width: max(100%, calc(15 * var(--timeline-step-width)));
    grid-template-columns: repeat(15, minmax(var(--timeline-step-width), 1fr));
}

body:where(.wat-app) .collection-patterns .timeline-track[data-step-count="9"] {
    --timeline-step-denominator: 8;
    width: max(100%, calc(9 * var(--timeline-step-width)));
    grid-template-columns: repeat(9, minmax(var(--timeline-step-width), 1fr));
}

body:where(.wat-app) .collection-patterns .timeline-track[data-step-count="4"] {
    --timeline-step-denominator: 3;
    width: 100%;
    grid-template-columns: repeat(4, minmax(var(--timeline-step-width), 1fr));
}

body:where(.wat-app) .collection-patterns .timeline-track[data-step-count="5"] {
    --timeline-step-denominator: 4;
    width: 100%;
    grid-template-columns: repeat(5, minmax(var(--timeline-step-width), 1fr));
}

body:where(.wat-app) .collection-patterns .timeline-track[data-step-count="6"] {
    --timeline-step-denominator: 5;
    width: 100%;
    grid-template-columns: repeat(6, minmax(var(--timeline-step-width), 1fr));
}

body:where(.wat-app) .collection-patterns .timeline-track[data-step-count="7"] {
    --timeline-step-denominator: 6;
    width: 100%;
    grid-template-columns: repeat(7, minmax(var(--timeline-step-width), 1fr));
}

body:where(.wat-app) .collection-patterns .timeline-track[data-step-count="8"] {
    --timeline-step-denominator: 7;
    width: 100%;
    grid-template-columns: repeat(8, minmax(var(--timeline-step-width), 1fr));
}

body:where(.wat-app) .collection-patterns .portal-lifecycle-track:has(.step:nth-child(2).is-current) {
    --timeline-step-progress: 1.92;
}

body:where(.wat-app) .collection-patterns .portal-lifecycle-track:has(.step:nth-child(3).is-current) {
    --timeline-step-progress: 2.92;
}

body:where(.wat-app) .collection-patterns .portal-lifecycle-track:has(.step:nth-child(4).is-current) {
    --timeline-step-progress: 3.92;
}

body:where(.wat-app) .collection-patterns .portal-lifecycle-track:has(.step:nth-child(5).is-current) {
    --timeline-step-progress: 4.92;
}

body:where(.wat-app) .collection-patterns .portal-lifecycle-track:has(.step:nth-child(6).is-current) {
    --timeline-step-progress: 5.92;
}

body:where(.wat-app) .collection-patterns .portal-lifecycle-track:has(.step:last-child.is-current) {
    --timeline-step-progress: var(--timeline-step-denominator);
}

body:where(.wat-app) .collection-patterns .timeline-track::before,
body:where(.wat-app) .collection-patterns .timeline-track::after {
    position: absolute;
    left: 38px;
    top: 18px;
    height: 3px;
    border-radius: 999px;
    content: "";
}

body:where(.wat-app) .collection-patterns .timeline-track::before {
    right: 38px;
    background: #d7e2ed;
}

body:where(.wat-app) .collection-patterns .timeline-track::after {
    width: calc((100% - 76px) / var(--timeline-step-denominator) * var(--timeline-step-progress, 0.92));
    background: var(--wat-blue);
}

body:where(.wat-app) .collection-patterns .timeline-progress-1 {
    --timeline-step-progress: 0.92;
}

body:where(.wat-app) .collection-patterns .timeline-progress-2 {
    --timeline-step-progress: 1.92;
}

body:where(.wat-app) .collection-patterns .timeline-progress-3 {
    --timeline-step-progress: 2.92;
}

body:where(.wat-app) .collection-patterns .timeline-progress-4 {
    --timeline-step-progress: 3.92;
}

body:where(.wat-app) .collection-patterns .timeline-progress-5 {
    --timeline-step-progress: 4.92;
}

body:where(.wat-app) .collection-patterns .timeline-progress-6 {
    --timeline-step-progress: 5.92;
}

body:where(.wat-app) .collection-patterns .timeline-progress-7 {
    --timeline-step-progress: 6.92;
}

body:where(.wat-app) .collection-patterns .timeline-progress-8 {
    --timeline-step-progress: 7.92;
}

body:where(.wat-app) .collection-patterns .timeline-progress-9 {
    --timeline-step-progress: 8.92;
}

body:where(.wat-app) .collection-patterns .timeline-progress-10 {
    --timeline-step-progress: 9.92;
}

body:where(.wat-app) .collection-patterns .timeline-progress-11 {
    --timeline-step-progress: 10.92;
}

body:where(.wat-app) .collection-patterns .timeline-progress-12 {
    --timeline-step-progress: 11.92;
}

body:where(.wat-app) .collection-patterns .timeline-progress-13 {
    --timeline-step-progress: 12.92;
}

body:where(.wat-app) .collection-patterns .timeline-progress-14 {
    --timeline-step-progress: 13.92;
}

body:where(.wat-app) .collection-patterns .timeline-progress-15 {
    --timeline-step-progress: 14.92;
}

body:where(.wat-app) .collection-patterns .step {
    position: relative;
    z-index: 1;
    display: block;
    min-width: 0;
    border: 0;
    padding: 0 4px;
    color: #728197;
    background: transparent;
    text-align: center;
    text-decoration: none;
    cursor: default;
}

body:where(.wat-app) .collection-patterns .step-dot {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    margin: 0 auto 8px;
    border: 2px solid #c8d6e6;
    border-radius: 50%;
    color: #63768e;
    background: #f9fbfe;
    box-shadow: 0 4px 11px rgba(7, 29, 73, 0.08);
    font-size: 13px;
    font-weight: 850;
}

body:where(.wat-app) .collection-patterns .step.is-current {
    color: var(--wat-blue-deep);
}

body:where(.wat-app) .collection-patterns .step.is-current .step-dot {
    border-color: var(--wat-blue);
    color: #fff;
    background: var(--primary-gradient);
    box-shadow: var(--action-shadow);
}

body:where(.wat-app) .collection-patterns .step.is-complete {
    color: #31577c;
}

body:where(.wat-app) .collection-patterns .step.is-complete .step-dot {
    border-color: #9cd1ff;
    color: var(--wat-blue-deep);
    background: #edf7ff;
    box-shadow: none;
}

body:where(.wat-app) .collection-patterns .step-label {
    display: block;
    min-height: 31px;
    font-size: 12px;
    font-weight: var(--strong-weight);
    line-height: 1.14;
}

body:where(.wat-app) .collection-patterns .step-date {
    display: grid;
    min-height: 23px;
    justify-items: center;
    margin-top: 3px;
}

body:where(.wat-app) .collection-patterns .step-date:empty {
    display: none;
}

body:where(.wat-app) .collection-patterns .step-date .timeline_cell_details {
    display: inline-flex;
    min-width: 74px;
    min-height: 22px;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbe6ff;
    border-radius: 999px;
    margin: 0;
    padding: 0;
    color: var(--wat-blue-deep);
    background: #eef8ff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
}

body:where(.wat-app) .collection-patterns .step-date .timeline_cell_details::before {
    display: none;
}

body:where(.wat-app) .collection-patterns .step-date .timeline_cell_details.--clickable {
    cursor: pointer;
}

body:where(.wat-app) .collection-patterns .step-date .timeline_cell_details.--clickable:hover {
    border-color: #9fd2ff;
    background: #e4f3ff;
}

body:where(.wat-app) .collection-patterns .cancelled-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 13px;
    align-items: start;
    margin: -2px 0 20px;
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #fff5f5, #fff9f1);
    box-shadow: 0 14px 34px rgba(180, 35, 24, 0.08);
}

body:where(.wat-app) .collection-patterns .cancelled-banner-icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    color: #b42318;
    background: #fee2e2;
}

body:where(.wat-app) .collection-patterns .cancelled-banner-icon :where(i[data-lucide], svg) {
    width: 20px;
    height: 20px;
}

body:where(.wat-app) .collection-patterns .cancelled-banner-copy {
    min-width: 0;
}

body:where(.wat-app) .collection-patterns .cancelled-banner-copy h2 {
    margin: 0;
    color: #9f1f34;
    font-size: 16px;
    font-weight: var(--title-weight);
    line-height: 1.25;
}

body:where(.wat-app) .collection-patterns .cancelled-banner-copy p {
    margin: 3px 0 0;
    color: #7f4a4a;
    font-size: 13px;
    font-weight: var(--label-weight);
    line-height: 1.4;
}

body:where(.wat-app) .collection-patterns .cancelled-banner-copy blockquote {
    margin: 9px 0 0;
    border-left: 3px solid #f87171;
    border-radius: 0 8px 8px 0;
    padding: 7px 10px;
    color: #603636;
    background: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: var(--label-weight);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

body:where(.wat-app) .collection-patterns .cancelled-banner.is-warning {
    border-color: #f8d48b;
    background: linear-gradient(135deg, #fffaf0, #fffdf8);
    box-shadow: 0 14px 34px rgba(180, 116, 35, 0.08);
}

body:where(.wat-app) .collection-patterns .cancelled-banner.is-warning .cancelled-banner-icon {
    color: #9a6700;
    background: #fff0c2;
}

body:where(.wat-app) .collection-patterns .cancelled-banner.is-warning .cancelled-banner-copy h2 {
    color: #7a5200;
}

body:where(.wat-app) .collection-patterns .cards {
    display: grid;
    grid-template-columns: 0.98fr 1fr 1.34fr;
    gap: 12px;
    align-items: stretch;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-order-columns {
    grid-template-areas: "details action discussion";
    align-items: start;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-order-context,
body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-discussion-card {
    min-height: 0;
    align-self: start;
}

body:where(.wat-app) .collection-patterns .panel {
    display: flex;
    min-width: 0;
    min-height: 648px;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--soft-shadow);
}

body:where(.wat-app) .collection-patterns .panel-blue {
    border-top: 4px solid var(--wat-blue);
}

body:where(.wat-app) .collection-patterns .panel-teal {
    position: relative;
    border-top: 0;
    border-color: rgba(0, 180, 156, 0.46);
    background: linear-gradient(180deg, #fff, #f2fffc);
    box-shadow:
        0 24px 62px rgba(0, 127, 222, 0.13),
        0 0 0 5px rgba(0, 180, 156, 0.08),
        0 0 0 1px rgba(0, 180, 156, 0.12);
    transform: translateY(-2px);
}

body:where(.wat-app) .collection-patterns .panel-teal::before {
    position: absolute;
    z-index: 0;
    inset: 0;
    background:
        radial-gradient(circle at 50% 0%, rgba(0, 180, 156, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(0, 180, 156, 0.07), transparent 42%);
    content: "";
    pointer-events: none;
}

body:where(.wat-app) .collection-patterns .panel-green {
    border-top: 4px solid var(--wat-mint);
}

body:where(.wat-app) .collection-patterns .panel-header {
    position: static;
    top: auto;
    z-index: auto;
    display: flex;
    width: 100%;
    height: auto;
    align-items: flex-start;
    gap: 13px;
    margin: 0;
    border-bottom: 1px solid var(--border);
    padding: 14px 18px 12px;
    background: var(--panel-header-bg);
    font-family: var(--font-ui);
    backdrop-filter: none;
}

body:where(.wat-app) .collection-patterns .panel-title {
    min-width: 0;
    text-align: left;
}

body:where(.wat-app) .collection-patterns .panel-title h2 {
    margin: 1px 0 3px;
    font-size: 16px;
    font-weight: var(--title-weight);
    line-height: 1.12;
}

body:where(.wat-app) .collection-patterns .panel-title p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    font-weight: var(--label-weight);
}

body:where(.wat-app) .collection-patterns .panel-body {
    position: relative;
    z-index: 1;
    min-width: 0;
    flex: 1;
    padding: 14px;
}

body:where(.wat-app) .collection-patterns .panel-teal .panel-header {
    position: relative;
    z-index: 1;
    border-bottom: 0;
    padding-top: 17px;
    padding-bottom: 16px;
    color: #fff;
    background: linear-gradient(135deg, #052965 0%, #006fcf 62%, #00b49c 100%);
}

body:where(.wat-app) .collection-patterns .panel-teal .panel-title :where(h2, p) {
    color: #fff;
}

body:where(.wat-app) .collection-patterns .panel-teal .panel-title p {
    opacity: 0.84;
}

body:where(.wat-app) .collection-patterns .panel-teal .panel-body {
    background: linear-gradient(180deg, rgba(239, 255, 251, 0.94), #fff 142px);
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-order-main {
    grid-area: action;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-order-context {
    grid-area: details;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-discussion-card {
    grid-area: discussion;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-current-action-body {
    display: block;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-current-action-supporting {
    display: grid;
    gap: 12px;
    margin-top: 12px;
    padding: 0;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-current-action-supporting:empty {
    display: none;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-current-action-supporting > .card {
    margin: 0;
    border-radius: 10px;
    box-shadow: none;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-current-action-supporting .quote-card-header {
    align-items: flex-start;
    flex-wrap: wrap;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-current-action-supporting .quote-summary-grid {
    grid-template-columns: minmax(0, 1fr);
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-deposit-card {
    display: grid;
    gap: 12px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-deposit-card .state-hero-top {
    margin-bottom: 0;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-deposit-amount {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 12px;
    background: #fff;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-deposit-amount > span {
    color: var(--muted);
    font-size: 12px;
    font-weight: var(--strong-weight);
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-deposit-amount > strong {
    color: var(--text);
    font-size: 28px;
    font-weight: var(--title-weight);
    letter-spacing: -0.03em;
    line-height: 1;
    white-space: nowrap;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-deposit-protection {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    margin: 0;
    color: var(--muted);
    line-height: 1.4;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-deposit-protection svg {
    width: 18px;
    height: 18px;
    color: var(--wat-blue);
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-deposit-card > .workflow-actions {
    margin-top: 0;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-deposit-card > .workflow-actions > form {
    flex: 1;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-deposit-card > .workflow-actions .button {
    width: 100%;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-request-panel-body {
    display: grid;
    align-content: start;
    padding: 14px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-request-section {
    min-width: 0;
    border-bottom: 1px solid var(--border);
    padding: 14px 0;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-request-section:first-child {
    padding-top: 0;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-request-section:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-discussion-body {
    display: flex;
    min-height: 0;
    flex-direction: column;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-chat-shell {
    display: grid;
    min-height: 0;
    flex: 1;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(260px, 1fr) auto;
    gap: 12px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .chat.repair-ui-chat {
    min-height: 260px;
    max-height: 430px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-chat-composer textarea {
    min-height: 96px;
}

body:where(.wat-app) .collection-patterns .secondary-accordions {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

body:where(.wat-app) .collection-patterns .secondary-accordion {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--button-radius);
    background: #fff;
    box-shadow: var(--soft-shadow);
}

body:where(.wat-app) .collection-patterns .secondary-accordion > summary {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    color: #3d5576;
    font-weight: 760;
    list-style: none;
    cursor: pointer;
}

body:where(.wat-app) .collection-patterns .secondary-accordion > summary::-webkit-details-marker {
    display: none;
}

body:where(.wat-app) .collection-patterns .secondary-accordion[open] > summary .secondary-chevron {
    transform: rotate(180deg);
}

body:where(.wat-app) .collection-patterns .secondary-chevron {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    transition: transform 160ms ease;
}

body:where(.wat-app) .collection-patterns .accordion-label {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 11px;
    text-align: left;
}

body:where(.wat-app) .collection-patterns .accordion-label :where(i[data-lucide], svg) {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

body:where(.wat-app) .collection-patterns .accordion-title {
    display: grid;
    min-width: 0;
    gap: 1px;
}

body:where(.wat-app) .collection-patterns .secondary-accordion-body {
    border-top: 1px solid var(--border);
    padding: 14px;
}

body:where(.wat-app) .collection-patterns .developer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.75fr);
    gap: 14px;
}

body:where(.wat-app) .collection-patterns .repair-request-developer-area .developer-status-section {
    margin-top: 0;
    margin-bottom: 14px;
}

body:where(.wat-app) .collection-patterns .repair-request-developer-area .developer-log-accordion {
    width: 100%;
    align-self: start;
}

body:where(.wat-app) .collection-patterns .developer-section {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    background: #fbfdff;
}

body:where(.wat-app) .collection-patterns .developer-section + .developer-section {
    margin-top: 14px;
}

body:where(.wat-app) .collection-patterns .developer-section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    color: var(--text);
}

body:where(.wat-app) .collection-patterns .developer-section-title :where(i[data-lucide], svg) {
    width: 18px;
    height: 18px;
    color: var(--wat-blue-deep);
}

body:where(.wat-app) .collection-patterns .developer-section-title h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 820;
    letter-spacing: 0;
}

body:where(.wat-app) .collection-patterns .developer-muted {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 720;
}

body:where(.wat-app) .collection-patterns .developer-form,
body:where(.wat-app) .collection-patterns .developer-status-control {
    display: grid;
    min-width: 0;
    gap: 10px;
}

body:where(.wat-app) .collection-patterns .developer-form label,
body:where(.wat-app) .collection-patterns .developer-status-control {
    display: grid;
    gap: 6px;
    color: var(--text);
    font-weight: 760;
}

body:where(.wat-app) .collection-patterns .developer-select {
    width: 100%;
    min-height: 40px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    outline: none;
    padding: 0 11px;
    color: var(--text);
    background: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
}

body:where(.wat-app) .collection-patterns .developer-select:focus {
    border-color: #78b9ff;
    box-shadow: 0 0 0 3px rgba(0, 127, 222, 0.13);
}

body:where(.wat-app) .collection-patterns .developer-status-section {
    margin-top: 14px;
}

body:where(.wat-app) .collection-patterns .developer-status-updates {
    margin-top: 12px;
}

body:where(.wat-app) .collection-patterns .developer-status-updates ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body:where(.wat-app) .collection-patterns .developer-status-updates li {
    display: flex;
    min-height: 34px;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    border-radius: 8px;
    padding: 7px 9px;
    color: #435b7b;
    background: #f8fbff;
    font-size: 13px;
}

body:where(.wat-app) .collection-patterns .developer-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 10px;
}

body:where(.wat-app) .collection-patterns .developer-actions .button,
body:where(.wat-app) .collection-patterns .developer-form .button {
    min-height: 38px;
    padding: 0 13px;
    font-size: 13px;
}

body:where(.wat-app) .collection-patterns .developer-actions .button :where(i[data-lucide], svg),
body:where(.wat-app) .collection-patterns .developer-form .button :where(i[data-lucide], svg) {
    width: 16px;
    height: 16px;
}

@media (max-width: 1320px) {
    body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-order-columns {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "details action"
            "discussion discussion";
        align-items: stretch;
    }
}

@media (max-width: 1180px) {
    body:where(.wat-app) .collection-patterns .hero {
        flex-wrap: wrap;
        gap: 18px;
    }

    body:where(.wat-app) .collection-patterns .hero h1 {
        font-size: 44px;
    }

    body:where(.wat-app) .collection-patterns .status-pill {
        height: 38px;
        padding: 0 16px;
        font-size: 16px;
    }

    body:where(.wat-app) .collection-patterns .primary-actions {
        margin-left: auto;
    }

    body:where(.wat-app) .collection-patterns .timeline {
        margin: 28px -24px 20px;
        padding: 0 24px 8px;
    }

    body:where(.wat-app) .collection-patterns .timeline-track {
        --timeline-mobile-edge: calc((100vw - 82px) / 2);
        width: max-content;
        padding: 0 var(--timeline-mobile-edge);
    }

    body:where(.wat-app) .collection-patterns .timeline-track[data-step-count="15"] {
        min-width: 1230px;
        grid-template-columns: repeat(15, 82px);
    }

    body:where(.wat-app) .collection-patterns .timeline-track[data-step-count="9"] {
        min-width: 738px;
        grid-template-columns: repeat(9, 82px);
    }

    body:where(.wat-app) .collection-patterns .timeline-track[data-step-count="4"] {
        min-width: 328px;
        grid-template-columns: repeat(4, 82px);
    }

    body:where(.wat-app) .collection-patterns .timeline-track[data-step-count="5"] {
        min-width: 410px;
        grid-template-columns: repeat(5, 82px);
    }

    body:where(.wat-app) .collection-patterns .timeline-track[data-step-count="6"] {
        min-width: 492px;
        grid-template-columns: repeat(6, 82px);
    }

    body:where(.wat-app) .collection-patterns .timeline-track[data-step-count="7"] {
        min-width: 574px;
        grid-template-columns: repeat(7, 82px);
    }

    body:where(.wat-app) .collection-patterns .timeline-track[data-step-count="8"] {
        min-width: 656px;
        grid-template-columns: repeat(8, 82px);
    }

    body:where(.wat-app) .collection-patterns .timeline-track::before,
    body:where(.wat-app) .collection-patterns .timeline-track::after {
        left: calc(var(--timeline-mobile-edge) + 41px);
        top: 15px;
    }

    body:where(.wat-app) .collection-patterns .timeline-track::before {
        right: calc(var(--timeline-mobile-edge) + 41px);
    }

    body:where(.wat-app) .collection-patterns .timeline-track::after {
        width: calc(82px * var(--timeline-step-progress, 0.92));
    }

    body:where(.wat-app) .collection-patterns .step {
        padding: 0 3px;
    }

    body:where(.wat-app) .collection-patterns .step-dot {
        width: 30px;
        height: 30px;
        margin-bottom: 6px;
        font-size: 12px;
    }

    body:where(.wat-app) .collection-patterns .step-label {
        min-height: 27px;
        font-size: 11px;
        line-height: 1.12;
    }

    body:where(.wat-app) .collection-patterns .panel {
        min-height: 0;
    }
}

@media (max-width: 900px) {
    body:where(.wat-app) .collection-patterns .hero {
        display: grid;
        gap: 13px;
        margin-bottom: 0;
    }

    body:where(.wat-app) .collection-patterns .title-line {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 9px;
    }

    body:where(.wat-app) .collection-patterns .hero h1 {
        font-size: 35px;
        line-height: 1;
    }

    body:where(.wat-app) .collection-patterns .status-pill {
        height: 32px;
        border-radius: 999px;
        padding: 0 13px;
        font-size: 14px;
    }

    body:where(.wat-app) .collection-patterns .meta-line {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
        margin-top: 8px;
    }

    body:where(.wat-app) .collection-patterns .primary-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 9px;
        margin-left: 0;
        padding-top: 0;
    }

    body:where(.wat-app) .collection-patterns .primary-actions .button {
        width: 100%;
    }

    body:where(.wat-app) .collection-patterns .menu-popover {
        top: 50px;
        right: 0;
        width: min(252px, calc(100vw - 24px));
    }

    body:where(.wat-app) .collection-patterns .button {
        min-height: 42px;
        padding: 0 13px;
        font-size: 13px;
    }

    body:where(.wat-app) .collection-patterns .timeline {
        margin: 22px -12px 16px;
        padding: 0 12px 8px;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-order-columns {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-order-context {
        order: 1;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-order-main {
        order: 2;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-discussion-card {
        order: 3;
    }

    body:where(.wat-app) .collection-patterns .panel {
        width: 100%;
        min-height: 0;
        transform: none;
    }

    body:where(.wat-app) .collection-patterns .panel-teal {
        box-shadow:
            0 18px 42px rgba(0, 127, 222, 0.12),
            0 0 0 4px rgba(0, 180, 156, 0.08);
    }

    body:where(.wat-app) .collection-patterns .panel-header,
    body:where(.wat-app) .collection-patterns .panel-teal .panel-header {
        padding: 13px 14px 12px;
    }

    body:where(.wat-app) .collection-patterns .panel-title h2 {
        font-size: 15px;
    }

    body:where(.wat-app) .collection-patterns .panel-title p {
        font-size: 12px;
    }

    body:where(.wat-app) .collection-patterns .panel-body,
    body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-request-panel-body {
        padding: 12px;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-request-section {
        padding: 12px 0;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-request-section:first-child {
        padding-top: 0;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-request-section:last-child {
        padding-bottom: 0;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-chat-shell {
        grid-template-rows: minmax(220px, auto) auto;
    }

    body:where(.wat-app) .collection-patterns .secondary-accordions {
        margin-top: 12px;
    }

    body:where(.wat-app) .collection-patterns .developer-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* #endregion */

/* #region Shared WAT application shell - canonical Collection structure */

body:where(.wat-app).wat-app-shell {
    --wat-blue: #007fde;
    --wat-blue-deep: #0029a5;
    --wat-navy: #053854;
    --wat-mint: #29eec6;
    --wat-teal: #00b49c;
    --bg: #f7fbfb;
    --panel: #ffffff;
    --panel-soft: #f8fbff;
    --border: #dcebea;
    --border-strong: #c8dddc;
    --text: #0b263e;
    --muted: #667b88;
    --faint: #9caabe;
    --shadow: 0 18px 44px rgba(4, 67, 86, 0.065);
    --soft-shadow: 0 8px 25px rgba(4, 67, 86, 0.055);
    --radius: 12px;
    --sidebar: 216px;
    --font-ui: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --topbar-bg: rgba(255, 255, 255, 0.9);
    --sidebar-bg: rgba(255, 255, 255, 0.93);
    --primary-gradient: linear-gradient(135deg, #007dde, #00a4bf);
    --action-shadow: 0 12px 26px rgba(0, 164, 191, 0.17);
    --panel-header-bg: linear-gradient(180deg, #fff, #fbfefe);
    --message-bg: linear-gradient(135deg, #effff9, #f7fdff);
    --message-border: #bfece2;
    --stats-bg: linear-gradient(180deg, #f4fbff, #f0fbf8);
    --nav-active-bg: #e2f2ff;
    --button-radius: 10px;
    --h1-weight: 760;
    --title-weight: 680;
    --strong-weight: 630;
    --label-weight: 560;
    min-width: 1240px;
    margin: 0;
    color: var(--text);
    background:
        linear-gradient(180deg, rgba(0, 127, 222, 0.05), transparent 280px),
        var(--bg);
    background-repeat: no-repeat;
    font-family: var(--font-ui);
    font-size: 14px;
}

body:where(.wat-app).wat-app-shell *,
body:where(.wat-app).wat-app-shell *::before,
body:where(.wat-app).wat-app-shell *::after {
    box-sizing: border-box;
}

body:where(.wat-app).wat-app-shell [hidden],
body:where(.wat-app).wat-app-shell .hidden {
    display: none !important;
}

body:where(.wat-app).wat-app-shell :is(button, input, textarea) {
    font: inherit;
}

body:where(.wat-app).wat-app-shell button {
    cursor: pointer;
}

body:where(.wat-app).wat-app-shell .app {
    display: grid;
    grid-template-columns: var(--sidebar) minmax(0, 1fr);
    min-height: 100vh;
}

body:where(.wat-app).wat-app-shell .sidebar {
    position: sticky;
    top: 0;
    display: flex;
    width: auto;
    max-width: none;
    height: 100vh;
    flex-direction: column;
    gap: 22px;
    border-right: 1px solid var(--border);
    padding: 24px 16px 18px;
    background: rgba(255, 255, 255, 0.92);
}

body:where(.wat-app).wat-app-shell :is(.mobile-menu-button, .mobile-sidebar-close, .mobile-sidebar-backdrop) {
    display: none;
}

body:where(.wat-app).wat-app-shell .brand {
    display: flex;
    height: 42px;
    align-items: center;
    padding: 0 4px;
}

body:where(.wat-app).wat-app-shell .brand img {
    display: block;
    width: 126px;
    height: auto;
}

body:where(.wat-app).wat-app-shell .nav {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    gap: 32px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
}

body:where(.wat-app).wat-app-shell .nav-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body:where(.wat-app).wat-app-shell .nav-title {
    margin: 0 0 8px;
    padding: 0;
    color: #71819a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

body:where(.wat-app).wat-app-shell .nav-group-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 0;
    border-radius: 8px;
    padding: 3px 8px;
    color: inherit;
    background: transparent;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-transform: inherit;
    transition: background 0.12s ease, color 0.12s ease;
}

body:where(.wat-app).wat-app-shell .nav-group-toggle:hover {
    color: #405676;
    background: #edf5ff;
}

body:where(.wat-app).wat-app-shell .nav-group-chevron {
    display: inline-block;
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    opacity: 0.82;
    transform: rotate(45deg) translateY(-1px);
    transition: transform 0.14s ease;
}

body:where(.wat-app).wat-app-shell .nav-group.is-collapsed .nav-group-chevron {
    transform: rotate(-45deg);
}

body:where(.wat-app).wat-app-shell .nav-group-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body:where(.wat-app).wat-app-shell .nav-button {
    display: flex;
    width: 100%;
    min-height: 36px;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: 8px;
    padding: 8px 10px;
    color: #405676;
    background: transparent;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
}

body:where(.wat-app).wat-app-shell .nav-button:hover {
    color: var(--wat-blue-deep);
    background: #edf5ff;
}

body:where(.wat-app).wat-app-shell .nav-button.is-active {
    color: var(--wat-blue-deep);
    background: #dcecff;
    box-shadow: inset 3px 0 0 var(--wat-blue);
}

body:where(.wat-app).wat-app-shell :is(.nav-button, .mini-icon, .icon-chip) svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.1;
}

body:where(.wat-app).wat-app-shell .content {
    min-width: 0;
}

body:where(.wat-app).wat-app-shell .topbar {
    display: flex;
    width: auto;
    height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    border-bottom: 1px solid var(--border);
    padding: 0 32px;
    background: rgba(255, 255, 255, 0.88);
    font-family: var(--font-ui);
}

body:where(.wat-app).wat-app-shell .breadcrumbs {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    color: #355075;
    font-weight: 650;
    white-space: nowrap;
}

body:where(.wat-app).wat-app-shell .breadcrumbs :is(a, span, b) {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

body:where(.wat-app).wat-app-shell .breadcrumbs b {
    color: var(--text);
}

body:where(.wat-app).wat-app-shell .breadcrumbs a {
    color: inherit;
    text-decoration: none;
}

body:where(.wat-app).wat-app-shell .breadcrumbs a:hover {
    color: var(--wat-blue-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body:where(.wat-app).wat-app-shell .top-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

body:where(.wat-app).wat-app-shell .search {
    display: flex;
    width: 354px;
    height: 40px;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 0 12px;
    color: #7b8da5;
    background: #fff;
    box-shadow: 0 5px 16px rgba(7, 29, 73, 0.03);
}

body:where(.wat-app).wat-app-shell .search[data-repair-admin-header-search][hidden] {
    display: none;
}

body:where(.wat-app).wat-app-shell .search input {
    width: auto;
    min-width: 0;
    min-height: 0;
    flex: 1;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    box-shadow: none;
}

body:where(.wat-app).wat-app-shell .search input:focus {
    border-color: transparent;
    box-shadow: none;
}

body:where(.wat-app).wat-app-shell .search > :where(svg, .kbd) {
    flex: 0 0 auto;
}

body:where(.wat-app).wat-app-shell .kbd {
    min-width: 24px;
    border: 1px solid #c7d6e6;
    border-radius: 6px;
    padding: 2px 6px;
    color: #7c8aa0;
    background: #f8fbff;
    font-weight: 700;
    text-align: center;
}

body:where(.wat-app).wat-app-shell details.avatar-menu {
    position: relative;
    margin: 0;
    padding: 0;
    background: transparent;
}

body:where(.wat-app).wat-app-shell .avatar-menu > summary.avatar {
    position: static;
    display: flex;
    width: auto;
    height: auto;
    aspect-ratio: auto;
    align-items: center;
    gap: 10px;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 0;
    color: var(--text);
    background: transparent;
    font-weight: 750;
    list-style: none;
    cursor: pointer;
}

body:where(.wat-app).wat-app-shell .avatar-menu > summary.avatar::before {
    display: none;
}

body:where(.wat-app).wat-app-shell .avatar-menu > summary.avatar::-webkit-details-marker {
    display: none;
}

body:where(.wat-app).wat-app-shell .avatar-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: #eaf4ff;
    box-shadow: 0 9px 20px rgba(0, 127, 222, 0.18);
}

body:where(.wat-app).wat-app-shell .avatar span {
    display: block;
    margin-top: 2px;
    color: #728197;
    font-size: 12px;
    font-weight: 600;
}

body:where(.wat-app).wat-app-shell .avatar > svg {
    width: 18px;
    height: 18px;
}

body:where(.wat-app).wat-app-shell .avatar-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 80;
    width: 220px;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 42px rgba(7, 29, 73, 0.14);
}

body:where(.wat-app).wat-app-shell .avatar-dropdown::before {
    position: absolute;
    top: -5px;
    right: 18px;
    width: 10px;
    height: 10px;
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.98);
    content: "";
    transform: rotate(45deg);
}

body:where(.wat-app).wat-app-shell :is(.avatar-menu-link, .avatar-menu-button) {
    display: flex;
    width: 100%;
    min-height: 36px;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: 8px;
    padding: 8px 10px;
    color: #405676;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
}

body:where(.wat-app).wat-app-shell :is(.avatar-menu-link, .avatar-menu-button):hover {
    color: var(--wat-blue-deep);
    background: #edf5ff;
}

body:where(.wat-app).wat-app-shell .avatar-dropdown-separator {
    height: 1px;
    margin: 6px 4px;
    background: var(--border);
}

body:where(.wat-app).wat-app-shell .main {
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 28px 32px 34px;
}

body:where(.wat-app).wat-app-shell .main > .portal_content {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 0;
    overflow: visible;
    align-self: stretch;
    border-radius: 0;
    padding: 0;
    background: transparent;
}

body:where(.wat-app).wat-app-shell .main > .portal_content > .repair-ui-order-page {
    width: 100%;
    max-width: none;
}

@media (max-width: 1320px) {
    body:where(.wat-app).wat-app-shell {
        min-width: 1120px;
    }

    body:where(.wat-app).wat-app-shell :is(.main, .topbar) {
        padding-right: 24px;
        padding-left: 24px;
    }
}

@media (max-width: 1180px) {
    body:where(.wat-app).wat-app-shell {
        width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    body:where(.wat-app).wat-app-shell.is-mobile-menu-open {
        overflow: hidden;
    }

    body:where(.wat-app).wat-app-shell .app {
        display: block;
        min-height: 100vh;
    }

    body:where(.wat-app).wat-app-shell :is(.content, .main) {
        width: 100%;
        min-width: 0;
    }

    body:where(.wat-app).wat-app-shell .sidebar {
        position: fixed;
        z-index: 45;
        inset: 0 auto 0 0;
        width: min(318px, calc(100vw - 42px));
        max-width: none;
        height: 100dvh;
        padding: 18px 14px;
        transform: translateX(-105%);
        transition: transform 0.18s ease;
        box-shadow: 22px 0 46px rgba(6, 25, 68, 0.18);
    }

    body:where(.wat-app).wat-app-shell.is-mobile-menu-open .sidebar {
        transform: translateX(0);
    }

    body:where(.wat-app).wat-app-shell .mobile-sidebar-backdrop {
        position: fixed;
        z-index: 44;
        inset: 0;
        border: 0;
        background: rgba(4, 22, 50, 0.34);
    }

    body:where(.wat-app).wat-app-shell.is-mobile-menu-open .mobile-sidebar-backdrop {
        display: block;
    }

    body:where(.wat-app).wat-app-shell :is(.mobile-menu-button, .mobile-sidebar-close) {
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border-strong);
        border-radius: 10px;
        padding: 0;
        color: var(--text);
        background: #fff;
        box-shadow: 0 8px 18px rgba(7, 29, 73, 0.06);
    }

    body:where(.wat-app).wat-app-shell .mobile-menu-button {
        display: inline-flex;
        flex: 0 0 auto;
    }

    body:where(.wat-app).wat-app-shell .mobile-sidebar-close {
        position: absolute;
        top: 18px;
        right: 14px;
        display: inline-flex;
    }

    body:where(.wat-app).wat-app-shell .brand {
        height: 40px;
        padding-right: 48px;
    }

    body:where(.wat-app).wat-app-shell .brand img {
        width: 112px;
    }

    body:where(.wat-app).wat-app-shell .topbar {
        position: sticky;
        top: 0;
        z-index: 30;
        height: 60px;
        justify-content: flex-start;
        gap: 14px;
        padding: 9px 22px;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(12px);
    }

    body:where(.wat-app).wat-app-shell .breadcrumbs {
        min-width: 0;
        flex: 1 1 auto;
    }

    body:where(.wat-app).wat-app-shell .breadcrumbs b {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body:where(.wat-app).wat-app-shell .top-actions {
        min-width: 0;
        flex: 0 1 auto;
        gap: 12px;
    }

    body:where(.wat-app).wat-app-shell .search {
        width: clamp(240px, 34vw, 330px);
    }

    body:where(.wat-app).wat-app-shell .avatar div,
    body:where(.wat-app).wat-app-shell .avatar > svg {
        display: none;
    }

    body:where(.wat-app).wat-app-shell .main {
        padding: 24px 24px 30px;
    }
}

@media (max-width: 900px) {
    body:where(.wat-app).wat-app-shell {
        font-size: 13px;
    }

    body:where(.wat-app).wat-app-shell .nav {
        gap: 28px;
        padding-right: 2px;
    }

    body:where(.wat-app).wat-app-shell .nav-button {
        min-height: 40px;
        font-size: 13px;
    }

    body:where(.wat-app).wat-app-shell .topbar {
        min-height: 58px;
        height: auto;
        gap: 10px;
        padding: 8px 12px;
    }

    body:where(.wat-app).wat-app-shell .breadcrumbs {
        flex: 1;
        gap: 0;
    }

    body:where(.wat-app).wat-app-shell .breadcrumbs :is(span, a) {
        display: none;
    }

    body:where(.wat-app).wat-app-shell .breadcrumbs b {
        display: block;
        font-size: 14px;
    }

    body:where(.wat-app).wat-app-shell .top-actions {
        margin-left: auto;
        gap: 0;
    }

    body:where(.wat-app).wat-app-shell .search,
    body:where(.wat-app).wat-app-shell .avatar div,
    body:where(.wat-app).wat-app-shell .avatar > svg {
        display: none;
    }

    body:where(.wat-app).wat-app-shell .main {
        padding: 16px 12px 22px;
    }
}

/* #endregion */

/* #region Collection primitives reused verbatim by Repair */

body:where(.wat-app) .collection-patterns .review-list {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}

body:where(.wat-app) .collection-patterns .review-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    border-bottom: 1px solid var(--border);
    padding: 12px 14px;
}

body:where(.wat-app) .collection-patterns .review-row > div:last-child {
    min-width: 0;
}

body:where(.wat-app) .collection-patterns .review-row:last-child {
    border-bottom: 0;
}

body:where(.wat-app) .collection-patterns .row-label {
    margin: 0 0 4px;
    color: #7a8ba2;
    font-size: 12px;
    font-weight: 750;
}

body:where(.wat-app) .collection-patterns .row-value {
    margin: 0;
    color: var(--text);
    font-weight: 780;
    line-height: 1.36;
    overflow-wrap: anywhere;
}

body:where(.wat-app) .collection-patterns .row-value small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-weight: 650;
}

body:where(.wat-app) .collection-patterns .mini-icon {
    display: grid;
    width: 37px;
    height: 37px;
    place-items: center;
    border-radius: 50%;
    color: var(--wat-blue);
    background: #eaf4ff;
}

body:where(.wat-app) .collection-patterns .workflow-stack {
    display: grid;
    gap: 14px;
}

body:where(.wat-app) .collection-patterns .state-hero-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    background: linear-gradient(135deg, #f7fcff, #f4fffb);
}

body:where(.wat-app) .collection-patterns .state-hero-card > .workflow-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

body:where(.wat-app) .collection-patterns .state-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

body:where(.wat-app) .collection-patterns .state-hero-title {
    margin: 0;
    font-size: 16px;
    font-weight: var(--title-weight);
    line-height: 1.2;
}

body:where(.wat-app) .collection-patterns .state-hero-copy {
    margin: 4px 0 0;
    color: var(--muted);
    font-weight: var(--label-weight);
    line-height: 1.45;
}

body:where(.wat-app) .collection-patterns .state-badge {
    display: inline-flex;
    min-height: 28px;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 0 9px;
    color: #096b59;
    background: #e7f9f3;
    font-size: 12px;
    font-weight: var(--strong-weight);
}

body:where(.wat-app) .collection-patterns .state-badge.is-waiting {
    color: #87520b;
    background: #fff5df;
}

body:where(.wat-app) .collection-patterns .state-badge.is-neutral {
    color: #4c617a;
    background: #eef4f8;
}

body:where(.wat-app) .collection-patterns .state-badge svg {
    width: 14px;
    height: 14px;
}

body:where(.wat-app) .collection-patterns .workflow-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

body:where(.wat-app) .collection-patterns .field-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 11px 12px;
    background: #fff;
}

body:where(.wat-app) .collection-patterns .field-card span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: var(--label-weight);
}

body:where(.wat-app) .collection-patterns .field-card b {
    display: block;
    color: var(--text);
    font-weight: var(--strong-weight);
    line-height: 1.25;
    overflow-wrap: anywhere;
}

body:where(.wat-app) .collection-patterns .panel-teal .state-hero-card {
    border-color: #93e8db;
    background: linear-gradient(145deg, #effffa, #fff);
    box-shadow:
        0 16px 36px rgba(0, 180, 156, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-order-booking-mode {
    align-items: center;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 13px;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 12px 14px;
    background: #fff;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-order-booking-mode__icon {
    width: 37px;
    min-width: 37px;
    max-width: 37px;
    height: 37px;
    border: 0;
    border-radius: 50%;
    color: var(--wat-blue);
    background: #eaf4ff;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-order-booking-mode__context {
    display: block;
    margin-top: 4px;
    border: 0;
    padding: 0;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-order-booking-mode__context-label {
    color: var(--muted);
    font-size: inherit;
    font-weight: 650;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-order-booking-mode__context-label::after {
    margin-right: 4px;
    content: ":";
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-order-booking-mode__context-value {
    color: var(--text);
    font-size: inherit;
    font-weight: 650;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-request-panel-body {
    display: block;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-review-content {
    font-weight: 400;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-chat-empty {
    width: 100%;
    min-height: 0;
    flex: 1;
    align-self: stretch;
    place-items: center;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .chat.repair-ui-chat {
    align-items: stretch;
}

body:where(.wat-app) .collection-patterns details.secondary-accordion {
    margin: 0;
    padding: 0;
}

@media (max-width: 900px) {
    body:where(.wat-app) .collection-patterns .review-row {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 10px;
        padding: 11px 12px;
    }

    body:where(.wat-app) .collection-patterns .mini-icon {
        width: 32px;
        height: 32px;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .repair-order-booking-mode {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 10px;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .repair-order-booking-mode__icon {
        width: 32px;
        min-width: 32px;
        max-width: 32px;
        height: 32px;
    }

    body:where(.wat-app) .collection-patterns .mini-icon svg {
        width: 16px;
        height: 16px;
    }

    body:where(.wat-app) .collection-patterns .panel-teal .state-hero-card {
        width: min(100%, 390px);
        margin-inline: auto;
    }

    body:where(.wat-app) .collection-patterns .workflow-meta-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body:where(.wat-app) .collection-patterns .state-hero-top {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* #endregion */

/* #region Authenticated portal foundations */

body:where(.wat-app).wat-app-shell .collection-patterns {
    --portal-ui-gap: 16px;
}

body:where(.wat-app).wat-app-shell .collection-patterns > :first-child {
    margin-top: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns > :last-child {
    margin-bottom: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns :where(.hero, .panel, .secondary-accordions, .portal-ui-page-stack) + :where(.panel, .cards, .secondary-accordions, .portal-ui-page-stack) {
    margin-top: var(--portal-ui-gap);
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-page-stack {
    display: grid;
    gap: var(--portal-ui-gap);
    min-width: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-page-stack > * {
    min-width: 0;
    margin: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-focus-panel {
    margin-top: var(--portal-ui-gap);
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-stat-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-stat-grid .field-card {
    min-height: 76px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-stat-grid .field-card strong {
    display: block;
    margin-top: 5px;
    color: var(--text);
    font-size: 25px;
    line-height: 1;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-stat-grid .field-card.is-attention {
    border-color: #f7c977;
    background: #fff9e9;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-dashboard-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--portal-ui-gap);
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-dashboard-panels .panel {
    min-height: 100%;
    margin-top: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .repair-ui-review-content,
body:where(.wat-app).wat-app-shell .collection-patterns .review-row > div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-entity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 12px;
    min-width: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-entity-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-entity-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-soft);
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-entity-heading > div {
    display: grid;
    min-width: 0;
    gap: 2px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-entity-heading strong {
    overflow: hidden;
    color: var(--text);
    font-size: 14px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-entity-heading span:not(.mini-icon) {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-entity-body {
    display: grid;
    align-content: start;
    gap: 10px;
    min-height: 94px;
    padding: 14px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-entity-body p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--wat-blue);
    background: #fff;
    cursor: pointer;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-icon-button:hover {
    border-color: #afd4f5;
    background: #edf7ff;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-checklist {
    display: grid;
    gap: 5px;
    margin: 0;
    padding: 0;
    color: var(--muted);
    font-size: 12px;
    list-style: none;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-checklist li {
    display: flex;
    align-items: center;
    gap: 7px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-checklist li::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f1ae3a;
    content: "";
}

body:where(.wat-app).wat-app-shell .collection-patterns .empty-state {
    display: flex;
    min-height: 180px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    padding: 32px 20px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    color: var(--muted);
    text-align: center;
    background: var(--surface-soft);
}

body:where(.wat-app).wat-app-shell .collection-patterns .empty-state strong {
    color: var(--text);
    font-size: 14px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .empty-state > span:not(.mini-icon) {
    max-width: 430px;
    font-size: 12px;
    line-height: 1.45;
}

body:where(.wat-app).wat-app-shell .collection-patterns .empty-state .button {
    margin-top: 7px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-amount {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-amount.is-net {
    color: #0d8878;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-statement-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--wat-blue);
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 900px) {
    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-stat-grid,
    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-dashboard-panels {
        grid-template-columns: minmax(0, 1fr);
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-entity-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* #endregion */

/* #region Portal filter bars and order rows */

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-stat-grid > .stat-card {
    display: grid;
    align-content: start;
    gap: 5px;
    min-width: 0;
    min-height: 76px;
    margin: 0;
    padding: 12px 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: none;
    background: #fff;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-stat-grid :is(.field-card, .stat-card) small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-stat-grid :is(.field-card, .stat-card) a {
    color: var(--wat-blue);
    font-size: 11px;
    font-weight: 700;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-inline-alert {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid #f2c36a;
    border-radius: 10px;
    color: #815316;
    background: #fff8df;
    font-size: 12px;
    font-weight: 650;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-inline-alert :where(i, svg) {
    width: 17px;
    height: 17px;
    color: #bd7818;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-filter-bar {
    display: grid;
    gap: 10px;
    min-width: 0;
    margin: 0 0 14px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-soft);
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-filter-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-filter-heading strong {
    color: var(--text);
    font-size: 12px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-filter-heading .button {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 11px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-filter-pills {
    display: flex;
    min-width: 0;
    gap: 7px;
    overflow-x: auto;
    padding: 1px 1px 3px;
    scrollbar-width: thin;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-filter-pill {
    position: relative;
    flex: 0 0 auto;
    margin: 0;
    cursor: pointer;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-filter-pill input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-filter-pill span {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    background: #fff;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-filter-pill input:checked + span {
    border-color: #8ec8f4;
    color: #034c8a;
    background: #eaf5ff;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-filter-pill input:focus-visible + span {
    outline: 3px solid rgba(11, 145, 224, 0.22);
    outline-offset: 2px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-list {
    display: grid;
    gap: var(--operational-card-gap, 20px);
    min-width: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-row {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-left: 3px solid #82c4f3;
    border-radius: 11px;
    background: #fff;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-row.is-warning {
    border-left-color: #efa92d;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-row.is-danger {
    border-left-color: #df514c;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-row-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-soft);
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-row-header > div:first-child {
    display: grid;
    min-width: 0;
    gap: 3px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-number {
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-number:hover {
    color: var(--wat-blue);
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-status {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.35;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-badges {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-row-body {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 12px 14px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-row-body > div {
    display: grid;
    align-content: start;
    min-width: 0;
    gap: 3px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-row-body span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-row-body strong {
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: 12px;
    line-height: 1.35;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-row-body small {
    overflow-wrap: anywhere;
    color: var(--muted);
    font-size: 11px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-note {
    margin: 0 14px 10px;
    padding: 9px 10px;
    border-radius: 8px;
    color: #8a3934;
    background: #fff0ef;
    font-size: 11px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-row-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 14px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 10.5px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-row-footer a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--wat-blue);
    font-weight: 750;
}

@media (max-width: 900px) {
    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-row-header {
        align-items: stretch;
        flex-direction: column;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-badges {
        justify-content: flex-start;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-row-body {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* #endregion */

/* #region Portal order workbench */

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-orders-page {
    display: grid;
    gap: 16px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-orders-content {
    display: grid;
    width: min(100%, 1080px);
    min-width: 0;
    gap: 12px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-page-hero {
    margin: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-page-summary {
    max-width: 720px;
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-menu-popover {
    right: 0;
    left: auto;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-menu-link {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 220px;
    padding: 9px 11px;
    border-radius: 8px;
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-menu-link:hover {
    color: var(--wat-blue);
    background: var(--surface-soft);
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-menu-link :where(i, svg) {
    width: 16px;
    height: 16px;
    color: var(--wat-blue);
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-filter-panel {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-top: 3px solid var(--wat-blue);
    border-radius: 12px;
    background: #fff;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-filter-panel .portal-ui-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    gap: 12px;
    margin: 0;
    padding: 10px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-filter-options {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 12px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-filter-option {
    display: inline-flex;
    align-items: center;
    flex-direction: row;
    gap: 6px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-filter-option input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--wat-blue);
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-left: 3px solid #78bfee;
    border-radius: 12px;
    background: #fff;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card.is-action {
    border-left-color: #efaa31;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card.is-complete {
    border-left-color: #2ab7a6;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card.is-cancelled {
    border-left-color: #df514c;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 14px 9px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-soft);
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__identity {
    display: grid;
    min-width: 0;
    gap: 3px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__type {
    color: var(--muted);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__identity h2 {
    margin: 0;
    color: var(--text);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__identity h2 a {
    color: inherit;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__identity h2 a:hover {
    color: var(--wat-blue);
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__account {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__lifecycle {
    display: grid;
    min-width: 180px;
    grid-template-columns: auto auto;
    justify-items: end;
    column-gap: 8px;
    row-gap: 1px;
    text-align: right;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__lifecycle > .state-badge {
    grid-column: 1 / -1;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__status {
    margin: 0;
    color: var(--text);
    font-size: 11px;
    font-weight: 750;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__date {
    margin: 0;
    color: var(--muted);
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.65fr);
    gap: 10px;
    padding: 10px 14px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    align-content: start;
    gap: 0;
    min-width: 0;
    margin: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__facts > div,
body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__services,
body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__next {
    min-width: 0;
    padding: 10px 11px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #fff;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__facts > div {
    border: 0;
    border-left: 1px solid var(--border);
    border-radius: 0;
    padding: 2px 12px;
    background: transparent;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__facts > div:first-child {
    border-left: 0;
    padding-left: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__facts dt {
    margin: 0 0 2px;
    color: var(--muted);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__facts dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.25;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__facts dd span,
body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__facts dd a {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 500;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__services {
    grid-column: 1;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-tags {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 6px;
    margin: 5px 0 0;
    padding: 0;
    list-style: none;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-tags li {
    display: grid;
    gap: 2px;
    min-width: 150px;
    padding: 5px 8px;
    border-radius: 8px;
    color: var(--text);
    background: var(--surface-soft);
    font-size: 11px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-tags li strong {
    font-weight: 750;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-tags li span {
    color: var(--muted);
    font-size: 10px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__next {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;
    border-color: #e7c780;
    background: #fff9e9;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__next .row-value {
    margin: 5px 0 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__next small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.4;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 44px;
    padding: 6px 14px;
    border-top: 1px solid var(--border);
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__footer-note {
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 650;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__documents {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 6px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-document {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 7px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--text);
    font-size: 10.5px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-document small {
    color: var(--muted);
    font-size: 9.5px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-orders-empty {
    min-height: 180px;
    border: 1px dashed var(--border);
    border-radius: 12px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-orders-empty__content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    gap: 6px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__footer .button {
    min-height: 38px;
    padding-inline: 13px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-orders-empty__content > :where(i[data-lucide], svg.lucide) {
    flex: 0 0 auto;
    margin: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-orders-empty__copy {
    min-width: 0;
    line-height: 1.45;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-orders-empty__copy b {
    margin-right: 3px;
}

@media (max-width: 900px) {
    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-filter-panel .portal-ui-filter-bar {
        align-items: stretch;
        flex-direction: column;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-filter-options {
        flex-wrap: wrap;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__header,
    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__footer {
        align-items: stretch;
        flex-direction: column;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__lifecycle {
        min-width: 0;
        justify-items: start;
        text-align: left;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__body {
        grid-template-columns: minmax(0, 1fr);
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__services,
    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__next {
        grid-column: 1;
        grid-row: auto;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__footer .button {
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 540px) {
    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-filter-panel,
    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__header,
    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__body,
    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__footer {
        padding-right: 11px;
        padding-left: 11px;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__facts > div {
        border-top: 1px solid var(--border);
        border-left: 0;
        padding: 7px 0;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__facts > div:first-child {
        border-top: 0;
        padding-top: 0;
    }
}

/* #endregion */

/* #region Portal dashboards, settings and help */

body:where(.wat-app).wat-app-shell .collection-patterns :is(
    .portal-ui-dashboard,
    .portal-ui-settings-page,
    .portal-ui-help-page
) {
    display: grid;
    gap: 16px;
    min-width: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns :is(
    .portal-ui-dashboard,
    .portal-ui-settings-page,
    .portal-ui-help-page
) > * {
    min-width: 0;
    margin: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns :is(
    .portal-ui-dashboard,
    .portal-ui-settings-page,
    .portal-ui-help-page
) .panel {
    min-height: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-dashboard-panels--customer {
    grid-template-columns: minmax(0, 1.4fr) minmax(340px, 0.6fr);
    margin: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-dashboard-section {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-dashboard-section:first-child {
    margin-top: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .dashboard-section_title {
    margin: 0;
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-stat-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body:where(.wat-app).wat-app-shell .collection-patterns :is(
    .portal-ui-action-queue,
    .portal-ui-live-work
) .review-row {
    grid-template-columns: 38px minmax(0, 1fr) auto;
}

body:where(.wat-app).wat-app-shell .collection-patterns :is(
    .portal-ui-action-queue,
    .portal-ui-live-work
) .review-row.is-urgent,
body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-live-work .review-row.is-attention {
    background: #fffaf0;
}

body:where(.wat-app).wat-app-shell .collection-patterns :is(
    .portal-ui-action-queue,
    .portal-ui-live-work
) .review-row .button {
    justify-self: end;
}

body:where(.wat-app).wat-app-shell .collection-patterns .dashboard-timeline_progress {
    width: min(100%, 360px);
    height: 5px;
    margin-top: 7px;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: #dce7f0;
    accent-color: var(--wat-blue);
}

body:where(.wat-app).wat-app-shell .collection-patterns .dashboard-timeline_progress::-webkit-progress-bar {
    border-radius: 999px;
    background: #dce7f0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .dashboard-timeline_progress::-webkit-progress-value {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--wat-blue), var(--wat-teal));
}

body:where(.wat-app).wat-app-shell .collection-patterns .dashboard-impact-period-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .dashboard-impact-period {
    display: grid;
    align-content: start;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
}

body:where(.wat-app).wat-app-shell .collection-patterns .dashboard-impact_metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .dashboard-impact_metric {
    display: grid;
    align-content: center;
    min-height: 62px;
    gap: 4px;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    background: var(--surface-soft);
}

body:where(.wat-app).wat-app-shell .collection-patterns .dashboard-impact_metric--link:hover {
    border-color: #a9d4f4;
    background: #eef8ff;
}

body:where(.wat-app).wat-app-shell .collection-patterns .dashboard-impact_metric-label {
    min-width: 0;
    color: var(--muted);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.035em;
    line-height: 1.2;
    text-transform: uppercase;
}

body:where(.wat-app).wat-app-shell .collection-patterns .dashboard-impact_metric-value {
    color: var(--text);
    font-size: 20px;
    line-height: 1;
}

body:where(.wat-app).wat-app-shell .collection-patterns .dashboard-impact_metric-unit {
    color: var(--muted);
    font-size: 10px;
    font-weight: 650;
}

body:where(.wat-app).wat-app-shell .collection-patterns .dashboard-impact_co2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 11px;
    border: 1px solid #aee7dd;
    border-radius: 9px;
    color: #087568;
    background: #ecfbf8;
}

body:where(.wat-app).wat-app-shell .collection-patterns .dashboard-impact_co2-label {
    font-size: 10px;
    font-weight: 800;
}

body:where(.wat-app).wat-app-shell .collection-patterns .dashboard-impact_co2-value {
    font-size: 17px;
    line-height: 1;
    text-align: right;
}

@media (min-width: 1161px) {
    body:where(.wat-app).wat-app-shell .collection-patterns .dashboard-impact-period-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

body:where(.wat-app).wat-app-shell .collection-patterns .dashboard-impact_visualizations {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .carbon-visualization-report {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    background: #fff;
    font-size: 10px;
    font-weight: 750;
}

body:where(.wat-app).wat-app-shell .collection-patterns .carbon-visualization-report_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--wat-teal);
}

body:where(.wat-app).wat-app-shell .collection-patterns .carbon-visualization-report_icon :where(i, svg) {
    width: 16px;
    height: 16px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-dashboard-bins .panel-body {
    min-width: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 16px;
    min-width: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-settings-grid--personal {
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.75fr);
    grid-template-areas:
        "information avatar"
        "password notifications";
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-settings-grid--personal > .panel {
    margin-top: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-personal-avatar {
    grid-area: avatar;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-personal-information {
    grid-area: information;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-personal-password {
    grid-area: password;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-personal-notifications {
    grid-area: notifications;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-panel--wide,
body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-company-settings .portal-ui-settings-fragment:last-child {
    grid-column: 1 / -1;
}

body:where(.wat-app).wat-app-shell .collection-patterns fieldset.portal-ui-panel {
    min-width: 0;
    margin: 0;
    padding: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-panel-legend {
    display: flex;
    width: 100%;
    max-width: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    float: left;
    box-sizing: border-box;
}

body:where(.wat-app).wat-app-shell .collection-patterns fieldset.portal-ui-panel > :not(legend) {
    clear: both;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-settings-stack {
    display: grid;
    gap: 14px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-settings-stack > hr {
    width: 100%;
    height: 1px;
    margin: 0;
    border: 0;
    background: var(--border);
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-settings-section {
    display: grid;
    gap: 8px;
    min-width: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-settings-section > div:first-child > b {
    color: var(--text);
    font-size: 12px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-form {
    display: grid;
    gap: 13px;
    min-width: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-form > label,
body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-form-grid > label,
body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-document-fields > label {
    display: grid;
    min-width: 0;
    gap: 6px;
    margin: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-form :is(input, select, textarea),
body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-settings-section :is(input, select, textarea) {
    max-width: 100%;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-form :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    width: 100%;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-form-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-field-label {
    color: var(--text);
    font-size: 11px;
    font-weight: 750;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-inline-form {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-inline-form > * {
    margin: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-checkbox-group {
    display: grid;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 11px;
    border: 1px solid var(--border);
    border-radius: 9px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-checkbox-group legend {
    padding: 0 4px;
    color: var(--text);
    font-size: 11px;
    font-weight: 750;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-checkbox-list {
    display: grid;
    gap: 7px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-checkbox-list > label,
body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-checkbox-list .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--text);
    font-size: 11px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-document-fields {
    display: grid;
    gap: 10px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-document-fields > label {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-soft);
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-logo-preview,
body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-profile-media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 112px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-soft);
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-logo-preview img,
body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-profile-image {
    display: block;
    width: 96px;
    height: 96px;
    border-radius: 18px;
    object-fit: cover;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-profile-media {
    gap: 14px;
    justify-content: flex-start;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-profile-form.portal-ui-personal-avatar-form {
    grid-template-columns: minmax(0, 1fr);
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-profile-form.portal-ui-personal-avatar-form > :where(.feedback, .portal-ui-form-actions) {
    grid-column: 1;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-personal-avatar-form .portal-ui-profile-media {
    justify-content: center;
    min-height: 100px;
    padding: 10px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-notification-control {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 9px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-notification-control [data-push-notifications-status] {
    color: var(--muted);
    font-size: 11px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-context-accordion {
    margin: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-context-accordion-body {
    display: grid;
    gap: 12px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .accordion-subtitle {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 500;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-danger-zone .secondary-accordion-body {
    display: grid;
    justify-items: start;
    gap: 10px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-danger-zone p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-help-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-social-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-social-link {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text);
    background: #fff;
    font-size: 11px;
    font-weight: 750;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-social-link:hover {
    border-color: #a9d4f4;
    color: var(--wat-blue);
    background: #eef8ff;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-review-link {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    color: inherit;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-review-link > :where(i, svg):last-child {
    width: 16px;
    height: 16px;
    color: var(--muted);
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-table-container {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-table-container table {
    min-width: 620px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .menu-popover :is(a[role="menuitem"], .portal-ui-menu-link) {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 6px;
    color: #365071;
    background: transparent;
    font-size: 12px;
    font-weight: 650;
    text-align: left;
}

body:where(.wat-app).wat-app-shell .collection-patterns .menu-popover :is(a[role="menuitem"], .portal-ui-menu-link):hover {
    background: #edf6ff;
}

body:where(.wat-app).wat-app-shell .collection-patterns .menu-popover :is(a[role="menuitem"], .portal-ui-menu-link) :where(i, svg) {
    width: 16px;
    height: 16px;
    color: var(--wat-blue);
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-modal {
    display: grid;
    gap: 14px;
    width: min(620px, calc(100vw - 32px));
    max-height: min(760px, calc(100vh - 32px));
    overflow-y: auto;
    padding: 20px;
    border: 1px solid var(--border);
    border-top: 3px solid var(--wat-blue);
    border-radius: 12px;
    background: #fff;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-modal--danger {
    border-top-color: #df514c;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-modal-heading {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-modal-heading h2,
body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-modal-heading p {
    margin: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-modal-heading h2 {
    color: var(--text);
    font-size: 17px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-modal-heading p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

@media (max-width: 1160px) {
    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-dashboard-panels--customer {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    body:where(.wat-app).wat-app-shell .collection-patterns :is(
        .portal-ui-settings-grid,
        .portal-ui-help-grid,
        .dashboard-impact-period-grid,
        .portal-ui-form-grid,
        .portal-ui-form-grid--three
    ) {
        grid-template-columns: minmax(0, 1fr);
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-settings-grid--personal {
        grid-template-areas:
            "information"
            "avatar"
            "password"
            "notifications";
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-panel--wide,
    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-company-settings .portal-ui-settings-fragment:last-child {
        grid-column: 1;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns :is(
        .portal-ui-action-queue,
        .portal-ui-live-work
    ) .review-row {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    body:where(.wat-app).wat-app-shell .collection-patterns :is(
        .portal-ui-action-queue,
        .portal-ui-live-work
    ) .review-row > :last-child {
        grid-column: 2;
        justify-self: start;
    }
}

@media (max-width: 540px) {
    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-stat-grid--three,
    body:where(.wat-app).wat-app-shell .collection-patterns .dashboard-impact_metrics {
        grid-template-columns: minmax(0, 1fr);
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-form-actions,
    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-inline-form {
        align-items: stretch;
        flex-direction: column;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-form-actions .button,
    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-inline-form .button {
        justify-content: center;
        width: 100%;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-profile-media {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* #endregion */

/* #region Customer Collection and data-destruction workflows */

body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-workflow-page {
    display: grid;
    gap: 16px;
    min-width: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-workflow-page > * {
    min-width: 0;
    margin: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-workflow-columns {
    display: grid;
    grid-template-columns: 0.98fr 1fr 1.34fr;
    grid-template-areas: "details action context";
    align-items: start;
    gap: 12px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-workflow-columns > :where(.panel, .portal-workflow-context) {
    min-height: 0;
    align-self: start;
    margin-top: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-workflow-columns > .panel-teal {
    transform: none;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-workflow-details {
    grid-area: details;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-workflow-current {
    grid-area: action;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-workflow-context {
    grid-area: context;
    display: grid;
    align-self: start;
    gap: 12px;
    min-width: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-data-destruction {
    grid-column: 1 / -1;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-workflow-current-body {
    display: grid;
    align-content: start;
    gap: 14px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-workflow-page .state-hero-top {
    margin-bottom: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-workflow-page .state-hero-copy {
    margin-top: 8px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-workflow-page .state-hero-card > .workflow-meta-grid {
    margin-top: 12px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .timeline-date-prefix {
    margin-right: 2px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-section,
body:where(.wat-app).wat-app-shell .collection-patterns .context-section {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-section.is-attention {
    border-color: #e8c16b;
    background: #fffaf0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-section.is-done,
body:where(.wat-app).wat-app-shell .collection-patterns .context-section.--done {
    border-color: #aee7dd;
    background: #f4fffc;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-section-heading,
body:where(.wat-app).wat-app-shell .collection-patterns .context-section-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-section-title,
body:where(.wat-app).wat-app-shell .collection-patterns .workflow-section-heading h3,
body:where(.wat-app).wat-app-shell .collection-patterns .context-section-title h2,
body:where(.wat-app).wat-app-shell .collection-patterns .context-section-title h3 {
    margin: 0;
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
}

body:where(.wat-app).wat-app-shell .collection-patterns .context-stack {
    display: grid;
    gap: 11px;
    min-width: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-inventory {
    display: grid;
    gap: 10px;
    min-width: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-inventory .stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: linear-gradient(180deg, #f5faff, #eef6ff);
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-inventory .stat {
    min-width: 0;
    border-right: 1px solid var(--border);
    padding: 10px 10px 9px;
    text-align: center;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-inventory .stat:last-child {
    border-right: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-inventory .stat .mini-icon {
    width: 25px;
    height: 25px;
    margin: 0 auto 5px;
    border-radius: 8px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-inventory .stat b {
    display: block;
    margin-bottom: 4px;
    color: var(--text);
    font-size: 20px;
    font-weight: 850;
    line-height: 1.05;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-inventory .stat span {
    color: #566b85;
    font-size: 12px;
    font-weight: 720;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-inventory .stat small {
    display: block;
    margin-top: 2px;
    color: #8795a8;
    font-weight: 650;
    line-height: 1.25;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-inventory .category-head {
    margin: 0 0 8px;
    color: var(--text);
    font-weight: 820;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-inventory .category-list {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-inventory .category-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1.2fr) minmax(120px, 0.95fr) 52px 54px;
    align-items: center;
    gap: 12px;
    min-height: 42px;
    border-bottom: 1px solid var(--border);
    padding: 5px 11px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-inventory .category-row:last-child {
    border-bottom: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-inventory .category-row .mini-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-inventory .category-name {
    min-width: 0;
    font-weight: 820;
    line-height: 1.18;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-inventory .category-name small {
    display: block;
    overflow: hidden;
    margin-top: 3px;
    color: #74849a;
    font-weight: 640;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-inventory .bar {
    overflow: hidden;
    height: 6px;
    border-radius: 999px;
    background: #e8eef5;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-inventory .bar span {
    display: block;
    width: var(--bar-width, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--wat-blue);
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-inventory :where(.count, .percent) {
    color: var(--text);
    font-weight: 780;
    text-align: right;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-inventory .percent {
    color: #8190a3;
    font-size: 12px;
    font-weight: 690;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-actions {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-payment-callout {
    display: grid;
    gap: 3px;
    border: 1px solid #9de4d8;
    border-radius: 10px;
    padding: 12px 13px;
    background: #effffa;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-payment-callout span {
    color: #4b6b70;
    font-size: 11px;
    font-weight: 750;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-payment-callout strong {
    color: var(--text);
    font-size: 26px;
    font-weight: 850;
    letter-spacing: -0.025em;
    line-height: 1.05;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-money-summary {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-money-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    border-bottom: 1px solid var(--border);
    padding: 9px 11px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-money-row:last-child {
    border-bottom: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-money-row > span {
    min-width: 0;
    color: var(--muted);
    font-weight: 680;
    line-height: 1.35;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-money-row > span small {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 650;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-money-row > b {
    color: var(--text);
    font-weight: 780;
    text-align: right;
    white-space: nowrap;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-money-row.is-total {
    background: var(--surface-soft);
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-money-row.is-total > :where(span, b) {
    color: var(--text);
    font-size: 14px;
    font-weight: 820;
}

body:where(.wat-app).wat-app-shell .collection-patterns :where(.workflow-note, .workflow-payment-support) {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    border-radius: 8px;
    padding: 9px 10px;
    color: #45617a;
    background: #edf6ff;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.4;
}

body:where(.wat-app).wat-app-shell .collection-patterns :where(.workflow-note, .workflow-payment-support) svg {
    width: 16px;
    height: 16px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-quote {
    display: grid;
    gap: 4px;
    margin: 0;
    border-left: 3px solid #f0b854;
    padding: 8px 10px;
    color: var(--text);
    background: #fff9ec;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-quote span {
    color: var(--muted);
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-subsection-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-subsection-heading h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-subsection-heading > span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-align: right;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-document-list,
body:where(.wat-app).wat-app-shell .collection-patterns .workflow-item-list {
    display: grid;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-document-row {
    display: grid;
    grid-template-columns: 37px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 10px 11px;
    color: var(--text);
    text-decoration: none;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-document-row + .workflow-document-row {
    border-top: 1px solid var(--border);
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-document-row > span:nth-child(2) {
    min-width: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-document-row :where(b, small) {
    display: block;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-document-row b {
    font-weight: 760;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-document-row small {
    margin-top: 2px;
    color: var(--muted);
    font-weight: 620;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-document-row > svg {
    width: 15px;
    height: 15px;
    color: var(--wat-blue);
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-document-row:hover,
body:where(.wat-app).wat-app-shell .collection-patterns .workflow-document-row:focus-visible {
    background: var(--surface-soft);
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-item-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 9px 10px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-item-row + .workflow-item-row {
    border-top: 1px solid var(--border);
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-item-row :where(b, small) {
    display: block;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-item-row b {
    color: var(--text);
    font-weight: 760;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-item-row small {
    margin-top: 2px;
    color: var(--muted);
    font-weight: 620;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-item-row.is-compact {
    grid-template-columns: minmax(0, 1fr) auto;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-item-row.is-total {
    grid-template-columns: minmax(0, 1fr) auto;
    background: var(--surface-soft);
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-item-status {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    text-align: right;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-empty-state {
    display: grid;
    min-height: 154px;
    place-items: center;
    gap: 8px;
    border: 1px dashed #cbdce8;
    border-radius: 10px;
    padding: 18px;
    color: var(--muted);
    background: #fbfdff;
    text-align: center;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-empty-state > svg {
    width: 28px;
    height: 28px;
    color: #8ea8bd;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-empty-state :where(b, p) {
    display: block;
    margin: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-empty-state b {
    color: var(--text);
    font-weight: 780;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-empty-state p {
    margin-top: 3px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-empty-state.is-compact {
    min-height: 0;
    grid-template-columns: 24px minmax(0, 1fr);
    place-items: initial;
    align-items: center;
    padding: 11px;
    text-align: left;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-empty-state.is-compact > svg {
    width: 22px;
    height: 22px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .workflow-impact-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .dd-draft-editor {
    min-width: 0;
    margin: 0;
    border: 0;
    padding: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .dd-draft-editor-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .dd-draft-editor-toolbar :where(b, small) {
    display: block;
}

body:where(.wat-app).wat-app-shell .collection-patterns .dd-draft-editor-toolbar small {
    margin-top: 2px;
    color: var(--muted);
    font-weight: 620;
    line-height: 1.35;
}

body:where(.wat-app).wat-app-shell .collection-patterns .dd-draft-item-list {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .dd-draft-item-row {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) auto;
    grid-template-areas:
        "identity identity remove"
        "quantity method method"
        "unit total total";
    gap: 9px 10px;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;
    background: var(--surface-soft);
}

body:where(.wat-app).wat-app-shell .collection-patterns .dd-draft-item-identity {
    grid-area: identity;
}

body:where(.wat-app).wat-app-shell .collection-patterns .dd-draft-item-row > .dd-draft-item-field:first-of-type {
    grid-area: quantity;
}

body:where(.wat-app).wat-app-shell .collection-patterns .dd-draft-item-row > .dd-draft-item-field:nth-of-type(2) {
    grid-area: method;
}

body:where(.wat-app).wat-app-shell .collection-patterns .dd-draft-item-amount--unit {
    grid-area: unit;
}

body:where(.wat-app).wat-app-shell .collection-patterns .dd-draft-item-amount--total {
    grid-area: total;
}

body:where(.wat-app).wat-app-shell .collection-patterns .dd-draft-item-remove {
    grid-area: remove;
    width: 34px;
    min-width: 34px;
    height: 34px;
    min-height: 34px;
    padding: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .dd-draft-item-remove > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

body:where(.wat-app).wat-app-shell .collection-patterns :where(.dd-draft-item-identity, .dd-draft-item-field, .dd-draft-item-amount) > span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 720;
}

body:where(.wat-app).wat-app-shell .collection-patterns .dd-draft-item-identity b {
    display: block;
    color: var(--text);
    font-weight: 780;
    overflow-wrap: anywhere;
}

body:where(.wat-app).wat-app-shell .collection-patterns .dd-draft-item-field {
    min-width: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .dd-draft-item-field :where(input, select) {
    width: 100%;
    min-width: 0;
    height: 40px;
    margin: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .dd-draft-item-amount {
    min-width: 0;
    color: var(--text);
    font-weight: 760;
}

body:where(.wat-app).wat-app-shell .collection-patterns .context-section p,
body:where(.wat-app).wat-app-shell .collection-patterns .workflow-section p {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.45;
}

body:where(.wat-app).wat-app-shell .collection-patterns .utility-accordion {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #fff;
}

body:where(.wat-app).wat-app-shell .collection-patterns .utility-accordion > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
    background: var(--surface-soft);
}

body:where(.wat-app).wat-app-shell .collection-patterns .utility-accordion > summary::-webkit-details-marker {
    display: none;
}

body:where(.wat-app).wat-app-shell .collection-patterns .utility-accordion > summary::after {
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    content: "";
    transform: rotate(45deg);
    transition: transform 140ms ease;
}

body:where(.wat-app).wat-app-shell .collection-patterns .utility-accordion[open] > summary::after {
    transform: rotate(225deg);
}

body:where(.wat-app).wat-app-shell .collection-patterns .utility-accordion > summary h2 {
    margin: 0;
    font: inherit;
}

body:where(.wat-app).wat-app-shell .collection-patterns .utility-accordion > :not(summary) {
    margin: 11px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-lifecycle-track {
    counter-reset: portal-lifecycle-step;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-lifecycle-track .step {
    counter-increment: portal-lifecycle-step;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-lifecycle-track .step-dot:empty::before {
    content: counter(portal-lifecycle-step);
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-summary-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 9px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-summary-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--text);
    font-size: 11px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-summary-table :is(th, td) {
    padding: 9px 10px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-summary-table tr:last-child :is(th, td) {
    border-bottom: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-summary-table th {
    width: 42%;
    color: var(--muted);
    background: var(--surface-soft);
    font-weight: 750;
}

body:where(.wat-app).wat-app-shell .collection-patterns :is(
    .portal-report-purchase-card,
    .portal-dd-certificate-purchase-card
) {
    border-color: #d6e3ee;
    background: linear-gradient(135deg, #f8fbff, #fff);
}

body:where(.wat-app).wat-app-shell .collection-patterns :is(
    .portal-report-purchase-title,
    .portal-dd-certificate-title
) {
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
}

body:where(.wat-app).wat-app-shell .collection-patterns :is(
    .portal-report-purchase-price,
    .portal-dd-certificate-price
) {
    color: var(--text);
    font-size: 18px;
    font-weight: 800;
}

body:where(.wat-app).wat-app-shell .collection-patterns :is(
    .portal-report-purchase-lock,
    .portal-dd-certificate-lock
) {
    color: var(--muted);
    font-size: 11px;
}

body:where(.wat-app).wat-app-shell .collection-patterns :is(
    .portal-report-purchase-button,
    .portal-dd-certificate-button
) {
    justify-self: start;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-report-purchase-badge {
    display: inline-flex;
    width: max-content;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    color: #0b6f64;
    background: #e5f8f4;
    font-size: 9.5px;
    font-weight: 800;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-workflow-error {
    min-height: 0;
}

@media (max-width: 1320px) {
    body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-workflow-columns {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "details action"
            "context context";
        align-items: start;
    }
}

@media (max-width: 900px) {
    body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-workflow-columns {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-workflow-details {
        order: 1;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-workflow-current {
        order: 2;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-workflow-context {
        order: 3;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-data-destruction {
        order: 4;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-workflow-columns .panel {
        min-height: 0;
        transform: none;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .workflow-item-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .workflow-item-row > .button {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (max-width: 540px) {
    body:where(.wat-app).wat-app-shell .collection-patterns .workflow-section,
    body:where(.wat-app).wat-app-shell .collection-patterns .context-section {
        padding: 10px;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .workflow-section-heading,
    body:where(.wat-app).wat-app-shell .collection-patterns .context-section-title {
        flex-direction: column;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .workflow-payment-callout strong {
        font-size: 23px;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .dd-draft-editor-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .dd-draft-editor-toolbar .button {
        align-self: flex-start;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-inventory .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-inventory .stat:nth-child(2) {
        border-right: 0;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-inventory .stat:nth-child(-n + 2) {
        border-bottom: 1px solid var(--border);
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-inventory .stat b {
        font-size: 18px;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-inventory .category-row {
        grid-template-columns: 32px minmax(0, 1fr) auto;
        gap: 8px 10px;
        min-height: 58px;
        padding: 8px 10px;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-inventory .category-name small {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-inventory .bar {
        grid-row: 2;
        grid-column: 2 / -1;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-inventory .count {
        grid-row: 1;
        grid-column: 3;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-customer-inventory .percent {
        display: none;
    }
}

/* #endregion */

/* #region Portal request forms */

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form,
body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-panel {
    min-width: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-panel {
    min-height: 0;
    overflow: visible;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-panel > .panel-header {
    border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-panel-body {
    display: grid;
    gap: 14px;
    align-content: start;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .portal-ui-form {
    display: grid;
    min-width: 0;
    gap: 14px;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .portal-ui-form > .card-title {
    display: none;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .portal-ui-form-section {
    min-width: 0;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    background: var(--panel-soft);
    box-shadow: none;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .portal-ui-selected-context {
    min-width: 0;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    background: linear-gradient(135deg, #f7fcff, #f4fffb);
    box-shadow: none;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .portal-ui-section-title {
    margin: 0;
    color: var(--text);
    font-size: 16px;
    font-weight: var(--title-weight);
    line-height: 1.2;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form :where(label, legend) {
    color: var(--text);
    font-weight: var(--label-weight);
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form label {
    display: grid;
    gap: 6px;
    margin: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    margin: 0;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 9px 11px;
    color: var(--text);
    background: #fff;
    outline: 0;
    font: inherit;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form textarea {
    min-height: 92px;
    resize: vertical;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea):focus {
    border-color: rgba(0, 127, 222, 0.7);
    box-shadow: 0 0 0 3px rgba(0, 127, 222, 0.13);
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .portal-ui-location-section {
    display: grid;
    gap: 12px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .portal-ui-location-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(260px, 0.9fr) minmax(360px, 1.1fr);
    gap: 14px;
    align-items: stretch;
    margin: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form :where(.collection-request-name-grid, .collection-request-contact-grid) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
    margin: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .collection-request-contact-grid--single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 360px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form :where(.collection-request-communication, .collection-request-message) {
    margin: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .collection-request-message {
    display: grid;
    gap: 6px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .portal-ui-suggestions {
    min-width: 0;
    margin: 0;
    border: 0;
    padding: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .portal-ui-suggestions legend {
    margin-bottom: 7px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.045em;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .portal-ui-suggestions ul {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .address-suggestion-button {
    min-height: 32px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 6px 9px;
    color: var(--wat-blue-deep);
    background: #fff;
    font-weight: 650;
    text-align: left;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .address-suggestion-button:is(:hover, :focus-visible) {
    border-color: rgba(0, 127, 222, 0.55);
    background: #f2f8ff;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .address-row {
    display: flex;
    min-width: 0;
    gap: 8px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form :where(.map, .collection-request-map) {
    width: 100%;
    min-width: 0;
    min-height: 160px;
    height: 160px;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #eef5f7;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .portal-ui-data-destruction-request-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .portal-ui-data-destruction-request-form > :where(.portal-ui-location-section, fieldset, .feedback, .portal-ui-form-actions, script-once) {
    grid-column: 1 / -1;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .portal-ui-data-destruction-request-form > label {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    background: var(--panel-soft);
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .portal-ui-data-destruction-request-form .portal-ui-location-section {
    grid-template-columns: minmax(260px, 0.9fr) minmax(360px, 1.1fr);
    grid-template-areas:
        "suggestions suggestions"
        "title map"
        "address map"
        "feedback map";
    align-items: start;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .portal-ui-data-destruction-request-form .portal-ui-location-section > .portal-ui-suggestions {
    grid-area: suggestions;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .portal-ui-data-destruction-request-form .portal-ui-location-section > .portal-ui-section-title {
    grid-area: title;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .portal-ui-data-destruction-request-form .portal-ui-location-section > .address-row {
    grid-area: address;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .portal-ui-data-destruction-request-form .portal-ui-location-section > .map-feedback {
    grid-area: feedback;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .portal-ui-data-destruction-request-form .portal-ui-location-section > .map {
    grid-area: map;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .portal-ui-items-section,
body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form :where(.popup-anchor, [data-e-waste-type-add-container]) {
    min-width: 0;
    max-width: 100%;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .collection-items-optional__toggle {
    display: flex;
    min-height: 42px;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: pointer;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .collection-items-optional__toggle > input {
    flex: 0 0 auto;
    margin: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .collection-items-optional__toggle-text {
    display: grid;
    min-width: 0;
    gap: 2px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .collection-items-optional__body {
    margin-top: 12px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .portal-ui-table-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #fff;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .portal-ui-table-container:not(:has([data-dd-item-row])) {
    display: none;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .data-destruction-items-editor table {
    min-width: 720px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form :where(.feedback, .map-feedback):not(:empty) {
    margin: 0;
    border: 1px solid #f2c9c7;
    border-radius: 8px;
    padding: 8px 10px;
    color: #a12622;
    background: #fff7f6;
    font-size: 12px;
    font-weight: 650;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .carbon-estimation-compact:not(:empty) {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    background: linear-gradient(135deg, #f5fffb, #f7fcff);
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .portal-ui-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    margin: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form :where(.button-blue, .button-blue-2, .button-red-2) {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: var(--button-radius);
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
    text-decoration: none;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .button-blue {
    border: 1px solid transparent;
    color: #fff;
    background: var(--primary-gradient);
    box-shadow: var(--action-shadow);
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .button-blue-2 {
    border: 1px solid #b9daf2;
    color: var(--wat-blue-deep);
    background: #fff;
    box-shadow: none;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .button-red-2 {
    border: 1px solid #efc2c0;
    color: #b4231f;
    background: #fff7f6;
    box-shadow: none;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form :where(.button-blue, .button-blue-2, .button-red-2):disabled {
    cursor: not-allowed;
    opacity: 0.5;
    box-shadow: none;
}

@media (max-width: 900px) {
    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form :where(.portal-ui-location-grid, .collection-request-name-grid, .collection-request-contact-grid, .collection-request-contact-grid--single, .portal-ui-data-destruction-request-form) {
        grid-template-columns: minmax(0, 1fr);
        max-width: none;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .portal-ui-data-destruction-request-form {
        grid-template-columns: minmax(0, 1fr);
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .portal-ui-data-destruction-request-form > :where(.portal-ui-location-section, fieldset, .feedback, .portal-ui-form-actions, script-once) {
        grid-column: 1;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .portal-ui-suggestions ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: thin;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .address-suggestion-button {
        white-space: nowrap;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .portal-ui-data-destruction-request-form .portal-ui-location-section {
        display: block;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .portal-ui-data-destruction-request-form .portal-ui-location-section > * + * {
        margin-top: 12px;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .data-destruction-items-editor table {
        display: block;
        width: 100%;
        min-width: 0;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .data-destruction-items-editor table tbody {
        display: block;
        width: 100%;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .data-destruction-items-editor table thead {
        display: none;
    }
}

@media (max-width: 540px) {
    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-panel-body,
    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .portal-ui-form-section {
        padding: 11px;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .portal-ui-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-request-form .portal-ui-form-actions :where(a, button) {
        width: 100%;
    }
}

/* #endregion */

body:where(.wat-app).repair-ui-portal .repair-ui-page.collection-patterns > .panel,
body:where(.wat-app).repair-ui-admin .main.collection-patterns > .panel {
    min-height: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__header {
    position: static;
    height: auto;
    min-height: 0;
}

body:where(.wat-app).repair-ui-admin .repair-admin-order-detail {
    min-width: 0;
    max-width: 100%;
}

body:where(.wat-app).repair-ui-admin .repair-admin-order-detail > .timeline {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

body:where(.wat-app).repair-ui-admin .repair-admin-order-detail > .timeline:not(.--wrap) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

@media (max-width: 540px) {
    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__header {
        align-items: flex-start;
        flex-direction: row;
        gap: 10px;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__lifecycle {
        flex: 1 1 auto;
        justify-items: end;
        text-align: right;
    }
}

/* #region Collection responsive preservation
 * Keep the validated Collection layout authoritative when shared primitives
 * appear later in the cascade.
 */

body:where(.wat-app--collection) .collection-patterns .cards.is-processing {
    display: none;
}

body:where(.wat-app--collection) .collection-patterns .cards > .panel {
    margin: 0;
    transform: none;
}

body:where(.wat-app--collection) .collection-patterns .cards:is(.is-dispatching, .is-invoice) {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
}

@media (max-width: 1320px) {
    body:where(.wat-app--collection) .collection-patterns .cards {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }

    body:where(.wat-app--collection) .collection-patterns .cards:is(.is-dispatching, .is-invoice) {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }
}

@media (max-width: 900px) {
    body:where(.wat-app--collection) .collection-patterns .cards {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
}

/* #endregion */

/* #region Portal visual audit corrections */

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__body:not(:has(> .portal-ui-order-card__next)) {
    grid-template-columns: minmax(0, 1fr);
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__body:not(:has(> .portal-ui-order-card__next)) .portal-ui-order-card__services {
    grid-column: 1 / -1;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-page-stack > .panel {
    min-height: 0;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-help-grid > .panel:only-child {
    grid-column: 1 / -1;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-logo-preview {
    width: 84px;
    min-width: 84px;
    height: 84px;
    min-height: 84px;
    padding: 6px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-logo-row {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 16px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-logo-preview img {
    width: 72px;
    height: 72px;
    border-radius: 14px;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-profile-form {
    grid-template-columns: minmax(220px, 0.45fr) minmax(0, 1fr);
    align-items: start;
}

body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-profile-form > :where(.feedback, .portal-ui-form-actions) {
    grid-column: 2;
}

@media (min-width: 541px) and (max-width: 900px) {
    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-focus-panel .state-hero-card {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 900px) {
    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-profile-form {
        grid-template-columns: minmax(0, 1fr);
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-profile-form > :where(.feedback, .portal-ui-form-actions) {
        grid-column: 1;
    }
}

@media (max-width: 540px) {
    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__header {
        align-items: stretch;
        flex-direction: column;
        gap: 9px;
    }

    body:where(.wat-app).wat-app-shell .collection-patterns .portal-ui-order-card__lifecycle {
        min-width: 0;
        justify-items: start;
        text-align: left;
    }
}

/* #endregion */

/* #region Admin Repair Collection-content parity */

body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-order-workspace {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(280px, 0.9fr) minmax(340px, 1.15fr) minmax(280px, 0.95fr);
    gap: 16px;
    align-items: start;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-order-workspace > * {
    min-width: 0;
    margin: 0;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-order-details {
    order: 1;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-order-status {
    order: 2;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-order-discussion {
    order: 3;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-order-workspace > .quote-panel {
    grid-column: 1 / -1;
    order: 4;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-order-files {
    display: grid;
    min-width: 0;
    gap: 8px;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-order-files :where(ul, .flex-row) {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-order-files img {
    max-width: 100%;
    height: auto;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-scope-card {
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-scope-card:is(:hover, :focus-visible) {
    border-color: rgba(0, 127, 222, 0.42);
    background: #f8fcff;
    box-shadow: 0 8px 20px rgba(0, 127, 222, 0.08);
    outline: 0;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-scope-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .portal-ui-entity-icon {
    display: grid;
    width: 37px;
    height: 37px;
    place-items: center;
    border-radius: 50%;
    color: var(--wat-blue);
    background: #eaf4ff;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .portal-ui-entity-icon :where(i[data-lucide], svg) {
    width: 18px;
    height: 18px;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .portal-ui-entity-title {
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .portal-ui-entity-meta {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.4;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .portal-ui-entity-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

body:where(.wat-app).repair-ui-admin #modalContainer .modal-heading {
    margin-bottom: 14px;
}

body:where(.wat-app).repair-ui-admin #modalContainer .modal-heading__identity {
    display: grid;
    grid-template-columns: 37px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
}

body:where(.wat-app).repair-ui-admin #modalContainer .modal-heading__identity :where(h2, h3, p) {
    margin: 0;
}

body:where(.wat-app).repair-ui-admin #modalContainer .modal-heading__identity p {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns :where(.repair-admin-booking-card, .repair-admin-booking-issues) .panel-body {
    display: grid;
    min-width: 0;
    gap: 14px;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-repairer-bucket + .repair-admin-repairer-bucket {
    margin-top: 16px;
    border-top-color: var(--border-strong);
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-icon-button {
    display: inline-grid;
    width: 34px;
    min-width: 34px;
    height: 34px;
    place-items: center;
    padding: 0 !important;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-icon-button :where(i[data-lucide], svg) {
    width: 17px;
    height: 17px;
}

@media (max-width: 1320px) {
    body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-order-workspace {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "details status"
            "discussion discussion"
            "quote quote";
    }

    body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-order-details {
        grid-area: details;
    }

    body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-order-status {
        grid-area: status;
    }

    body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-order-discussion {
        grid-area: discussion;
    }

    body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-order-workspace > .quote-panel {
        grid-area: quote;
    }
}

@media (max-width: 900px) {
    body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-order-workspace {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "details"
            "status"
            "discussion"
            "quote";
    }

    body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-order-status .state-hero-card {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 760px) {
    body:where(.wat-app).repair-ui-admin .main.collection-patterns .panel-header {
        align-items: stretch;
        flex-wrap: wrap;
    }

    body:where(.wat-app).repair-ui-admin .main.collection-patterns .panel-header > .workflow-actions {
        width: 100%;
    }
}

@media (max-width: 520px) {
    body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-scope-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body:where(.wat-app).repair-ui-admin .main.collection-patterns :where(.workflow-actions, .portal-ui-entity-actions) {
        align-items: stretch;
        flex-direction: column;
    }

    body:where(.wat-app).repair-ui-admin .main.collection-patterns :where(.workflow-actions, .portal-ui-entity-actions) > :where(a, button, form) {
        width: 100%;
    }
}

/* #endregion */

/* #region Admin Repair final audit corrections */

body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-atlas-review-field-card {
    width: 100%;
    appearance: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-atlas-review-field-card:is(:hover, :focus-visible) {
    border-color: rgba(0, 127, 222, 0.42);
    background: #f8fcff;
    box-shadow: 0 8px 20px rgba(0, 127, 222, 0.08);
    transform: translateY(-1px);
    outline: 0;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-atlas-review-field-card--warning {
    border-color: #f7c977;
    background: #fff9e9;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-atlas-review-field-card--warning:is(:hover, :focus-visible) {
    border-color: #e9aa37;
    background: #fff6dc;
}

/* Dashboard metrics keep currency and value on one explicit hierarchy. */
body:where(.wat-app).repair-ui-admin .repair-admin-dashboard .repair-admin-stat-money {
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-height: 25px;
    margin-top: 5px;
    color: var(--text);
    font-size: 25px;
    font-weight: 700;
    line-height: 1;
}

body:where(.wat-app).repair-ui-admin .repair-admin-dashboard .repair-admin-stat-money > .currency {
    display: inline;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
    line-height: 1;
}

body:where(.wat-app).repair-ui-admin .repair-admin-dashboard .repair-admin-stat-money > .currency-value {
    display: inline;
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

body:where(.wat-app).repair-ui-admin .repair-admin-dashboard .repair-admin-stat-money-detail > :where(.currency, .currency-value) {
    display: inline;
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

/* Shared Repair-service selectors use the full card as their visual control. */
body:where(.wat-app).repair-ui-admin .repair-admin-default-services .rsx-summary-card {
    grid-template-rows: minmax(112px, 1fr) auto;
    align-content: stretch;
    min-height: 190px;
}

body:where(.wat-app).repair-ui-admin .repair-admin-default-services .rsx-card-toggle-button {
    display: grid;
    width: 100%;
    min-height: 112px;
    place-items: center;
    align-content: center;
    gap: 9px;
    text-align: center;
}

body:where(.wat-app).repair-ui-admin .repair-admin-default-services .rsx-card-toggle-button .e-waste-card_body {
    justify-items: center;
    text-align: center;
}

body:where(.wat-app).repair-ui-admin .repair-admin-default-services .rsx-card-actions {
    z-index: 2;
    width: 100%;
    justify-content: center;
}

/* Dedicated service-type cards keep identity and actions on centered rails. */
body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-service-type-card {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-content: space-between;
    gap: 14px;
    min-height: 172px;
    text-align: center;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-service-type-card__identity {
    display: grid;
    min-width: 0;
    place-items: center;
    align-content: center;
    gap: 10px;
    padding-top: 6px;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-service-type-card__identity strong {
    overflow-wrap: anywhere;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-service-type-card__actions {
    width: 100%;
    justify-content: center;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns :where(.repair-admin-service-type-card__order, .repair-admin-service-type-card__manage) {
    justify-content: center;
}

/* Booking-default panels and scope cards preserve the Collection panel rails. */
body:where(.wat-app).repair-ui-admin .main.collection-patterns :where(.repair-admin-booking-card, .repair-admin-booking-issues) {
    padding: 0;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-booking-card > form {
    gap: 0;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-scope-card {
    display: flex;
    min-height: 194px;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-scope-card__identity {
    display: grid;
    min-width: 0;
    grid-template-columns: 37px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-scope-card__badges {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-scope-card .portal-ui-entity-actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: auto;
    border-top: 1px solid var(--border);
    padding-top: 12px;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-scope-search {
    display: grid;
    width: min(100%, 460px);
    gap: 5px;
    margin: 0 0 12px;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-scope-search label {
    display: grid;
    gap: 5px;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-scope-table {
    min-width: 680px;
}

body:where(.wat-app).repair-ui-admin .main.collection-patterns .repair-admin-scope-table__action {
    width: 112px;
    white-space: nowrap;
}

/* Admin Repair modals live outside .collection-patterns but use the same controls. */
body:where(.wat-app).repair-ui-admin #modalContainer .workflow-actions {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

body:where(.wat-app).repair-ui-admin #modalContainer .button {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: var(--button-radius);
    padding: 0 15px;
    color: inherit;
    background: #fff;
    font: inherit;
    font-weight: var(--strong-weight);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

body:where(.wat-app).repair-ui-admin #modalContainer .button :where(i[data-lucide], svg) {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

body:where(.wat-app).repair-ui-admin #modalContainer .button-primary {
    color: #fff;
    background: var(--primary-gradient);
    box-shadow: var(--action-shadow);
    font-weight: var(--title-weight);
}

body:where(.wat-app).repair-ui-admin #modalContainer .button-secondary {
    border: 1px solid #b9d4ff;
    color: var(--wat-blue-deep);
    background: #fff;
    box-shadow: none;
}

body:where(.wat-app).repair-ui-admin #modalContainer .button-danger {
    border: 1px solid #ffd1cc;
    color: #b42318;
    background: #fff1f0;
    box-shadow: none;
}

body:where(.wat-app).repair-ui-admin #modalContainer .modal-heading .mini-icon {
    display: grid;
    width: 37px;
    height: 37px;
    place-items: center;
    border-radius: 50%;
    color: var(--wat-blue);
    background: #eaf4ff;
}

body:where(.wat-app).repair-ui-admin #modalContainer .modal-heading .mini-icon :where(i[data-lucide], svg) {
    width: 18px;
    height: 18px;
}

body:where(.wat-app).repair-ui-admin #modalContainer > .repair-admin-atlas-modal {
    width: min(1180px, calc(100vw - 32px));
    max-width: none;
}

body:where(.wat-app).repair-ui-admin #modalContainer .repair-atlas-review-table {
    min-width: 860px;
}

body:where(.wat-app).repair-ui-admin #modalContainer .repair-atlas-review-table th:last-child {
    position: sticky;
    z-index: 3;
    right: 0;
    min-width: 218px;
    background: var(--surface-soft);
    box-shadow: -10px 0 14px -16px rgba(4, 45, 75, 0.5);
}

body:where(.wat-app).repair-ui-admin #modalContainer .repair-atlas-review-actions-cell {
    position: sticky;
    z-index: 2;
    right: 0;
    width: 218px;
    min-width: 218px;
    background: #fff;
    box-shadow: -10px 0 14px -16px rgba(4, 45, 75, 0.5);
}

body:where(.wat-app).repair-ui-admin #modalContainer .repair-atlas-review-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}

body:where(.wat-app).repair-ui-admin #modalContainer .repair-atlas-review-actions form {
    display: flex;
    margin: 0;
}

body:where(.wat-app).repair-ui-admin #modalContainer .repair-atlas-review-actions .button {
    min-height: 36px;
    gap: 6px;
    padding-inline: 8px;
}

@media (max-width: 640px) {
    body:where(.wat-app).repair-ui-admin #modalContainer .repair-atlas-review-table th:last-child,
    body:where(.wat-app).repair-ui-admin #modalContainer .repair-atlas-review-actions-cell {
        width: 86px;
        min-width: 86px;
    }

    body:where(.wat-app).repair-ui-admin #modalContainer .repair-atlas-review-table th:last-child {
        font-size: 0;
    }

    body:where(.wat-app).repair-ui-admin #modalContainer .repair-atlas-review-actions .button {
        width: 36px;
        min-width: 36px;
        padding: 0;
        gap: 0;
        font-size: 0;
    }
}

body:where(.wat-app).repair-ui-admin .repair-admin-dashboard .portal-ui-filter-bar {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 12px;
}

body:where(.wat-app).repair-ui-admin .repair-admin-dashboard .portal-ui-filter-heading {
    flex: 0 0 auto;
}

body:where(.wat-app).repair-ui-admin .repair-admin-dashboard .portal-ui-filter-pills {
    flex: 1 1 auto;
}

@media (max-width: 900px) {
    body:where(.wat-app).repair-ui-admin .repair-admin-dashboard .portal-ui-filter-bar {
        align-items: stretch;
        flex-direction: column;
    }
}

/* #endregion */

/* #region Portal residual states and flows */

body:where(.wat-app).repair-ui-portal .collection-patterns .repairer-shops-form {
    display: flex;
    gap: 0;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repairer-shops-form__body {
    display: grid;
    min-width: 0;
    gap: 16px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-confirmation-body .state-hero-card {
    max-width: 760px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns.repair-notification-page .repair-notification-landing__form {
    min-height: 0;
    align-content: start;
}

body:where(.wat-app).repair-ui-portal .collection-patterns :where(.repair-notification-landing, .repair-notification-fallback) {
    display: flex;
    align-items: stretch;
    gap: 0;
    text-align: left;
}

body:where(.wat-app).repair-ui-portal .collection-patterns :where(.repair-notification-landing, .repair-notification-fallback)[hidden] {
    display: none;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-notification-panel-body {
    display: grid;
    justify-items: center;
    gap: 12px;
    text-align: center;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .repair-notification-panel-body .workflow-actions {
    justify-content: center;
}

@media (max-width: 900px) {
    body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-shop-intro {
        grid-template-columns: minmax(0, 1fr);
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .repair-ui-upload-zone {
        align-items: stretch;
        flex-direction: column;
    }

    body:where(.wat-app).repair-ui-portal .collection-patterns .repair-notification-panel-body .workflow-actions {
        width: 100%;
    }
}

/* #endregion */

/* #region Portal item-type search popup */

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-items-section > .buttons-row {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-items-section .item-type-popup {
    position: absolute;
    z-index: 240;
    top: calc(100% + 8px);
    left: 0;
    display: grid;
    width: min(420px, calc(100vw - 48px));
    max-height: none;
    gap: 10px;
    overflow: visible;
    border: 1px solid #d4e2ea;
    border-radius: 12px;
    box-shadow: 0 22px 54px rgba(5, 56, 84, 0.18);
    background: #fff;
    padding: 10px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-items-section .item-type-popup label {
    display: grid;
    gap: 6px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-items-section .item-type-popup input[type="search"] {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    border: 1px solid #d4e2ea;
    border-radius: 10px;
    background: #fff;
    color: var(--text);
    padding: 0 10px;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-items-section .item-type-popup input[type="search"]:focus {
    border-color: var(--wat-blue);
    box-shadow: 0 0 0 3px rgba(0, 127, 222, 0.09);
    outline: 0;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-items-section .item-type-popup .popup-list {
    display: grid;
    max-height: min(34vh, 280px);
    gap: 7px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-items-section .item-type-popup .popup-button {
    display: grid;
    width: 100%;
    justify-items: center;
    gap: 2px;
    border: 1px solid #dbe8f0;
    border-radius: 10px;
    background: #fbfdff;
    color: var(--text);
    padding: 9px 10px;
    text-align: center;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-items-section .item-type-popup .popup-button:is(:hover, :focus-visible) {
    border-color: #9cddf1;
    background: #f0fbff;
    outline: 0;
}

body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-items-section .item-type-popup .popup-button small {
    text-align: center;
}

@media (max-width: 540px) {
    body:where(.wat-app).repair-ui-portal .collection-patterns .portal-ui-items-section .item-type-popup {
        position: fixed;
        inset: auto 12px 12px;
        width: auto;
        max-height: min(70dvh, 520px);
        overflow-y: auto;
    }
}

/* #endregion */