body {
    color: var(--color-base-content);
    background-color: var(--color-base-200);
    font-family: var(--typography-font-base);
    font-size: var(--typography-body-size);
}

main {
    width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: inherit;
    text-decoration: underline;
}

a.card:hover {
    text-decoration: none;
}

/* daisyUI の btn 文字色を優先し、背景とのコントラストを確保する */
a.btn {
    color: var(--btn-fg);
}

a.btn:hover {
    color: var(--btn-fg);
    text-decoration: none;
}

h1 {
    margin: 0;
    font-size: var(--typography-h1-size);
    font-weight: var(--font-weight-bold);
}

h2 {
    text-align: center;
    margin: 0;
    font-size: var(--typography-h2-size);
    font-weight: var(--font-weight-bold);
}

.btn-sm {
    font-size: var(--typography-label-size);
}

.ui-header {
    background-color: var(--color-surface-header);
    border-bottom: var(--border-width-default) solid var(--color-border-ui);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* ヘッダー内マスターメニュー（daisyUI dropdown クラスに依存しない） */
.ui-header-dropdown {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.ui-header-dropdown--field {
    display: inline-flex;
    height: auto;
}

.ui-header-dropdown-panel {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    min-width: 12rem;
    padding: 0.5rem;
    z-index: 100;
    list-style: none;
    margin: 0;
    background: var(--color-surface-header);
    border: 1px solid var(--color-border-ui);
    border-radius: var(--radius-container-lg);
    box-shadow: 0 4px 1.25rem color-mix(in oklch, var(--color-base-content) 30%, transparent);
}

.ui-header-dropdown--field .ui-header-dropdown-panel {
    left: 0;
    right: auto;
}

.ui-header-dropdown:focus-within .ui-header-dropdown-panel {
    display: block;
}

.ui-header-dropdown-panel li {
    margin: 0;
}

.ui-header-dropdown-panel a {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-button);
    color: var(--color-text-L1);
    font-size: var(--typography-body-md-size);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.ui-header-dropdown-panel a:hover {
    background: var(--color-brand-pale);
    color: var(--color-brand);
    text-decoration: none;
}

.ui-standalone-body {
    min-height: 100vh;
    background: var(--color-surface-page);
    color: var(--color-text-L1);
}

.hanbaiq-parent-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

a.hanbaiq-parent-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.65rem;
    border-radius: var(--radius-badge);
    border: var(--border-width-interactive) solid var(--color-border-ui);
    color: var(--color-text-L2);
    text-decoration: none;
    transition: all 0.15s;
}

a.hanbaiq-parent-tab:hover {
    border-color: var(--color-brand);
    color: var(--color-brand);
}

.hanbaiq-parent-tab--active {
    border-color: var(--color-brand);
    background: var(--color-brand-pale);
    color: var(--color-brand);
}

.ui-memo-dialog,
.ui-desired-delivery-dialog {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
}

.ui-memo-dialog:not([open]),
.ui-desired-delivery-dialog:not([open]) {
    display: none;
}

.ui-memo-dialog[open],
.ui-desired-delivery-dialog[open] {
    display: grid;
    align-items: center;
    justify-items: center;
    padding: 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ui-desired-delivery-dialog[open] {
    align-content: center;
}

.ui-desired-delivery-dialog > .ui-card {
    width: min(100%, 48rem);
    box-sizing: border-box;
}

.ui-memo-dialog::backdrop,
.ui-desired-delivery-dialog::backdrop {
    background: color-mix(in oklch, var(--color-content-default) 45%, transparent);
}

#sales_output_tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.sales-output-tab {
    min-width: 2.25rem;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-badge);
    border: var(--border-width-interactive) solid var(--color-border-ui);
    background: var(--color-surface-header);
    color: var(--color-text-L2);
    font-size: var(--typography-supplement-md-size);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.15s;
}

.sales-output-tab:hover {
    border-color: var(--color-brand);
    color: var(--color-brand);
}

.sales-output-tab--active {
    border-color: var(--color-brand);
    background: var(--color-brand-pale);
    color: var(--color-brand);
}

/* 得意先フォーム等: ラジオ選択カード（daisy card / primary 依存を避ける） */
.ui-select-card-label {
    display: block;
    margin-bottom: 0;
    cursor: pointer;
    width: 100%;
    white-space: normal;
    border: 2px solid var(--color-border-ui);
    border-radius: var(--radius-container-lg);
    background: var(--color-surface-header);
    transition: all 0.15s;
}

.ui-select-card-label:has(input:checked) {
    border-color: var(--color-brand);
    background: var(--color-brand-pale);
}

.ui-select-card-label .ui-select-card-body {
    padding: 0.5rem 0.75rem;
}

.subheader {
    padding: 0.5em 0;
}

table {
    font-size: var(--typography-tablebody-size);
}

tr {
    page-break-inside: avoid;
    page-break-after: auto;
}

.table th {
    padding-left: 1rem;
    padding-right: 1rem;
    vertical-align: middle;
}

