* { box-sizing: border-box; }
body {
    font-family: "Noto Sans CJK JP", "Yu Gothic", "Meiryo", sans-serif;
    margin: 0;
    padding: 0;
    background: #fafafa;
    color: #222;
}
header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    background-color: #2b6cb0;
    color: white;
    padding: 10px;
    font-size: 16px;
}
header a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
}
header a#headerMasterLink {
    cursor: pointer;
}
header h1 {
    margin: 0;
}
header .btn {
    color: white;
    text-decoration: none;
    background-color: #4caf50;
    padding: 5px 10px;
    border-radius: 5px;
}
header .btn:hover {
    background-color: #45a049;
}
main { padding: 16px; }

.header-flash {
    margin-left: auto;
    font-size: 16px;
    font-weight: 700;
    color: #ffe066;
    white-space: nowrap;
}

.header-time {
    margin-left: 12px;
    white-space: nowrap;
    font-size: 16px;
}

.header-user {
    margin-left: 12px;
    white-space: nowrap;
    font-size: 16px;
    opacity: 0.85;
}

.header-master-menu {
    position: fixed;
    z-index: 4000;
    min-width: 220px;
    background: #fff;
    border: 1px solid #adb5bd;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    padding: 6px;
}
.header-master-menu[hidden] { display: none; }
.header-master-menu button {
    width: 100%;
    border: 0;
    background: #fff;
    color: #222;
    text-align: left;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 16px;
}
.header-master-menu button:hover { background: #eef4ff; }

dialog.message-dlg {
    border: 1px solid #adb5bd;
    border-radius: 10px;
    padding: 14px 16px;
    width: min(980px, 95vw);
    height: min(86vh, 820px);
}
dialog.message-dlg::backdrop { background: rgba(0,0,0,0.35); }
.message-dlg.message-mode-timeline {
    height: min(74vh, 700px);
}
.message-root {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 10px;
    height: 100%;
}
.message-dlg.message-mode-timeline .message-root {
    grid-template-rows: auto minmax(0, 1fr) auto;
}
.message-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.message-head h3 {
    margin: 0;
    font-size: 16px;
}
.message-head-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
    justify-content: flex-end;
}
.message-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: bold;
}
.message-view-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
}
.message-user-switch-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.message-user-switch-wrap select {
    min-width: 120px;
    font-size: 16px;
}
.message-head-controls label,
.message-head-controls select {
    font-size: 16px;
}
.message-pane {
    border: 1px solid #adb5bd;
    border-radius: 8px;
    background: #fff;
    display: grid;
    grid-template-rows: auto 1fr;
    min-height: 0;
}
.message-pane h4 {
    margin: 0;
    padding: 8px 10px;
    border-bottom: 1px solid #dee2e6;
    background: #f8f9fa;
    font-size: 16px;
}
.message-list {
    overflow: auto;
    padding: 8px 10px;
}
.message-dlg.message-mode-timeline .message-pane-mid {
    display: none;
}
.message-item {
    border: 1px solid #e3e7ea;
    border-radius: 6px;
    padding: 6px 8px;
    margin-bottom: 6px;
    background: #fcfcfd;
}
.message-item-clickable {
    cursor: pointer;
}
.message-item-clickable:hover {
    border-color: #7aa7df;
    background: #f4f9ff;
}
.message-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 4px;
    color: #495057;
    font-size: 16px;
}
.message-read-toggle {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    color: #2f3b52;
}
.message-read-toggle input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin: 0;
}
.message-read-state {
    font-weight: bold;
    font-size: 14px;
    border-radius: 999px;
    padding: 2px 10px;
    line-height: 1.4;
}
.message-read-state.is-read {
    color: #1864ab;
    background: #e7f5ff;
    border: 1px solid #a5d8ff;
}
.message-read-state.is-unread {
    color: #b02a37;
    background: #fff5f5;
    border: 1px solid #ffa8a8;
}
.message-read-at {
    color: #6c757d;
    font-size: 13px;
}
.message-dir {
    color: #1971c2;
    font-weight: bold;
}
.message-body {
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.35;
    font-size: 16px;
}
.message-empty {
    color: #6c757d;
    padding: 8px 2px;
    font-size: 16px;
}
.message-bottom-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
}
.message-compose {
    border: 1px solid #adb5bd;
    border-radius: 8px;
    background: #fff;
    padding: 8px 10px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 6px;
    min-height: 0;
}
.message-compose label {
    font-size: 16px;
    font-weight: bold;
}
.message-compose textarea {
    width: 100%;
    min-height: 0;
    border: 1px solid #adb5bd;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 16px;
    resize: none;
}
.message-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 8px;
    min-width: 96px;
}
.message-status {
    margin: 0 auto 0 0;
    min-height: 18px;
    color: #c92a2a;
    font-size: 16px;
}
.message-actions .btn,
.message-actions button {
    font-size: 16px;
}
.message-dlg.message-mode-timeline .message-bottom-row {
    grid-template-columns: auto;
    justify-content: end;
}
.message-dlg.message-mode-timeline .message-compose,
.message-dlg.message-mode-timeline .message-send-btn {
    display: none;
}

