:root {
    color-scheme: light;
    --sidebar-width: 150px; /* 実際の幅は JS がハンドルのドラッグ結果で上書きする */
    --bg-start: #fbfaf4;
    --bg-mid: #edf3ee;
    --bg-end: #f7f2e8;
    --panel: #fffefa;
    --panel-soft: #f7f7f0;
    --ink: #182337;
    --muted: #66746f;
    --line: #d8dfd7;
    --line-strong: #c8d3cc;
    --primary: #164e63;
    --primary-dark: #0f3349;
    --primary-soft: #e7f0ef;
    --accent: #846234;
    --danger: #b42318;
    --success: #166534;
    --warning: #9a5b13;
    --shadow: rgba(24, 35, 55, 0.09);

    /* 提醒标识的 5 级含义色（docs/フロントエンドスタイル規則.md 十一）。页面里不要再写死颜色值
       ink＝字色 / bg＝徽章等小面积的底色 / line＝边框 / wash＝格子・提示条・面板等大面积的浅底色 */
    --tone-danger-ink: #b42318;
    --tone-danger-bg: #f9d9d4;
    --tone-danger-line: #eeb0a7;
    --tone-danger-wash: #fdf0ee;
    --tone-warning-ink: #9a5b13;
    --tone-warning-bg: #fcebc4;
    --tone-warning-line: #ecc46f;
    --tone-warning-wash: #fff8e8;
    --tone-info-ink: #0f3349;
    --tone-info-bg: #dfecea;
    --tone-info-line: #b9d3cf;
    --tone-info-wash: #f0f6f5;
    --tone-success-ink: #166534;
    --tone-success-bg: #dcefdc;
    --tone-success-line: #b9dbb9;
    --tone-success-wash: #eef7ee;
    --tone-neutral-ink: #5f6b68;
    --tone-neutral-bg: #e6eae8;
    --tone-neutral-line: #cfd7d3;
    --tone-neutral-wash: #f4f6f4;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    font-family: "Microsoft YaHei UI", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: 0;
    background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 48%, var(--bg-end) 100%);
}

a {
    color: inherit;
}

.page {
    min-height: 100vh;
    padding: 32px;
}

.login {
    display: grid;
    min-height: calc(100vh - 64px);
    place-items: center;
}

.login-page {
    display: grid;
    place-items: center;
}

.app-shell {
    min-height: 100vh;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 24px;
    background-color: rgba(255, 254, 250, 0.88);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='96' viewBox='0 0 760 96'%3E%3Cpath d='M-20 72 C80 28 156 28 260 72 S448 116 560 72 724 28 800 72' fill='none' stroke='%23164e63' stroke-opacity='.055' stroke-width='3'/%3E%3Cpath d='M-12 54 C94 20 164 20 270 54 S454 88 568 54 724 20 796 54' fill='none' stroke='%23164e63' stroke-opacity='.028' stroke-width='8'/%3E%3Ccircle cx='114' cy='48' r='26' fill='none' stroke='%23846234' stroke-opacity='.03' stroke-width='10'/%3E%3Ccircle cx='432' cy='50' r='22' fill='none' stroke='%23846234' stroke-opacity='.028' stroke-width='9'/%3E%3Cpath d='M20 18 H740' stroke='%23164e63' stroke-opacity='.02' stroke-width='1' stroke-dasharray='6 12'/%3E%3C/svg%3E"),
        linear-gradient(90deg, rgba(22, 78, 99, 0.024), transparent 32%, rgba(132, 98, 52, 0.022));
    background-position: center;
    background-repeat: repeat-x, no-repeat;
    background-size: 760px 96px, cover;
    border-bottom: 1px solid rgba(216, 223, 215, 0.92);
    backdrop-filter: blur(18px);
    box-shadow: 0 10px 28px rgba(24, 35, 55, 0.05);
}

.app-title {
    color: var(--primary-dark);
    font-size: 20px;
    font-weight: 800;
    text-decoration: none;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
}

.header-actions form {
    margin: 0;
}

.user-menu {
    position: relative;
}

.user-menu-trigger {
    min-height: 30px;
    padding: 4px 12px;
    color: var(--muted);
    background: transparent;
    border: 0;
    font-weight: 700;
}

