@import url("dayoff-management.css?v=20260716-ledger-filters");

/* --- カラーシステム ＆ 共通変数の定義 --- */
:root {
    /* カラー */
    --bg-main: #f4f7f6;
    --bg-container: #fff;
    --text-main: #333;
    --text-muted: #718096;
    --border-color: #cbd5e0;

    --color-primary: #2b6cb0;
    --color-primary-dark: #1a365d;
    --color-primary-light: #ebf8ff;
    --color-primary-border: #bee3f8;

    --color-sat: #ebf8ff;
    --color-sat-text: #2b6cb0;
    --color-sun: #fff5f5;
    --color-sun-text: #c53030;
    --color-sun-cell-bg: #fee2e2;
    --color-sun-cell-stripe: #fecaca;
    --color-sun-cell-text: #9b2c2c;

    --color-away-bg: #fef3c7;
    --color-away-text: #744210;
    --color-shift-mismatch-bg: #d9f99d;
    --color-shift-mismatch-text: #3f6212;

    /* --- 追加：共通カラーの集約 --- */
    --bg-muted: #edf2f7;      /* テーブルヘッダーや薄いグレー背景 */
    --bg-disabled: #e2e8f0;   /* 非アクティブ・操作不可の背景 */
    --text-disabled: #a0aec0; /* 非アクティブのテキスト */

    --color-action-save: #3182ce;
    --color-action-discard: #e53e3e;

    --color-success-bg: #f0fff4;
    --color-success-border: #9ae6b4;
    --color-success-text: #22543d;

    --color-danger-bg: #fff5f5;
    --color-danger-border: #feb2b2;
    --color-danger-text: #9b2c2c;
    /* ------------------------------ */

    --highlight-selected-bg: var(--color-primary-light);
    --highlight-selected-border: var(--color-primary);
    --highlight-active-bg: var(--color-primary);
    --highlight-active-border: var(--color-primary);
    --highlight-active-text: #fff;

    --mode-locked-opacity: 0.36;
    --copy-highlight-bg: rgba(235, 248, 255, 0.58);
    --copy-highlight-shadow: inset 0 0 18px rgba(43, 108, 176, 0.3);
    --copy-highlight-duration: 1.7s;
    --copy-highlight-opacity-low: 0.35;
    --copy-highlight-opacity-high: 0.95;
    --copy-locked-opacity: var(--mode-locked-opacity);
    --head-edited-value-font-size: calc(var(--cell-symbol-font-size) * 1.06);

    /* レイアウト共通 */
    --pad-left: 15px;
    --sticky-max-width: calc(100vw - 30px);
    --detail-page-inline: 28px;
    --detail-shell-inline: 15px;

    /* 見ため・サイズシステム */
    --table-border: 1px solid var(--border-color);
    --dense-table-pad-y: 3px;
    --dense-table-pad-x: 6px;
    --dense-table-line-h: 1.2;
    --compact-table-cell-h: 24px;
    --font-size-base: 12px;
    --font-size-xs: 9px;
    --font-size-sm: 10px;
    --font-size-md: 15px;
    --font-size-control: 16px;
    --cell-w: 36px;
    --cell-h: 38px;
    --cell-symbol-font-size: var(--font-size-control);
    --staff-col-w: 115px;
    --staff-view-type-col-w: 34px;
    --lateness-col-w: 60px;
    --vac-count-col-w: 36px;
    --vac-summary-col-w: 55px;
    --balance-summary-col-w: 86px;
    --identity-col-w: 92px;
    --away-slot-main-h: 28px;
    --away-slot-night-h: 16px;

    --color-status-before: #feebc8;
    --color-status-before-txt: #c05621;
    --color-status-during: var(--bg-disabled);
    --color-status-during-txt: #4a5568;
    --color-status-after: #c6f6d5;
    --color-status-after-txt: var(--color-success-text);
}

/* 縦画面スクロール制御 */
html {
    overflow-x: auto;
}

/* DBマスター取得と初回描画が完了するまで、組み上がる途中の画面を表示しない。 */
html[data-okome-loading] {
    min-height: 100%;
    background: var(--bg-main);
}

html[data-okome-loading] body {
    visibility: hidden;
}

html[data-okome-loading]::before {
    content: "画面を読み込んでいます…";
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: grid;
    place-items: center;
    visibility: visible;
    color: var(--color-primary-dark);
    background: var(--bg-main);
    font-family: sans-serif;
    font-size: 14px;
    font-weight: 700;
}

html[data-okome-loading="error"]::before {
    content: "画面を読み込めませんでした。再読み込みしてください。";
    color: var(--color-danger-text);
}

/* 文字フォント・基本サイズの一括共通化 */
body, select, textarea, button, input {
    font-family: sans-serif;
}
body {
    font-size: var(--font-size-base);
    background-color: var(--bg-main);
    color: var(--text-main);
    margin: 0;
    padding: 0 10px 10px 0;
    min-width: max-content;
}

[hidden] {
    display: none !important;
}

body.okome-body {
    min-width: 0;
    padding: 0;
}

.okome-back-area {
    display: flex;
    align-items: center;
    gap: 0;
    box-sizing: border-box;
    min-height: 32px;
    margin: 0;
    padding: 4px 10px;
    background: #e5e7eb;
    border-bottom: 1px solid #cbd5e1;
}

.okome-back-link {
    color: #475569;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}

.okome-back-link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.okome-back-link + .okome-back-link {
    margin-left: 18px;
}

/* --- ボタン類の安全なベース共通化 --- */
.btn, .admin-action, .okome-auth-primary, .away-copy-button, .bulk-edit-toggle,
.view-switch-button, .modal-primary-btn, .modal-secondary-btn, .modal-action-btn {
    cursor: pointer;
    min-height: 28px;
    padding: 4px 9px;
    border: 1px solid var(--border-color);
    background: var(--bg-container);
    color: var(--text-main);
    font: inherit;
    font-weight: bold;
    box-sizing: border-box;
    white-space: nowrap;
}

/* --- テーブルのベース共通化 --- */
table {
    border-collapse: collapse;
    background: var(--bg-container);
    text-align: center;
    white-space: nowrap;
}
th, td {
    border: var(--table-border);
    padding: 4px 1px;
}
th {
    background-color: var(--bg-muted);
    color: var(--color-primary-dark);
    font-weight: bold;
}

.okome-shell {
    min-height: 100vh;
    background: var(--bg-main);
}

.okome-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
}

.okome-brand {
    color: var(--color-primary-dark);
    font-size: 22px;
    font-weight: bold;
}

.okome-subtitle {
    color: var(--text-muted);
    font-size: var(--font-size-base);
    margin-top: 4px;
}

.okome-subtitle:empty {
    display: none;
}

.okome-main > .okome-subtitle {
    margin: 0 0 18px;
}

.okome-main {
    width: min(860px, calc(100vw - 48px));
    margin: 88px auto 0;
}

.okome-main.okome-menu-page {
    width: auto;
    margin: 32px 28px 0;
}

.okome-main.is-detail-page {
    width: auto;
    margin: 16px var(--detail-page-inline) 0;
}

/*
 * PHP別ページで開く詳細画面の外周。
 * 内容の表・一覧・モーダルだけに白背景を使い、ページ外周には白い土台を作らない。
 */
.okome-detail-shell {
    width: fit-content;
    min-width: 100%;
    box-sizing: border-box;
    padding: 15px var(--detail-shell-inline);
    background: transparent;
}

.okome-main h1 {
    color: var(--color-primary-dark);
    font-size: 28px;
    margin: 0 0 22px;
}

.okome-menu {
    display: grid;
    grid-template-columns: repeat(auto-fill, 254px);
    justify-content: start;
    gap: 14px;
}

.okome-menu-item {
    display: block;
    width: 254px;
    min-height: 118px;
    box-sizing: border-box;
    padding: 18px;
    color: var(--text-main);
    text-decoration: none;
    text-align: left;
    background: var(--bg-container);
    border: 1px solid var(--border-color);
    font: inherit;
}

