:root {
    color-scheme: light;
    --legacy-blue: #77aadd;
    --legacy-blue-light: #bbddff;
    --legacy-gray: #e0e0e0;
    --legacy-line: #444444;
    --legacy-dash: #2299cc;
    --legacy-label: #fff6cc;
    --legacy-ink: #000000;
    --legacy-muted: #333333;
    --legacy-danger: #cc3333;
    --legacy-green: #dff2df;
    --legacy-red-soft: #ffe2e2;
    --legacy-yellow: #fff2a8;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f6f8fa;
    --ui-border: #9aa9b6;
    --ui-border-strong: #607587;
    --ui-primary: #2f6f9f;
    --ui-primary-soft: #d8eafd;
    --ui-accent: #3d8051;
    --ui-warning: #b7791f;
    --ui-shadow: 0 1px 2px rgba(20, 40, 60, .16);
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    min-width: 980px;
    background: #ffffff url("/images/bg.gif") repeat;
    color: var(--legacy-ink);
    font-family: Meiryo, "Hiragino Kaku Gothic ProN", "Yu Gothic", "MS PGothic", sans-serif;
    font-size: 13px;
    line-height: 1.35;
}

a {
    color: var(--legacy-ink);
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
input[type="button"],
input[type="submit"],
.button-link,
.nav-link,
.toolbar button,
.form-actions button,
.inline-form button,
.row-form button,
.segmented a {
    min-height: 28px;
    border: 1px solid var(--ui-border-strong);
    border-radius: 4px;
    background: linear-gradient(#ffffff, #e8eef4);
    box-shadow: var(--ui-shadow);
    color: #10202d;
    padding: 4px 12px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.button-link:hover,
.nav-link:hover,
.toolbar button:hover,
.form-actions button:hover,
.inline-form button:hover,
.row-form button:hover,
.segmented a:hover {
    border-color: var(--ui-primary);
    background: linear-gradient(#ffffff, var(--ui-primary-soft));
}

button:active,
.button-link:active,
.nav-link:active,
.toolbar button:active,
.form-actions button:active,
.inline-form button:active,
.row-form button:active,
.segmented a:active {
    box-shadow: inset 0 1px 2px rgba(20, 40, 60, .22);
}

.app-shell {
    width: 98%;
    min-height: calc(100vh - 16px);
    margin: 8px auto;
    background: #ffffff;
}

.legacy-window {
    border-collapse: collapse;
}

.topbar,
.legacy-footer {
    min-height: 24px;
    background: linear-gradient(90deg, #5f9ed6, var(--legacy-blue));
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 2px 8px;
}

.topbar-title {
    display: flex;
    align-items: baseline;
    gap: 14px;
    min-width: 0;
}

.topbar-title span {
    font-size: 18px;
    font-weight: 700;
}

.topbar-title small,
.topbar-meta {
    font-size: 12px;
}

.topbar-meta {
    white-space: nowrap;
}

.legacy-footer {
    display: flex;
    justify-content: flex-end;
    padding: 3px 8px;
    font-size: 12px;
}

.nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    border-bottom: 1px solid var(--ui-border);
    background: #dce3ea;
    padding: 5px 6px;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
}

.nav-spacer {
    flex: 1 1 auto;
}

.nav-user {
    overflow: hidden;
    max-width: 180px;
    color: #10202d;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.logout-form {
    margin: 0;
}

.logout-form .nav-link {
    min-width: 86px;
}

.nav-link.is-active,
.segmented a.is-active {
    border-color: var(--ui-primary);
    background: var(--ui-primary-soft);
    font-weight: 700;
}

.content {
    display: grid;
    gap: 8px;
    padding: 8px;
}

.notice {
    border: 1px solid var(--ui-warning);
    border-radius: 4px;
    background: #fff6cc;
    padding: 6px 8px;
    color: #000000;
}

.summary-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.summary-item {
    min-height: 44px;
    border: 1px solid var(--ui-border);
    border-left: 5px solid var(--legacy-blue);
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(20, 40, 60, .08);
    padding: 5px 7px;
}

.summary-item:nth-child(2n) {
    border-left-color: #66aa66;
}

.summary-item:nth-child(3n) {
    border-left-color: #cc9933;
}

.summary-item span {
    display: block;
    color: var(--legacy-muted);
    font-size: 12px;
}

.summary-item strong {
    display: block;
    overflow: hidden;
    color: #000000;
    font-size: 18px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    background: var(--ui-surface-soft);
    padding: 5px 6px;
}

.pill {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    background: #ffffff;
    padding: 2px 7px;
    white-space: nowrap;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.metric-card,
.tile,
.panel,
.form-panel {
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(20, 40, 60, .07);
}

.metric-card,
.tile {
    display: grid;
    gap: 4px;
    min-height: 70px;
    padding: 8px;
}

.metric-card span,
.tile span,
.tile small {
    color: var(--legacy-muted);
}

.metric-card strong,
.tile strong {
    font-size: 22px;
    line-height: 1.1;
}

.split-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
}

.panel {
    min-width: 0;
}

.panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 24px;
    border-bottom: 1px solid var(--ui-border);
    background: linear-gradient(#e8f3ff, var(--legacy-blue-light));
    padding: 3px 6px;
}

.panel-heading h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

.panel-heading a,
.panel-heading span,
.table-link,
.link-button {
    color: #000066;
    text-decoration: underline;
}

.panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    background: #ffffff;
}

th,
td {
    border: 1px solid #6f7d88;
    padding: 3px 5px;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

th {
    background: linear-gradient(#dff0ff, var(--legacy-blue-light));
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

tbody tr:nth-child(even) td {
    background: #f8fbfd;
}

tbody tr:hover td {
    background: #fff5c7;
}

.num {
    text-align: right;
}

.nowrap {
    white-space: nowrap;
}

.is-overdue {
    background: var(--legacy-red-soft) !important;
    color: #990000;
    font-weight: 700;
}

.empty {
    color: var(--legacy-muted);
    text-align: center;
}

.toolbar,
.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    background: #dce3ea;
}

.toolbar {
    padding: 6px;
}

.toolbar input[type="search"] {
    min-width: 240px;
}

.toolbar input,
.toolbar select,
.form-grid input,
.form-grid select,
.form-grid textarea,
.inline-form input,
.row-form input {
    min-width: 0;
    border: 1px solid var(--ui-border-strong);
    border-radius: 3px;
    background: #ffffff;
    padding: 3px 5px;
    color: #10202d;
}

.toolbar input:focus,
.toolbar select:focus,
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus,
.inline-form input:focus,
.row-form input:focus,
.koutei-step input:focus,
.koutei-step select:focus {
    border-color: var(--ui-primary);
    box-shadow: 0 0 0 2px rgba(47, 111, 159, .18);
    outline: none;
}

.toolbar input,
.toolbar select {
    width: auto;
    height: 24px;
}

.button-link,
.form-actions button,
.inline-form button,
.row-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.button-link.secondary,
.form-actions button.danger {
    background: linear-gradient(#ffffff, #edf0f2);
    border-color: var(--ui-border);
    color: #000000;
}

.form-actions button.danger {
    border-color: #b45757;
    color: #8b1e1e;
}

.link-button {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.segmented {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.status {
    display: inline-block;
    min-width: 24px;
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    background: #fff6cc;
    padding: 1px 5px;
    text-align: center;
}

.status-open {
    background: var(--legacy-yellow);
}

.status-done {
    background: var(--legacy-green);
}

.status-neutral {
    background: #eeeeee;
}

.tile-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.report-grid {
    padding: 8px;
}

.tile {
    min-width: 0;
}

.list-stack {
    display: grid;
}

.list-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #888888;
    padding: 6px 8px;
}

.list-item:last-child {
    border-bottom: 0;
}

.list-item p {
    margin: 3px 0 0;
    color: var(--legacy-muted);
}

.list-item time {
    color: var(--legacy-muted);
    white-space: nowrap;
}

.list-actions {
    display: grid;
    justify-items: end;
    gap: 6px;
}

.legacy-pick-row {
    cursor: pointer;
}

.legacy-pick-row:hover td {
    background: #ffee99;
}

.form-panel {
    overflow: hidden;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px 8px;
    padding: 6px;
}

.form-grid label {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 5px;
    min-height: 28px;
    border-bottom: 2px dashed var(--legacy-dash);
    padding: 2px 0;
}

.form-grid label span {
    color: #000000;
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
}

.form-grid input,
.form-grid select {
    width: 100%;
    height: 23px;
}

.form-grid textarea {
    width: 100%;
    min-height: 48px;
    resize: vertical;
}

.form-grid input[readonly],
.form-grid input:disabled,
.form-grid select:disabled {
    background: var(--legacy-label);
}

.auth-panel {
    width: min(620px, 100%);
    margin: 56px auto;
}

.auth-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.auth-notice {
    margin: 6px;
}

.checkbox-label {
    grid-template-columns: 92px auto minmax(0, 1fr) !important;
    justify-content: start;
}

.checkbox-label input[type="checkbox"] {
    width: auto;
}

.checkbox-label em {
    color: var(--legacy-muted);
    font-style: normal;
}

.span-2 {
    grid-column: span 2;
}

.form-actions {
    border-top: 1px solid var(--ui-border);
    padding: 6px;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid #777777;
    border-width: 1px 0 0 1px;
}

.detail-grid div {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 6px;
    align-items: center;
    min-height: 28px;
    border: 1px solid #777777;
    border-width: 0 1px 1px 0;
    background: #ffffff;
    padding: 4px 6px;
}

.detail-grid span {
    color: #000000;
    font-size: 13px;
}

.detail-grid strong {
    min-height: 18px;
    font-weight: 400;
}

.inline-form {
    display: grid;
    grid-template-columns: .5fr .9fr 1.3fr repeat(4, .8fr) auto;
    gap: 5px;
    border-top: 1px solid #777777;
    background: var(--legacy-gray);
    padding: 6px;
}

.copy-order-form {
    grid-template-columns: 180px repeat(5, auto);
}

.material-inline-form {
    grid-template-columns: 1fr 70px 70px 1.2fr 1.2fr 90px 90px 1fr auto;
}

.row-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.row-form input[type="date"] {
    width: 126px;
}

.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.checkbox-inline input,
.form-grid input[type="checkbox"] {
    width: auto;
    height: auto;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px 8px;
}

.checkbox-grid label {
    display: flex;
    gap: 4px;
    align-items: center;
    border: 0;
    padding: 0;
}

.text-block {
    display: grid;
    gap: 6px;
    padding: 8px;
    color: var(--legacy-muted);
}

.text-block p {
    margin: 0;
    white-space: pre-wrap;
}

.pagination-line {
    border-top: 1px solid var(--ui-border);
    background: #dce3ea;
    padding: 6px;
}

.pager-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.pager-inline a,
.pager-inline span {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    background: #ffffff;
    padding: 2px 8px;
}

.pager-inline a {
    color: #000066;
    text-decoration: underline;
}

.pager-inline .is-disabled {
    color: #777777;
}

.modern-home {
    display: grid;
    gap: 14px;
    min-height: 640px;
}

.home-command {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: end;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: #f7fafc;
    padding: 18px;
    box-shadow: 0 1px 3px rgba(20, 40, 60, .08);
}

.home-command h1 {
    margin: 0;
    font-size: 28px;
    line-height: 1.2;
}

.home-command p {
    margin: 6px 0 0;
    color: #334155;
}

.home-eyebrow {
    margin: 0 0 4px !important;
    color: var(--ui-primary) !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
}

.home-command-actions,
.home-action-grid,
.home-metrics,
.home-stats,
.home-graph-grid {
    display: grid;
    gap: 10px;
}

.home-command-actions {
    grid-template-columns: repeat(4, auto);
}

.home-primary-action,
.home-secondary-action,
.home-action-card,
.home-metric {
    color: #10202d;
    text-decoration: none;
}

.home-primary-action,
.home-secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border: 1px solid var(--ui-border-strong);
    border-radius: 5px;
    padding: 6px 14px;
    font-weight: 700;
}

.home-primary-action {
    background: var(--ui-primary);
    color: #ffffff;
}

.home-secondary-action {
    background: #ffffff;
}

.home-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-metric,
.home-stats div,
.home-action-card,
.home-graph-panel {
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(20, 40, 60, .08);
}

.home-metric {
    display: grid;
    gap: 4px;
    min-height: 82px;
    padding: 12px;
}

.home-metric:nth-child(1) {
    border-top: 4px solid var(--ui-primary);
}

.home-metric:nth-child(2) {
    border-top: 4px solid var(--legacy-danger);
}

.home-metric:nth-child(3) {
    border-top: 4px solid var(--ui-warning);
}

.home-metric:nth-child(4) {
    border-top: 4px solid var(--ui-accent);
}

.home-metric span,
.home-stats span,
.home-action-card span {
    color: #526170;
    font-size: 12px;
}

.home-metric strong {
    font-size: 26px;
    line-height: 1.1;
}

.home-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-stats div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 10px 12px;
}

.home-stats strong {
    font-size: 18px;
}

.home-section,
.home-graph-panel {
    min-width: 0;
}

.home-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.home-section-head h2 {
    margin: 0;
    font-size: 16px;
}

.home-section-head a {
    color: #000066;
    text-decoration: underline;
}

.modern-staff-selector {
    gap: 8px;
}

.modern-staff-selector .legacy-staff-button {
    width: 168px;
    min-height: 40px;
    margin-bottom: 0;
    font-size: 16px;
}

.home-action-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.home-action-card {
    display: grid;
    gap: 4px;
    min-height: 74px;
    border-left: 5px solid var(--ui-primary);
    padding: 12px;
}

.home-action-card:nth-child(2) {
    border-left-color: var(--ui-accent);
}

.home-action-card:nth-child(3) {
    border-left-color: var(--ui-warning);
}

.home-action-card:nth-child(4) {
    border-left-color: #7a5aa6;
}

.home-action-card:nth-child(5) {
    border-left-color: var(--legacy-danger);
}

.home-action-card strong {
    font-size: 16px;
}

.home-graph-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.home-graph-panel {
    padding: 12px;
}

.home-bars {
    display: grid;
    gap: 8px;
}

.home-bar-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) 96px;
    gap: 8px;
    align-items: center;
    min-height: 25px;
}

.home-bar-row span {
    overflow: hidden;
    color: #243444;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-bar-row strong {
    font-size: 12px;
    text-align: right;
}

.home-bar-track {
    height: 11px;
    border-radius: 999px;
    background: #e7edf3;
    overflow: hidden;
}

.home-bar-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ui-primary);
}

.vendor-bars .home-bar-track i {
    background: var(--ui-accent);
}

.warning-bars .home-bar-track i,
.material-bars .home-bar-track i {
    background: var(--ui-warning);
}

.danger-bars .home-bar-track i {
    background: var(--legacy-danger);
}

.analytics-page {
    display: grid;
    gap: 14px;
}

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.analytics-wide {
    grid-column: 1 / -1;
}

.trend-bars {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
    min-height: 230px;
    padding-top: 10px;
}

.trend-bar {
    display: grid;
    grid-template-rows: 22px 160px 24px;
    gap: 4px;
    align-items: end;
    min-width: 0;
    text-align: center;
}

.trend-bar strong {
    overflow: hidden;
    color: #243444;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trend-bar i {
    display: block;
    width: 100%;
    min-height: 2px;
    border-radius: 4px 4px 0 0;
    background: var(--ui-primary);
}

.trend-bar span {
    overflow: hidden;
    color: #526170;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.legacy-menu-grid {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.legacy-home {
    min-height: 640px;
}

.legacy-home p {
    margin: 6px 0 16px;
}

.legacy-home hr {
    height: 1px;
    border: 0;
    background: var(--legacy-blue);
    margin: 16px 0;
}

.staff-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
}

