/* A quiet illustrated landscape with cheerful, readable controls. */
:root{--blue:#176d72;--green:#218467;--line:#dce8e7;color:#263f49;background:#f5f8f4}
body{min-height:100vh;background:linear-gradient(180deg,#ffffff18,#ffffff70),url('./assets/planner-landscape.png') center bottom/cover fixed no-repeat;background-color:#f4f8f3}
.header-controls{background:transparent;padding:18px 32px 0}
main{padding-top:18px}
button{border-color:#cadcda;border-radius:12px;box-shadow:0 2px 0 #1b555509;transition:background-color .16s,box-shadow .16s,border-color .16s;color:#244c54}
button:hover:not(:disabled){background:#edf8f4;border-color:#87b9ad;box-shadow:0 4px 12px #1c625518}
button.primary{background:#176d72;border-color:#176d72;box-shadow:0 4px 10px #176d7224}
button.primary:hover:not(:disabled){background:#11585e;border-color:#11585e}
button.danger{color:#a63843}
#toggle-navigation{background:#fffdf8;border-color:#d8e4da;box-shadow:0 5px 20px #38574c12;padding:8px 16px 8px 9px}
.action-icon{display:inline-flex;width:30px;height:30px;border-radius:10px;align-items:center;justify-content:center;vertical-align:middle;margin-right:9px;background:#e1f3eb;color:#24785e;flex-shrink:0}
.action-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon-menu,.icon-people,.icon-list{background:#e9e5fb;color:#7154aa}
.icon-edit,.icon-plus{background:#ffebd8;color:#a65320}
.icon-upload,.icon-invite{background:#e0f1fa;color:#246a96}
.icon-chart,.icon-download{background:#dff2e8;color:#257d59}
button.primary .action-icon{background:#ffffff22;color:#fff}
#workspace{border:1px solid #dbe7e2;border-radius:22px;box-shadow:0 16px 50px #314d4510;background:#fff;padding:28px}
.workspace-title{padding-bottom:12px;border-bottom:1px solid #e9efeb}
#project-title{color:#214c50;letter-spacing:.025em}
.badge{background:#fff0d8;color:#83551d;border:1px solid #f3ddb7}
.tabs{gap:10px;padding-bottom:12px;border-bottom:0;margin-bottom:12px}
.tabs button{border:1px solid transparent;border-radius:12px;padding:9px 16px;background:#f3f6f5;color:#5a6f74}
.tabs button.active{background:#e2f3ed;border-color:#bbddd0;color:#176853}
.storage-note{background:#edf6f1;border:1px solid #d9e9df;color:#536e65;border-radius:14px}
.display-section{border-top-color:#e1ebe6;padding-top:6px}
.display-section summary{color:#28565c}
.display-section summary::marker{color:#4a9481}
.chart-heading{padding:12px 14px;border-radius:14px;background:#f5f8f6;gap:14px}
.gantt{border-color:#dbe7e3;border-radius:12px}
.chart-header,.timeline.chart-header,th{background:#eef5f1}
.bar{background:#247c83;border-radius:5px}
.bar.actual{background:#218467}.bar.interim{background:#9673ba}
.legend .planned:before{background:#247c83}
.task-number{box-shadow:0 2px 3px #a4511c16;border-radius:5px}
.details{border:1px solid #e1ebe5;border-radius:12px}
tbody tr:nth-child(even){background:#fafcfb}tbody tr:hover{background:#f0f7f3}
input,select{border-color:#cbded7;border-radius:10px;background:#fff}
dialog,dialog.navigation-panel{border:1px solid #d6e5dc;border-radius:22px;box-shadow:0 24px 90px #244b4b35;background:#fffefb}
dialog.navigation-panel{border-radius:0 22px 22px 0}
dialog::backdrop{background:#183b4166;backdrop-filter:blur(5px)}
.menu-account{background:#edf6f0;margin:-24px -24px 0;padding:20px 24px;border-bottom:1px solid #dce8df}
#account-status{font-weight:650;color:#325a4b}
.navigation-panel header{background:transparent}.navigation-panel header a{color:#386454}
.navigation-panel .page-intro{background:linear-gradient(100deg,#fffefbf5,#fffefb60),url('./assets/planner-landscape.png') center 55%/cover;border-radius:14px;padding:20px 14px;margin:12px 0}
.navigation-panel .management-menu{border-color:#cbded1;border-radius:16px;background:#fff}
.management-menu legend{padding:0 10px;color:#386252}
.management-row{border-bottom:1px dashed #dce6de;gap:16px}
.management-row button{display:flex;align-items:center;padding:10px;text-align:left;background:#fcfdfb}
.empty{border-radius:20px;background:#fffffff0;border:1px dashed #bdd6c7;margin:16px 0;box-shadow:0 10px 30px #395b4b08}
.empty h2,.empty h3{color:#376857}
.attachment-row{background:#fff;border-radius:12px;padding:16px;margin-bottom:10px;border:1px solid #e0e9e2}
@media(max-width:700px){.header-controls{padding:12px 12px 0}#workspace{padding:14px;border-radius:16px}.menu-account{margin:-16px -16px 0;padding:16px}.chart-heading{padding:10px}.tabs button{padding:8px 10px}.action-icon{width:27px;height:27px;margin-right:6px}body{background-attachment:scroll}.navigation-panel .page-intro{padding:14px 8px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}
@media print{body{background:#fff}.header-controls{display:none}#workspace{box-shadow:none}}

/* Connected tabs make the selected project view explicit. */
.tabs[role="tablist"] { gap: 6px; border-bottom: 2px solid #247c83; padding: 0 6px; }
.tabs[role="tablist"] button { border: 1px solid #cbded7; border-bottom: 0; border-radius: 12px 12px 0 0; padding: 12px 20px; background: #edf3ef; color: #536e65; margin-bottom: 0; }
.tabs[role="tablist"] button[aria-selected="true"] { background: #247c83; border-color: #247c83; color: white; }
.resizable-table { table-layout: fixed; }
.resizable-table th { position: relative; padding-right: 20px; white-space: normal; }
.resizable-table td { white-space: normal; overflow-wrap: anywhere; overflow: hidden; }
.resizable-table td button { max-width: 100%; white-space: normal; margin-bottom: 5px; }
.resizable-table .inline-task-row td, .resizable-table .inline-task-row input, .resizable-table .inline-task-row select { min-width: 0; }
.column-resizer { position: absolute; right: 0; top: 0; width: 12px; height: 100%; cursor: col-resize; touch-action: none; user-select: none; border-right: 2px solid #b1ccc2; }
.column-resizer:hover, .column-resizer:focus-visible, .column-resizer.dragging { background: #247c8340; border-right-color: #247c83; outline: none; }
@media (max-width:700px) { .tabs[role="tablist"] { gap: 3px; padding: 0; } .tabs[role="tablist"] button { flex: 1; padding: 10px 6px; } }

.display-section > summary { padding: 14px 16px; background: #c5ded3; color: #173e36; border: 1px solid #96bbad; border-radius: 10px; }
.display-section[open] > summary { background: #d4e7de; margin-bottom: 12px; }
.display-section > summary:hover { background: #bad6c9; }
.display-section > summary::marker { color: #245a48; }
.display-section > summary::after { content: '折りたたみ中'; float: right; font-size: 0.8em; font-weight: 500; padding-top: 3px; }
.display-section[open] > summary::after { content: '表示中'; }

/* Make completion and planned/actual dates distinguishable at a glance. */
.resizable-table tbody tr.task-completed { background: #b9ccc3; color: #203d32; }
.resizable-table tbody tr.task-completed:hover { background: #a9c0b5; }
.resizable-table tbody tr.task-completed small { color: #38554a; }
.bar:not(.actual):not(.interim), .legend .planned:before { background: #2458b8; }
.bar.actual, .legend .actual:before { background: #a84308; }
.resizable-table td .icon-button { display: inline-flex; align-items: center; justify-content: center; gap: 3px; width: 34px; min-height: 34px; padding: 3px; margin-right: 3px; font-size: 18px; vertical-align: middle; }
.resizable-table td .icon-button small { font-size: 11px; color: inherit; }

.workspace-view-bar { display: flex; align-items: flex-end; gap: 16px; margin: 14px 0 20px; border-bottom: 2px solid #247c83; }
.workspace-view-bar .tabs[role="tablist"] { flex: 0 0 auto; margin: 0; border-bottom: 0; }
.workspace-view-bar #edit-actions { margin: 0 0 6px auto; justify-content: flex-end; gap: 8px; }
.workspace-view-bar #edit-actions .primary { margin-left: 0; }
@media (max-width: 1000px) { .workspace-view-bar { flex-wrap: wrap; } .workspace-view-bar #edit-actions { margin-left: auto; } }

.tree-task-heading { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tree-task-heading > strong, .tree-task-heading > button[data-edit] { min-width: 0; flex: 1; }
.chart-label .tree-toggle, .resizable-table .tree-toggle { display: inline-flex; flex: 0 0 24px; width: 24px; height: 24px; align-items: center; justify-content: center; padding: 0; margin: 0; border: 1px solid #72988b; border-radius: 4px; background: #fff; color: #214b40; font-size: 18px; line-height: 1; }
.tree-spacer { flex: 0 0 24px; width: 24px; }
[data-tree-row][hidden], [data-tree-interim][hidden] { display: none !important; }

.attachment-group { border-bottom: 1px solid #cbded7; margin-bottom: 16px; padding-bottom: 12px; }
.attachment-group > details > summary { cursor: pointer; padding: 8px 12px; background: #e5eee9; border-radius: 6px; }
.attachment-group > details .attachment-row { margin: 8px 0 8px 12px; background: #f2f5f3; }