.okome-menu-item[href],
button.okome-menu-item {
    cursor: pointer;
}

.okome-menu-item:hover,
button.okome-menu-item:focus-visible {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.okome-menu-item.is-disabled {
    color: var(--text-muted);
    background: var(--bg-muted);
    border-color: #d8dee8;
    cursor: default;
    opacity: 0.68;
}

.okome-menu-item.is-disabled:hover {
    background: var(--bg-muted);
    border-color: #d8dee8;
}

.okome-menu-item.is-disabled .okome-menu-title,
.okome-menu-item.is-disabled .okome-menu-desc {
    color: var(--text-muted);
}

.okome-menu-title {
    display: block;
    width: 12em;
    max-width: 100%;
    color: var(--color-primary);
    font-size: 18px;
    font-weight: bold;
    line-height: 1.4;
    overflow-wrap: anywhere;
    text-align: left;
    white-space: normal;
}

.okome-menu-desc {
    display: block;
    color: var(--text-muted);
    line-height: 1.6;
    margin-top: 12px;
    text-align: left;
}

.okome-menu-groups {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.okome-menu-group {
    min-width: 0;
}

.okome-menu-group h2 {
    margin: 0 0 12px;
    color: var(--color-primary-dark);
    font-size: 17px;
}

.okome-menu-group-grid {
    grid-template-columns: repeat(auto-fill, 254px);
}

.okome-menu-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    overflow-x: auto;
}

.okome-menu-tab {
    min-width: 128px;
}

.okome-menu-tab.is-active {
    color: var(--color-primary-dark);
    background: var(--color-primary-light);
    border-color: var(--color-primary);
}

.okome-login-layout {
    max-width: 420px;
}

.okome-login-panel {
    box-sizing: border-box;
    padding: 22px;
    background: var(--bg-container);
    border: 1px solid var(--border-color);
}

.okome-login-panel h1,
.okome-login-panel h2 {
    margin: 0 0 18px;
    color: var(--color-primary-dark);
    font-size: 22px;
}

.okome-login-panel h2 {
    font-size: 18px;
}

.okome-auth-form {
    display: grid;
    gap: 12px;
}

.okome-auth-help {
    margin: 0 0 14px;
    color: var(--text-muted);
    line-height: 1.6;
}

.okome-auth-form label {
    display: grid;
    gap: 5px;
    color: var(--text-muted);
    font-size: var(--font-size-base);
}

.okome-auth-form input,
.okome-auth-form select {
    box-sizing: border-box;
    width: 100%;
    height: 36px;
    padding: 6px 9px;
    font-size: 15px;
}

.okome-auth-primary {
    min-height: 36px;
    color: #fff;
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    font-weight: bold;
    cursor: pointer;
}

.okome-auth-message {
    margin-bottom: 12px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
}

.okome-auth-message.is-success {
    color: var(--color-success-text);
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
}

.okome-auth-message.is-danger {
    color: var(--color-danger-text);
    background: var(--color-danger-bg);
    border-color: var(--color-danger-border);
}

/* プルダウンのベースリセット */
select {
    cursor: default;
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
}
select:disabled {
    color: #bbb;
    cursor: default;
}

/* 勤務申告表(院長)・院別確認は勤務記号セルだけプルダウンの標準矢印を表示しない。 */
.attendance-director-screen select.cell-input,
#head-clinic-confirm-screen select.cell-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
}

td.input-cell select.cell-input,
td.lateness-cell select.lateness-select,
td.away-cell {
    cursor: pointer;
}

td.input-cell select.cell-input:disabled,
td.lateness-cell select.lateness-select:disabled {
    cursor: default;
}

body.is-processing-locked td.away-cell {
    cursor: default;
}

/* --- ヘッダー全体のレイアウト調整 --- */
.header-box {
    display: flex;
    flex-direction: row;      /* 横並び */
    align-items: stretch;     /* 高さを揃えて特記事項を引き伸ばす */
    gap: 30px;                /* 各エリア間の横スキマ */
    border-bottom: 2px solid #e0e0e0;
    padding-bottom: 15px;
    padding-left: var(--pad-left);
    margin-bottom: 15px;
    background-color: var(--bg-container);
}

/* 透明な田の字枠（2行×2列のグリッド） */
.header-grid-area {
    display: grid;
    grid-template-columns: repeat(2, auto); /* 2列構成 */
    grid-template-rows: repeat(2, 1fr);     /* 2行の高さを完全に均等化 */
    gap: 12px 35px;                         /* 上下スキマ 12px / 左右スキマ 35px */
}

/* 田の字内の各セル：上下左右中央揃え */
.grid-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* タイトルとステータスバッジの横並び */
.title-row-inline {
    display: flex;
    align-items: center;
    gap: 10px;
}
.grid-cell h1 {
    margin: 0;
    font-size: 20px;
    color: var(--color-primary-dark);
}

/* 院名テキスト */
.grid-cell .clinic-name {
    color: var(--text-muted);
    font-weight: bold;
}

.clinic-context {
    display: flex;
    align-items: center;
    gap: 8px;
}

.clinic-selector {
    min-width: 180px;
    max-width: 280px;
}

/* ステータスバッジ */
.status-badge {
    display: inline-block;
    padding: 3px 8px;
    font-weight: bold;
    white-space: nowrap;
}
.status-badge.before { background-color: var(--color-status-before); color: var(--color-status-before-txt); }
.status-badge.during { background-color: var(--color-status-during); color: var(--color-status-during-txt); }
.status-badge.after { background-color: var(--color-status-after); color: var(--color-status-after-txt); }

/* 何月表示エリア */
.month-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.month-controls label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}

select.table-select.attendance-month-select {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
}

/* ボタン共通 */
.action-button-group {
    display: flex;
    gap: 6px;
    align-items: center;
}
.btn-action-save { background-color: var(--color-action-save); color: #fff; border: none; }
.btn-action-discard { background-color: var(--color-action-discard); color: #fff; border: none; }
.btn-submit { background-color: var(--color-primary); color: var(--bg-container); border: none; padding: 7px 14px; }

.btn:disabled,
.btn.is-disabled,
.admin-action:disabled,
.admin-action.is-disabled,
.away-copy-button:disabled,
.away-copy-button.is-disabled,
.bulk-edit-toggle:disabled,
.bulk-edit-toggle.is-disabled,
.view-switch-button:disabled,
.view-switch-button.is-disabled {
    background-color: var(--bg-disabled) !important;
    color: var(--text-disabled) !important;
    border-color: var(--bg-disabled) !important;
    opacity: 0.6 !important;
    cursor: default !important;
    pointer-events: none !important;
}

/* 特記事項（田の字枠の高さに合わせて縦に自動拡大） */
.header-support-panel {
    margin-top: 8px;
}

.header-column-note {
    flex: 1;                  /* 残りの横幅を自動で埋める */
    max-width: 450px;         /* 広がりすぎ防止 */
    display: flex;
    align-items: stretch;     /* 縦いっぱいに引き伸ばす */
    gap: 6px;
}
.note-textarea {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 100%;             /* 親の高さに完全同調 */
    padding: 8px 12px;
    border: var(--table-border);
    resize: none;
    overflow-y: auto;
    box-sizing: border-box;
    font-size: var(--font-size-base);
    line-height: 1.4;
}
.note-textarea:focus {
    border-color: var(--color-primary);
    outline: none;
    background-color: #fffbf0;
}
.note-textarea.unsaved-cell {
    border-color: rgba(229, 62, 62, 0.75);
    box-shadow: inset 0 0 0 1px rgba(229, 62, 62, 0.75);
    background-color: #fff5f5;
}
.note-textarea:disabled {
    background-color: #f5f5f5;
    color: #999;
    cursor: default;
}

.attendance-description-help-button {
    align-self: flex-start;
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 30px;
    min-width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-primary-dark);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.attendance-description-help-button:focus-visible {
    outline: none;
}

.attendance-description-help-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: var(--bg-container);
    stroke: var(--color-primary);
    stroke-width: 1.5;
}

.attendance-description-help-button:focus-visible .attendance-description-help-ring {
    stroke-width: 3;
}

.attendance-description-help-mark {
    position: relative;
    z-index: 1;
}

/* ヘッダー補助情報 */
.header-column-debug {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    flex: 0 0 auto;
    min-width: 170px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.25;
}


.debug-admin-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: bold;
    padding-top: 2px;
}

