@import url('./workspace-components.css');
.workspace-layout-grid,#view-workspace .workspace-layout-grid{display:grid;width:100%;grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:12px;align-items:start;grid-auto-flow:row}
.workspace-chart-column{min-width:0;min-height:0;margin-bottom:14px;overflow:hidden;padding:14px 16px 16px}
.workspace-chart-column .hint{margin:4px 0 6px;line-height:1.45}
.workspace-unit-column,.workspace-procedure-column{min-width:0;min-height:0;position:static;max-height:none;overflow:visible}
#view-workspace .workspace-layout-grid>.workspace-unit-column{grid-column:1}
#view-workspace .workspace-layout-grid>.workspace-procedure-column{grid-column:2}
#view-workspace .workspace-unit-column #unitList{margin-top:10px;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--color-border-default) 72%,transparent)}
.unit-card-main{min-width:0}.unit-card-main>strong{display:block;min-width:0;overflow-wrap:anywhere;line-height:1.4}.unit-card-main>small{display:block;margin-top:4px;color:var(--color-text-muted);font-size:11px;line-height:1.4}
.workspace-disclosure{margin:8px 0;border:1px solid var(--color-border-default);border-radius:10px;background:var(--color-surface-subtle);overflow:hidden}
.workspace-disclosure>summary{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px;padding:7px 10px;cursor:pointer;list-style:none;color:var(--color-text-secondary);font-size:12px;font-weight:var(--font-weight-medium);user-select:none}
.workspace-disclosure>summary::-webkit-details-marker{display:none}
.workspace-disclosure>summary:hover{background:color-mix(in srgb,var(--color-surface-page) 70%,transparent);color:var(--color-text-primary)}
.workspace-disclosure>summary:focus-visible{outline:3px solid color-mix(in srgb,var(--color-focus-ring) 28%,transparent);outline-offset:-3px}
.workspace-disclosure-chevron{display:inline-block;transition:transform .15s ease}
.workspace-disclosure[open] .workspace-disclosure-chevron{transform:rotate(180deg)}
.workspace-disclosure-content{padding:0 10px 10px;border-top:1px solid color-mix(in srgb,var(--color-border-default) 72%,transparent)}
.workspace-disclosure-content>.field{margin-top:10px;margin-bottom:0}
.procedure-discovery-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.42fr);gap:8px;align-items:end;margin-bottom:8px}
.procedure-discovery-row>.field{min-width:0;margin-bottom:0}
.procedure-discovery-row input[type="search"],.procedure-discovery-row select{height:44px;min-height:44px;padding-top:0;padding-bottom:0}
.procedure-entry-grid--primary{grid-template-columns:minmax(0,1fr) minmax(150px,.55fr)}
.procedure-details-grid{display:grid;grid-template-columns:minmax(150px,.45fr) minmax(150px,.45fr);gap:10px}
.procedure-details-grid #procedureDate,.procedure-details-grid #phaseSelect{height:44px;min-height:44px;padding-top:0;padding-bottom:0}
.procedure-details-grid .procedure-memo-field{grid-column:1/-1}
.workspace-procedure-column>.procedure-submit-panel{margin-top:10px}
@media(max-width:700px){.workspace-layout-grid,#view-workspace .workspace-layout-grid{grid-template-columns:minmax(0,1fr)}#view-workspace .workspace-layout-grid>.workspace-unit-column,#view-workspace .workspace-layout-grid>.workspace-procedure-column{grid-column:1}.workspace-unit-column,.workspace-procedure-column{margin-bottom:12px}.workspace-chart-column{margin-bottom:12px}.workspace-disclosure>summary{min-height:44px}.procedure-discovery-row{grid-template-columns:minmax(0,1fr) minmax(132px,.55fr)}.procedure-entry-grid--primary{grid-template-columns:minmax(0,1fr)}.procedure-details-grid{grid-template-columns:minmax(0,1fr) minmax(108px,.52fr)}.procedure-details-grid .procedure-memo-field{grid-column:1/-1}}
.mode-btn.active{background:var(--color-action-primary-active);border-color:var(--color-action-primary-active);color:var(--color-text-on-action)}
#dentalChart [data-tooth][role="button"]{cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
#dentalChart [data-tooth][role="button"]:focus-visible{outline:3px solid var(--color-focus-ring);outline-offset:2px}
.workspace-chart-column > .section-head{align-items:flex-start}
.workspace-chart-column .chart-controls{display:grid;grid-template-columns:max-content max-content minmax(190px,280px);grid-template-rows:auto auto auto;grid-template-areas:"mode-label mode-label scope" "current planned scope" ". . scope";align-items:start;justify-content:start;column-gap:0;row-gap:4px;max-width:100%;padding:8px 10px;border:1px solid var(--color-border-default);border-radius:12px;background:var(--color-surface-subtle)}
.workspace-chart-column .chart-controls::before{content:"表示";grid-area:mode-label;display:block;min-height:15px;color:var(--color-text-muted);font-size:10.5px;font-weight:var(--font-weight-medium);line-height:1.35;letter-spacing:.02em}
.workspace-chart-column .chart-controls > .mode-btn{min-width:92px;min-height:40px;margin:0;padding:7px 14px;border:1px solid var(--color-border-strong);border-radius:0;background:var(--color-surface-card);color:var(--color-text-secondary);font:inherit;font-size:13px;font-weight:var(--font-weight-medium);cursor:pointer;touch-action:manipulation;white-space:nowrap}
.workspace-chart-column .chart-controls > .mode-btn:first-of-type{grid-area:current;border-radius:8px 0 0 8px}
.workspace-chart-column .chart-controls > .mode-btn:nth-of-type(2){grid-area:planned;margin-left:-1px;border-radius:0 8px 8px 0}
.workspace-chart-column .chart-controls > .mode-btn:hover:not(.active){background:var(--color-surface-page);color:var(--color-text-primary)}
.workspace-chart-column .chart-controls > .mode-btn.active{position:relative;z-index:1;background:var(--color-action-primary-active);border-color:var(--color-action-primary-active);color:var(--color-text-on-action)}
.workspace-chart-column .chart-controls > .mode-btn:focus-visible{position:relative;z-index:2;outline:3px solid color-mix(in srgb,var(--color-focus-ring) 28%,transparent);outline-offset:2px}
#chartWorkspaceControls{grid-area:scope;display:grid;grid-template-columns:minmax(190px,280px);grid-template-areas:"label" "value" "caption";align-items:start;gap:4px;min-width:190px;padding-left:12px;margin-left:12px;border-left:1px solid var(--color-border-default)}
#chartWorkspaceControls::before{content:"表示対象";grid-area:label;display:block;min-height:15px;color:var(--color-text-muted);font-size:10.5px;font-weight:var(--font-weight-medium);line-height:1.35;letter-spacing:.02em}
#chartWorkspaceControls .chart-workspace-segment{display:none!important}
#chartWorkspaceControls .chart-scope-select,#chartWorkspaceControls[data-context-mode="current"]::after{grid-area:value;box-sizing:border-box;min-width:190px;width:100%;min-height:42px;margin:0;padding:10px 11px;border:1px solid var(--color-border-strong);border-radius:10px;background:var(--color-surface-card);color:var(--color-text-primary);font:inherit;font-size:13px;font-weight:var(--font-weight-medium);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#chartWorkspaceControls .chart-scope-select{align-self:start}
#chartWorkspaceControls .chart-scope-select[hidden]{display:none!important}
#chartWorkspaceControls .chart-scope-caption{grid-area:caption;display:block;min-height:18px;margin:0;color:var(--color-text-secondary);font-size:12px;line-height:1.45;text-align:left;white-space:normal}
#chartWorkspaceControls[data-context-mode="current"]::after{content:"現在の状態";display:flex;align-items:center}
#chartWorkspaceControls[hidden]{display:none!important}
@media(max-width:1100px){.workspace-chart-column > .section-head{align-items:stretch;flex-direction:column}.workspace-chart-column .chart-controls{width:100%;max-width:none}#chartWorkspaceControls{min-width:0}#chartWorkspaceControls .chart-scope-select,#chartWorkspaceControls[data-context-mode="current"]::after{min-width:0}}
@media(max-width:640px){.workspace-chart-column .chart-controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 44px auto;grid-template-areas:"mode-label mode-label" "current planned" "scope scope";width:100%;padding:9px;row-gap:4px}.workspace-chart-column .chart-controls > .mode-btn{width:100%;min-width:0;min-height:44px}#chartWorkspaceControls{grid-area:scope;grid-template-columns:1fr;grid-template-areas:"label" "value" "caption";width:100%;max-width:none;min-width:0;margin:5px 0 0;padding:9px 0 0;border-left:0;border-top:1px solid var(--color-border-default)}#chartWorkspaceControls .chart-scope-select,#chartWorkspaceControls[data-context-mode="current"]::after{min-width:0;width:100%;min-height:44px}}
#dentalChart{position:relative;width:100%;min-width:0;height:clamp(250px,39vw,390px);min-height:250px;overflow:hidden;contain:none;isolation:isolate;overflow-anchor:none;transform:none;border:1px solid var(--color-border-default);border-radius:12px;background:linear-gradient(180deg,var(--color-surface-card),var(--color-surface-subtle));margin-top:6px}
#dentalChart .arch-svg{display:block;width:100%;height:100%;min-height:250px;max-height:none;overflow:visible;transform:scale(1.06);transform-origin:50% 50%}
#chartLegend{margin-top:6px;min-width:0;border-top:1px solid color-mix(in srgb,var(--color-border-default) 72%,transparent);padding-top:5px;overflow:visible}
#chartLegend .chart-legend-line{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:5px 10px;min-width:0;overflow:visible}
#chartLegend .chart-legend-title{display:inline-flex;align-items:center;flex:0 0 auto;min-height:22px;color:var(--color-text-secondary);font-size:10.5px;font-weight:var(--font-weight-medium);line-height:1.2;white-space:nowrap}
#chartLegend .chart-legend-item{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;min-width:max-content;color:var(--color-text-secondary);font-size:10px;font-weight:var(--font-weight-medium);line-height:1.2;white-space:nowrap}
#chartLegend .chart-legend-symbol{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 3px;border:1px solid color-mix(in srgb,var(--legend-color,var(--color-text-muted)) 38%,var(--color-border-strong));border-radius:999px;background:color-mix(in srgb,var(--legend-color,var(--color-text-muted)) 7%,var(--color-surface-card));color:var(--legend-color,var(--color-text-muted));font-size:8.5px;font-style:normal;font-weight:var(--font-weight-medium);line-height:1}
@media(max-width:820px){#dentalChart{height:clamp(220px,52vw,330px);min-height:220px}#dentalChart .arch-svg{height:100%;min-height:220px}#chartLegend .chart-legend-line{gap:4px 8px}}
.selection-context-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head head" "value actions" "hint hint";align-items:center;gap:6px 12px;margin:10px 0 0;padding:10px 12px;border:1px solid color-mix(in srgb,var(--color-interaction-tooth-selection) 34%,var(--color-border-default));border-left:3px dashed var(--color-interaction-tooth-selection);border-radius:12px;background:color-mix(in srgb,var(--color-interaction-tooth-selection-subtle) 38%,var(--color-surface-card))}
.selection-context-bar[hidden]{display:none!important}
.selection-context-bar .selected-teeth-head{grid-area:head;display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.selection-context-bar .subsection-title{margin:0;color:var(--color-text-primary);font-size:.9rem;line-height:1.35}
.selection-context-bar .selected-teeth-clear{min-height:36px;padding:6px 10px;font-size:.8rem}
.selection-context-bar .selected-teeth-actions{display:contents}
.selection-context-bar .selected-sites{grid-area:value;min-width:0;min-height:42px;display:flex;align-items:center;padding:8px 11px;border:1px dashed color-mix(in srgb,var(--color-interaction-tooth-selection) 52%,var(--color-border-default));border-radius:10px;background:var(--color-surface-card);color:var(--color-text-primary);font-weight:var(--font-weight-medium);overflow-wrap:anywhere}
.selection-context-bar #assignTeethBtn{grid-area:actions;min-height:42px;margin:0;white-space:nowrap}
.selection-context-bar #assignTeethBtn:disabled{cursor:default}
.selection-context-hint{grid-area:hint;display:block;min-height:17px;color:var(--color-text-secondary);font-size:11px;line-height:1.45}
.selection-context-bar[data-assignment-state="complete"] .selection-context-hint{color:var(--color-planning-target-teeth);font-weight:var(--font-weight-medium)}
.selection-context-bar[data-assignment-state="complete"] #assignTeethBtn{border-color:color-mix(in srgb,var(--color-planning-target-teeth) 28%,var(--color-border-default));color:var(--color-planning-target-teeth)}
.selection-context-bar[data-assignment-state="partial"] #assignTeethBtn{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-action-primary) 16%,transparent)}
@media(max-width:920px) and (min-width:701px){.selection-context-bar{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "value" "actions" "hint"}.selection-context-bar #assignTeethBtn{width:100%;white-space:normal}}
@media print{.selection-context-bar{display:none!important}}