.user-menu-trigger:hover,
.user-menu:focus-within .user-menu-trigger {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.user-menu-panel {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 40;
    display: none;
    min-width: 172px;
    padding: 8px;
    background: rgba(255, 254, 250, 0.98);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 14px 36px var(--shadow);
}

.user-menu:hover .user-menu-panel,
.user-menu:focus-within .user-menu-panel {
    display: grid;
    gap: 6px;
}

.user-menu-panel a,
.user-menu-panel button {
    display: block;
    width: 100%;
    min-height: 36px;
    padding: 8px 10px;
    color: var(--primary-dark);
    background: transparent;
    border: 0;
    border-radius: 6px;
    text-align: left;
    text-decoration: none;
    font: inherit;
    font-weight: 700;
}

.user-menu-panel a:hover,
.user-menu-panel button:hover {
    background: var(--primary-soft);
}

.app-body {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: calc(100vh - 48px);
}

.app-shell.sidebar-resizing {
    cursor: col-resize;
    user-select: none;
}

.app-sidebar {
    position: sticky;
    top: 48px;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100vh - 48px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px 8px 12px 10px;
    background-color: rgba(255, 254, 250, 0.82);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='220' viewBox='0 0 160 220'%3E%3Cpath d='M28 32 H132 M42 52 H118 M54 72 H106' stroke='%23846234' stroke-opacity='.052' stroke-width='2'/%3E%3Cpath d='M50 32 V116 M80 32 V116 M110 32 V116' stroke='%23164e63' stroke-opacity='.038' stroke-width='1.5'/%3E%3Cpath d='M34 142 C58 118 102 118 126 142' fill='none' stroke='%23164e63' stroke-opacity='.042' stroke-width='3'/%3E%3Cpath d='M44 150 H116 M60 162 H100' stroke='%23846234' stroke-opacity='.046' stroke-width='2'/%3E%3Ccircle cx='80' cy='128' r='3' fill='%23846234' fill-opacity='.055'/%3E%3C/svg%3E"),
        repeating-linear-gradient(90deg, rgba(132, 98, 52, 0.016) 0 1px, transparent 1px 18px);
    background-position: center top 28px, left top;
    background-repeat: repeat-y, repeat;
    background-size: 160px 220px, 36px 36px;
    border-right: 1px solid rgba(216, 223, 215, 0.92);
    backdrop-filter: blur(18px);
}

.side-menu {
    display: grid;
    gap: 3px;
}

/* メニュー名は常に1行。幅をはみ出す分は切る（幅はユーザーがハンドルで決める） */
.side-menu a {
    display: block;
    min-height: 34px;
    padding: 7px 10px;
    color: var(--muted);
    border-radius: 6px;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    transition: background 140ms ease, color 140ms ease;
}

.side-menu a.active,
.side-menu a:hover {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.menu-label {
    white-space: nowrap;
}

/* スマートフォンで左メニューを開け閉めするための部品。パソコンでは出さない（出す指定は 760px 以下の中） */
.menu-toggle,
.sidebar-account,
.sidebar-backdrop {
    display: none;
}

/* 幅調整ハンドル：サイドバー右端の細い帯 */
.sidebar-resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    touch-action: none;
    z-index: 3;
}

.sidebar-resizer:hover,
.sidebar-resizing .sidebar-resizer {
    background: rgba(22, 78, 99, 0.18);
}

/* 作業エリアをサイドバーの一段上に置く（左辺に薄い影） */
.content-area {
    position: relative;
    z-index: 2;
    min-width: 0;
    box-shadow: -6px 0 14px rgba(24, 35, 55, 0.06);
    padding: 18px 30px 30px;
    background-color: rgba(247, 250, 246, 0.72);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1680' height='920' viewBox='0 0 1680 920'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1' y1='0' y2='1'%3E%3Cstop stop-color='%23f8faf2'/%3E%3Cstop offset='.52' stop-color='%23edf5ef'/%3E%3Cstop offset='1' stop-color='%23f7f1e6'/%3E%3C/linearGradient%3E%3Cfilter id='soft'%3E%3CfeGaussianBlur stdDeviation='1.2'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='1680' height='920' fill='url(%23g)'/%3E%3Cpath d='M-40 710 C180 615 330 630 490 705 C690 800 840 708 980 635 C1150 545 1345 550 1720 690' fill='none' stroke='%23164e63' stroke-opacity='.048' stroke-width='6'/%3E%3Cpath d='M-60 744 C145 675 310 682 476 742 C690 820 848 750 1000 682 C1215 584 1420 610 1740 748' fill='none' stroke='%23164e63' stroke-opacity='.024' stroke-width='18' filter='url(%23soft)'/%3E%3Cpath d='M1090 108 C1148 46 1240 46 1298 108 C1240 80 1148 80 1090 108Z' fill='%23164e63' fill-opacity='.022'/%3E%3Cpath d='M1210 122 C1266 68 1350 68 1406 122 C1348 98 1268 98 1210 122Z' fill='%23846234' fill-opacity='.020'/%3E%3Cpath d='M1180 156 C1290 210 1362 316 1320 430 C1278 548 1142 598 1038 540 C932 482 900 348 970 252 C1018 186 1100 156 1180 156Z' fill='none' stroke='%23164e63' stroke-opacity='.026' stroke-width='18'/%3E%3Cpath d='M1182 244 C1252 290 1240 406 1154 424 C1086 438 1030 382 1050 320 C1068 266 1124 248 1182 244Z' fill='none' stroke='%23164e63' stroke-opacity='.038' stroke-width='7'/%3E%3Cpath d='M90 212 C230 132 370 132 510 212' fill='none' stroke='%23846234' stroke-opacity='.036' stroke-width='5'/%3E%3Cpath d='M148 228 H452 M188 252 H412 M220 228 V328 M270 228 V328 M320 228 V328 M370 228 V328' stroke='%23164e63' stroke-opacity='.024' stroke-width='3'/%3E%3Ccircle cx='300' cy='214' r='6' fill='%23846234' fill-opacity='.05'/%3E%3Cpath d='M190 512 C255 468 342 468 408 512 C334 492 264 492 190 512Z' fill='%23164e63' fill-opacity='.018'/%3E%3Cpath d='M252 524 L328 524 M290 524 L290 650' stroke='%23846234' stroke-opacity='.026' stroke-width='5'/%3E%3Cpath d='M620 160 C714 110 820 112 908 160' fill='none' stroke='%23164e63' stroke-opacity='.024' stroke-width='5'/%3E%3Cpath d='M666 178 H864 M704 196 H826 M742 178 V276 M786 178 V276' stroke='%23846234' stroke-opacity='.022' stroke-width='3'/%3E%3Cpath d='M1540 130 C1518 190 1462 222 1404 200 C1460 194 1500 172 1540 130Z' fill='%23164e63' fill-opacity='.022'/%3E%3Cpath d='M1440 344 C1500 312 1582 322 1634 370 C1556 344 1498 342 1440 344Z' fill='%23846234' fill-opacity='.018'/%3E%3C/svg%3E"),
        linear-gradient(135deg, rgba(251, 250, 244, 0.88), rgba(237, 243, 238, 0.78));
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.page-header > div {
    display: grid;
    gap: 0;
}

.page-header > .button {
    flex-shrink: 0;
    white-space: nowrap;
}

.page-header p {
    color: var(--muted);
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
}

.panel {
    width: 100%;
    padding: 22px;
    background: rgba(255, 254, 250, 0.92);
    border: 1px solid rgba(216, 223, 215, 0.96);
    border-radius: 8px;
    box-shadow: 0 14px 36px var(--shadow);
}

.login .panel,
.login-page .panel {
    width: min(100%, 420px);
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.metric-card {
    display: block;
    min-height: 96px;
    padding: 18px;
    color: var(--ink);
    background: rgba(255, 254, 250, 0.92);
    border: 1px solid rgba(216, 223, 215, 0.96);
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 12px 30px var(--shadow);
}

.metric-card span {
    display: block;
    margin-bottom: 10px;
    color: var(--muted);
    font-weight: 700;
}

.metric-card strong {
    color: var(--primary-dark);
    font-size: 32px;
    line-height: 1;
}

.muted-card {
    background: rgba(247, 247, 240, 0.9);
}

.work-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 16px;
}

.status-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.status-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    color: var(--muted);
    border-bottom: 3px solid transparent;
    text-decoration: none;
    transform: translateY(1px);
}

.status-tabs a:hover {
    color: var(--primary-dark);
}

.status-tabs a.active {
    color: var(--primary-dark);
    border-bottom-color: var(--primary);
}

.status-tabs span {
    min-width: 24px;
    padding: 2px 7px;
    color: var(--primary-dark);
    background: var(--primary-soft);
    border-radius: 999px;
    text-align: center;
}

.list-panel {
    padding: 0;
    overflow: hidden;
}

.schedule-month-form {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.schedule-month-form input {
    width: 180px;
    height: 46px;
    margin: 0;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 800;
}

.schedule-calendar-panel {
    padding: 10px;
}

.schedule-calendar-panel .schedule-review-summary {
    padding: 0 4px 10px;
    border-bottom: 1px solid rgba(216, 223, 215, 0.9);
    margin-bottom: 12px;
}

.schedule-review-summary .schedule-state-text {
    color: var(--danger);
    font-weight: 600;
}

.schedule-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(78px, 1fr));
    gap: 6px;
}

/* 希望入力「この週の入力をほかの週にも当てはめる」（週の終わりに横いっぱい・2026-10-24） */
.schedule-week-copy {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 6px;
}

.schedule-week-copy button {
    min-height: 32px;
    padding: 4px 12px;
    font-size: 13px;
}

.schedule-week-copy-message {
    color: var(--muted);
    font-size: 13px;
}

.schedule-week-copy-message[hidden],
.schedule-week-copy button[hidden] {
    display: none;
}

.schedule-weekday {
    min-height: 24px;
    color: var(--muted);
    text-align: center;
    font-size: 13px;
    font-weight: 600;
}

.schedule-day {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(216, 223, 215, 0.9);
    border-radius: 8px;
}

.schedule-day.locked {
    background: #f8fafc;
    border-color: #94a3b8;
    box-shadow: inset 4px 0 0 #64748b;
}

.empty-day {
    visibility: hidden;
}