.debug-admin-link:hover {
    text-decoration: underline;
}

.debug-link-grid {
    display: grid;
    grid-template-columns: max-content max-content;
    gap: 3px 14px;
    align-items: center;
}

.compact-data-table th,
.compact-data-table td {
    height: var(--compact-table-cell-h);
    padding: var(--dense-table-pad-y) var(--dense-table-pad-x);
    line-height: var(--dense-table-line-h);
    vertical-align: middle;
}

.dense-table th,
.dense-table td {
    padding: var(--dense-table-pad-y) var(--dense-table-pad-x);
    line-height: var(--dense-table-line-h);
}

.admin-header {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    padding: 8px 14px 7px;
    background: var(--bg-container);
    border-bottom: 1px solid var(--border-color);
}

.admin-main {
    padding: 8px 14px 22px;
}

.admin-back-link {
    color: var(--color-primary);
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}

.admin-back-link:hover {
    text-decoration: underline;
}

.panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 5px;
}

.save-status {
    color: var(--color-primary);
    font-weight: bold;
}

.save-status.success,
.save-status.is-success {
    color: var(--color-success-text);
}

.save-status.danger,
.save-status.is-danger {
    color: var(--color-danger-text);
}

.admin-action {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}

.admin-save { background: var(--color-action-save); border-color: var(--color-action-save); }
.admin-cancel { background: var(--color-action-discard); border-color: var(--color-action-discard); }

.admin-subtle {
    border: 1px solid var(--color-primary-border);
    background: #f7fafc;
    color: var(--color-primary);
}

.settings-table th,
.settings-table td {
    padding: 5px 7px;
    text-align: left;
}

.settings-table th {
    color: var(--color-primary);
}

.settings-table input[type="number"] {
    width: 72px;
    border: var(--table-border);
    padding: 2px 5px;
    text-align: right;
}

.table-tools {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 5px;
}

.ui-control,
.table-search,
.table-select,
.modal-select-field {
    box-sizing: border-box;
    min-height: 28px;
    border: var(--table-border);
    background: var(--bg-container);
    color: var(--text-main);
    font: inherit;
    padding: 3px 7px;
}

/* 閲覧時は値だけを見せ、編集時に入力枠と操作記号を戻す共通コントロール。 */
input.editable-table-control:not(:disabled),
select.editable-table-control:not(:disabled) {
    border: var(--table-border);
    background: var(--bg-container);
}

input.editable-table-control:disabled,
select.editable-table-control:disabled {
    border-color: transparent;
    background: transparent;
    color: inherit;
    cursor: default;
    opacity: 1;
    -webkit-text-fill-color: currentColor;
}

select.editable-table-control:disabled {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

input.editable-table-control[type="date"]:disabled::-webkit-calendar-picker-indicator,
input.editable-table-control[type="month"]:disabled::-webkit-calendar-picker-indicator {
    display: none;
}

input.editable-table-control[type="number"]:disabled {
    appearance: textfield;
    -moz-appearance: textfield;
}

input.editable-table-control[type="number"]:disabled::-webkit-inner-spin-button,
input.editable-table-control[type="number"]:disabled::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.readonly-check-indicator {
    display: inline-block;
    min-width: 18px;
    min-height: 18px;
    color: #1f6fca;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    vertical-align: middle;
}

.table-search {
    width: 160px;
    padding: 3px 7px;
}

.table-select {
    max-width: 170px;
}

.table-count {
    color: var(--text-muted);
    font-weight: bold;
    white-space: nowrap;
}

.muted-cell {
    color: var(--text-muted);
}

.sortable-heading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: inherit;
    background: transparent;
    border: 0;
    padding: 0 2px;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.sortable-heading.is-active {
    color: var(--color-primary);
}

.sortable-heading-label {
    display: inline-block;
}

.sort-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1em;
    font-size: var(--font-size-sm);
    line-height: 1;
    color: var(--text-muted);
}

.sortable-heading.is-active .sort-indicator {
    color: var(--color-primary);
}

.sortable-heading:not(.is-active) .sort-indicator:empty::after {
    content: "▼";
}

.identity-guide {
    max-width: 560px;
    border: var(--table-border);
    background: var(--color-primary-light);
    padding: 10px 12px;
    line-height: 1.7;
    color: var(--color-primary-dark);
}

.identity-empty-message {
    border: var(--table-border);
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    padding: 12px 14px;
}

.identity-symbol {
    color: var(--color-primary);
    font-size: var(--cell-symbol-font-size);
}

.identity-readonly-table .identity-current-value,
.identity-readonly-table .away-display.is-head-edited-value {
    position: relative;
    z-index: 3;
}

.identity-readonly-table .identity-current-value.is-head-edited-value {
    color: var(--color-danger-text) !important;
    font-size: var(--head-edited-value-font-size) !important;
    font-weight: 700;
}

.identity-readonly-table .identity-current-value.is-head-edited-value .vacation-cell-main {
    color: var(--color-danger-text) !important;
    font-size: var(--head-edited-value-font-size) !important;
    font-weight: 700;
}

.identity-readonly-table .identity-current-value.is-head-edited-value .vacation-cell-symbol {
    color: var(--color-danger-text) !important;
    font-weight: 700;
}

.identity-readonly-table .identity-current-value.is-head-edited-value .vacation-cell-prefix {
    color: var(--color-danger-text) !important;
    font-size: calc(var(--font-size-xs) * 1.06) !important;
    font-weight: 700;
}

.identity-readonly-table .head-office-edited-slot .head-original-value {
    font-size: var(--font-size-base) !important;
    font-weight: 400 !important;
    white-space: pre-line;
}

.identity-approve-status {
    color: var(--color-status-after-txt);
    font-weight: 700;
}

.head-summary-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.head-summary-header {
    display: block;
}

.head-summary-header-actions {
    margin-top: 10px;
}

.head-back-button {
    min-width: 92px;
}

.head-monthly-update-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    width: fit-content;
    max-width: 100%;
    padding: 14px;
    background: var(--bg-container);
    border: 1px solid var(--border-color);
}

.head-monthly-update-heading {
    color: var(--color-primary-dark);
    font-size: var(--font-size-md);
    font-weight: 700;
}

.head-monthly-update-controls {
    display: flex;
    align-items: center;
    gap: 6px;
}

.head-monthly-update-status {
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.head-monthly-update-button,
.head-monthly-revert-button {
    min-width: 94px;
}

.head-screen[hidden] {
    display: none !important;
}

.head-home-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    max-width: 980px;
}

.head-home-card-groups {
    grid-template-columns: 1fr;
    gap: 18px;
}

.head-home-card-group {
    padding: 14px;
    background: #f7fafc;
    border: 1px solid var(--border-color);
}

.head-home-card-group h2 {
    margin: 0 0 12px;
    color: var(--color-primary-dark);
    font-size: 17px;
}

.head-home-card-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
}

.head-home-card {
    display: grid;
    flex: 0 0 220px;
    width: 220px;
    grid-template-rows: auto auto 1fr;
    gap: 7px;
    min-height: 132px;
    padding: 14px;
    color: var(--text-main);
    text-align: left;
    background: var(--bg-container);
    border: 1px solid var(--border-color);
    cursor: pointer;
}

.head-home-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(44, 122, 123, 0.12);
}

.head-home-card span {
    color: var(--color-primary-dark);
    font-size: var(--font-size-md);
    font-weight: 700;
}

.head-home-card strong {
    color: var(--color-primary);
    font-size: 22px;
}

.head-home-card small {
    color: var(--text-muted);
    line-height: 1.45;
}