dialog.message-alert-dlg {
    border: 1px solid #adb5bd;
    border-radius: 10px;
    padding: 14px 16px;
    width: min(560px, 94vw);
}
dialog.message-alert-dlg::backdrop { background: rgba(0,0,0,0.35); }
.message-alert-dlg h3 {
    margin: 0 0 8px;
    font-size: 16px;
}
.message-alert-body {
    max-height: min(58vh, 480px);
    overflow: auto;
}
.message-alert-item {
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 8px;
    background: #fff;
    font-size: 16px;
    line-height: 1.35;
}
.message-alert-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}
.message-alert-actions .btn,
.message-alert-actions button {
    font-size: 16px;
}

dialog.mail-dlg {
    border: 1px solid #adb5bd;
    border-radius: 10px;
    padding: 14px 16px;
    width: min(760px, 94vw);
}
dialog.mail-dlg::backdrop { background: rgba(0,0,0,0.35); }
.mail-root {
    display: grid;
    gap: 10px;
}
.mail-head h3 {
    margin: 0;
    font-size: 16px;
}
.mail-form {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 8px 10px;
    align-items: center;
}
.mail-form label {
    font-weight: bold;
    color: #2f3b52;
    font-size: 16px;
}
.mail-form input,
.mail-form textarea {
    width: 100%;
    border: 1px solid #adb5bd;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 16px;
    background: #fff;
}
.mail-form textarea {
    min-height: 220px;
    resize: vertical;
}
.mail-history-wrap h4 {
    margin: 0 0 6px;
    font-size: 16px;
}
.mail-inbox-status {
    min-height: 18px;
    margin: 0 0 6px;
    color: #495057;
    font-size: 14px;
}
.mail-history {
    border: 1px solid #adb5bd;
    border-radius: 6px;
    background: #fff;
    max-height: 220px;
    overflow: auto;
    padding: 8px;
}
.mail-empty {
    color: #6c757d;
    font-size: 16px;
    padding: 6px 4px;
}
.mail-log-item {
    border: 1px solid #e3e7ea;
    border-radius: 6px;
    padding: 6px 8px;
    margin-bottom: 6px;
    background: #fcfcfd;
}
.mail-log-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: #495057;
    font-size: 14px;
}
.mail-log-status {
    font-weight: bold;
}
.mail-log-subject {
    margin-top: 4px;
    font-size: 15px;
    color: #1f2937;
}
.mail-log-to {
    margin-top: 2px;
    font-size: 14px;
    color: #4b5563;
}
.mail-log-error {
    margin-top: 4px;
    color: #c92a2a;
    font-size: 14px;
    white-space: pre-wrap;
    word-break: break-word;
}
.mail-inbox-item {
    background: #f8fbff;
}
.mail-inbox-body {
    margin: 6px 0 0;
    padding: 8px;
    border-radius: 6px;
    background: #ffffff;
    border: 1px solid #e6edf4;
    color: #1f2937;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 14px;
    line-height: 1.35;
}
.mail-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.mail-status {
    margin: 0 auto 0 0;
    min-height: 18px;
    color: #c92a2a;
    font-size: 16px;
}
@media (max-width: 720px) {
    .mail-form {
        grid-template-columns: 1fr;
    }
}