.table td {
    padding-left: 1rem;
    padding-right: 1rem;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.logo-mark {
    width: 11px;
    height: 11px;
    background: var(--color-brand);
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    display: inline-block;
    flex-shrink: 0;
}

/* アプリロゴ周りのタイポ（ヘッダー） */
.ui-logo-text {
    font-size: var(--typography-title-md-size);
    letter-spacing: var(--typography-logo-letter-spacing);
}

.company-mark {
    width: 11px;
    height: 11px;
    background: var(--color-base-100);
    clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
    display: inline-block;
    flex-shrink: 0;
    transform: rotate(90deg);
}

.menu-dropdown-item {
    width: 100%;
    justify-content: flex-start;
    gap: 0.5rem;
    text-align: left;
}

.ui-client-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-badge);
    border: 1px solid var(--color-border-ui);
    background: var(--color-surface-header);
    color: var(--color-text-L1);
    font-size: var(--typography-body-md-size);
}

.table td.dropdown-cell,
.ui-table td.dropdown-cell {
    overflow: visible;
    text-overflow: clip;
}

.nav-link {
    color: var(--color-text-L2);
    font-size: var(--typography-nav-link-size);
    font-weight: var(--font-weight-medium);
    padding: 0 0.875rem;
    height: 100%;
    display: flex;
    align-items: center;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
    text-decoration: none;
}

.nav-link:hover {
    color: var(--color-base-content);
    text-decoration: none;
}

.nav-link.active {
    color: var(--color-brand);
    border-bottom-color: var(--color-brand);
    font-weight: var(--font-weight-semibold);
}

.nav-link--sm {
    color: var(--color-text-L3);
    font-size: var(--typography-nav-link-sm-size);
}

.nav-sep {
    width: 1px;
    height: 18px;
    background: var(--color-base-300);
    flex-shrink: 0;
    margin: 0 6px;
}

.w25 { width: 25px; }
.w30 { width: 30px; }
.w35 { width: 35px; }
.w40 { width: 40px; }
.w45 { width: 45px; }
.w50 { width: 50px; }
.w60 { width: 60px; }
.w75 { width: 75px; }
.w85 { width: 85px; }
.w100 { width: 100px; }
.w125 { width: 125px; }
.w150 { width: 150px; }
.w175 { width: 175px; }
.w200 { width: 200px; }
.w250 { width: 250px; }
.w300 { width: 300px; }

.mw100 { max-width: 100px; }
.mw125 { max-width: 125px; }
.mw150 { max-width: 150px; }
.mw200 { max-width: 200px; }
.mw250 { max-width: 250px; }
.mw300 { max-width: 300px; }
.mw350 { max-width: 350px; }
.mw400 { max-width: 400px; }

.fix-head thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--color-base-100);
}

.status-split-badge {
    display: inline-flex;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--color-base-300);
    border-radius: var(--radius-status-split);
    cursor: default;
}

.status-split-badge-item {
    width: 50%;
    padding: 0.25rem 0.5rem;
    font-size: var(--typography-label-size);
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}

.status-split-badge-item-border {
    border-left: 1px solid var(--color-base-300);
}

/* 二重送信防止オーバーレイ（layout.ejs） */
#dbl-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.ui-overlay-card {
    background: var(--color-base-100);
    padding: 2rem;
    border-radius: var(--radius-container-md);
    text-align: center;
    box-shadow: 0 4px 1.25rem color-mix(in oklch, var(--color-base-content) 30%, transparent);
}

.ui-overlay-spinner {
    border: 3px solid var(--color-base-200);
    border-top: 3px solid var(--color-action-primary);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0 auto 1rem;
    animation: ui-overlay-spin 1s linear infinite;
}

@keyframes ui-overlay-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ─── Typography utilities ─── */
.typography-title {
    font-family: var(--typography-title-font);
    font-size: var(--typography-title-size);
    font-weight: var(--typography-title-weight);
    line-height: var(--typography-title-line-height);
    letter-spacing: var(--typography-title-letter-spacing);
}

.typography-heading {
    font-family: var(--typography-heading-font);
    font-size: var(--typography-heading-size);
    font-weight: var(--typography-heading-weight);
    line-height: var(--typography-heading-line-height);
    letter-spacing: var(--typography-heading-letter-spacing);
}

.typography-body {
    font-family: var(--typography-body-font);
    font-size: var(--typography-body-size);
    font-weight: var(--typography-body-weight);
    line-height: var(--typography-body-line-height);
    letter-spacing: var(--typography-body-letter-spacing);
}

.typography-label {
    font-family: var(--typography-label-font);
    font-size: var(--typography-label-size);
    font-weight: var(--typography-label-weight);
    line-height: var(--typography-label-line-height);
    letter-spacing: var(--typography-label-letter-spacing);
}

.typography-tableheader {
    font-family: var(--typography-tableheader-font);
    font-size: var(--typography-tableheader-size);
    font-weight: var(--typography-tableheader-weight);
    line-height: var(--typography-tableheader-line-height);
    letter-spacing: var(--typography-tableheader-letter-spacing);
}

.typography-tablebody {
    font-family: var(--typography-tablebody-font);
    font-size: var(--typography-tablebody-size);
    font-weight: var(--typography-tablebody-weight);
    line-height: var(--typography-tablebody-line-height);
    letter-spacing: var(--typography-tablebody-letter-spacing);
}

/* マルチレベル typography（サイズのみ差分、他は単一 Semantic と同一） */
.typography-title-lg {
    font-family: var(--typography-title-lg-font);
    font-size: var(--typography-title-lg-size);
    font-weight: var(--typography-title-lg-weight);
    line-height: var(--typography-title-lg-line-height);
    letter-spacing: var(--typography-title-lg-letter-spacing);
}