.head-clinic-confirm-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    margin-bottom: 12px;
}

.head-clinic-confirm-toolbar label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}

.head-clinic-confirm-toolbar select {
    min-width: 220px;
}

.head-clinic-confirm-actions {
    display: flex;
    gap: 6px;
}

.head-clinic-note-panel,
.head-office-clinic-note-panel {
    display: grid;
    grid-template-columns: auto minmax(280px, 760px);
    gap: 10px;
    align-items: start;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 12px;
    padding: 8px 10px;
    border: var(--table-border);
    background: #fffdf7;
}

.head-office-clinic-note-panel {
    margin-top: -4px;
}

.head-clinic-note-label {
    color: var(--color-primary);
    font-weight: bold;
    white-space: nowrap;
}

.head-clinic-note-text {
    color: var(--text-main);
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.head-clinic-note-panel.is-empty .head-clinic-note-text {
    color: var(--text-muted);
}

.head-office-clinic-note-input {
    box-sizing: border-box;
    width: min(760px, 100%);
    min-width: 280px;
    min-height: 72px;
    padding: 6px 8px;
    border: 1px solid #c8b989;
    background: #fff9df;
    color: var(--text-main);
    font: inherit;
    line-height: 1.5;
    resize: vertical;
}

.head-office-clinic-note-panel.is-edited {
    border-color: #d48b00;
    background: #fff4cc;
}

.head-office-clinic-note-input:disabled {
    border-color: var(--border-color);
    background: var(--bg-disabled);
    color: var(--text-muted);
}

#head-clinic-confirm-content.is-head-edit-locked select.cell-input,
#head-clinic-confirm-content.is-head-edit-locked select.lateness-select {
    background: var(--bg-disabled) !important;
    color: var(--text-muted) !important;
}

#head-clinic-confirm-content.is-head-edit-locked select.cell-input.is-variant-symbol {
    color: transparent !important;
}

#head-clinic-confirm-content.is-head-edit-locked [data-head-away-cell],
#head-clinic-confirm-content.is-head-edit-locked td.away-cell {
    cursor: default;
}

#head-clinic-confirm-content.is-head-edit-locked [data-head-away-cell]:hover {
    box-shadow: none;
}

.head-original-value {
    display: none;
}

.head-office-edited-cell .head-original-value,
.head-office-edited-slot .head-original-value,
.head-current-edit-cell .head-original-value,
.head-current-edit-slot .head-original-value,
td.input-cell.unsaved-cell .head-original-value {
    display: flex !important;
    position: absolute;
    inset: 0;
    z-index: 2;
    align-items: center;
    justify-content: center;
    color: var(--text-muted) !important;
    font-size: var(--cell-symbol-font-size) !important;
    font-weight: 700;
    opacity: 0.55;
    pointer-events: none;
}

.head-original-value .vacation-cell-symbol,
.head-original-value .vacation-cell-prefix,
.head-original-value .vacation-cell-main {
    color: var(--text-muted) !important;
    font-weight: 700;
}

.head-office-edited-cell select.cell-input,
.head-current-edit-cell select.cell-input {
    position: relative;
    z-index: 1;
    background-color: transparent !important;
}

.vacation-variant-display.is-head-edited-value {
    color: var(--color-danger-text) !important;
    font-size: var(--head-edited-value-font-size) !important;
    font-weight: 700;
}

.vacation-variant-display.is-head-edited-value .vacation-cell-main,
.head-office-edited-cell select.lateness-select,
td.unsaved-cell select.lateness-select {
    color: var(--color-danger-text) !important;
    font-size: var(--head-edited-value-font-size) !important;
    font-weight: 700;
}

.vacation-variant-display.is-head-edited-value .vacation-cell-symbol {
    color: var(--color-danger-text) !important;
    font-weight: 700;
}

.vacation-variant-display.is-head-edited-value .vacation-cell-prefix {
    color: var(--color-danger-text) !important;
    font-size: calc(var(--font-size-xs) * 1.06) !important;
    font-weight: 700;
}

.away-slot .head-original-value,
.away-slot .head-original-value .vacation-cell-symbol,
.away-slot .head-original-value .vacation-cell-prefix,
.away-slot .head-original-value .vacation-cell-main {
    font-size: var(--font-size-base) !important;
    font-weight: 400 !important;
}

.away-slot.is-original-empty .head-original-value {
    display: none !important;
}

.away-display.is-head-edited-value {
    color: var(--color-danger-text) !important;
    font-weight: 700 !important;
    z-index: 3;
}

.away-slot.has-value .away-display {
    font-weight: 400;
}

.away-slot.is-away-delete-edit::before,
.away-slot.is-away-delete-edit::after {
    content: "";
    position: absolute;
    left: 7px;
    right: 7px;
    top: 50%;
    z-index: 4;
    border-top: 2px solid var(--color-danger-text);
    pointer-events: none;
}

.away-slot.is-away-delete-edit::before {
    transform: translateY(-3px);
}

.away-slot.is-away-delete-edit::after {
    transform: translateY(3px);
}
.head-summary-header {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    border-bottom: 1px solid var(--border-color);
    padding: 8px 14px 7px 0;
    margin-bottom: 8px;
}

.head-summary-header h1 {
    margin: 0;
    color: var(--color-primary-dark);
    font-size: 20px;
}

.head-summary-subtitle {
    color: var(--text-muted);
    margin-top: 2px;
}

.head-summary-controls {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0 0 6px;
}

.head-summary-controls label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
}

.head-summary-controls select,
.head-summary-controls input[type="search"] {
    width: 130px;
}

.head-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 4px;
    max-width: 900px;
    margin-bottom: 8px;
}

.head-summary-card {
    border: var(--table-border);
    background: var(--bg-container);
    padding: 4px 7px;
}

.head-summary-card span {
    display: block;
    color: var(--text-muted);
}

.head-summary-card strong {
    display: block;
    color: var(--color-primary-dark);
    font-size: 16px;
    margin-top: 1px;
}

.head-summary-table-title {
    color: var(--color-primary);
    font-weight: 700;
    border-left: 4px solid var(--color-primary);
    padding-left: 8px;
    margin-bottom: 4px;
}

.table-wrapper.head-summary-table-wrapper {
    max-width: calc(100vw - 30px);
    margin-bottom: 8px;
}

.head-summary-table th,
.head-summary-table td {
    min-width: 30px;
    height: var(--compact-table-cell-h);
    padding: 0 3px;
}

.head-summary-sort-button {
    width: 100%;
}

.head-summary-table td:nth-child(1),
.head-summary-table td:nth-child(2),
.head-summary-table td:nth-child(3),
.head-summary-table td:nth-child(4),
.head-summary-table td:nth-child(5) {
    min-width: 70px;
}

.head-summary-table td:nth-child(2) {
    min-width: 104px;
}

.head-summary-table td span {
    display: block;
    color: var(--color-away-text);
    font-size: var(--font-size-xs);
    line-height: 1.1;
}

.head-summary-sticky {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #f7fafc !important;
    color: var(--color-primary-dark);
    font-weight: 700;
}

.head-summary-group-row td {
    color: var(--color-primary-dark);
    font-weight: 700;
    text-align: left;
    padding-left: 8px;
}

.head-summary-away {
    background: var(--color-away-bg);
    color: var(--color-away-text);
    font-weight: 700;
}

.head-summary-inactive {
    background: var(--bg-disabled);
    color: var(--color-status-during-txt);
}

.head-submission-actions {
    margin-bottom: 8px;
}

.head-submission-host {
    max-width: 900px;
}

.table-wrapper.head-submission-table-wrapper {
    width: fit-content;
    max-width: calc(100vw - 30px);
    max-height: none;
    overflow: visible;
    margin-bottom: 8px;
}

.head-submission-table {
    min-width: 680px;
}

.head-submission-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
}

.head-submission-table th:last-child,
.head-submission-table td:last-child,
.head-submission-status {
    text-align: center;
}

.head-submission-table td {
    text-align: left;
}