.legacy-staff-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    min-height: 45px;
    margin-bottom: 20px;
    border: 1px solid var(--ui-border-strong);
    border-radius: 4px;
    background: linear-gradient(#ffffff, #e8eef4);
    box-shadow: var(--ui-shadow);
    color: #000000;
    font-size: 20px;
}

.legacy-home-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.legacy-home-actions small {
    font-size: 12px;
}

.legacy-big-buttons {
    display: grid;
    gap: 0;
    justify-items: center;
    padding: 0 8px;
}

.legacy-big-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    min-height: 40px;
    margin-bottom: 20px;
    border: 1px solid var(--ui-border-strong);
    border-radius: 4px;
    background: linear-gradient(#ffffff, #e8eef4);
    box-shadow: var(--ui-shadow);
    color: #000000;
    font-size: 18px;
}

.legacy-help {
    width: 200px;
    margin: -12px 0 20px;
    color: #333333;
    font-size: 12px;
    line-height: 1.45;
}

.legacy-frame-stack {
    display: grid;
    gap: 16px;
}

.report-sheet tfoot th,
.report-sheet tfoot td {
    background: #fff6cc;
    font-weight: 700;
}

.table-wrap input {
    width: 100%;
    min-width: 72px;
    border: 1px solid var(--ui-border);
    border-radius: 3px;
    background: #ffffff;
    padding: 3px 5px;
}

