/* Reusable schedules: the row control and the Schedules panel (see schedules.js). */

.sched-layout { display: flex; gap: 16px; align-items: flex-start; }
.sched-table { flex: 1 1 0; min-width: 0; }

.sched-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sched-strip { display: flex; gap: 2px; flex: none; }
.sched-day {
    box-sizing: border-box; width: 18px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--fm-divider); border-radius: 2px; background: #fff; color: var(--fm-text-2);
    font-size: 10px; font-weight: 700; line-height: 1;
}
.sched-day.is-on { background: #006EAF; border-color: #006EAF; color: #fff; }
.sched-day.is-empty { border-style: dashed; border-color: var(--fm-border); }
.sched-select {
    box-sizing: border-box; flex: 1 1 0; min-width: 0; height: 34px; padding: 0 8px;
    border: 1px solid var(--fm-border); border-radius: 2px; background: #fff; font-size: 13px; color: var(--fm-text);
}
.sched-unsaved {
    flex: none; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; border-radius: 2px;
    background: var(--fm-warning-bg); color: #7A5000; font-size: 11px; font-weight: 700;
}
.sched-unsaved[hidden] { display: none; }

.sched-panel {
    flex: none; width: 380px; box-sizing: border-box; padding: 16px; display: flex; flex-direction: column; gap: 12px;
    max-height: calc(100vh - 430px); min-height: 260px; overflow: auto;
    background: var(--fm-panel); border: 1px solid var(--fm-divider); border-radius: 2px;
}
.sched-panelhead { display: flex; align-items: center; gap: 8px; }
.sched-title { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 16px; line-height: 24px; font-weight: 700; }
.fm-sched-toggle {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 0; border: 0; border-radius: 2px;
    background: transparent; color: var(--fm-text); font: inherit; font-weight: 700; text-align: left; cursor: pointer;
}
.fm-sched-toggle:focus-visible { outline: 2px solid #006EAF; outline-offset: 2px; }
.sched-chev { display: flex; flex: none; transition: transform 0.15s; }
.sched-count {
    min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px; background: #EEEEEE; color: var(--fm-text-2); font-size: 12px; font-weight: 700;
}
.sched-body { display: flex; flex-direction: column; gap: 12px; }
.sched-body[hidden] { display: none; }

/* Folded: a slim rail beside the table; the arrow, the name and the schedule count stack in it. */
.sched-panel.is-collapsed { width: 48px; min-height: 0; padding: 8px 0; align-items: center; overflow: visible; gap: 0; }
.sched-panel.is-collapsed .sched-panelhead { flex-direction: column; width: 100%; }
.sched-panel.is-collapsed .sched-title { flex: none; width: 100%; }
.sched-panel.is-collapsed .fm-sched-toggle { flex-direction: column; align-items: center; gap: 10px; padding: 8px 0; }
.sched-panel.is-collapsed .sched-chev { transform: rotate(-90deg); }
.sched-panel.is-collapsed .sched-toggle-text { writing-mode: vertical-rl; }
.sched-panel.is-collapsed .sched-panelhead > .sched-unsaved { display: none; }
.sched-panel.is-collapsed.has-unsaved .fm-sched-toggle::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #E8A317; }
@media (prefers-reduced-motion: reduce) { .sched-chev { transition: none; } }
.sched-lead, .sched-tz, .sched-empty { margin: 0; font-size: 13px; line-height: 20px; }
.sched-empty { color: var(--fm-text-2); }

.sched-card {
    box-sizing: border-box; padding: 12px; display: flex; flex-direction: column; gap: 10px;
    background: #fff; border: 1px solid var(--fm-divider); border-radius: 2px;
}
.sched-name {
    box-sizing: border-box; width: 100%; height: 34px; padding: 0 8px; border: 1px solid transparent; border-radius: 2px;
    font-size: 14px; font-weight: 700; color: var(--fm-text); background: #fff;
}
.sched-name:hover { border-color: var(--fm-divider); }
.fm-daybtns { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.fm-daybtn {
    box-sizing: border-box; height: 40px; border: 1px solid var(--fm-border); border-radius: 2px; background: #fff;
    color: var(--fm-text); font-size: 12px; font-weight: 700; cursor: pointer;
}
.fm-daybtn.is-on { background: #006EAF; border-color: #006EAF; color: #fff; }
.sched-cardrow { display: flex; align-items: center; gap: 10px; }
.sched-time {
    box-sizing: border-box; width: 112px; height: 36px; padding: 0 8px; border: 1px solid var(--fm-border);
    border-radius: 2px; font-size: 14px; color: var(--fm-text);
}
.sched-usage { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--fm-text-2); white-space: nowrap; }
.sched-use:disabled { color: var(--fm-text-3); cursor: not-allowed; }
.sched-cardfoot { justify-content: space-between; }
.sched-new { border-style: dashed; color: var(--fm-link); align-self: stretch; }

.sched-name:focus-visible, .sched-time:focus-visible, .sched-select:focus-visible, .fm-daybtn:focus-visible {
    outline: 2px solid #006EAF; outline-offset: 2px;
}

@media (max-width: 1100px) {
    .sched-layout { flex-direction: column; align-items: stretch; }
    .sched-panel { width: auto; max-height: none; }
    /* Stacked under the table, a folded panel is just a header bar. */
    .sched-panel.is-collapsed { width: auto; padding: 4px 16px; align-items: stretch; }
    .sched-panel.is-collapsed .sched-panelhead { flex-direction: row; }
    .sched-panel.is-collapsed .fm-sched-toggle { flex-direction: row; padding: 4px 0; }
    .sched-panel.is-collapsed .sched-toggle-text { writing-mode: horizontal-tb; }
}