.head-submission-clinic-cell {
    min-width: 104px;
}

.head-submission-clinic-cell strong {
    color: var(--color-primary-dark);
}

.head-submission-code {
    display: inline-block;
    width: 34px;
    margin-right: 7px;
    color: var(--text-muted) !important;
    font-size: var(--font-size-sm);
    text-align: right;
}

.head-submission-center,
.head-submission-log {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.head-submission-status {
    font-weight: 700;
}

.head-submission-action-group {
    display: flex;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.head-submission-action-button {
    min-width: 70px;
    padding: 2px 6px;
    line-height: 1.2;
}

.head-submission-table tr.is-submitted .head-submission-status,
.head-submission-table tr.is-confirmed .head-submission-status,
.head-summary-approval.is-approved {
    color: var(--color-status-after-txt);
}

.head-submission-table tr.is-before .head-submission-status,
.head-summary-approval.is-unapproved {
    color: var(--color-status-before-txt);
}

.head-submission-empty,
.head-summary-approval {
    font-weight: 700;
}

.head-summary-approval span {
    color: var(--text-muted);
}

.legend-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: fit-content;
    margin-bottom: 15px;
}

@media (max-width: 760px) {
    :root {
        --detail-page-inline: 15px;
    }

    .head-home-card-grid {
        flex-direction: column;
    }

    .head-home-card {
        width: 100%;
        max-width: none;
        flex-basis: auto;
    }

    .head-clinic-confirm-toolbar,
    .head-summary-header-actions {
        flex-wrap: wrap;
    }

    .head-clinic-note-panel,
    .head-office-clinic-note-panel {
        grid-template-columns: 1fr;
    }

    .head-office-clinic-note-input {
        min-width: 0;
    }
}
body.is-staff-view .legend-row {
    margin-bottom: 8px;
}

/* 凡例 */
.legend-section {
    width: fit-content;
    background-color: var(--color-primary-light);
    border: 1px solid var(--color-primary-border);
    padding: 8px 12px 8px var(--pad-left);
}
.legend-grid {
    display: flex;
    flex-direction: row;
    white-space: nowrap;
    gap: 10px;
    align-items: flex-start;
}

.legend-action-stack {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
}

.bulk-edit-toggle.is-active {
    background: var(--highlight-active-bg);
    border-color: var(--highlight-active-border);
    color: var(--highlight-active-text);
}

.view-switch-container {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-height: 40px;
    padding: 8px 0;
    color: var(--color-primary);
    font-weight: bold;
    white-space: nowrap;
}

.view-switch-label {
    color: var(--text-muted);
    font-weight: bold;
}

.view-switch-button {
    border: 1px solid var(--color-primary-border);
    background: var(--bg-container);
    color: var(--color-primary);
}

.view-switch-button.is-active {
    background: var(--highlight-active-bg);
    border-color: var(--highlight-active-border);
    color: var(--highlight-active-text);
}

body.is-staff-view .section-title-away,
body.is-staff-view .away-layout {
    display: none;
}

.staff-copy-bar {
    display: none;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin-bottom: 12px;
    position: relative;
}

body.is-staff-view .staff-copy-bar {
    display: flex;
}

body.is-away-copying .header-box,
body.is-away-copying .legend-row,
body.is-away-copying .staff-copy-bar,
body.is-away-copying .main-table-wrapper,
body.is-away-copying .section-title-away > span,
body.is-away-copying #away-btn-update,
body.is-away-copying #away-btn-cancel-changes,
body.is-staff-copying .header-box,
body.is-staff-copying .legend-row,
body.is-staff-copying .section-title-away,
body.is-staff-copying .away-layout,
body.is-bulk-editing .header-box,
body.is-bulk-editing .view-switch-container,
body.is-bulk-editing .identity-edit-warning,
body.is-bulk-editing .staff-copy-bar,
body.is-bulk-editing .section-title-away,
body.is-bulk-editing .away-layout {
    opacity: var(--mode-locked-opacity);
    pointer-events: none;
    user-select: none;
}

body.is-away-copying .away-table-wrapper,
body.is-away-copying #away-copy-button,
body.is-staff-copying .main-table-wrapper,
body.is-staff-copying .staff-copy-bar,
body.is-staff-copying #staff-copy-button {
    opacity: 1;
    pointer-events: auto;
}

body.is-bulk-editing td.input-cell,
body.is-bulk-editing td.away-cell,
body.is-bulk-editing select.lateness-select,
body.is-bulk-editing .identity-confirm-cell {
    opacity: var(--mode-locked-opacity);
    pointer-events: none;
    user-select: none;
}

body.is-bulk-edit-ready td.input-cell.bulk-edit-target {
    opacity: 1;
    pointer-events: auto;
}

body.is-head-dual-symbol-editing .section-title-away,
body.is-head-dual-symbol-editing .away-layout,
body.is-head-dual-symbol-editing .view-switch-container {
    opacity: var(--mode-locked-opacity);
    pointer-events: none;
    user-select: none;
}

body.is-head-dual-symbol-editing td.input-cell {
    opacity: var(--mode-locked-opacity);
    pointer-events: none;
    user-select: none;
}

body.is-head-dual-symbol-editing td.away-cell,
body.is-head-dual-symbol-editing select.lateness-select,
body.is-head-dual-symbol-editing .identity-confirm-cell {
    opacity: var(--mode-locked-opacity);
    pointer-events: none;
    user-select: none;
}

body.is-head-dual-symbol-ready td.input-cell.dual-edit-target {
    opacity: 1;
    pointer-events: auto;
}

.head-dual-symbol-help {
    width: fit-content;
    max-width: 100%;
    margin: 6px 0 8px;
    padding: 6px 10px;
    border: 1px solid var(--color-primary-border);
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    font-weight: 700;
    line-height: 1.5;
}

.legend-option {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--text-main);
    background: transparent;
    border: 1px solid transparent;
    padding: 2px 4px;
    cursor: pointer;
    font: inherit;
    min-height: 22px;
    box-sizing: border-box;
}

.legend-option:disabled,
.legend-option.is-readonly {
    cursor: default;
    opacity: 1;
}

.legend-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.legend-option-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.legend-row-name {
    flex: 0 0 7.5em;
    color: var(--text-main);
    font-weight: 700;
    text-align: right;
}

.legend-option.is-selected {
    background-color: var(--highlight-selected-bg);
    border-color: var(--highlight-selected-border);
}