table.record-table {
    border-collapse: collapse;
    width: 100%;
    background: #fff;
}
table.record-table th, table.record-table td {
    border: 1px solid #888;
    padding: 4px 6px;
    font-size: 16px;
    text-align: left;
}
.cell-left { text-align: left !important; }
.cell-center { text-align: center !important; }
.cell-right { text-align: right !important; }
table.record-table th { background: #eef4ff; }
/* 1レコード=2行のときの上下境界を点線・薄色に */
table.record-table tr.row-top td { border-bottom: 1px dotted #c8c8c8; }
table.record-table tr.row-bot td { border-top:    1px dotted #c8c8c8; }
table.record-table tr.row-top td, table.record-table tr.row-bot td {
    border-left: 1px solid #888;
    border-right: 1px solid #888;
}
/* 最後のデータ行の下部は実線に */
table.record-table tbody tr.row-top.data-last td[rowspan],
table.record-table tbody tr.row-bot.data-last td {
    border-bottom: 1px solid #888;
}

button, .btn {
    background: #2b6cb0; color: #fff; border: none;
    padding: 6px 12px; border-radius: 4px; cursor: pointer;
    text-decoration: none; display: inline-block; font-size: 16px;
}
button.danger, .btn.danger { background: #c0392b; }
button.secondary, .btn.secondary { background: #6c757d; }

.day-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.day-card {
    border: 1px solid #ccc; border-radius: 8px; padding: 12px; background: #fff;
    text-align: center;
}
.day-card .day { font-size: 28px; font-weight: bold; }
.day-card .actions { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }

/* Start 画面 (画像レイアウト) */
.start-lead { font-size: 18px; margin: 8px 0 4px; }
.start-notice { margin: 4px 0 12px; font-size: 18px; }
.start-notice .warn { color: #d6336c; font-weight: bold; }
.start-notice .now  { color: #f0a050; margin-left: 15px; font-weight: bold; }
.start-range { font-size: 28px; font-weight: bold; margin: 8px 0 12px; }
.day-grid-simple {
    display: grid; grid-template-columns: repeat(7, minmax(80px, 110px));
    gap: 10px;
}
.day-box {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    border: 2px solid #2f9e44; border-radius: 6px;
    padding: 14px 0; text-decoration: none; color: #222;
    font-weight: bold;
}
.day-box .wd { font-size: 26px; }
.day-box .dd { font-size: 22px; margin-top: 4px; }
.day-box:hover { filter: brightness(0.95); }

/* 登録一覧 (画像レイアウト) */
.touroku-screen-title {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #040444a4;
    margin: 0 0 2px;
    white-space: nowrap; 
}
.touroku-title-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 2px;
}
.admin-user-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.admin-user-switch label {
    font-size: 16px;
    color: #444;
}
.admin-user-switch select {
    height: 30px;
    min-width: 150px;
    font-size: 16px;
}
.admin-user-switch-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    color: #444;
}
.admin-user-nav-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.admin-user-nav-wrap select,
.admin-user-select {
    height: 30px;
    min-width: 150px;
    padding: 2px 6px;
    font-size: 16px;
}
.ichiran-head {
    display: flex; justify-content: center; align-items: center;gap: 16px; margin-bottom: 0;
}
.ichiran-title-group { display: flex; align-items: center;gap: 12px; flex: 0 0 auto; }
.ichiran-title { font-size: 18px; font-weight: bold; }
.ichiran-title .subtitle { margin-left: 16px; font-size: 18px; }
.add-tmp-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #ad9600;
    font-size: 21px;
    font-weight: bold;
    white-space: nowrap;
}
.add-tmp-toggle input {
    width: 18px;
    height: 18px;
}
.add-tmp-toggle.is-active {
    color: #ffd400;
    font-weight: 900;
    text-shadow: 0 1px 1px #000;
}
.admin-date-switch { display: inline-flex; align-items: center; }
.admin-date-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.date-title-btn {
    border: none;
    background: none;
    color: #111;
    font-size: 16px;
    font-weight: bold;
    padding: 0;
    cursor: pointer;
}
.date-title-btn:hover {
    color: #1971c2;
    text-decoration: underline;
}
.ichiran-head-right { margin-left: auto; display: flex;gap: 8px; align-items: center; }
.rireki-edit-title {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #c92a2a;
    margin: 0 0 2px;
}
.actions-bar {
    margin-top: 0;
    margin-bottom: 2px;
    font-size: 16px;
}
.actions-bar .hint { color: #666; font-size: 16px; margin-left: 8px; }
.ichiran-head .btn,
.actions-bar .btn,
.syuuka-toolbar .btn,
.syukka-toolbar .btn,
.touroku-head .btn,
.touroku-tool-row .btn,
.touroku-actions .btn {
    font-size: 16px;
}
.btn:disabled, button:disabled { opacity: 0.55; cursor: not-allowed; }

table.ichiran-table th { text-align: center; background: #f5f5f5; font-size: 16px; }
table.ichiran-table td { vertical-align: middle; font-size: 16px; }
table.ichiran-table .no-cell { text-align: center; }
table.ichiran-table .no-cell a { color: #1971c2; text-decoration: underline; }
/* ソート用ヘッダー */
table.ichiran-table th .sort-link {
    color: #222; text-decoration: none; display: inline-block; padding: 2px 4px;
}
table.ichiran-table th .sort-link:hover { text-decoration: underline; }
table.ichiran-table th.sort-active { background: #ffe066; }
table.ichiran-table th.sort-active .sort-link { color: #c92a2a; font-weight: bold; }
table.ichiran-table .op-cell { white-space: nowrap; text-align: center; }
table.ichiran-table .op-cell .btn { padding: 4px 8px; font-size: 16px; background: #fff; color: #1971c2; border: 1px solid #1971c2; margin: 0 1px; }
table.ichiran-table .op-cell .btn.secondary { color: #495057; border-color: #adb5bd; }
table.ichiran-table .op-cell .btn.danger { color: #c92a2a; border-color: #c92a2a; }
table.ichiran-table { table-layout: fixed; width: 100%; }
table.ichiran-table td { word-break: break-all; overflow: hidden; }
/* 2行表示エリア（品目〜予約番号）は空値でも入力時と同じ高さを維持する */
table.ichiran-table tbody tr.row-top td.editable-cell:not([rowspan]),
table.ichiran-table tbody tr.row-bot td.editable-cell {
    height: 28px;
}
table.ichiran-table td.editable-cell { cursor: pointer; }
table.ichiran-table td.editable-cell:hover { background: #fff3bf; }
table.ichiran-table td.cell-updated { background: #d3f9d8; }
table.ichiran-table.admin-readonly td.editable-cell { cursor: default; }
table.ichiran-table.admin-readonly td.editable-cell:hover { background: inherit; }

dialog.cell-edit-dlg {
    border: 1px solid #adb5bd;
    border-radius: 8px;
    padding: 14px 16px;
    width: 320px;
}
dialog.cell-edit-dlg::backdrop { background: rgba(0,0,0,0.28); }
dialog.cell-edit-dlg h3 {
    margin: 0 0 10px;
    font-size: 16px;
}
dialog.cell-edit-dlg select {
    width: 100%;
    min-height: 220px;
    font-size: 16px;
    padding: 4px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
dialog.cell-edit-dlg .combo-picker-list {
    width: 100%;
    max-height: 52vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #c9c9c9;
    border-radius: 6px;
    background: #fff;
    padding: 4px;
    display: grid;
    gap: 4px;
}
dialog.cell-edit-dlg .combo-picker-item {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 4px;
    padding: 12px 14px;
    text-align: left;
    background: #fff;
    color: #111;
    font-size: 16px;
    min-height: 48px;
}
dialog.cell-edit-dlg .combo-picker-item.is-selected {
    background: #111;
    color: #fff;
}
dialog.cell-edit-dlg .combo-picker-item:focus {
    outline: 2px solid #2b6cb0;
    outline-offset: 1px;
}
dialog.cell-edit-dlg .combo-picker-separator {
    background: #f5f5f5;
    color: #666;
    text-align: center;
}
dialog.cell-edit-dlg button,
dialog.cell-edit-dlg .btn {
    font-size: 16px;
}
.cell-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

@media (max-width: 900px), (pointer: coarse) {
    dialog.cell-edit-dlg {
        width: min(94vw, 460px);
        max-height: min(82vh, 620px);
    }
    dialog.cell-edit-dlg select {
        min-height: min(52vh, 360px);
        max-height: min(52vh, 360px);
    }
    dialog.cell-edit-dlg .combo-picker-list {
        max-height: min(52vh, 360px);
    }
}

dialog.cell-edit-dlg.touch-fullscreen {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    border-radius: 0;
    padding: 12px;
}
dialog.cell-edit-dlg.touch-fullscreen form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}
dialog.cell-edit-dlg.touch-fullscreen .combo-picker-list {
    flex: 1 1 auto;
    max-height: none;
}
dialog.cell-edit-dlg.touch-fullscreen .cell-edit-actions {
    margin-top: 0;
}

/* 一括削除ダイアログ */
dialog.bulk-del-dlg { border: 1px solid #adb5bd; border-radius: 8px; padding: 16px 20px; max-width: 360px; font-size: 16px; }
dialog.bulk-del-dlg::backdrop { background: rgba(0,0,0,0.35); }
dialog.bulk-del-dlg h3 { margin: 0 0 8px; font-size: 16px; }
dialog.bulk-del-dlg .bulk-del-row { display: flex; gap: 16px; margin: 12px 0; }
dialog.bulk-del-dlg .bulk-del-row label { display: flex; flex-direction: column; font-size: 16px; }
dialog.bulk-del-dlg .bulk-del-row input { width: 100px; padding: 4px; font-size: 16px; }
dialog.bulk-del-dlg .bulk-del-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
dialog.bulk-del-dlg p,
dialog.bulk-del-dlg button,
dialog.bulk-del-dlg .btn {
    font-size: 16px;
}

/* シール印刷 */
.seal-toolbar-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    width: min(297mm, calc(100vw - 32px));
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
}
.seal-toolbar-left {
    display: flex;
    align-items: center;
    height: 100%;
}
.seal-toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    height: 100%;
    flex-wrap: nowrap;
}

.seal-page-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 260px;
    justify-content: flex-start;
}

.seal-toolbar-right .page-pos {
    min-width: 64px;
    text-align: center;
}

.seal-toolbar-right .is-placeholder {
    visibility: hidden;
    pointer-events: none;
}

.seal-toolbar-wrap label,
.seal-toolbar-wrap input,
.seal-toolbar-wrap select,
.seal-toolbar-wrap button,
.seal-toolbar-wrap .btn,
.seal-toolbar-wrap .page-pos {
    font-size: 16px;
}
.seal-sheet {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 0;
    width: min(297mm, calc(100vw - 32px));
    aspect-ratio: 297 / 210;
    margin: 0 auto 16px;
    background: #fff;
}
.seal-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4mm;
    break-inside: avoid;
    page-break-inside: avoid;
}
.seal-card-title {
    height: 9mm;
    line-height: 9mm;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
}
.seal-card table { width: 100%; border-collapse: collapse; font-size: 16px; background: #fff; table-layout: fixed; }
.seal-card th, .seal-card td { border: 1px solid #000; padding: 0 7px; vertical-align: middle; height: 9.4mm; background: #fff; color: #000; }
.seal-card th { width: 22%; text-align: center; font-weight: bold; white-space: nowrap; }
.seal-card td { font-weight: normal; }
.seal-card .seal-order-mark { color: #c00; font-weight: bold; float: right; }
.seal-card .seal-yoyaku-bango {
    float: right;
    margin-left: 10px;
    color: #c00;
    font-weight: bold;
    white-space: nowrap;
}
.seal-card .seal-variety-cell {
    overflow: hidden;
}
.seal-card .seal-variety-line {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}
.seal-card .seal-variety-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.seal-card .seal-pot-size {
    flex: 0 0 auto;
    margin-left: auto;
    font-weight: bold;
    white-space: nowrap;
}
.seal-card .seal-num { text-align: center; }
.seal-card td.kuchi-val { text-align: center; font-weight: bold; }
.seal-page-break { page-break-after: always; }
/* シール印刷の印刷設定用スタイル */
@media print {
    @page { size: A4 landscape; margin: 1mm 1mm 1mm 1mm; width: 297mm;    height: 210mm;}
    header, .no-print { display: none !important; }
    main { padding: 0 !important; margin: 0 !important; }
    body { background: #fff; margin: 0 !important; padding: 0 !important; }
    .seal-sheet { width: 297mm; height: 210mm; margin: 0; }
    .seal-card { padding: 4mm; }
    .seal-card table { font-size: 16px; }
    .seal-card th, .seal-card td { padding: 0 7px; }
}

form.edit-form { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; max-width: 720px; }
form.edit-form input[type=text], form.edit-form select {
    width: 100%; padding: 4px 6px; font-size: 14px;
}
.actions-bar { margin: 0 0 2px 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.actions-bar .hint { margin-left: 8px; }
.actions-bar form { margin-left: auto; }

/* 登録編集 (画像レイアウト寄せ) */
.touroku-modal-wrap {
    position: fixed;
    inset: 0;
    background: rgba(20, 24, 28, 0.06);
    z-index: 30;
}
.touroku-bg-frame {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    z-index: 0;
}
.touroku-page {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 44vw;
    max-width: 920px;
    min-width: 600px;
    max-height: 92vh;
    overflow: auto;
    background: #f3f3f3;
    border: 1px solid #cfcfcf;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24);
    border-radius: 10px;
    padding: 0;
    z-index: 1;
}
.touroku-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #cfcfcf;
    padding: 12px 16px;
    cursor: move;
}
.touroku-head h2 {
    margin: 0;
    font-size: 16px;
    letter-spacing: 0.02em;
}
.touroku-close {
    color: #666;
    font-size: 24px;
    line-height: 1;
    text-decoration: none;
}
.touroku-tool-row {
    padding: 12px 16px 4px;
}
.touroku-tool-row .history-btn {
    background: #e9f5ff;
    color: #005d8f;
    border: 1px solid #66a9cc;
}
.touroku-meta {
    padding: 0 16px;
    margin-top: 4px;
    font-size: 16px;
}
.touroku-help {
    margin: 6px 16px 10px;
    color: #444;
    font-size: 16px;
}
.req-mark { color: #c92a2a; font-weight: bold; }

.touroku-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 0 16px 14px;
}
.touroku-row.full {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    gap: 8px;
    padding-left: 20px;
}
.touroku-row.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}
.field-block {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    gap: 8px;
    padding-left: 20px;
}
.field-label {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 34px;
    border: 1px solid #999;
    background: #f7f7f7;
    font-size: 16px;
    white-space: nowrap;
}
.field-label.required::before {
    content: "★";
    color: #c92a2a;
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
}
.touroku-form input[type="text"],
.touroku-form input[list] {
    width: 100%;
    height: 34px;
    border: 1px solid #c6c6c6;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 16px;
    background: #fff;
}
.touroku-form input.touch-list-input {
    cursor: pointer;
    caret-color: transparent;
}
.with-unit {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px;
}
.unit {
    min-width: 20px;
    font-size: 16px;
    color: #333;
}
.touroku-footer {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.record-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
}
.record-nav-title {
    font-weight: bold;
    color: #333;
}
.record-nav-value {
    min-width: 44px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #aaa;
    border-radius: 4px;
    background: #fff;
    font-weight: bold;
}
.record-nav-btn {
    width: 32px;
    height: 30px;
    padding: 0;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1;
}
.touroku-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.touroku-actions .success {
    background: #1f9254;
}

@media (max-width: 1200px) {
    .touroku-page {
        min-width: 0;
        width: min(960px, calc(100vw - 20px));
        max-width: calc(100vw - 20px);
    }
    .touroku-head h2 { font-size: 20px; }
    .touroku-close { font-size: 22px; }
    .touroku-meta { font-size: 16px; }
    .touroku-help { font-size: 16px; }
    .field-label { min-height: 34px; font-size: 16px; }
    .touroku-form input[type="text"],
    .touroku-form input[list] { height: 34px; font-size: 16px; }
    .unit { font-size: 16px; }
}

@media (max-width: 780px) {
    .touroku-modal-wrap {
        background: rgba(20, 24, 28, 0.1);
    }
    .touroku-bg-frame {
        display: none;
    }
    .touroku-page {
        left: 50%;
        top: 10px;
        transform: translateX(-50%);
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
        min-width: 0;
        max-height: calc(100dvh - 20px);
        border-radius: 8px;
    }
    .touroku-row.full,
    .field-block {
        grid-template-columns: 96px 1fr;
        padding-left: 16px;
    }
    .touroku-row.split {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .touroku-footer {
        align-items: stretch;
        flex-direction: column;
    }
    .record-nav,
    .touroku-actions {
        justify-content: flex-end;
    }
}
/* 登録編集の印刷設定用スタイル */
@media print {
    @page { size: A4 landscape; margin: 8mm 7mm 7mm 7mm; width: 297mm;    height: 210mm;}
    header, .actions-bar, .no-print { display: none !important; }
    body { background: #fff; margin: 0 !important; padding: 0 !important; }
    main { padding: 0; margin: 0 !important; }
    .touroku-page table.record-table th,
    .touroku-page table.record-table td { font-size: 11px; }
}

/* ===== 集荷伝票 (syuuka_ichiran) ===== */
.syuuka-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
    font-size: 16px;
}
.syuuka-toolbar .admin-user-switch-inline { margin-left: 8px; }
.syuuka-toolbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    justify-content: flex-end;
}
.syuuka-toolbar-right .page-pos { font-weight: bold; }
.syuuka-toolbar label,
.syuuka-toolbar input,
.syuuka-toolbar select,
.syuuka-toolbar button,
.syuuka-toolbar .btn,
.syuuka-toolbar .page-pos {
    font-size: 16px;
}
.syuuka-paper {
    background: #fff; padding: 12px 16px;
    border: 1px solid #999;
}
.syuuka-head {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: start; margin-bottom: 8px;
}
.syuuka-head-left { font-size: 16px; line-height: 1.6; }
.syuuka-head-center {
    font-size: 24px; font-weight: bold; text-align: center; align-self: center;
    letter-spacing: 0.3em;
}
.syuuka-head-right { text-align: right; font-weight: normal; font-size: 16px; }
.syuuka-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.syuuka-table th, .syuuka-table td {
    border: 1px solid #333; padding: 2px 3px 1px 3px; font-size: 13px;
    word-break: break-all; overflow: hidden;
}
.syuuka-table thead th { background: #e8e8e8; text-align: center; }
.syuuka-table .num { text-align: right; }
.syuuka-table .row-top td { border-bottom: none; }
.syuuka-table .row-bot td { border-top: none; color: #333; }
.syuuka-table .row-top.data-last td[rowspan],
.syuuka-table .row-bot.data-last td {
    border-bottom: 1px solid #333;
}
.syuuka-table .empty td { height: 16px; color: transparent; }
.syuuka-table tbody tr.row-bot.empty:last-of-type td { border-bottom: 1px solid #333; }
.syuuka-total td { border: 1px solid #333; height: 22px; background: #f4f4f4; }
.syuuka-total .label { text-align: center; font-weight: bold; }
.syuuka-total .total-val { text-align: right; font-weight: bold; }
.syuuka-subtotal {
    border: 1px solid #333; height: 22px; background: #f9f9f9;
}
.syuuka-subtotal .label { text-align: center; font-weight: bold; color: #555; }
.syuuka-subtotal .total-val { text-align: right; font-weight: bold; color: #555; }
/* 集荷伝票の印刷設定用スタイル */
@media print {
    @page { size: A4 landscape; margin: 8mm 7mm 7mm 7mm; width: 297mm;    height: 210mm;}
    .syuuka-paper {
        border: none;
        padding: 0;
        margin: 0 !important;
        break-inside: avoid;
    }
    .syuuka-head { margin-bottom: 4px; }
    .syuuka-head-left,
    .syuuka-head-right { font-size: 14px !important; line-height: 1.35 !important; }
    .syuuka-head-center { font-size: 22px !important; }
    .syuuka-table th, .syuuka-table td {
        padding: 2px 3px 1px 3px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
    .syuuka-table .empty td { height: 12px !important; }
    .syuuka-total td,
    .syuuka-subtotal { height: 18px !important; }
    body { margin: 0 !important; padding: 0 !important; }
    main { margin: 0 !important; padding: 0 !important; }
}

/* ===== 出荷送り状 (syukka_okurijyou) ===== */
.syukka-toolbar {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 8px; flex-wrap: wrap;
    font-size: 16px;
}
.syukka-toolbar .market-switch select { padding: 4px 8px; font-size: 21px; }
.syukka-toolbar .admin-user-switch-inline { margin-left: 4px; }
.syukka-toolbar .hint { color: #666; font-size: 16px; }
.syukka-toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.syukka-toolbar label,
.syukka-toolbar input,
.syukka-toolbar select,
.syukka-toolbar button,
.syukka-toolbar .btn,
.syukka-toolbar .page-pos {
    font-size: 16px;
}

.touroku-title-row .btn.small,
.ichiran-head .btn.small,
.actions-bar .btn.small,
.syuuka-toolbar .btn.small,
.syukka-toolbar .btn.small,
.seal-toolbar-wrap .btn.small {
    font-size: 16px;
}
.syukka-paper {
    background: #fff; padding: 12px 16px; margin-bottom: 16px;
    border: 1px solid #999;
    page-break-after: always;
}
.syukka-head {
    display: grid; grid-template-columns: 1fr 1.2fr 1fr;
    align-items: start; margin-bottom: 8px; gap: 8px;
}
.syukka-head-left .market-name {
    font-size: 21px; font-weight: normal;
    border-bottom: 1px solid #333; display: inline-block; padding: 2px 12px;
}
.syukka-head-left .market-name .sama { font-weight: normal; font-size: 16px; margin-left: 8px; }
.syukka-head-left .dates {
    margin-top: 8px; display: grid; grid-template-columns: auto 1fr auto 1fr;
    gap: 4px 8px; font-size: 16px; align-items: center;
}
.syukka-head-left .dates .date-val { font-size: 16px; }
.syukka-head-center { text-align: center; }
.syukka-head-center .title { font-size: 24px; font-weight: bold; letter-spacing: 0.2em; }
.syukka-head-center .copies { margin-top: 24px; font-size: 16px; }
.syukka-head-right { text-align: right; font-size: 16px; line-height: 1.5; }
.syukka-head-right .shuka-name { font-weight: normal; font-size: 16px; }

.syukka-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.syukka-table th, .syukka-table td {
    border: 1px solid #333; padding: 2px 3px 1px 3px; font-size: 16px;
    word-break: break-all; overflow: hidden;
}
.syukka-table thead th { background: #c8c8c8; text-align: center; }
.syukka-table .num { text-align: right; }
.syukka-table .row-top td { border-bottom: none; }
.syukka-table .row-top.data-last td[rowspan] { border-bottom: 1px solid #333; }
.syukka-table .row-bot td { border-top: none; color: #333; }
.syukka-table .empty td { height: 16px; color: transparent; }
.syukka-table tbody tr.row-bot.empty:last-of-type td { border-bottom: 1px solid #333; }
.syukka-table .tokubetsu-order { color: #c00; font-weight: bold; }
.syukka-total td { border: 1px solid #333; height: 22px; }
.syukka-total .label { text-align: center; font-weight: bold; }
.syukka-total .total-val { text-align: right; font-weight: bold; }

.syukka-member {
    width: 60%;
    border-collapse: collapse;
    margin: 41px auto 0;
    table-layout: fixed;
}
.syukka-member th, .syukka-member td {
    border: 1px solid #333; padding: 4px 6px; font-size: 16px; text-align: center;
}
.syukka-member thead th { background: #f0f0f0; }
.syukka-member tbody td { height: 39px; }
.syukka-member .prod-name { font-weight: bold; font-size: 16px; }
.syukka-member .prod-name2 { font-weight: normal; font-size: 16px; }

.btn.small { padding: 2px 8px; font-size: 16px; }
/* 出荷送り状の印刷設定用スタイル margin 上右下左*/
@media print {
    @page { size: A4 landscape; margin: 8mm 7mm 7mm 7mm; width: 297mm;    height: 210mm;}
    .page-sheet {
        page-break-after: always;
        break-inside: avoid;
    }
    .syukka-paper, .syuuka-paper { border: none; padding: 0; }
    .syukka-paper {
        margin: 0 !important;
    }
    .syukka-head { margin-bottom: 4px !important; }
    .syukka-head-left .market-name{ font-size: 21px !important;}
    .syukka-head-left .dates,
    .syukka-head-right { font-size: 14px !important; line-height: 1.2 !important; }
    .syukka-head-center .title { font-size: 22px !important; }
    .syukka-head-center .copies {
        margin-top: 10px !important;
        font-size: 14px !important;
    }
    .syukka-table th, .syukka-table td {
        padding: 2px 3px 1px 3px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
    .syukka-table .empty td { height: 13px !important; }
    .syukka-paper,
    .syukka-paper * { color: #000 !important; }
    .syukka-member {
        margin-top: 16px !important;
    }
    .syukka-member th,
    .syukka-member td {
        padding: 2px 3px 1px 3px !important;
        font-size: 13px !important;
    }
    .syukka-member tbody td { height: 35px !important; }
    .print-hidden { display: none !important; }
    body { margin: 0 !important; padding: 0 !important; }
    main { margin: 0 !important; padding: 0 !important; }
}

/* rireki_sel フィルタ機能 */
td.filter-cell { cursor: pointer; }
td.filter-cell:hover { background: #fff3bf; }
td.filter-cell.filter-active { background: #ffec99; box-shadow: inset 0 0 0 2px #f59f00; }
table.ichiran-table tr.row-top.filter-hit td,
table.ichiran-table tr.row-bot.filter-hit td { background: #d3f9d8; }

dialog.filter-dlg {
    border: 1px solid #adb5bd;
    border-radius: 8px;
    padding: 14px 16px;
    width: 320px;
    max-height: 80vh;
    font-size: 16px;
}
dialog.filter-dlg::backdrop { background: rgba(0,0,0,0.28); }
dialog.filter-dlg h3 {
    margin: 0 0 10px;
    font-size: 16px;
    cursor: move;
    user-select: none;
}
dialog.filter-dlg.dragging h3 { cursor: grabbing; }
.filter-tools { display: flex; gap: 6px; margin-bottom: 6px; }
.filter-tools .btn.small { padding: 2px 8px; font-size: 16px; }
.filter-list {
    max-height: 50vh;
    overflow-y: auto;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 6px;
    background: #fff;
}
.filter-list .filter-item {
    display: flex; align-items: center; gap: 6px;
    padding: 3px 4px; font-size: 16px; cursor: pointer;
}
.filter-list .filter-item:hover { background: #e7f5ff; }
.filter-actions { display: flex; gap: 6px; margin-top: 10px; justify-content: flex-end; }
dialog.filter-dlg button,
dialog.filter-dlg .btn {
    font-size: 16px;
}

/* Start ページ: 9時保管データとの相違表示 */
.snapshot-diff-wrap {
    margin: 18px 12px;
    padding: 12px 16px;
    border: 1px solid #f08c00;
    border-radius: 8px;
    background: #fff9db;
}
.snapshot-diff-title {
    margin: 0 0 10px;
    font-size: 18px;
    color: #d9480f;
}
.snapshot-diff-none {
    margin: 0;
    font-size: 16px;
    color: #2f9e44;
}
.snapshot-diff-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.snapshot-diff-user {
    padding: 8px 10px;
    border: 1px solid #ffd8a8;
    border-radius: 6px;
    background: #fff;
}
.snapshot-diff-link {
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    color: #1864ab;
    text-decoration: underline;
    margin-bottom: 4px;
}
.snapshot-diff-link:hover {
    color: #d9480f;
}
.snapshot-diff-detail {
    font-size: 15px;
}
.snapshot-diff-section {
    margin: 2px 0;
}
.snapshot-diff-section ul {
    margin: 2px 0 6px 0;
    padding-left: 22px;
}
.snapshot-diff-tag {
    font-weight: 700;
}
.snapshot-diff-section.added .snapshot-diff-tag { color: #2b8a3e; }
.snapshot-diff-section.changed .snapshot-diff-tag { color: #1971c2; }
.snapshot-diff-section.deleted .snapshot-diff-tag { color: #c92a2a; }
.snapshot-diff-fields {
    color: #555;
}

/* ユーザー管理ページ */
.user-mgmt-wrap {
    margin: 16px;
    font-size: 16px;
}
.user-mgmt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.user-mgmt-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.user-mgmt-message {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #c92a2a;
}
.user-mgmt-status {
    min-height: 20px;
    margin: 0 0 8px;
    font-size: 15px;
    color: #1971c2;
}
.user-mgmt-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.user-mgmt-col-title {
    margin: 0 0 4px;
    font-size: 15px;
    color: #495057;
}
.user-mgmt-table {
    border-collapse: collapse;
    background: #fff;
    width: 100%;
}
.user-mgmt-table th,
.user-mgmt-table td {
    border: 1px solid #888;
    padding: 6px 12px;
    text-align: center;
    white-space: nowrap;
}
.user-mgmt-table thead th {
    background: #f1f3f5;
}
.user-mgmt-table .col-uid {
    font-family: "Consolas", "Courier New", monospace;
    font-size: 17px;
    letter-spacing: 0.5px;
}
.user-mgmt-table .col-uid .uid-text {
    display: inline-block;
}
.uid-unread-badge {
    display: inline-block;
    width: auto !important;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid #ffa8a8;
    background: #fff5f5;
    font-size: 13px;
    letter-spacing: 0;
    text-decoration: underline;
}
/* ログイン状態とメッセージ欄は固定幅にして表示位置がずれないようにする */
.user-mgmt-table .col-login {
    width: 9em;
}
.user-mgmt-table .col-ship {
    width: 8em;
}
.user-mgmt-table .col-msg {
    width: 18em;
}
.ship-state-link {
    display: inline-block;
    width: 100%;
    text-decoration: underline;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.ship-state-link.ship-empty {
    color: #222;
    text-decoration: none;
}
.ship-state-link.ship-pre {
    color: #222;
    font-weight: 400;
}
.ship-state-link.ship-ok {
    color: #2b8a3e;
    font-weight: 700;
}
.ship-state-link.ship-changed {
    color: #e67700;
    font-weight: 700;
}
.ship-state-link.ship-added {
    color: #e67700;
    font-weight: 700;
}
.ship-state-link.ship-edited {
    color: #e67700;
    font-weight: 700;
}
.ship-state-link.ship-deleted {
    color: #e67700;
    font-weight: 700;
}
.ship-state-link.ship-none {
    color: #c92a2a;
    font-weight: 700;
}
.login-state-link,
.message-state-link {
    display: inline-block;
    width: 100%;
    text-decoration: underline;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.login-state-link.is-online { color: #2b8a3e; font-weight: 700; }
.login-state-link.is-offline { color: #868e96; }
.message-state-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.message-state-link.is-unread { color: #c92a2a; font-weight: 700; }
.message-state-link.is-read { color: #868e96; }
.user-mgmt-table tr.row-disabled {
    background: #f1f3f5;
    color: #adb5bd;
}
.user-mgmt-table tr.row-disabled .login-state-link,
.user-mgmt-table tr.row-disabled .message-state-link {
    color: #adb5bd;
    text-decoration: none;
    cursor: not-allowed;
    pointer-events: auto;
    font-weight: 400;
}

/* ユーザー有効・無効設定ページ */
.user-enable-wrap {
    margin: 16px;
    font-size: 16px;
}
.user-enable-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.user-enable-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.user-enable-message {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #c92a2a;
}
.user-enable-status {
    min-height: 20px;
    margin: 0 0 8px;
    font-size: 15px;
    color: #1971c2;
}
.user-enable-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 10px;
}
.user-enable-card {
    display: grid;
    grid-template-columns: auto 10.5em 1fr;
    align-items: center;
    gap: 10px;
    border: 1px solid #888;
    background: #fff;
    padding: 8px 10px;
}
.user-enable-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.user-enable-id {
    font-family: "Consolas", "Courier New", monospace;
    letter-spacing: 1px;
    white-space: nowrap;
}
.user-enable-producer {
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1080px) {
    .user-mgmt-table .col-msg {
        width: auto;
    }
    .user-mgmt-grid-2col {
        grid-template-columns: 1fr;
    }
    .user-enable-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    .user-enable-card {
        grid-template-columns: auto 9.5em 1fr;
        gap: 8px;
    }
}

@media (max-width: 700px) {
    .user-enable-grid {
        grid-template-columns: 1fr;
    }
    .user-enable-card {
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "check id"
            "producer producer";
    }
    .user-enable-check {
        grid-area: check;
    }
    .user-enable-id {
        grid-area: id;
    }
    .user-enable-producer {
        grid-area: producer;
    }
}