.schedule-day-head {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

.schedule-day-head strong {
    color: #52615d;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
}

/* 希望入力のカレンダー（2026-10-13 見やすく）：日曜・祝日は赤、土曜は青。曜日はスマホの時だけマスに出す */
.schedule-weekday.is-sunday,
.schedule-day.is-sunday .schedule-day-head strong,
.schedule-day.is-sunday .schedule-day-weekday {
    color: var(--tone-danger-ink);
}
.schedule-weekday.is-saturday,
.schedule-day.is-saturday .schedule-day-head strong,
.schedule-day.is-saturday .schedule-day-weekday {
    color: #3b5796;
}
.schedule-day-month {
    position: absolute;
    top: 2px;
    left: 8px;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    color: var(--muted);
}
.schedule-day-weekday {
    display: none;
    margin-left: 3px;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
}
.schedule-day {
    position: relative;
}
.schedule-holiday-name {
    position: absolute;
    left: 8px;
    bottom: 1px;
    max-width: calc(100% - 12px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 9px;
    line-height: 1.1;
    color: var(--tone-danger-ink);
}
/* 未選択（「－」）は薄く＝入れた日だけが目に入るように */
.schedule-day.status-empty {
    background: rgba(255, 255, 255, 0.55);
}
.schedule-day select.status-empty {
    color: #a3adaa;
}
/* 固定休の日（週休・指休）＝出勤にしたい時だけ選ぶ日。休みの色で、選ぶ欄は控えめに */
.schedule-day.closed-day.status-rest select {
    border-style: dashed;
}

.schedule-day select {
    width: 100%;
    height: 30px;
    color: #52615d;
    background: #ffffff;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
}

.locked-shift-value {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}

.schedule-status,
.schedule-select {
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.status-empty {
    color: #6b7875;
    background: #ffffff;
    border-color: #cbd5d1;
}

.status-rest {
    color: #9a4a39;
    background: #fff1ed;
    border-color: #efc2b8;
}

.status-paid {
    color: #8a5b16;
    background: #fff5d6;
    border-color: #ead08b;
}

.status-night {
    color: #3b5796;
    background: #e6eefc;
    border-color: #b7c8ef;
}

.status-wish {
    color: #9b5b2a;
    background: #fff1dc;
    border-color: #ecc18e;
}

.status-work {
    color: #3c6c78;
    background: #eaf3fb;
    border-color: #bad4e8;
}

.schedule-submit-bar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

.schedule-review-panel {
    padding: 14px;
}

.schedule-review-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    color: var(--muted);
}

.schedule-review-summary strong {
    color: var(--primary-dark);
}

.schedule-review-actions {
    display: flex;
    justify-content: flex-end;
    margin: -2px 0 12px;
}

.schedule-review-scroll {
    overflow: auto;
    max-width: 100%;
    border: 1px solid rgba(216, 223, 215, 0.9);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
}

.schedule-review-table {
    min-width: 1180px;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

.schedule-review-table th,
.schedule-review-table td {
    min-width: 58px;
    height: 42px;
    padding: 6px 8px;
    border-right: 1px solid rgba(216, 223, 215, 0.9);
    border-bottom: 1px solid rgba(216, 223, 215, 0.9);
    text-align: center;
    white-space: nowrap;
}

.schedule-review-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    color: var(--primary-dark);
    background: #edf4f1;
}

.schedule-review-table thead small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    font-size: 11px;
}

.schedule-review-table .sticky-col {
    position: sticky;
    z-index: 3;
    background: #f8faf7;
}

.schedule-review-table thead .sticky-col {
    z-index: 4;
}

.schedule-review-table .name-col {
    left: 0;
    min-width: 130px;
    text-align: left;
}

.schedule-review-table .status-col {
    left: 130px;
    min-width: 96px;
}

.schedule-review-table .sunday-col {
    background-image: linear-gradient(rgba(255, 241, 237, 0.6), rgba(255, 241, 237, 0.6));
}

.schedule-final-panel {
    margin-top: 16px;
}

.final-shift-select {
    width: 100%;
    min-width: 54px;
    height: 30px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

.schedule-final-table td {
    padding: 5px;
}

.schedule-final-panel .schedule-submit-bar button {
    color: var(--primary-dark);
    background: #eef6f4;
    border: 1px solid #c8dcda;
    box-shadow: none;
}

.schedule-final-panel .schedule-submit-bar button:hover {
    background: #e2efed;
}

.schedule-final-panel .schedule-submit-bar button:last-child {
    color: #164e63;
    background: #e5f0f3;
    border-color: #b8d4db;
}

.schedule-final-panel .schedule-submit-bar button:last-child:hover {
    background: #d8e9ee;
}

.approval-list {
    display: grid;
}

.approval-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(216, 223, 215, 0.8);
}

.approval-row:last-child {
    border-bottom: 0;
}

.approval-row:hover {
    background: rgba(231, 240, 239, 0.48);
}

.approval-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.approval-main p,
.approval-meta span {
    color: var(--muted);
}

.approval-meta {
    display: grid;
    align-content: center;
    justify-items: end;
    gap: 6px;
}

.action-open {
    min-width: 72px;
    min-height: 36px;
    padding: 8px 12px;
    color: #fff;
    background: var(--primary);
    border-radius: 8px;
    text-align: center;
    font-weight: 700;
}

.action-open:hover {
    background: var(--primary-dark);
}

.modal-open {
    overflow: hidden;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    place-items: center;
    padding: 24px;
    background: rgba(24, 35, 55, 0.32);
    backdrop-filter: blur(2px);
}

.confirm-modal {
    z-index: 120;
    background: rgba(24, 35, 55, 0.42);
}

.modal-backdrop.is-open {
    display: grid;
}

.action-dialog {
    width: min(720px, calc(100vw - 40px));
    max-height: none;
    overflow: visible;
    padding: 18px;
    color: var(--ink);
    background: rgba(255, 254, 250, 0.98);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(24, 35, 55, 0.22);
}

.action-form {
    display: grid;
    gap: 10px;
    margin: 0;
}

.action-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.action-dialog-header strong {
    color: var(--primary-dark);
}

.operation-guidance {
    display: grid;
    gap: 8px;
    padding: 12px;
    background: var(--primary-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.operation-guidance span,
.memo-field {
    color: var(--primary-dark);
    font-weight: 700;
}

.operation-guidance p {
    margin: 0;
    line-height: 1.55;
}

.operation-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.operation-links a {
    padding: 7px 10px;
    color: var(--primary-dark);
    background: rgba(255, 254, 250, 0.8);
    border: 1px solid var(--line);
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
}

.operation-links a:hover {
    background: #ffffff;
}

.memo-field {
    display: grid;
    gap: 8px;
    margin: 0;
}

textarea {
    display: block;
    width: 100%;
    min-height: 96px;
    padding: 10px 12px;
    color: var(--ink);
    background: #ffffff;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    font: inherit;
    resize: vertical;
}

textarea::placeholder {
    color: #9aa39f;
}

textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(22, 78, 99, 0.14);
}

.action-dialog-close {
    width: 32px;
    min-height: 32px;
    padding: 0;
    color: var(--primary-dark);
    background: transparent;
    border: 1px solid var(--line);
}

.action-dialog-close:hover {
    background: var(--primary-soft);
}

.action-choice {
    width: 100%;
    min-height: 40px;
    color: var(--primary-dark);
    background: var(--primary-soft);
    text-align: left;
}

.action-choice:hover {
    background: #dbe9e7;
}

.action-choice.danger {
    color: var(--danger);
    background: #fff0ed;
}

.danger-button {
    color: #ffffff;
    background: var(--danger);
}

.danger-button:hover {
    background: #8f1d14;
}

.confirm-dialog {
    display: grid;
    gap: 14px;
    width: min(420px, calc(100vw - 40px));
    padding: 20px;
    color: var(--ink);
    background: rgba(255, 254, 250, 0.99);
    border: 1px solid #ffd3cc;
    border-radius: 8px;
    box-shadow: 0 24px 70px rgba(24, 35, 55, 0.24);
}

.confirm-dialog strong {
    color: var(--danger);
}

.confirm-dialog p {
    margin: 0;
}

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

/* window.appConfirm（app.js）の確認。消す・取り消せない操作＝is-danger（赤）、それ以外は落ち着いた色 */
.app-confirm .confirm-dialog:not(.is-danger) {
    border-color: var(--line);
}

.app-confirm .confirm-dialog:not(.is-danger) strong {
    color: var(--ink);
}

.app-confirm .confirm-dialog p {
    line-height: 1.7;
    white-space: pre-line;
}

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

.step-line span {
    padding: 5px 10px;
    color: var(--muted);
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13px;
}

.step-line .done {
    color: var(--success);
    background: #e8f3e8;
}

.step-line .current {
    color: #ffffff;
    background: var(--primary);
    border-color: var(--primary-dark);
    box-shadow: 0 4px 12px rgba(22, 78, 99, 0.22);
    font-weight: 800;
}

.status-badge {
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

/* 旧クラス名は残し、色は十一節の含義色を参照する */
.status-badge.todo {
    color: var(--tone-warning-ink);
    background: var(--tone-warning-bg);
    border-color: var(--tone-warning-line);
}

.status-badge.processing {
    color: var(--tone-info-ink);
    background: var(--tone-info-bg);
    border-color: var(--tone-info-line);
}

.status-badge.completed {
    color: var(--tone-success-ink);
    background: var(--tone-success-bg);
    border-color: var(--tone-success-line);
}

h1,
h2,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 0;
    color: var(--primary-dark);
    font-size: 28px;
    line-height: 1.2;
}

h2 {
    color: var(--ink);
}

p {
    color: var(--muted);
}

label {
    display: block;
    margin: 16px 0;
    color: var(--muted);
    font-weight: 700;
}

input {
    display: block;
    width: 100%;
    height: 42px;
    margin-top: 8px;
    padding: 0 12px;
    color: var(--ink);
    background: #ffffff;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    font: inherit;
}

input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(22, 78, 99, 0.14);
}

button,
.button {
    display: inline-block;
    min-height: 40px;
    padding: 10px 14px;
    color: #fff;
    background: var(--primary);
    border: 0;
    border-radius: 8px;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

button:hover,
.button:hover {
    background: var(--primary-dark);
}

button:disabled,
.button.disabled {
    cursor: not-allowed;
    color: #6b7875;
    background: #e6efed;
    box-shadow: none;
    opacity: 0.78;
}

.secondary {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.secondary:hover {
    background: #dbe9e7;
}

/* 提示条（一次性的操作結果）。.error / .success は .notice-danger / .notice-success の旧名 */
.notice,
.error,
.success {
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 8px;
}

.notice-danger,
.error {
    color: var(--tone-danger-ink);
    background: var(--tone-danger-wash);
    border-color: var(--tone-danger-line);
}

.notice-success,
.success {
    color: var(--tone-success-ink);
    background: var(--tone-success-wash);
    border-color: var(--tone-success-line);
}

.notice-warning {
    color: var(--tone-warning-ink);
    background: var(--tone-warning-wash);
    border-color: var(--tone-warning-line);
}

.notice-info {
    color: var(--tone-info-ink);
    background: var(--tone-info-wash);
    border-color: var(--tone-info-line);
}

/* 徽章（単一データの現在の状態。6 字以内） */
.badge {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.badge-danger {
    color: var(--tone-danger-ink);
    background: var(--tone-danger-bg);
    border-color: var(--tone-danger-line);
}

.badge-warning {
    color: var(--tone-warning-ink);
    background: var(--tone-warning-bg);
    border-color: var(--tone-warning-line);
}

.badge-info {
    color: var(--tone-info-ink);
    background: var(--tone-info-bg);
    border-color: var(--tone-info-line);
}

.badge-success {
    color: var(--tone-success-ink);
    background: var(--tone-success-bg);
    border-color: var(--tone-success-line);
}

.badge-neutral {
    color: var(--tone-neutral-ink);
    background: var(--tone-neutral-bg);
    border-color: var(--tone-neutral-line);
}

/* 左線パネル（区画内で継続して有効な注意事項） */
.note-panel {
    padding: 12px 16px;
    border-left: 3px solid transparent;
    border-radius: 0 8px 8px 0;
}

.note-danger {
    border-left-color: var(--tone-danger-line);
    background: var(--tone-danger-wash);
}

.note-warning {
    border-left-color: var(--tone-warning-line);
    background: var(--tone-warning-wash);
}

.note-info {
    border-left-color: var(--tone-info-line);
    background: var(--tone-info-wash);
}

.empty {
    color: var(--muted);
}

/* 一覧パネルは padding:0 で行を端まで出すため、空のときの文言だけ余白と中央寄せを与える */
.list-panel .empty {
    margin: 0;
    padding: 28px 22px;
    text-align: center;
}

/* 一覧パネルの中に見出し・状態文を直接置く場合も、枠線に密着させず .panel と同じ横余白（22px）を取る（docs/フロントエンドスタイル規則.md 十） */
.list-panel > h2 {
    margin: 16px 22px 10px;
    font-size: 18px;
}

.list-panel > .duty-state {
    margin: 0 22px 12px;
}

.upload-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.upload-hint {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 13px;
}

.file-picker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.file-picker input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
}

.file-picker-button {
    display: inline-block;
    min-height: 40px;
    padding: 10px 14px;
    color: var(--primary-dark);
    background: var(--primary-soft);
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

.file-picker:hover .file-picker-button,
.file-picker input[type="file"]:focus-visible + .file-picker-button {
    background: #d7e7e5;
}

.file-picker-name {
    overflow: hidden;
    max-width: 320px;
    color: var(--muted);
    font-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.file-actions {
    gap: 8px;
}

.file-actions .button,
.file-actions button {
    min-width: 116px;
    min-height: 36px;
    padding: 8px 12px;
    font-size: 14px;
    text-align: center;
}

.file-view-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.file-preview {
    overflow: auto;
    max-height: 70vh;
    margin: 0;
    padding: 14px 16px;
    color: #3f4d49;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-family: "Consolas", "Menlo", "Osaka-Mono", monospace;
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 760px) {
    .app-shell {
        --sidebar-width: 56px !important;
    }

    .sidebar-resizer {
        display: none;
    }

    .app-header,
    .page-header,
    .header-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .app-header {
        height: auto;
        padding: 14px 18px;
    }

    .app-body {
        min-height: auto;
    }

    .app-sidebar {
        top: 0;
        height: 100%;
    }

    .content-area {
        padding: 20px;
    }

    .dashboard-grid,
    .work-grid,
    .approval-row {
        grid-template-columns: 1fr;
    }

    .status-tabs {
        overflow-x: auto;
    }

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

    .schedule-weekday,
    .empty-day {
        display: none;
    }

    /* スマホ：曜日の見出しが消えるので、日付の横に曜日を出す（2026-10-13） */
    .schedule-day-weekday {
        display: inline;
    }

    .approval-meta {
        justify-items: start;
    }
}

/* ==== スマートフォンの左メニューの開け閉め（2026-10-24）====
   html.menu-js が付いている時だけ（JavaScript が動かない時は今までどおり左に細く出る）。
   開く＝html.menu-open。パソコン（761px 以上）の見え方は変えない。 */
@media (max-width: 760px) {
    html.menu-js .app-header {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        height: 52px;
        min-height: 52px;
        padding: 0 12px;
    }

    html.menu-js .menu-toggle {
        display: inline-flex;
        flex: none;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        padding: 0 12px;
        color: var(--primary-dark);
        background: var(--primary-soft);
        border: 1px solid var(--line-strong);
        font-size: 14px;
        line-height: 1;
        white-space: nowrap;
    }

    html.menu-js .menu-toggle:hover,
    html.menu-js.menu-open .menu-toggle {
        color: var(--primary-dark);
        background: var(--tone-info-bg);
    }

    /* 三本線 */
    html.menu-js .menu-toggle-icon {
        width: 18px;
        height: 14px;
        background:
            linear-gradient(currentColor, currentColor) top / 100% 2px no-repeat,
            linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
            linear-gradient(currentColor, currentColor) bottom / 100% 2px no-repeat;
    }

    html.menu-js .app-title {
        flex: none;
        font-size: 14px;
        white-space: nowrap;
    }

    /* 名前と部署は表示だけ（押しても開かない）。入りきらない分は省略。パスワード変更・ログアウトは開いたメニューの下から行く */
    html.menu-js .header-actions {
        flex: 1 1 0;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        min-width: 0;
    }

    html.menu-js .user-menu {
        min-width: 0;
    }

    html.menu-js .user-menu-trigger {
        display: block;
        max-width: 100%;
        min-height: 0;
        padding: 0;
        overflow: hidden;
        color: var(--muted);
        background: transparent;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
        pointer-events: none;
    }

    html.menu-js .user-menu:hover .user-menu-panel,
    html.menu-js .user-menu:focus-within .user-menu-panel,
    html.menu-js .user-menu-panel {
        display: none;
    }

    /* 本文は画面の幅いっぱい。メニューは本文の上に重ねる */
    html.menu-js .app-body {
        grid-template-columns: minmax(0, 1fr);
    }

    html.menu-js .app-sidebar {
        position: fixed;
        top: 52px;
        bottom: 0;
        left: 0;
        z-index: 60;
        width: min(75vw, 280px);
        height: calc(100vh - 52px);
        height: calc(100dvh - 52px);
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
        overscroll-behavior: contain;
        background-color: var(--panel);
        box-shadow: 6px 0 24px rgba(24, 35, 55, 0.18);
        visibility: hidden;
        transform: translateX(-100%);
        transition: transform 180ms ease, visibility 0s linear 180ms;
    }

    html.menu-js.menu-open .app-sidebar {
        visibility: visible;
        transform: none;
        transition: transform 180ms ease;
    }

    html.menu-js .side-menu a,
    html.menu-js .sidebar-account a,
    html.menu-js .sidebar-account button {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 44px;
        padding: 8px 12px;
        overflow: visible;
        border-radius: 6px;
        text-align: left;
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    html.menu-js .menu-label {
        white-space: normal;
    }

    html.menu-js .sidebar-account {
        display: grid;
        gap: 3px;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--line);
    }

    html.menu-js .sidebar-account form {
        margin: 0;
    }

    html.menu-js .sidebar-account a,
    html.menu-js .sidebar-account button {
        color: var(--muted);
        background: transparent;
        border: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        text-decoration: none;
    }

    html.menu-js .sidebar-account a:hover,
    html.menu-js .sidebar-account button:hover {
        color: var(--primary-dark);
        background: var(--primary-soft);
    }

    /* 薄暗い幕（帯は覆わない＝ボタンでも閉じられる） */
    html.menu-js .sidebar-backdrop {
        position: fixed;
        top: 52px;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        display: block;
        background: rgba(24, 35, 55, 0.42);
        opacity: 0;
        visibility: hidden;
        touch-action: none;
        transition: opacity 180ms ease, visibility 0s linear 180ms;
    }

    html.menu-js.menu-open .sidebar-backdrop {
        opacity: 1;
        visibility: visible;
        transition: opacity 180ms ease;
    }

    /* 開いている間は後ろのページを動かさない（モーダル用の modal-open とは別にする） */
    html.menu-js.menu-open,
    html.menu-js.menu-open body {
        overflow: hidden;
    }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
    html.menu-js .app-sidebar,
    html.menu-js.menu-open .app-sidebar,
    html.menu-js .sidebar-backdrop,
    html.menu-js.menu-open .sidebar-backdrop {
        transition: none;
    }
}

/* ==== ホーム画面のアプリ（青空管理）と下のボタンの並び（2026-10-24）====
   設計図 docs/20261024_設計図_スマホ対応（PWA・生体認証ログイン）.md §4。
   html.standalone＝ホーム画面のアイコンから開いている時（layout.php の head で付ける）。
   ブラウザで開いたパソコン（761px 以上）の見え方は変えない（新しい物は既定で出さない）。 */
.app-back,
.bottom-bar,
.install-link {
    display: none;
}

/* アプリとして開いた時の「戻る」（ブラウザの戻るが無いため・幅に関係なく出す） */
html.standalone .app-back {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-height: 44px;
    padding: 0 0 3px;
    color: var(--primary-dark);
    background: var(--primary-soft);
    border: 1px solid var(--line-strong);
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
}

html.standalone .app-back:hover {
    color: var(--primary-dark);
    background: var(--tone-info-bg);
}

@media (min-width: 761px) {
    html.standalone .app-header {
        gap: 12px;
    }

    html.standalone .app-title {
        margin-right: auto;
    }
}

@media (max-width: 760px) {
    /* ログイン画面の「ホーム画面に追加する方法」 */
    .login-page .install-link {
        display: block;
        margin-top: 18px;
        color: var(--primary);
        font-size: 14px;
        text-align: center;
    }

    /* 下のボタンの並び（よく使うメニュー）。開いた左メニュー（z-index 60）と幕（50）の下に置く */
    .bottom-bar {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 40;
        display: flex;
        gap: 4px;
        padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
        background: var(--panel);
        border-top: 1px solid var(--line);
        box-shadow: 0 -6px 20px rgba(24, 35, 55, 0.06);
    }

    .bottom-bar a {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        min-width: 0;
        min-height: 52px;
        padding: 4px 2px;
        color: var(--muted);
        border-radius: 6px;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.2;
        text-decoration: none;
    }

    .bottom-bar a.active {
        color: var(--primary-dark);
        background: var(--primary-soft);
    }

    .bottom-bar-label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .bottom-bar-icon {
        width: 22px;
        height: 22px;
        background-color: currentColor;
        -webkit-mask: var(--bottom-bar-icon) center / contain no-repeat;
        mask: var(--bottom-bar-icon) center / contain no-repeat;
    }

    .bottom-bar-icon-home {
        --bottom-bar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-8 9 8v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
    }

    .bottom-bar-icon-scheduling {
        --bottom-bar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
    }

    .bottom-bar-icon-duty {
        --bottom-bar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z'/%3E%3C/svg%3E");
    }

    .bottom-bar-icon-personal_files {
        --bottom-bar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6a1 1 0 0 1 1-1h5l2 2h9a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
    }

    .bottom-bar-icon-file_search {
        --bottom-bar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
    }

    .bottom-bar-icon-publishing {
        --bottom-bar-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l18-7-7 18-3-8z'/%3E%3C/svg%3E");
    }

    /* 下のボタンの並びに本文の最後が隠れないよう、その分だけ下を空ける */
    .app-shell:has(.bottom-bar) .content-area {
        padding-bottom: calc(20px + 64px + env(safe-area-inset-bottom));
    }

    /* アプリとして開いている時は「ホーム画面に追加する方法」を出さない */
    html.standalone .login-page .install-link,
    html.menu-js.standalone .sidebar-account .install-link {
        display: none;
    }
}

@media print {
    .app-back,
    .bottom-bar {
        display: none !important;
    }
}

/* ==== 顔認証・指紋でログイン（パスキー・2026-10-24）==== */
/* hidden を付けたら必ず隠す（button の display: inline-block に負けないように）。見せるかは passkey.js が決める */
[data-passkey-login][hidden],
[data-passkey-message][hidden],
[data-passkey-register][hidden],
[data-passkey-register-message][hidden],
[data-passkey-offer][hidden],
[data-passkey-offer-actions][hidden],
[data-passkey-offer-message][hidden] {
    display: none;
}

.passkey-login {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.passkey-login button {
    width: 100%;
}

.passkey-offer {
    display: grid;
    gap: 8px;
    margin-bottom: 18px;
}

.passkey-offer p {
    margin: 0;
    color: var(--muted);
}

.passkey-offer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.login-methods-register,
.login-methods-list {
    display: grid;
    gap: 12px;
    margin-bottom: 18px;
}

.login-methods-register h2,
.login-methods-list h2 {
    margin: 0;
    font-size: 17px;
}

.login-methods-register p,
.login-methods-list p {
    margin: 0;
    line-height: 1.7;
}

.login-methods-register button[data-passkey-register] {
    justify-self: start;
}

.login-method-row {
    display: grid;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

.login-method-row p {
    color: var(--muted);
    font-size: 14px;
}

.login-method-row form {
    margin: 0;
}

.login-method-rename {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.login-method-rename input[type="text"] {
    flex: 1 1 200px;
    min-width: 0;
}

@media (max-width: 760px) {
    /* iPhone は 16px 未満の入力欄を押すと画面を拡大するため */
    .login-method-rename input[type="text"] {
        font-size: 16px;
    }
}

/* 「ホーム画面に追加する方法」（/install） */
.install-guide .panel {
    width: min(100%, 560px);
}

.install-guide-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 8px;
}

.install-guide-head img {
    flex: none;
    border-radius: 12px;
    box-shadow: 0 4px 12px var(--shadow);
}

.install-guide-head h1 {
    margin: 0 0 6px;
    font-size: 20px;
}

.install-guide-head p,
.install-guide-note {
    margin: 0;
    color: var(--muted);
    line-height: 1.7;
}

.install-guide h2 {
    margin: 22px 0 8px;
    font-size: 16px;
}

.install-steps {
    margin: 0;
    padding-left: 22px;
    line-height: 1.8;
}

.install-guide-note {
    margin: 20px 0;
    font-size: 14px;
}

/* ==== 当直日誌 ==== */
.duty-state {
    color: var(--muted);
    background: rgba(255, 254, 250, 0.92);
    border: 1px solid rgba(216, 223, 215, 0.96);
    border-radius: 8px;
    padding: 10px 14px;
}

.duty-compact-panel {
    padding: 10px 16px;
}

.duty-compact-panel + .duty-compact-panel {
    margin-top: 8px;
}

.duty-entry-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
}

.duty-entry-form .duty-hint {
    margin: 0;
}

.duty-entry-form label {
    margin: 0;
    min-width: 140px;
    flex: 1 1 160px;
    font-size: 13px;
}

.duty-entry-form label.duty-remark {
    flex: 2 1 260px;
}

.duty-entry-form input,
.duty-entry-form select {
    height: 34px;
    margin-top: 2px;
    padding: 0 10px;
    color: var(--ink);
    background: #ffffff;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
}

.duty-entry-form button {
    height: 38px;
}

.duty-table-scroll {
    overflow: auto;
    max-width: 100%;
    border: 1px solid rgba(216, 223, 215, 0.9);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.78);
}

.duty-table {
    width: 100%;
    min-width: 960px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
}

.duty-table th,
.duty-table td {
    padding: 6px 8px;
    border-right: 1px solid rgba(216, 223, 215, 0.9);
    border-bottom: 1px solid rgba(216, 223, 215, 0.9);
    text-align: left;
    white-space: nowrap;
}

.duty-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: var(--primary-dark);
    background: #edf4f1;
}

.duty-table input,
.duty-table select {
    height: 32px;
    min-width: 70px;
    padding: 0 6px;
    font: inherit;
    font-size: 13px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
}

.duty-table td.empty {
    color: var(--muted);
    text-align: center;
    white-space: normal;
}

.duty-review-summary p {
    margin: 4px 0;
}

/* 当直予定：記録との照合結果の色（赤＝記録なし、黄＝患者なし、灰＝照合不可） */
.duty-roster-syncs p {
    margin: 2px 0;
    font-size: 13px;
    color: var(--muted);
}

.duty-roster-resync {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    align-items: center;
    margin-top: 8px;
}

.duty-roster-resync .duty-hint {
    margin: 0;
}

.duty-roster-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
}

.duty-roster-legend .duty-hint {
    margin: 0;
}

.duty-roster-table {
    min-width: 760px;
}

.duty-roster-table tbody tr {
    scroll-margin-top: 120px;
}

.duty-roster-table tr.duty-roster-weekend td:first-child {
    color: #b3423a;
}

.duty-roster-cell select {
    min-width: 150px;
}

.duty-roster-cell small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
    white-space: normal;
}

.duty-roster-cell.status-missing {
    background: var(--tone-danger-wash);
}

.duty-roster-cell.status-no_patient {
    background: var(--tone-warning-wash);
}

.duty-roster-cell.status-unresolved {
    background: var(--tone-neutral-wash);
}

.duty-roster-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    line-height: 1.5;
    border: 1px solid transparent;
}

.duty-roster-legend .duty-roster-badge {
    margin-left: 0;
}

.duty-roster-badge.status-missing {
    color: var(--tone-danger-ink);
    background: var(--tone-danger-bg);
    border-color: var(--tone-danger-line);
}

.duty-roster-badge.status-no_patient {
    color: var(--tone-warning-ink);
    background: var(--tone-warning-bg);
    border-color: var(--tone-warning-line);
}

.duty-roster-badge.status-unresolved {
    color: var(--tone-neutral-ink);
    background: var(--tone-neutral-bg);
    border-color: var(--tone-neutral-line);
}

.duty-roster-badge.status-ok {
    color: var(--tone-success-ink);
    background: var(--tone-success-bg);
    border-color: var(--tone-success-line);
}

.duty-review-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.duty-entry-shared {
    margin-bottom: 4px;
}

.duty-hint {
    margin: 0 0 6px;
    font-size: 13px;
    line-height: 1.4;
}

/* 入力パネル上部のツールバー（Excel 取り込み / 全部削除） */
.duty-entry-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin: 0 0 8px;
}

