/* food-packaging 固有のスタイル（共通は shared/moai-quickstart.css）。色はすべてトークン経由（ライト/ダーク両対応）。
   週末の網掛けは共通 CSS（.vis-saturday / .vis-sunday → --surface-2）に任せる。 */
#viewTabs { margin-top: 20px; }
.fp-legend { margin-top: 10px; }
#byLineView, #byJobView { margin-top: 14px; }
.vis-item-content { width: 100%; }

/* group labels */
.fp-group { display: flex; flex-direction: column; line-height: 1.35; padding: 2px 0; }
.fp-group b { font-weight: 650; }
.fp-group > span { font-size: 0.78rem; color: var(--ink-2); }
.fp-job-label { font-size: 0.8rem; }

/* timeline items */
.fp-item { overflow: hidden; line-height: 1.3; }
.fp-item b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-item .tag { font-size: 0.66rem; }
.vis-item.cleaning {
    background: var(--warning-bg) !important;
    border-color: var(--warning) !important;
    color: var(--warning) !important;
}
.vis-item.late {
    background: var(--critical-bg) !important;
    border-color: var(--critical) !important;
}
.vis-item.unassigned {
    background: var(--critical-bg) !important;
    border: 1px dashed var(--critical) !important;
    color: var(--critical) !important;
}
.vis-item.vis-background.window-ideal { background: color-mix(in srgb, var(--good) 14%, transparent) !important; }
.vis-item.vis-background.window-max { background: color-mix(in srgb, var(--warning) 16%, transparent) !important; }
.fp-bad { color: var(--critical); font-weight: 600; }
.fp-warn { color: var(--warning); font-weight: 600; }

/* legend keys for the state colors */
.legend i.fp-key { background: var(--surface-2); }
.legend i.fp-key.cleaning { background: var(--warning-bg); box-shadow: inset 3px 0 0 var(--warning); }
.legend i.fp-key.late { background: var(--critical-bg); box-shadow: inset 3px 0 0 var(--critical); }
.legend i.fp-key.unassigned { background: var(--critical-bg); border: 1px dashed var(--critical); }
.legend i.fp-key.ideal { background: color-mix(in srgb, var(--good) 30%, transparent); }
.legend i.fp-key.max { background: color-mix(in srgb, var(--warning) 32%, transparent); }

.lesson-pool .lesson span { font-variant-numeric: tabular-nums; }

/* The standalone vis-timeline bundle injects its own CSS at runtime (after the shared stylesheet), so its
   fixed #4d4d4d label color would win over the shared token without !important. */
.vis-labelset .vis-label { color: var(--ink) !important; }

@media (max-width: 640px) {
    .fp-group > span.muted { display: none; }
    .fp-job-label { font-size: 0.72rem; }
}

/* inactive view: collapsed but still laid out (keeps vis-timeline's width) */
section.view-off { height: 0; overflow: hidden; visibility: hidden; margin: 0 !important; }