.typography-title-md {
    font-family: var(--typography-title-md-font);
    font-size: var(--typography-title-md-size);
    font-weight: var(--typography-title-md-weight);
    line-height: var(--typography-title-md-line-height);
    letter-spacing: var(--typography-title-md-letter-spacing);
}

.typography-heading-xl {
    font-family: var(--typography-heading-xl-font);
    font-size: var(--typography-heading-xl-size);
    font-weight: var(--typography-heading-xl-weight);
    line-height: var(--typography-heading-xl-line-height);
    letter-spacing: var(--typography-heading-xl-letter-spacing);
}

.typography-heading-lg {
    font-family: var(--typography-heading-lg-font);
    font-size: var(--typography-heading-lg-size);
    font-weight: var(--typography-heading-lg-weight);
    line-height: var(--typography-heading-lg-line-height);
    letter-spacing: var(--typography-heading-lg-letter-spacing);
}

.typography-heading-md {
    font-family: var(--typography-heading-md-font);
    font-size: var(--typography-heading-md-size);
    font-weight: var(--typography-heading-md-weight);
    line-height: var(--typography-heading-md-line-height);
    letter-spacing: var(--typography-heading-md-letter-spacing);
}

.typography-heading-sm {
    font-family: var(--typography-heading-sm-font);
    font-size: var(--typography-heading-sm-size);
    font-weight: var(--typography-heading-sm-weight);
    line-height: var(--typography-heading-sm-line-height);
    letter-spacing: var(--typography-heading-sm-letter-spacing);
}

.typography-body-md {
    font-family: var(--typography-body-md-font);
    font-size: var(--typography-body-md-size);
    font-weight: var(--typography-body-md-weight);
    line-height: var(--typography-body-md-line-height);
    letter-spacing: var(--typography-body-md-letter-spacing);
}

.typography-body-sm {
    font-family: var(--typography-body-sm-font);
    font-size: var(--typography-body-sm-size);
    font-weight: var(--typography-body-sm-weight);
    line-height: var(--typography-body-sm-line-height);
    letter-spacing: var(--typography-body-sm-letter-spacing);
}

.typography-label-md {
    font-family: var(--typography-label-md-font);
    font-size: var(--typography-label-md-size);
    font-weight: var(--typography-label-md-weight);
    line-height: var(--typography-label-md-line-height);
    letter-spacing: var(--typography-label-md-letter-spacing);
}

.typography-tableheader-md {
    font-family: var(--typography-tableheader-md-font);
    font-size: var(--typography-tableheader-md-size);
    font-weight: var(--typography-tableheader-md-weight);
    line-height: var(--typography-tableheader-md-line-height);
    letter-spacing: var(--typography-tableheader-md-letter-spacing);
}

.typography-tablebody-md {
    font-family: var(--typography-tablebody-md-font);
    font-size: var(--typography-tablebody-md-size);
    font-weight: var(--typography-tablebody-md-weight);
    line-height: var(--typography-tablebody-md-line-height);
    letter-spacing: var(--typography-tablebody-md-letter-spacing);
}

.typography-caption-md {
    font-family: var(--typography-caption-md-font);
    font-size: var(--typography-caption-md-size);
    font-weight: var(--typography-caption-md-weight);
    line-height: var(--typography-caption-md-line-height);
    letter-spacing: var(--typography-caption-md-letter-spacing);
}

.typography-supplement-md {
    font-family: var(--typography-supplement-md-font);
    font-size: var(--typography-supplement-md-size);
    font-weight: var(--typography-supplement-md-weight);
    line-height: var(--typography-supplement-md-line-height);
    letter-spacing: var(--typography-supplement-md-letter-spacing);
}

.ui-text-default { color: var(--color-text-L1); }
.ui-text-muted { color: var(--color-text-L2); }
.ui-text-light { color: var(--color-text-L3); }
.ui-text-success { color: var(--color-brand); }
.ui-text-warning { color: var(--color-caution); }
.ui-text-danger { color: var(--color-danger); }

.ui-text-info { color: var(--color-link); }
.ui-text-link { color: var(--color-link); }

.ui-btn,
.ui-btn-primary,
.ui-btn-secondary,
.ui-btn-amber,
.ui-btn-danger,
.ui-btn-search,
.ui-btn-reflect {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border: var(--border-width-interactive) solid transparent;
    font-family: inherit;
    font-size: var(--typography-ui-control-size);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    padding: 0.5625rem 1.25rem;
    border-radius: var(--radius-button);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.ui-btn:hover,
.ui-btn-primary:hover,
.ui-btn-secondary:hover,
.ui-btn-amber:hover,
.ui-btn-danger:hover,
.ui-btn-search:hover,
.ui-btn-reflect:hover {
    text-decoration: none;
}

.ui-btn:active,
.ui-btn-primary:active,
.ui-btn-secondary:active,
.ui-btn-amber:active,
.ui-btn-danger:active,
.ui-btn-search:active,
.ui-btn-reflect:active {
    transform: translateY(0) scale(0.98);
}

.ui-btn-primary {
    padding: 0.4375rem 1.5rem;
    border-radius: var(--radius-button-primary);
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-content-primary);
}

.ui-btn-primary:hover {
    background: var(--color-brand-hover);
    border-color: var(--color-brand-hover);
}

.ui-btn {
    background: transparent;
    border-color: var(--color-brand);
    color: var(--color-brand);
}

.ui-btn:hover {
    background: var(--color-brand-pale);
}