.legend-symbol {
    color: var(--color-primary);
    font-weight: 700;
    min-width: 1.8em;
    height: 1.2em;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.legend-label {
    color: var(--text-main);
}

.identity-edit-warning {
    display: none;
    background-color: var(--color-sun);
    border: 2px solid var(--color-sun-text);
    color: var(--color-sun-text);
    font-weight: bold;
    padding: 6px 10px;
    white-space: nowrap;
    box-sizing: border-box;
}

.identity-edit-warning::before {
    content: "⚠ ";
}

.identity-edit-warning.is-visible {
    display: block;
}

.staff-view-type-col,
.staff-view-type-cell {
    width: var(--staff-view-type-col-w);
    min-width: var(--staff-view-type-col-w);
    background-color: var(--bg-muted);
    color: var(--color-primary);
    font-weight: bold;
    text-align: center;
}

.staff-view-name-cell {
    vertical-align: middle;
}

.staff-view-away-row td {
    border-bottom: 2px solid var(--border-color);
}

.staff-view-away-label {
    color: var(--color-away-text);
}

.staff-view-summary-blank {
    background-color: #f7fafc;
}

.table-wrapper {
    border: var(--table-border);
    margin-bottom: 25px;
    width: fit-content;
}

.day-col {
    width: var(--cell-w);
    min-width: var(--cell-w);
    max-width: var(--cell-w);
    overflow: hidden;
}

.main-col-title { background-color: var(--bg-disabled); color: var(--color-primary); font-weight: bold; }
.sub-col-title { background-color: var(--bg-muted); padding: 4px 2px !important; }

/* スタッフ名固定列 */
.sticky-col {
    position: sticky;
    left: 0;
    background-color: var(--bg-muted);
    z-index: 20;
    min-width: var(--staff-col-w);
    text-align: left;
    padding-left: var(--pad-left);
    border-right: 2px solid var(--border-color);
}
td.sticky-col {
    background-color: var(--bg-container);
    font-weight: bold;
}
.staff-style {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-weight: normal;
    display: block;
}

.sat { background-color: var(--color-sat) !important; color: var(--color-sat-text); }
.sun { background-color: var(--color-sun) !important; color: var(--color-sun-text); font-weight: bold; }

td.sun-cell {
    background: repeating-linear-gradient(45deg, var(--color-sun-cell-bg), var(--color-sun-cell-bg) 5px, var(--color-sun-cell-stripe) 5px, var(--color-sun-cell-stripe) 10px) !important;
    color: var(--color-sun-cell-text);
    font-weight: bold;
}

td.input-cell {
    padding: 0;
    position: relative;
    width: var(--cell-w);
    min-width: var(--cell-w);
    max-width: var(--cell-w);
    overflow: hidden;
}
td.input-cell:focus-within {
    overflow: visible;
    z-index: 30;
}
td.input-cell.away-linked {
    background-color: #fffbeb !important;
}
td.input-cell.shift-combination-mismatch,
td.away-cell.shift-combination-mismatch {
    background-color: var(--color-shift-mismatch-bg) !important;
}
td.input-cell.shift-combination-mismatch select.cell-input,
td.away-cell.shift-combination-mismatch .away-slot {
    background-color: var(--color-shift-mismatch-bg) !important;
}

td.inactive-status-cell {
    background-color: var(--bg-disabled) !important;
    color: var(--color-status-during-txt);
    font-weight: bold;
    cursor: default;
}

td.inactive-status-cell span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--cell-h);
    writing-mode: vertical-rl;
    text-orientation: upright;
    letter-spacing: 0;
}

td.unsaved-cell {
    position: relative;
    z-index: 5;
}
td.unsaved-cell::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2.5px solid rgba(229, 62, 62, 0.75);
    box-sizing: border-box;
    pointer-events: none;
    z-index: 50;
}

.watermark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}

.base-select {
    border: none;
    background: transparent;
    outline: none;
    text-align: center;
    text-align-last: center;
}

select.cell-input,
select.lateness-select {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 100%;
    height: var(--cell-h);
    font-size: var(--cell-symbol-font-size);
    font-weight: normal;
    color: var(--color-primary);
    background-color: transparent;
    padding: 0 2px;
    box-sizing: border-box;
    overflow: hidden;
    line-height: var(--cell-h);
}
select.cell-input option {
    text-align: left;
}

select.cell-input.is-unentered {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    font-weight: bold;
}

select.cell-input.is-variant-symbol {
    color: transparent;
}

select.cell-input.is-variant-symbol option {
    color: var(--color-primary);
}

.vacation-variant-display {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 3;
    font-size: var(--cell-symbol-font-size);
}

.vacation-variant-display.is-visible {
    display: flex;
}

.vacation-cell-symbol {
    position: relative;
    display: inline-flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-weight: normal;
    line-height: 1;
}

.vacation-cell-prefix {
    position: absolute;
    top: 6px;
    left: 7px;
    font-size: var(--font-size-xs);
    font-weight: bold;
}

.vacation-cell-main {
    font-size: var(--cell-symbol-font-size);
    font-weight: normal;
    line-height: 1;
}

.vacation-cell-symbol.is-dual-symbol {
    flex-direction: column;
    gap: 1px;
}

.vacation-cell-symbol.is-dual-symbol .vacation-cell-main {
    font-size: calc(var(--cell-symbol-font-size) * 0.72);
    line-height: 1;
}

.unentered-placeholder {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    font-weight: bold;
    pointer-events: none;
    z-index: 1;
}

.unentered-placeholder.is-visible {
    display: flex;
}

td.lateness-cell {
    position: relative;
    padding: 0;
    background-color: transparent !important;
    min-width: var(--lateness-col-w);
}

.vac-count-cell,
.vac-summary-cell {
    background-color: #f7fafc !important;
    color: var(--text-main) !important;
    font-weight: bold !important;
}
.vac-count-cell { min-width: var(--vac-count-col-w); }
.vac-summary-cell { min-width: var(--vac-summary-col-w); }
.identity-confirm-cell {
    min-width: var(--identity-col-w);
}
.identity-confirm-cell.is-confirmed {
    color: var(--text-muted) !important;
}
.identity-confirm-cell.is-self-confirmable {
    background-color: #fff !important;
    color: var(--color-primary) !important;
    cursor: pointer;
}
.identity-confirm-cell.is-self-confirmable:hover {
    background-color: var(--color-primary-light) !important;
}

.attendance-access-message {
    margin: 8px 0;
    padding: 10px 12px;
    color: #7a1010;
    background: #ffe8e8;
    border: 1px solid #cc3333;
    font-weight: 700;
}

.edit-lock-message {
    width: fit-content;
    max-width: min(760px, 100%);
}

body.attendance-access-denied .header-column-note,
body.attendance-access-denied .header-column-debug,
body.attendance-access-denied .action-button-group,
body.attendance-access-denied .legend-row,
body.attendance-access-denied .staff-copy-bar,
body.attendance-access-denied .main-table-wrapper,
body.attendance-access-denied .section-title-away,
body.attendance-access-denied .away-layout {
    display: none;
}
.balance-summary-cell {
    min-width: var(--balance-summary-col-w);
    padding: 0 !important;
}
.balance-line {
    display: grid;
    grid-template-columns: var(--staff-view-type-col-w) 1fr;
    align-items: center;
    min-height: 22px;
    padding: 2px 6px;
    box-sizing: border-box;
    column-gap: 6px;
}
.balance-line + .balance-line {
    border-top: 1px solid var(--border-color);
}
.balance-line span {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    font-weight: bold;
    text-align: left;
}
.balance-line strong {
    color: var(--text-main);
    font-size: var(--font-size-base);
    text-align: right;
}
.balance-remaining.is-negative span,
.balance-remaining.is-negative strong {
    color: var(--color-sun-text);
}

.balance-summary-cell.is-unconfirmed strong {
    color: var(--text-muted);
}

/* 下段：自院以外勤務・半休情報 */
.section-title-away {
    width: fit-content;
    font-size: var(--font-size-md);
    font-weight: bold;
    color: #2c5282;
    margin-top: 30px;
    margin-bottom: 10px;
    padding-left: var(--pad-left);
    border-left: 4px solid var(--color-primary);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 10px;
}

.away-title-actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}

.away-copy-button {
    border: 1px solid var(--color-primary-border);
    background-color: var(--bg-container);
    color: var(--color-primary);
    min-width: 74px;
}

.away-copy-button.is-active {
    background-color: var(--highlight-active-bg);
    border-color: var(--highlight-active-border);
    color: var(--highlight-active-text);
}

.away-copy-status {
    color: var(--text-muted);
    font-size: var(--font-size-base);
    font-weight: bold;
    padding: 2px 0;
    white-space: nowrap;
}

.shift-combination-warning {
    color: var(--color-shift-mismatch-text);
    font-size: var(--font-size-base);
    font-weight: bold;
    white-space: nowrap;
}

.away-copy-status.is-error {
    color: var(--color-sun-text);
    position: absolute;
    left: 0;
    bottom: calc(100% + 4px);
    padding: 0;
}

.away-layout {
    display: flex;
    align-items: flex-start;
    width: fit-content;
    margin-bottom: 25px;
}

.away-table-wrapper {
    margin-bottom: 0;
}


#away-table tbody td:not(.sticky-col) {
    font-size: 0;
}

td.away-cell {
    padding: 0 !important;
    background-color: var(--bg-container);
    vertical-align: top;
    cursor: pointer;
    width: var(--cell-w);
    min-width: var(--cell-w);
    max-width: var(--cell-w);
    overflow: hidden;
}