.table-wrap .inline-actions {
    white-space: nowrap;
}

.table-wrap .inline-actions form {
    display: inline;
}

.table-wrap .inline-actions button {
    margin-right: 4px;
}

.print-actions {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    background: #dce3ea;
    padding: 6px;
}

.print-actions .button-link.is-active {
    border-color: var(--ui-primary);
    background: var(--ui-primary);
    color: #ffffff;
}

.split-print-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    width: 100%;
    font-size: 12px;
}

.print-view {
    min-width: 0;
    background: #ffffff;
}

.print-view .app-shell {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    background: #ffffff;
}

.print-view .content {
    display: block;
    padding: 0;
}

.print-preview {
    overflow: auto;
    background: #ffffff;
    padding: 0 0 12px;
}

.print-sheet {
    width: 95%;
    min-height: 0;
    margin: 0 auto 16px;
    border: 0;
    background: #ffffff;
    box-shadow: none;
    color: #000000;
    font-family: "MS PGothic", "MS Gothic", Meiryo, sans-serif;
    padding: 0;
}

.print-sheet:last-child {
    margin-bottom: 0;
}

.print-sheet.is-landscape,
.print-list-sheet {
    width: 98%;
    min-height: 0;
}

.print-list-sheet {
    padding: 0;
}

.print-list-sheet .panel-heading {
    border: 1px solid #000000;
    border-bottom: 0;
    background: #e0e0e0;
}