.ui-btn-secondary {
    padding: 0.4375rem 1.125rem;
    border-radius: var(--radius-button-primary);
    background: var(--color-surface-header);
    border-color: var(--color-border-ui);
    color: var(--color-text-L2);
    font-weight: var(--font-weight-medium);
}

.ui-btn-secondary:hover {
    border-color: var(--color-text-L2);
    color: var(--color-text-L1);
}

.ui-btn-amber {
    padding: 0.4375rem 1.125rem;
    border-radius: var(--radius-button-primary);
    background: var(--color-caution-pale);
    border-color: var(--color-caution-border);
    color: var(--color-caution);
}

.ui-btn-amber:hover {
    background: var(--color-caution-pale-hover);
}

.ui-btn-danger {
    padding: 0.3125rem 0.875rem;
    border-radius: var(--radius-badge);
    border-color: var(--color-danger);
    color: var(--color-danger);
    background: var(--color-surface-header);
}

.ui-btn-danger:hover {
    background: var(--color-danger-pale);
}

.ui-btn-search {
    padding: 0.5625rem 1.75rem;
    border: none;
    background: var(--color-brand);
    color: var(--color-content-primary);
    font-weight: var(--font-weight-bold);
}

.ui-btn-search:hover {
    background: var(--color-brand-hover);
}

.ui-btn-reflect {
    padding: 0.5625rem 1.25rem;
    border: none;
    background: var(--color-link);
    color: var(--color-content-primary);
    font-weight: var(--font-weight-bold);
}

.ui-btn-reflect:hover {
    background: var(--color-link-hover);
}

.ui-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem 0.6rem;
    border-radius: var(--radius-badge);
    font-size: var(--typography-caption-md-size);
    font-weight: var(--font-weight-semibold);
    border: 1px solid transparent;
}

.ui-badge--ok {
    background: var(--color-brand-pale);
    border-color: var(--color-brand-mid);
    color: var(--color-brand);
}

.ui-badge--pending {
    background: var(--color-caution-pale);
    border-color: var(--color-caution-border);
    color: var(--color-caution-deep-mid);
}

.ui-badge--unconfirmed {
    background: var(--color-danger-pale);
    border-color: var(--color-danger-border);
    color: var(--color-danger);
}

.ui-badge--muted {
    background: var(--color-surface-muted);
    border-color: var(--color-border-ui);
    color: var(--color-text-L2);
}

/* 照合状態表示（商品・納品先）。操作不可・ホバー変化なし */
.ui-matching-status {
    cursor: default;
}

.ui-chip,
.ui-status-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.3125rem 0.75rem;
    border-radius: var(--radius-badge);
    font-size: var(--typography-supplement-md-size);
    font-weight: var(--font-weight-semibold);
    border: var(--border-width-interactive) solid var(--color-border-ui);
    color: var(--color-text-L2);
    background: var(--color-surface-muted);
    cursor: pointer;
    transition: all 0.15s;
}

.ui-status-filter {
    background: var(--color-surface-header);
    font-family: inherit;
}

.ui-chip:hover {
    border-color: var(--color-brand);
    color: var(--color-brand);
    background: var(--color-brand-pale);
}

.ui-chip.is-active {
    background: var(--color-brand-pale);
    border-color: var(--color-brand);
    color: var(--color-brand);
}

.ui-chip:has(input:checked) {
    background: var(--color-brand-pale);
    border-color: var(--color-brand);
    color: var(--color-brand);
}

/* ステータス修飾子の状態色は .ui-chip では従来どおり（チップのみ） */
.ui-chip.ui-status-filter--ok {
    border-color: var(--color-brand);
    background: var(--color-brand-pale);
    color: var(--color-brand);
}

.ui-chip.ui-status-filter--pending {
    border-color: var(--color-caution-border);
    background: var(--color-caution-pale);
    color: var(--color-caution-deep-mid);
}

.ui-chip.ui-status-filter--unconfirmed {
    border-color: var(--color-danger);
    background: var(--color-danger-pale);
    color: var(--color-danger);
}

.ui-chip.ui-status-filter--disabled {
    border-color: var(--color-text-L3);
    background: var(--color-surface-muted);
    color: var(--color-text-L2);
}

.ui-chip.ui-status-filter--ok:hover {
    border-color: var(--color-brand);
    background: var(--color-brand-pale);
    color: var(--color-brand);
}

.ui-chip.ui-status-filter--pending:hover {
    border-color: var(--color-caution-border);
    background: var(--color-caution-pale);
    color: var(--color-caution-deep-mid);
}

.ui-chip.ui-status-filter--unconfirmed:hover {
    border-color: var(--color-danger);
    background: var(--color-danger-pale);
    color: var(--color-danger);
}

.ui-chip.ui-status-filter--disabled:hover {
    border-color: var(--color-text-L3);
    background: var(--color-surface-muted);
    color: var(--color-text-L2);
}

.ui-status-filter:hover:not(:disabled) {
    border-color: var(--color-text-L2);
    color: var(--color-text-L1);
}

.ui-status-filter:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
}

.ui-status-filter.is-active.ui-status-filter--ok {
    border-color: var(--color-brand);
    background: var(--color-brand-pale);
    color: var(--color-brand);
}

.ui-status-filter.is-active.ui-status-filter--pending {
    border-color: var(--color-caution-border);
    background: var(--color-caution-pale);
    color: var(--color-caution-deep-mid);
}

.ui-status-filter.is-active.ui-status-filter--unconfirmed {
    border-color: var(--color-danger);
    background: var(--color-danger-pale);
    color: var(--color-danger);
}