td.away-cell.copy-source-candidate,
td.input-cell.staff-copy-source-candidate,
td.away-cell.staff-copy-source-candidate {
    position: relative;
    z-index: 20;
}

td.away-cell.copy-source-candidate::before,
td.input-cell.staff-copy-source-candidate::before,
td.away-cell.staff-copy-source-candidate::before {
    content: "";
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 80;
    background-color: var(--copy-highlight-bg);
    box-shadow: var(--copy-highlight-shadow);
    animation: away-copy-source-glow var(--copy-highlight-duration) ease-in-out infinite;
}

@keyframes away-copy-source-glow {
    0%, 100% {
        opacity: var(--copy-highlight-opacity-low);
    }
    50% {
        opacity: var(--copy-highlight-opacity-high);
    }
}

td.away-inactive-cell {
    padding: 0 !important;
    background-color: var(--bg-disabled) !important;
    width: var(--cell-w);
    min-width: var(--cell-w);
    max-width: var(--cell-w);
    cursor: default;
}

.away-slot {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(226, 232, 240, 0.35);
}
.away-slot:last-child {
    border-bottom: none;
}

.away-slot:nth-child(1),
.away-slot:nth-child(2) {
    height: var(--away-slot-main-h);
}
.away-slot:nth-child(3) {
    height: var(--away-slot-night-h);
}

.away-display {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.1;
    white-space: pre-wrap;
    pointer-events: none;
    color: #4a5568;
    z-index: 1;
    font-size: var(--font-size-base);
}

.away-slot.has-value {
    background-color: var(--color-away-bg) !important;
}
.away-slot.has-value .away-display {
    font-weight: 400;
    color: var(--color-away-text);
}

.away-slot.has-value.is-half-day-away {
    background-color: var(--bg-disabled) !important;
    cursor: pointer;
}
.away-slot.has-value.is-half-day-away .away-display {
    color: var(--text-muted);
}

.away-slot.is-blocked {
    background-color: var(--bg-disabled);
    cursor: default;
}

.shift-combination-mismatch,
.shift-combination-mismatch .away-slot,
.shift-combination-mismatch .away-slot.has-value,
.shift-combination-mismatch .away-slot.is-blocked,
.shift-combination-mismatch select.cell-input {
    background: var(--color-shift-mismatch-bg) !important;
}

.attendance-book-table tr.shift-combination-mismatch td {
    background: var(--color-shift-mismatch-bg) !important;
}

.away-slot.is-blocked .away-display {
    color: var(--text-muted);
}

.select-group.is-blocked label {
    color: var(--text-muted);
}

.select-group.is-blocked select {
    background-color: var(--bg-disabled);
    cursor: default;
}

/* 入力モーダル */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
}
.modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.attendance-description-modal {
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.32);
}

.attendance-description-modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 40px);
}

.attendance-description-modal-body {
    overflow-y: auto;
    padding: 4px 8px 4px 0;
    color: var(--text-main);
    line-height: 1.7;
    white-space: pre-wrap;
}

.attendance-description-modal-actions {
    flex: 0 0 auto;
    margin-top: 18px;
}

body.is-attendance-description-modal-open {
    overflow: hidden;
}

.modal-content {
    background: #fff;
    width: 90%;
    max-width: 460px;
    padding: 20px;
    box-sizing: border-box;
    border: 2px solid var(--border-color);
}

.modal-content-sm {
    max-width: 360px;
}

.modal-content-md {
    max-width: 620px;
}

.common-confirm-content.is-warning {
    border-color: var(--color-sun-text);
}

.common-confirm-content.is-warning .common-confirm-title {
    color: var(--color-sun-text);
}

.common-confirm-title {
    font-weight: bold;
}

.common-confirm-details {
    margin-top: -10px;
    margin-bottom: 20px;
}

.common-confirm-extra {
    margin: -6px 0 14px;
    line-height: 1.6;
}

.common-confirm-disabled-note {
    color: var(--color-sun-text);
    font-weight: bold;
}

.submission-issue-alert {
    font-weight: bold;
}

.submission-issue-name-line {
    color: var(--text-main);
    font-weight: normal;
}

.submission-issue-disabled-note {
    color: var(--text-main);
    font-weight: normal;
}

.modal-header-compact {
    margin-bottom: 12px;
}

.modal-body-text {
    line-height: 1.6;
    color: var(--text-main);
    margin-bottom: 20px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.modal-primary-btn {
    background-color: var(--color-primary);
    color: #fff;
    border: none;
}

.modal-target-list {
    margin-top: 10px;
    color: var(--color-sun-text);
    font-weight: bold;
}

#away-modal .modal-content {
    max-width: 600px;
    padding-bottom: 28px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.modal-title-area {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.modal-title-main {
    font-weight: bold;
    color: var(--text-muted);
}
.modal-title-sub {
    font-size: 16px;
    font-weight: bold;
    color: var(--color-primary-dark);
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: #aaa;
    cursor: pointer;
}

.modal-section {
    margin-bottom: 15px;
}
.section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.modal-subtitle {
    font-weight: bold;
    color: var(--text-main);
    border-left: 3px solid var(--color-primary);
    padding-left: 6px;
}
.modal-action-btn {
    background-color: var(--color-primary);
    color: #fff;
    border: none;
}

.modal-select-field {
    width: 100%;
    height: var(--cell-h);
    padding: 0 8px;
    background-color: #fafafa;
}

.modal-divider {
    border: 0;
    border-top: 1px dashed var(--border-color);
    margin: 20px 0;
}

.individual-grid {
    display: flex;
    gap: 10px;
}
.select-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.select-group label {
    font-weight: bold;
    color: var(--text-muted);
    text-align: center;
}

.away-modal-note {
    margin-top: 22px;
    padding-top: 14px;
    color: var(--text-main);
    font-size: 13px;
    line-height: 1.6;
}

.away-note-row {
    display: grid;
    grid-template-columns: 32px 1fr;
    column-gap: 10px;
    align-items: start;
}

.away-note-label {
    color: var(--color-primary-dark);
    font-weight: bold;}

.away-note-message {
    margin: 10px 0 0;
    color: var(--text-main);
    font-weight: bold;
}


.head-bulk-edit-panel {
    display: none;
    width: fit-content;
}

body.is-head-bulk-view .head-bulk-edit-panel {
    display: block;
}

body.is-head-bulk-view .head-clinic-confirm-toolbar,
body.is-head-bulk-view .head-clinic-note-panel,
body.is-head-bulk-view .head-office-clinic-note-panel,
body.is-head-bulk-view .head-clinic-confirm-legend,
body.is-head-bulk-view .main-table-wrapper,
body.is-head-bulk-view .section-title-away,
body.is-head-bulk-view .away-layout {
    display: none;
}

.head-bulk-edit-controls {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-direction: column;
    width: fit-content;
    margin: 0 0 8px;
}

.head-bulk-legend-section {
    padding: 8px 12px;
}

.head-bulk-drag-guide {
    margin: 0;
    color: var(--color-primary-dark);
    font-weight: 700;
}

.head-bulk-away-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    width: fit-content;
    padding: 6px 8px;
    border: var(--table-border);
    background: var(--bg-container);
}

.head-bulk-edit-controls label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    font-weight: 700;
}

.head-bulk-edit-controls label.is-blocked {
    opacity: var(--mode-locked-opacity);
}

.head-bulk-select {
    width: 110px;
}

.head-bulk-edit-status {
    color: var(--text-muted);
    font-weight: 700;
    min-width: 120px;
}

.head-bulk-table-wrapper {
    max-height: none;
    overflow: visible;
}

#head-bulk-edit-table [data-head-bulk-cell] {
    cursor: crosshair;
    touch-action: none;
    user-select: none;
}

body.is-head-bulk-range-selecting {
    cursor: crosshair;
    user-select: none;
}

#head-bulk-edit-table td.head-bulk-range-selected {
    background: var(--highlight-selected-bg) !important;
}