.print-list-sheet .table-wrap {
    overflow: visible;
}

.print-title {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    text-decoration: underline;
}

.print-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    margin-bottom: 12px;
}

.print-customer {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 120px;
    font-size: 17px;
}

.print-company {
    display: grid;
    gap: 2px;
    text-align: right;
}

.print-total {
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    margin: 10px 0;
    padding: 7px 0;
    font-size: 18px;
    font-weight: 700;
}

.print-table {
    min-width: 0;
    font-size: 13px;
}

.print-table th,
.print-table td {
    border: 1px solid #000000;
    padding: 4px 5px;
}

.print-table th {
    background: #e0e0e0;
}

.print-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.print-card {
    min-height: 260px;
    border: 1px solid #000000;
    padding: 6px;
    page-break-inside: avoid;
}

.print-card h3 {
    margin: 0 0 6px;
    border-bottom: 1px solid #000000;
    background: #e0e0e0;
    padding: 3px;
    text-align: center;
}

.page-break {
    page-break-before: always;
}

.print-page-title {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    border-bottom: 2px solid #000000;
    padding-bottom: 5px;
}

.print-page-title h2 {
    margin: 0;
    font-size: 18px;
}

.print-page-title span {
    font-size: 12px;
}

.barcode-text {
    display: inline-block;
    min-width: 120px;
    border: 1px solid #000000;
    padding: 5px 8px;
    font-family: monospace;
    font-size: 18px;
    letter-spacing: 2px;
    text-align: center;
}