.duty-entry-toolbar form {
    margin: 0;
}

.duty-entry-toolbar button {
    min-height: 30px;
    padding: 4px 12px;
    font-size: 13px;
}

.duty-import-panel {
    margin: 0 0 10px;
    padding: 10px 12px;
    background: rgba(237, 244, 241, 0.5);
    border: 1px solid rgba(216, 223, 215, 0.9);
    border-radius: 8px;
}

.duty-import-panel textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    color: var(--ink);
    background: #ffffff;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    white-space: pre;
    overflow: auto;
}

.duty-import-actions {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 6px;
}

.duty-import-actions button {
    min-height: 30px;
    padding: 4px 12px;
    font-size: 13px;
    white-space: nowrap;
}

.duty-import-actions .duty-hint {
    margin: 4px 0 0;
    white-space: pre-line;
}

.duty-dates-table .duty-date-cell {
    min-width: 76px;
    font-weight: 700;
    color: var(--primary-dark);
    white-space: nowrap;
}

.duty-table .duty-doctor-search {
    min-width: 190px;
}

.duty-date-add-row td {
    background: rgba(237, 244, 241, 0.5);
    text-align: left;
}

.duty-date-add-row button {
    min-height: 28px;
    padding: 4px 10px;
    font-size: 12px;
}