#head-bulk-edit-table:not(.has-head-bulk-away-rows) td.head-bulk-range-selected {
    box-shadow: inset 0 0 0 2px var(--highlight-selected-border);
}

#head-bulk-edit-table.has-head-bulk-away-rows .staff-view-main-row td.head-bulk-range-selected {
    box-shadow:
        inset 2px 0 0 var(--highlight-selected-border),
        inset -2px 0 0 var(--highlight-selected-border),
        inset 0 2px 0 var(--highlight-selected-border);
}

#head-bulk-edit-table.has-head-bulk-away-rows .staff-view-away-row td.head-bulk-range-selected {
    box-shadow:
        inset 2px 0 0 var(--highlight-selected-border),
        inset -2px 0 0 var(--highlight-selected-border),
        inset 0 -2px 0 var(--highlight-selected-border);
}

#head-bulk-edit-table td.head-bulk-change-outline,
body.is-staff-view #table-body td.head-staff-change-outline {
    position: relative;
    z-index: 60;
}

#head-bulk-edit-table td.head-bulk-change-outline::after,
body.is-staff-view #table-body td.head-staff-change-outline::after {
    content: "";
    display: block;
    position: absolute;
    inset: -1px;
    z-index: 100;
    box-sizing: border-box;
    border-color: var(--color-danger-text);
    border-style: solid;
    pointer-events: none;
}

#head-bulk-edit-table:not(.has-head-bulk-away-rows) td.head-bulk-change-outline::after {
    border-width: 3px;
}

#head-bulk-edit-table.has-head-bulk-away-rows .staff-view-main-row td.head-bulk-change-outline::after,
body.is-staff-view #table-body .staff-view-main-row td.head-staff-change-outline::after {
    border-width: 3px 3px 0;
}

#head-bulk-edit-table.has-head-bulk-away-rows .staff-view-away-row td.head-bulk-change-outline::after,
body.is-staff-view #table-body .staff-view-away-row td.head-staff-change-outline::after {
    border-width: 0 3px 3px;
}

#head-bulk-edit-table td.head-bulk-change-outline.head-bulk-range-selected::after {
    display: none;
}

.head-bulk-empty-cell {
    color: var(--muted-text);
    padding: 18px;
    text-align: center;
}

.head-attendance-book-controls {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 10px;
}

.head-attendance-book-controls input[type="search"] {
    width: 170px;
}

.attendance-book-action-controls {
    display: flex;
    flex: 0 0 100%;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 6px;
}

.attendance-book-previous-week-button.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.attendance-book-edit-status {
    color: var(--text-muted);
    font-weight: 700;
}

.attendance-book-table tr.attendance-book-previous-month-row td {
    background: #f8fafc;
    color: var(--text-muted);
}

.attendance-book-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 8px;
}

.attendance-book-summary span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    padding: 2px 8px;
    color: var(--text-main);
    background: #f7fafc;
    border: 1px solid var(--border-color);
    font-weight: 700;
    box-sizing: border-box;
}

.attendance-book-summary strong {
    color: var(--color-primary);
}

.aggregate-data-export-screen {
    max-width: 900px;
}

.aggregate-data-export-options {
    margin-bottom: 24px;
}

.aggregate-data-export-option {
    min-height: 82px;
}

.aggregate-data-export-option.is-selected {
    border: 2px solid var(--color-primary);
    background: var(--color-primary-light);
}

.aggregate-data-export-controls {
    margin-bottom: 18px;
}

.aggregate-data-export-action-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.aggregate-data-export-action-area .attendance-access-message {
    width: fit-content;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
}

.attendance-book-table-wrapper {
    max-width: calc(100vw - 40px);
    overflow-x: auto;
}

.attendance-book-table {
    width: max-content;
}

.attendance-book-table th,
.attendance-book-table td {
    min-width: 0;
    padding: 2px 4px;
    text-align: center;
    white-space: nowrap;
    box-sizing: border-box;
}

.attendance-book-table .attendance-book-total-row th,
.attendance-book-table .attendance-book-total-row td {
    border-top-width: 2px;
    font-weight: 700;
}

.attendance-book-table .attendance-book-total-row th {
    text-align: center;
}

.attendance-book-table th:nth-child(1),
.attendance-book-table td:nth-child(1) {
    width: 44px;
}

.attendance-book-table th:nth-child(2),
.attendance-book-table td:nth-child(2) {
    width: 30px;
}

.attendance-book-table th:nth-child(3),
.attendance-book-table td:nth-child(3),
.attendance-book-table th:nth-child(5),
.attendance-book-table td:nth-child(5),
.attendance-book-table th:nth-child(6),
.attendance-book-table td:nth-child(6),
.attendance-book-table th:nth-child(7),
.attendance-book-table td:nth-child(7) {
    width: 46px;
}

.attendance-book-table th:nth-child(4),
.attendance-book-table td:nth-child(4) {
    width: 58px;
}

.attendance-book-table th:nth-child(8),
.attendance-book-table th:nth-child(9),
.attendance-book-table th:nth-child(10),
.attendance-book-table td:nth-child(8),
.attendance-book-table td:nth-child(9),
.attendance-book-table td:nth-child(10) {
    min-width: 64px;
    text-align: left;
}

.attendance-book-table th:nth-child(11),
.attendance-book-table td:nth-child(11) {
    width: 40px;
}

.attendance-book-table th:nth-child(12),
.attendance-book-table td:nth-child(12) {
    width: 78px;
    max-width: 78px;
    text-align: left;
}

.attendance-book-table td:nth-child(12) .head-original-value {
    overflow: hidden;
    text-overflow: ellipsis;
}

.attendance-book-table th:nth-child(13),
.attendance-book-table td:nth-child(13) {
    width: 72px;
}

.attendance-book-table th:nth-child(14),
.attendance-book-table td:nth-child(14),
.attendance-book-table th:nth-child(15),
.attendance-book-table td:nth-child(15),
.attendance-book-table th:nth-child(16),
.attendance-book-table td:nth-child(16) {
    width: 58px;
}

.attendance-book-editable-cell {
    vertical-align: top;
    background: #fff3cf;
}

.attendance-book-edit-input {
    width: 100%;
    min-width: 42px;
    height: 22px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    padding: 1px 3px;
    text-align: center;
    box-sizing: border-box;
}

.attendance-book-edit-input.is-time-entry-active {
    color: var(--color-primary-dark);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.attendance-book-table td:nth-child(12) .attendance-book-edit-input {
    min-width: 68px;
}

.attendance-book-remarks-edit-button {
    display: block;
    width: 100%;
    max-width: 70px;
    min-height: 22px;
    padding: 1px 3px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-main);
    font: inherit;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
}

.attendance-book-current-value.is-head-edited-value,
.attendance-book-edit-input.is-head-edited-value,
.attendance-book-remarks-edit-button.is-head-edited-value {
    color: #c22626;
    font-weight: 700;
}

.attendance-book-edited-cell .head-original-value {
    display: block !important;
    position: static !important;
    inset: auto !important;
    z-index: auto !important;
    color: var(--text-muted) !important;
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1.1;
    opacity: 0.7;
    pointer-events: auto;
    text-align: inherit;
    white-space: nowrap;
}

.attendance-book-current-value {
    display: block;
    line-height: 1.15;
}

.attendance-book-remarks-details {
    max-width: 100%;
}

.attendance-book-remarks-details summary {
    cursor: pointer;
    list-style: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attendance-book-remarks-details summary::-webkit-details-marker {
    display: none;
}

.attendance-book-remarks-details[open] {
    white-space: normal;
    overflow-wrap: anywhere;
}

.attendance-book-remarks-details[open] summary {
    margin-bottom: 2px;
}

.attendance-book-remarks-text {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attendance-book-remarks-modal-content {
    max-width: 560px;
}

.attendance-book-remarks-modal-textarea {
    width: 100%;
    min-height: 160px;
    resize: vertical;
    border: 1px solid var(--border-color);
    padding: 8px;
    color: var(--text-main);
    background: #fff;
    font: inherit;
    box-sizing: border-box;
}