.ui-status-filter.is-active.ui-status-filter--disabled {
    border-color: var(--color-text-L3);
    background: var(--color-surface-muted);
    color: var(--color-text-L2);
}

/* 選択中はホバーでも状態色を維持（一覧ラジオ用修飾子と同様の見え分けを保つ） */
.ui-status-filter.is-active.ui-status-filter--ok:hover:not(:disabled) {
    border-color: var(--color-brand);
    background: var(--color-brand-pale);
    color: var(--color-brand);
}

.ui-status-filter.is-active.ui-status-filter--pending:hover:not(:disabled) {
    border-color: var(--color-caution-border);
    background: var(--color-caution-pale);
    color: var(--color-caution-deep-mid);
}

.ui-status-filter.is-active.ui-status-filter--unconfirmed:hover:not(:disabled) {
    border-color: var(--color-danger);
    background: var(--color-danger-pale);
    color: var(--color-danger);
}

.ui-status-filter.is-active.ui-status-filter--disabled:hover:not(:disabled) {
    border-color: var(--color-text-L3);
    background: var(--color-surface-muted);
    color: var(--color-text-L2);
}

.ui-status-filter.is-active.ui-status-filter--invalid {
    border-color: var(--color-text-L3);
    background: var(--color-surface-muted);
    color: var(--color-text-L2);
}

.ui-status-filter.is-active.ui-status-filter--invalid:hover:not(:disabled) {
    border-color: var(--color-text-L3);
    background: var(--color-surface-muted);
    color: var(--color-text-L2);
}

.ui-radio-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-badge);
    font-size: var(--typography-label-size);
    font-weight: var(--font-weight-semibold);
    border: var(--border-width-interactive) solid var(--color-border-ui);
    color: var(--color-text-L2);
    background: var(--color-surface-base);
    cursor: pointer;
    transition: all 0.15s;
}

.ui-radio-toggle:has(input:checked) {
    border-color: var(--color-brand);
    background: var(--color-brand-pale);
    color: var(--color-brand);
}

.ui-radio-toggle--unconfirmed:has(input:checked) {
    border-color: var(--color-danger);
    background: var(--color-danger-pale);
    color: var(--color-danger);
}

.ui-radio-toggle--disabled:has(input:checked) {
    border-color: var(--color-text-L3);
    background: var(--color-surface-subtle);
    color: var(--color-text-L2);
}

.ui-bar-sep {
    width: 1px;
    height: 22px;
    background: var(--color-border-ui);
    margin: 0 0.4rem;
}

.ui-page-bar {
    background: var(--color-surface-base);
    border-bottom: 1px solid var(--color-border-ui);
    padding: 10px 24px;
    position: sticky;
    top: 64px;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-wrap: wrap;
    min-height: 65.5px;
}

.ui-page-title-block { display: flex; flex-direction: column; gap: 0.125rem; min-width: 160px;}
.ui-breadcrumb { font-size: var(--typography-caption-md-size); color: var(--color-text-L2); }

.ui-record-pager,
.ui-record-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-variant-numeric: tabular-nums;
}

.ui-record-pager__arrow,
.ui-record-nav__arrow {
    height: 26px;
    font-size: var(--typography-supplement-md-size);
    border: 1px solid var(--color-border-ui);
    border-radius: var(--radius-badge);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-L2);
    background: var(--color-surface-header);
    cursor: pointer;
    transition: all 0.15s;
}

.ui-record-pager__arrow {
    min-width: 36px;
    width: auto;
}

.ui-record-nav__arrow {
    min-width: 26px;
    width: 26px;
}

.ui-record-pager__arrow:hover,
.ui-record-nav__arrow:hover {
    border-color: var(--color-brand);
    color: var(--color-brand);
    background: var(--color-brand-pale);
}

.ui-record-pager__arrow:disabled,
.ui-record-pager__arrow[disabled],
.ui-record-nav__arrow:disabled,
.ui-record-nav__arrow[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.ui-record-pager__count,
.ui-record-nav__count {
    color: var(--color-text-L2);
    font-size: var(--typography-supplement-md-size);
    font-weight: var(--typography-supplement-md-weight);
}

.ui-area-header {
    background: var(--color-surface-header);
    border-top: 1px solid var(--color-border-ui);
    border-left: 1px solid var(--color-border-ui);
    border-right: 1px solid var(--color-border-ui);
    border-bottom: var(--border-width-accent) solid var(--color-step3);
    border-radius: var(--radius-container-lg) var(--radius-container-lg) 0 0;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.ui-area-header--step1 { border-bottom-color: var(--color-step1); }
.ui-area-header--step2 { border-bottom-color: var(--color-step2); }
.ui-area-header--step3 { border-bottom-color: var(--color-step3); }

.ui-step-badge {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-step-badge-content);
    font-size: var(--typography-caption-md-size);
    font-weight: var(--font-weight-bold);
    background: var(--color-step3);
}

.ui-area-header--step1 .ui-step-badge {
    background: var(--color-step1);
    color: var(--color-step-badge-content);
}

.ui-area-header--step2 .ui-step-badge {
    background: var(--color-step2);
    color: var(--color-step-badge-content);
}

.ui-area-header--step3 .ui-step-badge {
    background: var(--color-step3);
    color: var(--color-step-badge-content);
}

.ui-input {
    width: 100%;
    border: var(--border-width-interactive) solid var(--color-border-ui);
    border-radius: var(--radius-badge);
    padding: 0.5rem 0.625rem;
    font-size: var(--typography-ui-control-size);
    color: var(--color-text-L1);
    background: var(--color-surface-input);
    font-variant-numeric: tabular-nums;
    transition: all 0.15s;
}

.ui-input--white {
    background: var(--color-surface-input);
}

.ui-input--code-narrow {
    width: 8.5ch;
    min-width: 8.5ch;
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    text-align: center;
}

.ui-surface-input {
    background: var(--color-surface-input);
}

.ui-input:focus {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 10%, transparent);
}