.barcode-text.is-small {
    min-width: 96px;
    padding: 3px 5px;
    font-size: 13px;
    letter-spacing: 1px;
}

.barcode-image {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    border: 1px solid #000000;
    background: #ffffff;
    padding: 3px 5px 2px;
    vertical-align: middle;
}

.barcode-image img {
    display: block;
    width: 150px;
    height: 22px;
}

.barcode-image .barcode-number {
    font-family: monospace;
    font-size: 9px;
    line-height: 1;
    letter-spacing: 1px;
}

.barcode-image.is-small {
    min-width: 104px;
    padding: 2px 3px 1px;
}

.barcode-image.is-small img {
    width: 104px;
    height: 17px;
}

.barcode-image.is-small .barcode-number {
    font-size: 8px;
    letter-spacing: 0;
}

.asp-out,
.asp-out table,
.print-process-grid,
.print-ticket-sheet {
    color: #000000;
    font-family: "MS PGothic", "MS Gothic", Meiryo, sans-serif;
}

.asp-out table,
.print-process-grid table,
.print-ticket-sheet table {
    border-collapse: collapse;
}

.out-title {
    font-size: 19pt;
    font-weight: 700;
}

.out-big {
    font-size: 12pt;
}

.out-big2 {
    font-size: 15pt;
}

.out-normal,
.out-small {
    font-size: 9pt;
}

.out-ul {
    border-bottom: 1px solid #000000;
}

.out-ul2 {
    border-bottom: 2px solid #000000;
}

.out-ulrl {
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
}

.out-ulrl2 {
    border-right: 1px solid #000000;
    border-bottom: 2px solid #000000;
}

.center {
    text-align: center;
}

.asp-table {
    width: 95%;
    margin: 0 auto;
}

.asp-table th {
    background: #e0e0e0;
}

.asp-table th,
.asp-table td {
    padding: 3px;
}

.print-invoice {
    width: 95%;
}

.invoice-header-table {
    width: 95%;
    margin: 0 auto;
}

.invoice-company table,
.vendor-document-header table {
    margin-left: auto;
}

.invoice-summary-table,
.invoice-detail-table {
    margin-top: 0;
}

.process-list-header {
    margin: 0 0 2px;
    font-size: 15px;
    line-height: 1.35;
}

.process-list-page-no {
    margin-top: 2px;
    font-size: 13px;
}

.process-list-table {
    width: 100%;
    border: 1px solid #444444;
    background: #ffffff;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 11px;
}

.process-list-table > thead > tr > td,
.process-list-table > tbody > tr > td {
    border: 1px solid #444444;
    padding: 0;
    white-space: normal;
}

.list-caption td {
    background: #666666;
    color: #ffffff;
    font-size: 13px;
}

.list-data {
    font-size: 11px;
}