/* 記録入力：全日付ぶんのテーブルはとても縦長になるため、
   横スクロールバーが画面外（ページ最下部）に追いやられないよう高さを制限する */
.duty-dates-scroll {
    max-height: 65vh;
}

/* 医師検索コンボボックス（当直日誌） */
.duty-doctor-picker {
    display: block;
}

.duty-doctor-popup {
    position: fixed;
    z-index: 60;
    max-height: 264px;
    overflow-y: auto;
    padding: 4px;
    background: #ffffff;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    box-shadow: 0 14px 36px var(--shadow);
}

.duty-doctor-option {
    display: block;
    width: 100%;
    min-height: 30px;
    padding: 5px 10px;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-radius: 6px;
    font: inherit;
    font-size: 13px;
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
}

.duty-doctor-option:hover,
.duty-doctor-option.is-active {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.duty-doctor-empty {
    padding: 8px 10px;
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap;
}

/* 行の高さ切り替え（記録入力テーブル）。既定は「標準」＝上書きなし */
.duty-density-control {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    color: var(--muted);
    font-size: 13px;
}

.duty-density-control select {
    height: 32px;
    padding: 0 8px;
    color: var(--ink);
    background: #ffffff;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
}

.duty-density-compact .duty-table td {
    padding: 2px 6px;
}

.duty-density-compact .duty-table input,
.duty-density-compact .duty-table select {
    height: 26px;
}

.duty-density-compact .duty-date-add-row button {
    min-height: 22px;
    padding: 2px 8px;
}

.duty-density-roomy .duty-table td {
    padding: 12px 8px;
}

.duty-density-roomy .duty-table input,
.duty-density-roomy .duty-table select {
    height: 38px;
}

.duty-row-remove {
    min-height: 26px;
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1;
}

/* ---- 統合投稿（publishing） ---- */
.publishing-form .panel + .panel,
.publishing-send-panel {
    margin-top: 16px;
}

.publishing-form label {
    margin: 12px 0 0;
}

.publishing-form h2 {
    margin: 0 0 4px;
    font-size: 17px;
}

.publishing-target-list {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.publishing-target-row {
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.publishing-target-check {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0;
    font-weight: 600;
}

.publishing-target-check input[type="checkbox"] {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--primary);
}

.publishing-target-check small {
    color: #6b7875;
    font-weight: 400;
}

.publishing-override {
    margin-top: 8px;
}

.publishing-override summary {
    color: var(--primary-dark);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.publishing-override textarea {
    min-height: 72px;
    margin-top: 6px;
}

.publishing-target-result,
.publishing-target-error {
    margin: 8px 0 0;
    font-size: 13px;
}

.publishing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.publishing-actions form {
    margin: 0;
}

.publishing-targets {
    flex-wrap: wrap;
}

.publishing-target {
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.publishing-target.off {
    color: #9aa39f;
    background: #eef1ef;
    text-decoration: line-through;
}

.publishing-target.sent {
    color: var(--success);
    background: #e8f3e8;
}

.publishing-target.failed {
    color: var(--danger);
    background: #fbe7e7;
}

.status-badge.publishing-draft {
    color: var(--tone-neutral-ink);
    background: var(--tone-neutral-bg);
    border-color: var(--tone-neutral-line);
}

.status-badge.publishing-sending {
    color: var(--tone-warning-ink);
    background: var(--tone-warning-bg);
    border-color: var(--tone-warning-line);
}

.status-badge.publishing-sent {
    color: var(--tone-success-ink);
    background: var(--tone-success-bg);
    border-color: var(--tone-success-line);
}

.status-badge.publishing-partial,
.status-badge.publishing-failed {
    color: var(--tone-danger-ink);
    background: var(--tone-danger-bg);
    border-color: var(--tone-danger-line);
}

.publishing-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.publishing-image {
    margin: 0;
    padding: 8px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.publishing-image img {
    display: block;
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 6px;
}

.publishing-image figcaption {
    margin: 6px 0;
    color: #6b7875;
    font-size: 12px;
    word-break: break-all;
}

.publishing-image form {
    margin: 0;
}

.publishing-image button {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 13px;
}

/* 動画投稿（画像投稿とは別タブ） */
.publishing-tabs,
.menu-tabs {
    display: flex;
    gap: 4px;
    margin: 12px 0 0;
    border-bottom: 2px solid var(--line);
}

.publishing-tab,
.menu-tab {
    padding: 8px 18px;
    margin-bottom: -2px;
    border: 2px solid transparent;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    color: #6b7875;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.publishing-tab:hover,
.menu-tab:hover {
    color: var(--primary-dark);
}

.publishing-tab.active,
.menu-tab.active {
    color: var(--primary-dark);
    background: #fff;
    border-color: var(--line);
    border-bottom: 2px solid #fff;
}

.publishing-video {
    margin: 12px 0 0;
    padding: 8px;
    max-width: 360px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.publishing-video video {
    display: block;
    width: 100%;
    max-height: 480px;
    background: #000;
    border-radius: 6px;
}

.publishing-video figcaption {
    margin: 6px 0;
    color: #6b7875;
    font-size: 12px;
    word-break: break-all;
}

.publishing-video form {
    margin: 0;
}

.publishing-video button {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 13px;
}

/* 未実装の投稿先（GBP / TikTok）は薄く出す */
.publishing-target-pending {
    opacity: 0.6;
}

.publishing-target.queued,
.publishing-target.processing {
    color: var(--warning);
    background: #fff3d8;
}

.status-badge.publishing-queued {
    color: var(--tone-warning-ink);
    background: var(--tone-warning-bg);
    border-color: var(--tone-warning-line);
}

/* hidden を付けたら必ず隠す（display: flex の指定に負けないように） */
.publishing-target-option[hidden],
.upload-hint[hidden] {
    display: none;
}

.publishing-target-option {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-top: 8px;
    font-size: 13px;
}

.publishing-option-label {
    color: #6b7875;
    font-weight: 600;
}

.publishing-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--ink);
    font-weight: 500;
}

.publishing-radio input[type="radio"],
.publishing-radio input[type="checkbox"] {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary);
}

.publishing-select {
    min-width: 240px;
    height: 36px;
    padding: 0 10px;
    color: var(--ink);
    background: #ffffff;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
}

.publishing-form .file-picker {
    margin-top: 8px;
}

/* シフト設定ページ（/scheduling/settings）用の追加スタイル
 *
 * 2026-09-24 追加。既存のスタイルシートの末尾に貼るだけで効く。
 * 既存クラス（panel / status-tabs / schedule-review-table / schedule-submit-bar 等）は
 * そのまま流用しているので、ここには新しく増えた setting-* だけを置いている。
 */

/* 部署シフト確認（/scheduling/review）に出る「生成時の注意」
 * エラーではないので赤ではなく、見落とさない程度の黄色にしている。 */
.schedule-warning-panel {
    border-left: 3px solid var(--tone-warning-line);
    background: var(--tone-warning-wash);
}

.schedule-warning-panel strong {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--tone-warning-ink);
}

.schedule-warning-panel ul {
    margin: 0;
    padding-left: 20px;
}

.schedule-warning-panel li {
    font-size: 13px;
    line-height: 1.8;
}

.setting-row {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 16px;
    align-items: start;
    padding: 16px 0;
    border-bottom: 1px solid #eceff1;
}

.setting-row:last-of-type {
    border-bottom: none;
}

.setting-label strong {
    display: block;
    font-size: 14px;
    line-height: 1.6;
}

.setting-not-configured {
    display: inline-block;
    margin-top: 4px;
    padding: 1px 6px;
    border-radius: 3px;
    background: #fff8e1;
    color: #8d6e17;
    font-size: 11px;
    font-style: normal;
}

.setting-input select,
.setting-input input[type="number"],
.setting-input input[type="text"] {
    padding: 4px 6px;
}

.setting-help {
    margin: 6px 0 0;
    color: #78909c;
    font-size: 12px;
    line-height: 1.7;
}

.setting-weekday-table {
    border-collapse: collapse;
}

.setting-weekday-table th,
.setting-weekday-table td {
    padding: 4px 6px;
    border: 1px solid #eceff1;
    text-align: center;
    font-weight: normal;
}

.setting-weekday-table th {
    background: #fafafa;
    font-size: 12px;
}

.setting-weekday-table input[type="number"] {
    width: 48px;
    text-align: center;
}

/* 設定ページの「曜日固定の職員」の表（2026-09-25 追加） */
.setting-staff-table {
    border-collapse: collapse;
}

.setting-staff-table th,
.setting-staff-table td {
    padding: 4px 8px;
    border: 1px solid #eceff1;
    text-align: left;
    font-size: 13px;
    font-weight: normal;
}

.setting-staff-table th {
    background: #fafafa;
    font-size: 12px;
}

.setting-staff-table input[type="text"] {
    width: 110px;
}

.setting-checkbox-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.setting-checkbox-row label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
}

.setting-editor-add {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-top: 16px;
}

.setting-editor-add label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: #546e7a;
}

.setting-editor-add input[type="text"] {
    width: 160px;
}

/* 画面が狭い時は縦積みにする */
@media (max-width: 720px) {
    .setting-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .setting-editor-add {
        flex-direction: column;
        align-items: stretch;
    }
}

/* 部署シフト確認の最終調整：勤務区分の下に重ねる「半休」の欄（2026-09-25 追加）
 * 半休の日も半分は働くので、勤務区分とは別の欄で持つ。値が入っている時だけ色を付けて見落とさないようにする。 */
.final-half-select {
    display: block;
    width: 100%;
    margin-top: 2px;
    font-size: 10px;
    color: #90a4ae;
}

.final-half-select.has-half {
    color: #8d6e17;
    background: #fff8e1;
    font-weight: bold;
}

.locked-half-value {
    display: block;
    font-size: 10px;
    color: #8d6e17;
}

/* シフトの職員マスタ（/scheduling/staff・2026-09-25 追加） */
.staff-table td {
    vertical-align: middle;
}

.staff-table input[type="text"] {
    width: 90px;
}

.staff-table input[type="date"] {
    width: 130px;
}

.staff-table .setting-checkbox-row {
    gap: 6px;
}

/* 外した職員（在籍フラグ0）は薄く出す */
.staff-table tr.staff-inactive td {
    color: #9e9e9e;
    background: #fafafa;
}

/* 集計（2026-10-13）：右端の個人ごとの回数・下の日ごとの人数 */
.schedule-final-table .sum-col {
    min-width: 42px;
    text-align: center;
    font-weight: 600;
    background: #f4f7fb;
}
.schedule-final-table tfoot .sum-row td,
.schedule-final-table tfoot .sum-row th {
    background: #f4f7fb;
    text-align: center;
    font-weight: 600;
    font-size: 12px;
}
.schedule-final-table tfoot .sum-row:first-child td,
.schedule-final-table tfoot .sum-row:first-child th {
    border-top: 2px solid #9aa9bb;
}
.sum-half {
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: #666;
}
/* チームごとの人数（2026-10-21・夜勤の段を使う部署）：チームの最初の行に区切り線 */
.schedule-final-table tfoot .sum-row.team-start td,
.schedule-final-table tfoot .sum-row.team-start th {
    border-top: 2px solid #9aa9bb;
}
.schedule-final-table tfoot .sum-row.night-row td,
.schedule-final-table tfoot .sum-row.night-row th {
    color: #3b5796;
}
/* 手直しした所（2026-10-13）：右上に小さな三角。保存前の手直しは点線の枠 */
.schedule-final-table td.edited-cell {
    position: relative;
}
.schedule-final-table td.edited-cell::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-style: solid;
    border-width: 0 8px 8px 0;
    border-color: transparent #d9534f transparent transparent;
}
.schedule-final-table td.unsaved-cell {
    outline: 2px dashed #d9534f;
    outline-offset: -3px;
}
.edited-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 4px;
    vertical-align: -2px;
    border: 1px solid #ccc;
    background: linear-gradient(225deg, #d9534f 0 30%, #fff 30%);
}
.schedule-print-link {
    margin-left: auto;
}
/* 試しに組んだ勤務表（2026-10-15）＝保存していないので点線の枠 */
.schedule-trial-grid {
    border: 2px dashed var(--line-strong);
}