.ui-input--amber:focus {
    border-color: var(--color-caution);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-caution) 12%, transparent);
}

.ui-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--color-surface-header);
    border: 1px solid var(--color-border-ui);
    border-radius: var(--radius-container-lg);
    /* overflow:hidden を使わない: td 内の絶対配置ドロップダウンをクリップしないため */
    /* 角丸は各コーナーセルの border-radius で個別に設定する */
}

.ui-table thead th {
    background: var(--color-surface-panel);
    color: var(--color-text-L1);
    font-size: var(--typography-caption-md-size);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--color-border-ui);
}

/* テーブル角丸: 各コーナーセルに border-radius を適用 */
.ui-table thead tr:first-child th:first-child { border-radius: var(--radius-container-lg) 0 0 0; }
.ui-table thead tr:first-child th:last-child  { border-radius: 0 var(--radius-container-lg) 0 0; }
.ui-table > tbody:first-child tr:first-child th:first-child,
.ui-table > tbody:first-child tr:first-child td:first-child { border-radius: var(--radius-container-lg) 0 0 0; }
.ui-table > tbody:first-child tr:first-child th:last-child,
.ui-table > tbody:first-child tr:first-child td:last-child  { border-radius: 0 var(--radius-container-lg) 0 0; }
.ui-table tbody tr:last-child td:first-child,
.ui-table tbody tr:last-child th:first-child { border-radius: 0 0 0 var(--radius-container-lg); }
.ui-table tbody tr:last-child td:last-child,
.ui-table tbody tr:last-child th:last-child  { border-radius: 0 0 var(--radius-container-lg) 0; }

.ui-table th,
.ui-table td {
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--color-border-ui);
}

.ui-table tbody td {
    font-weight: var(--font-weight-medium);
}

.ui-table tbody tr:last-child td { border-bottom: none; }
.ui-table tbody tr:hover { background: var(--color-brand-pale); }

.ui-hq-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: center;
    border-bottom: 1px solid var(--color-border-ui);
}

.ui-hq-row-label {
    padding: 0.625rem 0.75rem;
    background: var(--color-surface-panel);
    font-size: var(--typography-supplement-md-size);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-L1);
    align-self: stretch;
    display: flex;
    align-items: center;
}

.ui-hq-row-value {
    padding: 0.5rem 0.75rem;
}

.ui-hq-row--mismatch .ui-hq-row-label,
.ui-field-mismatch .ui-hq-row-label {
    background: var(--color-danger-label-bg);
    color: var(--color-danger);
}

.ui-hq-row--mismatch .ui-hq-row-value,
.ui-field-mismatch .ui-hq-row-value {
    background: var(--color-danger-deep);
    border-left: var(--border-width-accent) solid var(--color-danger);
}

.ui-hq-row--mismatch .ui-input,
.ui-field-mismatch .ui-input {
    border-color: var(--color-danger-border);
}

.ui-order-detail-page .ui-order-detail-step-card {
    border: none;
    border-radius: 0;
    background-color: inherit;
    overflow: visible;
}

.ui-order-detail-page .ui-order-detail-step-body {
    background: var(--color-surface-header);
    border-left: 1px solid var(--color-border-ui);
    border-right: 1px solid var(--color-border-ui);
    border-bottom: 1px solid var(--color-border-ui);
    border-bottom-left-radius: var(--radius-container-lg);
    border-bottom-right-radius: var(--radius-container-lg);
}

.ui-order-detail-page .ui-order-detail-step-body > * {
    min-width: 0;
}

/* 注文明細編集: ラベル列幅（先方入目 / 単位 等を1行表示） */
.ui-order-detail-page {
    --order-detail-label-width: 8.25rem;
}

.ui-search-result-block {
    margin-top: 0.75rem;
    background: var(--color-surface-header);
    border: none;
    border-radius: 0;
    overflow: visible;
}

.ui-search-result-block-head {
    background: var(--color-surface-panel);
    border-bottom: 1px solid var(--color-border-ui);
    border-left: 1px solid var(--color-border-ui);
    border-right: 1px solid var(--color-border-ui);
    border-top: 1px solid var(--color-border-ui);
    border-top-left-radius: var(--radius-container-md);
    border-top-right-radius: var(--radius-container-md);
    padding: 0.625rem 0.75rem;
}