.process-summary-cell table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.process-summary-cell td {
    border: 0;
    padding: 1px 2px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.process-step-grid {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.process-step-grid > tbody > tr > td {
    width: 20%;
    border: 0;
    padding: 1px;
    vertical-align: top;
}

.process-step-card {
    width: 100%;
    min-height: 94px;
    border-collapse: separate;
    border-spacing: 1px;
    background: #444444;
    table-layout: fixed;
    font-size: 10px;
    line-height: 1.12;
}

.process-step-card td {
    border: 0;
    background: #ffffff;
    padding: 1px 2px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-all;
}

.process-step-card .process-step-title {
    background: #e0e0e0;
}

.process-step-card.is-working tr:not(:first-child) td {
    background: #ffbbbb;
}

.process-step-card.is-complete tr:not(:first-child) td {
    background: #ffff66;
}

.process-step-card.is-registered tr:not(:first-child) td {
    background: #ddeeff;
}

.print-ticket-sheet {
    width: 100%;
}

.ticket-row {
    width: 100%;
    min-height: 32%;
    margin-bottom: 8px;
}

.ticket-cell {
    padding: 0 6px 0 0;
    vertical-align: top;
}

.ticket-table {
    width: 80%;
    margin-left: auto;
    font-size: 9pt;
    line-height: 1.2;
}

.ticket-table td,
.ticket-table th {
    padding: 2px;
}

.ticket-title {
    background: #e0e0e0;
    font-size: 12pt;
    font-weight: 700;
    text-align: center;
}

.ticket-title.is-dark {
    background: #000000;
    color: #ffffff;
}

.small {
    font-size: 8pt;
}

.print-vendor-delivery {
    width: 100%;
    min-height: 270mm;
}

.vendor-half {
    min-height: 132mm;
    page-break-inside: avoid;
}

.vendor-document-header {
    width: 100%;
}

.vendor-detail-table {
    width: 100%;
    min-height: 260px;
}

.vendor-stamp-cell {
    text-align: right;
    vertical-align: top;
}

.vendor-stamp-cell span {
    display: inline-block;
    width: 60px;
    height: 60px;
    margin-top: 4px;
    border: 1px solid #000000;
}

.vendor-code-box {
    display: inline-block;
    width: 120px;
    height: 30px;
    border: 1px solid #000000;
}

.koutei-screen {
    display: grid;
    gap: 0;
    border: 1px solid var(--ui-border-strong);
    background: #ffffff;
}

.koutei-title {
    min-height: 24px;
    background: linear-gradient(90deg, #5f9ed6, var(--legacy-blue));
    padding: 3px 6px;
    font-size: 14px;
    font-weight: 700;
}

.koutei-summary {
    min-width: 1280px;
}

.koutei-summary th {
    width: 76px;
    background: #4f6170;
    color: #ffffff;
}

.koutei-summary td {
    min-width: 86px;
    background: #ffffff;
}

.koutei-grid-wrap {
    overflow: auto;
    max-height: calc(100vh - 210px);
    border-top: 1px solid var(--ui-border);
    border-bottom: 1px solid var(--ui-border);
}

.koutei-grid {
    width: max-content;
    min-width: 1780px;
}

.koutei-grid thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #4f6170;
    color: #ffffff;
}

.koutei-line-col {
    width: 180px;
}

.koutei-total-col {
    width: 90px;
}

.koutei-line-info {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 180px;
    min-width: 180px;
    background: #ffffff;
    vertical-align: top;
    white-space: normal;
}

.koutei-line-info div {
    min-height: 18px;
    border-bottom: 1px dashed var(--legacy-dash);
    padding: 1px 0;
}

.koutei-line-info button {
    width: 100%;
    margin-top: 4px;
}

.l-num {
    display: inline-block;
    min-width: 28px;
    background: #ffff99;
    text-align: center;
}

.koutei-product {
    font-weight: 700;
    white-space: normal;
}

.koutei-step {
    width: 150px;
    min-width: 150px;
    background: #eef2f5;
    vertical-align: top;
    padding: 2px;
}

.koutei-step-body {
    display: grid;
    gap: 2px;
}

.koutei-step label {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    min-height: 20px;
    gap: 2px;
}

.koutei-step span {
    font-size: 12px;
}

.koutei-step input,
.koutei-step select {
    width: 100%;
    height: 21px;
    border: 1px solid var(--ui-border-strong);
    border-radius: 3px;
    background: #ffffff;
    padding: 1px 2px;
    font-size: 12px;
}

.koutei-step input[type="date"] {
    min-width: 96px;
}

.koutei-totals {
    width: 90px;
    min-width: 90px;
    background: #ffffff;
    vertical-align: top;
}

.koutei-totals div {
    border-bottom: 1px dashed var(--legacy-dash);
    padding: 2px;
    text-align: right;
}

.koutei-pager,
.legacy-actionbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-height: 34px;
    background: #dce3ea;
    padding: 5px 6px;
}

.koutei-pager a {
    color: #000066;
    text-decoration: underline;
}

.legacy-actionbar {
    border-top: 1px solid var(--ui-border);
}

button:disabled,
.legacy-actionbar button:disabled {
    color: #777777;
    cursor: default;
}

.graph-dashboard {
    display: grid;
    gap: 10px;
}

.graph-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: end;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: #f7fafc;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(20, 40, 60, .08);
}