/* 管理者の部署の切り替え（2026-10-14） */
.schedule-month-form .schedule-department-select {
    height: 46px;
    margin-right: 8px;
    padding: 0 10px;
    border: 1px solid var(--line-strong);
    border-radius: 8px;
    background: #fff;
    font: inherit;
}

/* 連勤の注意（2026-10-13）：注意に入る日にオレンジの下線 */
.schedule-final-table td.streak-cell {
    box-shadow: inset 0 -3px 0 #e8890c;
}
.schedule-final-table td.wish-cell.streak-cell {
    box-shadow: inset 0 0 0 2px #e0a800, inset 0 -4px 0 #e8890c;
}
.schedule-streak-note {
    margin: 8px 0;
    padding: 8px 12px;
    border-left: 4px solid #e8890c;
    background: #fff6ea;
    font-size: 13px;
}
.schedule-streak-note.no-streak {
    border-left-color: #5ba640;
    background: #f3f9ef;
}
.schedule-streak-note ul {
    margin: 4px 0;
    padding-left: 20px;
}
/* 手直しの記録（2026-10-13） */
.schedule-change-log {
    margin-top: 12px;
    font-size: 13px;
}
.schedule-change-log summary {
    cursor: pointer;
    font-weight: 600;
}
.schedule-change-log table,
.schedule-trial-table {
    border-collapse: collapse;
    margin-top: 6px;
    font-size: 13px;
}
.schedule-change-log th,
.schedule-change-log td,
.schedule-trial-table th,
.schedule-trial-table td {
    border: 1px solid #dde3ea;
    padding: 4px 8px;
    text-align: left;
    vertical-align: top;
}
.schedule-change-log th,
.schedule-trial-table th {
    background: #f4f7fb;
}
.nowrap {
    white-space: nowrap;
}
/* 試しに組んだ結果（2026-10-13）：所属長だけ・保存していない */
.schedule-trial-panel {
    border-left: 4px solid #0068c4;
}
.schedule-trial-panel p {
    margin: 6px 0;
}