.ui-search-result-pager {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.ui-search-result-pager-arrow {
    width: 1.375rem;
    height: 1.375rem;
    border: 1px solid var(--color-border-ui);
    border-radius: var(--radius-badge);
    background: var(--color-surface-base);
    color: var(--color-text-L2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--typography-caption-md-size);
    line-height: 1;
    transition: all 0.15s;
}

.ui-search-result-pager-arrow:hover {
    border-color: var(--color-brand);
    color: var(--color-brand);
}

.ui-search-result-pager-arrow:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.ui-search-result-pager-count {
    color: var(--color-text-L2);
    font-size: var(--typography-caption-md-size);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ui-search-result-warning {
    margin: 0;
    border-left: 1px solid var(--color-border-ui);
    border-right: 1px solid var(--color-border-ui);
    border-top: none;
    border-bottom: 1px solid var(--color-border-ui);
    border-radius: 0;
}

.ui-search-result-panel {
    margin: 0;
    border-left: 1px solid var(--color-border-ui);
    border-right: 1px solid var(--color-border-ui);
    border-bottom: 1px solid var(--color-border-ui);
    border-bottom-left-radius: var(--radius-container-md);
    border-bottom-right-radius: var(--radius-container-md);
    border-radius: 0;
    overflow: hidden;
}

.ui-search-result-table {
    border: none;
    border-radius: 0;
}

.ui-search-result-table th {
    width: var(--order-detail-label-width);
    background: var(--color-surface-panel);
    color: var(--color-text-L1);
    font-size: var(--typography-caption-md-size);
}

.ui-search-result-table td {
    font-size: var(--typography-body-sm-size);
    background: var(--color-surface-header);
}

.ui-search-result-action-row {
    padding: 0.625rem 0.75rem;
    border-top: 1px solid var(--color-border-ui);
    display: flex;
    justify-content: center;
    background: var(--color-surface-base);
}

.ui-sales-output-row {
    display: grid;
    grid-template-columns: var(--order-detail-label-width) minmax(0, 1fr);
    border-top: 1px solid var(--color-border-ui);
    border-left: none;
    border-right: none;
    border-bottom: none;
}

.ui-sales-output-row--paired {
    grid-template-columns: var(--order-detail-label-width) minmax(0, 1fr) minmax(0, 1fr);
}

.ui-sales-output-row--paired .ui-sales-output-row-control:not(:last-child) {
    border-right: 1px solid var(--color-border-ui);
}

.ui-sales-output-row--delivery-pair {
    grid-template-columns: var(--order-detail-label-width) 8.5ch minmax(0, 1fr);
}

.ui-sales-output-row--delivery-pair .ui-sales-output-row-control:not(:last-child) {
    border-right: none;
}

.ui-sales-output-row:first-child {
    border-top-left-radius: var(--radius-container-md);
    border-top-right-radius: var(--radius-container-md);
    overflow: hidden;
}

.ui-sales-output-row:last-child {
    border-bottom: 1px solid var(--color-border-ui);
    border-bottom-left-radius: var(--radius-container-md);
    border-bottom-right-radius: var(--radius-container-md);
    overflow: hidden;
}

.ui-sales-output-row-label {
    display: flex;
    align-items: center;
    white-space: pre-line;
    padding: 0.5rem 0.75rem;
    background: var(--color-surface-panel);
    color: var(--color-text-L1);
    font-size: var(--typography-caption-md-size);
    font-weight: var(--font-weight-semibold);
    border-right: 1px solid var(--color-border-ui);
}

.ui-sales-output-row-control {
    padding: 0.5rem 0.75rem;
    background: var(--color-surface-header);
}

.ui-sales-output-readonly {
    min-height: 2.125rem;
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--color-border-ui);
    border-radius: var(--radius-badge);
    font-size: var(--typography-body-sm-size);
    color: var(--color-text-L1);
    background: var(--color-surface-base);
}

.ui-sales-output-readonly--dash {
    background: var(--color-surface-base);
}

.ui-sales-output-readonly--clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.5;
}

.ui-sales-output-mismatch-note {
    margin-top: 0.25rem;
    color: var(--color-danger);
    font-size: var(--typography-caption-md-size);
    font-weight: var(--font-weight-bold);
}

.ui-sales-output-row:has(.ui-sales-output-row-control.ui-field-mismatch) .ui-sales-output-row-label {
    background: var(--color-danger-label-bg);
    color: var(--color-danger);
    border-right: var(--border-width-accent) solid var(--color-danger);
}

.ui-sales-output-row-control.ui-field-mismatch {
    background: var(--color-danger-deep);
}

.ui-sales-output-row-control.ui-field-mismatch .ui-input {
    border-color: var(--color-danger-border);
}

.ui-sales-output-row:has(.ui-sales-output-row-control.sales-output-unit-price-unset) .ui-sales-output-row-label {
    background: var(--color-danger-label-bg);
    color: var(--color-danger);
    border-right: var(--border-width-accent) solid var(--color-danger);
}

.ui-sales-output-row-control.sales-output-unit-price-unset {
    background: var(--color-danger-deep);
}

.ui-sales-output-row-control.sales-output-unit-price-unset .sales-output-unit-price-display,
.ui-sales-output-row-control.sales-output-unit-price-unset .sales-output-unit-price-display[tabindex="-1"] {
    background: var(--color-danger-deep);
    border-color: var(--color-danger-border);
}

.ui-sales-output-row-control.sales-output-unit-price-unset .ui-input {
    border-color: var(--color-danger-border);
}

.ui-matching-key {
    background: var(--color-caution-pale);
    border: 1px solid var(--color-caution-soft-border);
    border-radius: var(--radius-badge);
    padding: 0.5rem 0.625rem;
}

.ui-matching-search {
    border: 1px solid var(--color-caution-soft-border);
    border-radius: var(--radius-badge);
    background: var(--color-surface-base);
    /* overflow:hidden を使わない: 絶対配置の combo-options ドロップダウンをクリップしないため */
}