.graph-toolbar h1 {
    margin: 0;
    font-size: 24px;
    line-height: 1.2;
}

.graph-toolbar p {
    margin: 5px 0 0;
    color: #334155;
}

.graph-toolbar-actions {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 8px;
}

.graph-summary-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.graph-summary-card {
    min-height: 70px;
    border: 1px solid var(--ui-border);
    border-top: 4px solid var(--ui-primary);
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(20, 40, 60, .08);
    padding: 10px 12px;
}

.graph-summary-card:nth-child(2) {
    border-top-color: var(--ui-accent);
}

.graph-summary-card:nth-child(3) {
    border-top-color: var(--ui-warning);
}

.graph-summary-card span,
.graph-summary-card small,
.graph-panel-head span,
.graph-panel-head small {
    color: #526170;
    font-size: 12px;
}

.graph-summary-card strong {
    display: block;
    margin-top: 2px;
    font-size: 24px;
    line-height: 1.1;
}

.graph-period-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.graph-period-grid--vendor {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.graph-panel {
    min-width: 0;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(20, 40, 60, .08);
}

.graph-panel-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 8px;
    min-height: 54px;
    border-bottom: 1px solid var(--ui-border);
    background: linear-gradient(#eef7ff, #d9ecff);
    padding: 8px 10px;
}

.graph-panel-head h2 {
    margin: 2px 0 0;
    font-size: 16px;
}

.graph-rows {
    display: grid;
    gap: 1px;
    padding: 8px 10px 10px;
}

.graph-row {
    display: grid;
    grid-template-columns: minmax(74px, 96px) minmax(120px, 1fr) minmax(54px, auto);
    gap: 8px;
    align-items: center;
    min-height: 28px;
    border-bottom: 1px solid #d6dde4;
}

.vendor-graph-rows .graph-row {
    grid-template-columns: minmax(130px, 180px) minmax(140px, 1fr) minmax(82px, auto);
}

.graph-row-label {
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.graph-bar-cell {
    position: relative;
    height: 18px;
    border-left: 1px solid #9aa9b6;
    background: repeating-linear-gradient(
        90deg,
        #f4f6f8 0,
        #f4f6f8 1px,
        #ffffff 1px,
        #ffffff 20%
    );
}

.graph-bar {
    position: absolute;
    top: 3px;
    left: 0;
    height: 12px;
    min-width: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #f7b25e, #f3cd9d);
}

.vendor-graph-rows .graph-bar {
    background: linear-gradient(90deg, #5f9ed6, #a9cdef);
}

.graph-row.is-negative .graph-bar {
    background: linear-gradient(90deg, #d66868, #f0b4b4);
}

.graph-row.is-zero .graph-bar {
    min-width: 0;
}

.graph-benchmark-line,
.graph-target-line {
    position: absolute;
    top: -3px;
    bottom: -3px;
    z-index: 2;
    width: 1px;
    background: #d02020;
}

.graph-benchmark-line {
    left: var(--graph-benchmark);
}

.graph-row-value {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    text-align: right;
}

.graph-table {
    min-width: 620px;
}

.graph-table-panel {
    overflow: hidden;
}

.legacy-graph-compare-source {
    display: none;
}

.legacy-graph-page {
    min-height: 360px;
    overflow-x: auto;
    background: #ffffff;
    color: #000000;
    padding: 5px;
}

.legacy-graph-nav {
    margin-bottom: 14px;
}

.legacy-graph-head {
    float: left;
    height: 20px;
    margin-left: 10px;
    background: #ccddff;
    text-align: center;
    line-height: 20px;
}

.legacy-graph-column {
    position: relative;
    float: left;
}

.legacy-graph-name {
    position: absolute;
    left: 0;
    z-index: 10;
    width: 100px;
    height: 20px;
}

.legacy-graph-bar {
    position: absolute;
    left: 100px;
    z-index: 9;
    height: 20px;
    background: #ffcc99;
}

.legacy-graph-value {
    position: absolute;
    left: 110px;
    z-index: 11;
    height: 20px;
}

.legacy-graph-target {
    position: absolute;
    left: 0;
    width: 100px;
    height: 20px;
    text-align: right;
}

.legacy-graph-line {
    position: absolute;
    left: 0;
    height: 20px;
    border-bottom: 1px solid #999999;
}

.legacy-graph-scale {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 249px;
    margin-left: 100px;
    border-right: 1px solid #ff0000;
    border-left: 1px solid #999999;
}

.legacy-graph-scale-label {
    position: absolute;
    left: 340px;
    z-index: 1;
    width: 40px;
    height: 20px;
}

.legacy-schedule {
    overflow-x: auto;
    background: #ffffff;
}

.legacy-schedule-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
    padding: 4px;
}

.legacy-schedule-table {
    width: 100%;
    min-width: 960px;
    border-spacing: 1px;
    background: #bbbbbb;
    font-size: 15px;
}

.legacy-schedule-table th {
    background: #e0e0e0;
}

.legacy-schedule-table td {
    background: #ffffff;
}

.legacy-schedule-table th,
.legacy-schedule-table td {
    padding: 2px 4px;
}

.legacy-schedule-table .right {
    text-align: right;
}

.legacy-schedule-table .center {
    text-align: center;
}

.legacy-note {
    width: 80px;
}

.movement {
    width: 120px;
}

.movement-left {
    background: #ffeedd !important;
    text-align: right;
}

.movement-right {
    background: #ddeeff !important;
}

.movement-arrow {
    width: 15px;
}

@media (max-width: 980px) {
    body {
        min-width: 0;
    }

    .app-shell {
        width: 100%;
        margin: 0;
    }

    .topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }

    .metric-grid,
    .split-grid,
    .summary-strip,
    .tile-grid,
    .form-grid,
    .detail-grid,
    .legacy-menu-grid,
    .home-command,
    .home-metrics,
    .home-stats,
    .home-action-grid,
    .home-graph-grid,
    .graph-toolbar,
    .graph-summary-strip,
    .graph-period-grid,
    .graph-period-grid--vendor,
    .analytics-grid {
        grid-template-columns: 1fr;
    }

    .analytics-wide {
        grid-column: auto;
    }

    .trend-bars {
        overflow-x: auto;
        grid-template-columns: repeat(12, 64px);
    }

    .home-command-actions {
        grid-template-columns: 1fr;
    }

    .graph-toolbar-actions {
        grid-template-columns: 1fr;
    }

    .graph-row,
    .vendor-graph-rows .graph-row {
        grid-template-columns: 96px minmax(0, 1fr) 70px;
    }

    .home-bar-row {
        grid-template-columns: 90px minmax(0, 1fr);
    }

    .home-bar-row strong {
        grid-column: 2;
        text-align: left;
    }

    .form-grid label,
    .detail-grid div {
        grid-template-columns: 92px minmax(0, 1fr);
    }

    .inline-form {
        grid-template-columns: 1fr 1fr;
    }

    .copy-order-form,
    .material-inline-form,
    .checkbox-grid {
        grid-template-columns: 1fr;
    }

    .span-2 {
        grid-column: span 1;
    }
}

@page {
    margin: 10mm;
}

@page myworks-landscape {
    size: A4 landscape;
    margin: 8mm;
}

@page myworks-ticket {
    size: A4 landscape;
    margin: 6mm;
}

.print-sheet.is-landscape {
    page: myworks-landscape;
}

.print-ticket-sheet {
    page: myworks-ticket;
}

@media print {
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    html,
    body {
        height: auto;
        min-height: 0;
        min-width: 0;
        background: #ffffff;
        font-size: 12px;
    }

    .topbar,
    .nav-list,
    .legacy-footer,
    .print-actions,
    .toolbar {
        display: none !important;
    }

    .app-shell {
        width: 100%;
        min-height: 0;
        margin: 0;
    }

    .print-view .app-shell,
    .print-view .content,
    .print-view .print-preview {
        height: auto;
        min-height: 0;
    }

    .content {
        display: block;
        padding: 0;
    }

    .print-preview {
        overflow: visible;
        border: 0;
        background: #ffffff;
        padding: 0;
    }

    .print-sheet,
    .print-sheet.is-landscape,
    .print-list-sheet {
        page: auto;
        width: auto;
        min-height: 0;
        margin: 0;
        border: 0;
        box-shadow: none;
        padding: 0;
    }

    .print-invoice {
        zoom: 92%;
    }

    .print-process-grid,
    .print-ticket-sheet {
        page: auto;
        width: 100%;
    }
}