/* 希望の提出状況（2026-10-13）：所属長だけに出す */
.schedule-submission-panel {
    border-left: 4px solid #e0a800;
}
.schedule-submission-panel.all-submitted {
    border-left-color: #5ba640;
}
.schedule-submission-panel > * {
    margin-right: 12px;
}
.schedule-submission-panel p {
    margin: 6px 0 0;
}
/* ホームの対応待ち（2026-10-13）：シフト希望の提出状況 */
.schedule-notice {
    padding: 10px 0;
    border-bottom: 1px solid #e5e9ef;
}
.schedule-notice:last-child {
    border-bottom: none;
}
.schedule-notice > strong,
.schedule-notice > span {
    margin-right: 10px;
}
.schedule-notice-when {
    color: #8a6400;
    font-weight: 600;
}
.schedule-notice p {
    margin: 6px 0;
}

/* 本人が希望を入れた日（2026-10-13）：黄色の枠＋小さく希望の内容。所属長が変えても残る */
.schedule-final-table td.wish-cell {
    box-shadow: inset 0 0 0 2px #e0a800;
    background: #fffbea;
}
.wish-tag {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.2;
    color: #8a6400;
    white-space: nowrap;
}
.wish-legend {
    font-size: 12px;
    color: #555;
}
.wish-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 4px;
    vertical-align: -2px;
    box-shadow: inset 0 0 0 2px #e0a800;
    background: #fffbea;
}