/* ヘッダー部分の角丸はコンテナが overflow:hidden を持てないため個別に設定する */
.ui-matching-search > :first-child {
    border-radius: calc(var(--radius-badge) - 1px) calc(var(--radius-badge) - 1px) 0 0;
    overflow: hidden;
}

.ui-matching-search-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-caution-pale);
    border-bottom: 1px solid var(--color-caution-soft-border);
}

.ui-matching-search-edi-chip {
    background: var(--color-surface-header);
    border-color: var(--color-caution-soft-border);
    color: var(--color-text-L2);
}

.ui-flash-success,
.ui-flash-error,
.ui-flash-warning,
.ui-flash-info {
    border-radius: var(--radius-button);
    padding: 0.75rem 1.125rem;
    border: 1px solid var(--color-border-ui);
    border-left-width: var(--border-width-flash);
    font-family: var(--typography-font-base);
    font-size: var(--typography-ui-control-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-40);
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.875rem;
}

.ui-flash-icon {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    color: var(--color-step-badge-content);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--typography-label-size);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    flex-shrink: 0;
}

.ui-flash-success,
.ui-flash-info {
    background: var(--color-brand-pale);
    border-color: var(--color-brand-mid);
    border-left-color: var(--color-brand);
    color: var(--color-text-L1);
}

.ui-flash-success .ui-flash-icon,
.ui-flash-info .ui-flash-icon {
    background: var(--color-brand);
}

.ui-flash-error {
    background: var(--color-danger-pale);
    border-color: var(--color-danger-border);
    border-left-color: var(--color-danger);
    color: var(--color-danger);
}

.ui-flash-error .ui-flash-icon {
    background: var(--color-danger);
}

.ui-flash-warning {
    background: var(--color-caution-pale);
    border-color: var(--color-caution-border);
    border-left-color: var(--color-caution);
    color: var(--color-caution);
}

.ui-flash-warning .ui-flash-icon {
    background: var(--color-caution);
}

.ui-flash-success.hidden,
.ui-flash-error.hidden,
.ui-flash-warning.hidden,
.ui-flash-info.hidden {
    display: none;
}

.ui-flash-success.mb-0,
.ui-flash-error.mb-0,
.ui-flash-warning.mb-0,
.ui-flash-info.mb-0,
.ui-flash-warning.ui-search-result-warning {
    margin-bottom: 0;
}

.ui-card {
    background-color: var(--color-surface-header);
    border: 1px solid var(--color-border-ui);
    border-radius: var(--radius-container-lg);
}

a.ui-card,
a.ui-card:hover {
    text-decoration: none;
}

.ui-client-company-card {
    background: var(--color-surface-header);
    text-decoration: none;
    transition: border-color 0.2s;
}

.ui-client-company-card:hover {
    border-color: var(--color-corporate);
    text-decoration: none;
}

/* グループ注文一覧（group_orders/index）: テーブル列幅 */
.group-orders-page .group-orders-table {
    --group-orders-fixed-width: 900px;
    width: 100%;
    max-width: 100%;
    table-layout: auto;
}

.group-orders-page.group-orders-page--confirm:not(.group-orders-page--multi) .group-orders-table {
    --group-orders-fixed-width: 950px;
}

.group-orders-page.group-orders-page--multi:not(.group-orders-page--confirm) .group-orders-table {
    --group-orders-fixed-width: 1100px;
}

.group-orders-page.group-orders-page--confirm.group-orders-page--multi .group-orders-table {
    --group-orders-fixed-width: 1150px;
}

.ui-group-orders-page {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: calc(100vh - 8rem);
}

@supports (height: 100dvh) {
    .ui-group-orders-page {
        height: calc(100dvh - 8rem);
    }
}

.ui-group-orders-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.ui-group-orders-scroll {
    flex: 1 1 auto;
    min-height: 12rem;
    overflow-y: auto;
    overflow-x: auto;
    scrollbar-gutter: stable;
}

.ui-group-orders-scroll .group-orders-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--color-surface-panel);
}

.group-orders-table th,
.group-orders-table td {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    vertical-align: middle;
}

.group-orders-matching,
.group-orders-actions {
    min-width: 0;
    max-width: 100%;
}

.group-orders-matching-part {
    width: 50%;
    min-width: 0;
    flex: 1 1 0;
    font-size: 75%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.group-orders-actions {
    flex-wrap: wrap;
}

.group-orders-action-button {
    min-width: 0;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
    white-space: normal;
    line-height: 1.15;
}

.group-orders-confirm-col {
    width: 50px;
}

.group-orders-date-col {
    width: 100px;
}

.group-orders-client-col {
    width: 200px;
}

.group-orders-order-no-col {
    width: 100px;
}

.group-orders-department-col {
    width: 100px;
}

.group-orders-product-col {
    width: max(1px, calc(100% - var(--group-orders-fixed-width)));
}

.group-orders-destination-col {
    width: 200px;
}

.group-orders-matching-col,
.group-orders-processing-col {
    width: 100px;
}

.ui-group-orders-destination-cell,
.ui-group-orders-client-cell,
.ui-group-orders-matching-cell {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

.group-orders-client-col,
.group-orders-destination-col,
.group-orders-matching-col {
    width: max-content;
}

.ui-order-detail-subheader-outer {
    background: var(--color-surface-header);
}

.order-detail-subheader-inner {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    min-height: 45.5px;
}

.order-detail-subheader-status-form {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.order-detail-subheader-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}