/* チームの管理者（2026-10-10）：直せない行（ほかのチーム）は薄く出す */
.schedule-final-table tr.row-readonly th,
.schedule-final-table tr.row-readonly td {
    background: #f4f4f4;
    color: #777;
}

/* 長期の休み（産休・育休など・2026-10-10）＝種類の下に初日・最終日を縦に並べる */
.staff-leave-cell {
    white-space: nowrap;
}

.staff-leave-date {
    display: block;
    margin-top: 4px;
    font-size: 0.85em;
}

.staff-actions {
    white-space: nowrap;
}

.staff-actions form {
    display: inline;
}

.staff-add-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.staff-add-form > label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: #546e7a;
}

/* シフト設定・職員：見るだけの人向け（2026-09-25） */
.setting-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.setting-readonly-note {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-left: 4px solid #0068c4;
    background: #eef5fc;
}

/* シフト希望：提出の取り消し（2026-09-25） */
.schedule-unlock-form {
    margin: 0 0 12px;
    display: flex;
    justify-content: flex-end;
}

/* 職員タブ：曜日ごとの固定勤務（2026-09-25） */
.staff-weekday-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(56px, 1fr));
    gap: 4px;
    min-width: 420px;
}

.staff-weekday-grid label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 12px;
}

.staff-weekday-grid label.sunday-col span {
    color: #c0392b;
}

.staff-weekday-grid label.is-fixed select {
    background: #eef5fc;
    font-weight: 600;
}

.staff-weekday-grid select {
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 2px;
    font-size: 12px;
}

.staff-weekday-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* シフト設定：必要人数の表・グループの表（2026-09-26） */
.setting-quota-table input[type="number"],
.setting-group-table input[type="text"] {
    width: 72px;
}

.setting-quota-table th.sunday-col {
    color: #c0392b;
}

.setting-group-table input[type="checkbox"] {
    width: auto;
    height: auto;
}

/* 部門確認：午前・午後の業務（2026-09-29・医事課）。1人2行＝午前の行の下に午後の行 */
.schedule-final-table .task-half-label { display: block; font-size: 10px; font-weight: normal; color: #6b7280; }
.schedule-final-table .task-am-row td { border-bottom-style: dashed; }
.schedule-final-table .task-pm-row td { padding-top: 0; }
.final-task-select { display: block; width: 100%; margin-top: 2px; font-size: 11px; padding: 1px 2px; }
.final-task-select.task-受付, .final-task-select.task-夕方受付 { background: #e0f2fe; }
.final-task-select.task-会計 { background: #fef3c7; }
.final-task-select.task-健診 { background: #dcfce7; }
.final-task-select.task-入院 { background: #ede9fe; }
.final-task-select.task-日直 { background: #fee2e2; }
.locked-task-value { display: block; font-size: 11px; color: #374151; }

/* 希望入力：確定シフトの担当の業務（2026-09-29・医事課） */
.schedule-final-tasks { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.schedule-final-tasks .final-task { display: block; font-size: 11px; border-radius: 4px; padding: 1px 4px; background: #f3f4f6; color: #111827; }
.schedule-final-tasks .final-task small { color: #6b7280; }
.schedule-final-tasks .task-受付, .schedule-final-tasks .task-夕方受付 { background: #e0f2fe; }
.schedule-final-tasks .task-会計 { background: #fef3c7; }
.schedule-final-tasks .task-健診 { background: #dcfce7; }
.schedule-final-tasks .task-入院 { background: #ede9fe; }
.schedule-final-tasks .task-日直 { background: #fee2e2; }

/* ファイル検索（app/file_search） */
.file-search-form {
    display: flex;
    gap: 10px;
}

.file-search-form input[type="search"] {
    flex: 1;
    min-width: 0;
}

.file-search-results {
    margin-top: 16px;
}

/* list-panel は padding:0 のため、行以外の文言は .panel と同じ横余白 22px を自分で取る */
.file-search-summary {
    margin: 16px 22px 10px;
    color: var(--muted);
    font-size: 14px;
}

.file-search-footnote {
    margin: 12px 22px 16px;
    color: var(--muted);
    font-size: 12px;
}

.file-search-row .approval-title a {
    color: var(--primary);
    font-weight: 600;
    word-break: break-all;
}

.file-search-folder {
    margin: 0 0 6px;
    font-size: 12px;
    word-break: break-all;
}

.file-search-snippet,
.file-search-note {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
}

.file-search-snippet mark {
    padding: 0 2px;
    background: #fdf1c7;
    color: inherit;
    border-radius: 3px;
}

.file-search-via {
    font-size: 12px;
}

.file-search-pager {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 14px 22px 0;
}