:host { display: block; color: #334155; font: 12px/1.45 Inter, -apple-system, BlinkMacSystemFont, sans-serif; }
* { box-sizing: border-box; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, .grid:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
p { margin: 0; }
.controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 0 10px; }
.period { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-right: auto; }
.period > strong { color: #1e293b; font-size: 13px; font-weight: 600; }
.previewBadge { padding: 2px 6px; border: 1px solid #dbe5ed; border-radius: 4px; background: #f1f5f9; color: #64748b; font-size: 10px; }
.controls input, .controls select { min-height: 34px; padding: 6px 8px; border: 1px solid #dce3ec; border-radius: 5px; background: white; color: #334155; }
.controls input { width: min(180px,100%); }
.sourceDetails { position: relative; }
.sourceDetails summary { cursor: pointer; padding: 7px 9px; color: #815c30; font-size: 11px; white-space: nowrap; border: 1px solid #e3e8ec; border-radius: 5px; background: white; }
.sourcePanel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 10; width: min(380px,85vw); max-height: 65vh; overflow: auto; padding: 16px; background: white; border: 1px solid #dce3ec; border-radius: 8px; box-shadow: 0 8px 24px #0f172a1a; }
.sourcePanel > strong { display: block; overflow-wrap: anywhere; font-size: 12px; margin-bottom: 8px; }
.sourcePanel > p { color: #64748b; font-size: 11px; }
.stats { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px 14px; margin: 12px 0; padding: 12px 0; border-block: 1px solid #edf2f7; }
.stats > div { display: flex; justify-content: space-between; gap: 6px; }
.stats span { color: #64748b; font-size: 11px; }
.stats strong { color: #0f172a; font-size: 12px; }
.grid { max-height: max(300px,calc(100dvh - 250px)); overflow: auto; border: 1px solid #dce3ec; border-radius: 8px; background: white; }
table { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; min-width: calc(300px + var(--roster-days,15) * 64px); }
th, td { border-right: 1px solid #edf2f7; border-bottom: 1px solid #edf2f7; }
thead th { position: sticky; top: 0; z-index: 10; padding: 6px 4px; background: #f8fafc; color: #475569; text-align: center; font-size: 10px; }
thead th span, thead th strong, thead th small { display: block; }
thead th strong { color: #0f172a; font-size: 14px; }
thead th small { color: #94a3b8; font-weight: 400; }
tbody tr:hover > td, tbody tr:hover > th { background: #f8fafc; }
tbody td { position: relative; z-index: 1; height: 42px; padding: 3px; text-align: center; }
.personCol { position: sticky; left: 0; z-index: 2; width: 170px; background: white; text-align: left; }
thead .personCol { z-index: 12; background: #f8fafc; }
.idCol { position: sticky; left: 170px; z-index: 2; width: 130px; background: white; font-size: 11px; text-align: center; white-space: nowrap; }
thead .idCol { z-index: 12; background: #f8fafc; }
tbody .personCol button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 5px; padding: 8px; border: 0; background: transparent; color: #1e293b; text-align: left; }
tbody .personCol button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review { padding: 2px 4px; border-radius: 3px; color: #92400e; background: #fef3c7; font-size: 9px; }
.focused { box-shadow: inset 2px 0 0 #60a5fa, inset -2px 0 0 #60a5fa; }
thead th.focused, thead th.focused.weekend { background: #eff6ff; }
thead th.focused small { color: #1d4ed8; font-weight: 700; }
.duty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 34px; padding: 3px; border-radius: 4px; font-size: 10px; line-height: 1.15; }
.duty strong { font-size: 11px; }
.duty small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.duty.day { color: #165c49; background: #dbf4ea; }
.duty.night { color: #3730a3; background: #e5e5ff; }
.duty.standby { color: #92400e; background: #fef3c7; }
.duty.vacation { color: #9d174d; background: #fce7f3; }
.duty.sick { color: #b91c1c; background: #fee2e2; }
.duty.off { color: #94a3b8; background: #f8fafc; }
.duty.unknown { color: #b91c1c; background: #fee2e2; }
.detailRow td { padding: 10px; background: #f8fafc; text-align: left; }
.detailRow div { display: flex; flex-wrap: wrap; gap: 7px 16px; }
.detailRow span, .detailRow em { color: #475569; }
.detailRow em { color: #b45309; font-style: normal; }
.rosterFooter { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 8px 0; color: #64748b; font-size: 11px; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; color: #64748b; font-size: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 10px; height: 10px; border-radius: 2px; }
.legend .day { background: #a7e6ca; }.legend .night { background: #c7c7ff; }.legend .standby { background: #f5d68b; }.legend .vacation { background: #f7bddb; }.legend .off { background: #e2e8f0; }.legend .unknown { background: #fecaca; }
.issues { padding-bottom: 10px; color: #8a5a25; font-size: 11px; }
.issues p + p { margin-top: 3px; }
.empty { padding: 36px; color: #64748b; text-align: center; }
@media (max-width: 900px) { .period { width: 100%; }.sourceDetails { margin-left: auto; } }
@media (max-width: 600px) { .personCol { width: 145px; }.idCol { left: 145px; }table { min-width: calc(275px + var(--roster-days,15) * 64px); }.grid { max-height: 60dvh; }.controls input { flex: 1; min-width: 150px; } }
/* Editable roster: the grid stays central in both week and month modes. */
.controls { gap: 7px; }
.stationLabel { padding: 2px 5px; border-radius: 4px; background: #e9f4ed; color: #28684e; font-size: 10px; font-weight: 700; }
.period { margin-right: 4px; }
.rangeControls,.modeSwitch { display: flex; align-items: center; gap: 2px; }
.rangeControls button,.modeSwitch button { min-height: 32px; padding: 4px 8px; border: 1px solid #dce3ec; border-radius: 5px; background: white; color: #42576a; }
.rangeControls #period-title { min-width: 154px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.modeSwitch { padding: 2px; border-radius: 6px; background: #edf3f0; }
.modeSwitch button { border: 0; background: transparent; font-size: 11px; min-height: 28px; }
.modeSwitch button[aria-pressed="true"] { background: white; color: #165d48; box-shadow: 0 1px 3px #12362d20; }
.controls #jump-date { width: 116px; font-size: 11px; }
.controls #search { width: 140px; }
.controls #status-filter { min-width: 108px; }
.sourceDetails { margin-left: auto; }
.saveStatus { margin: 0 0 8px; color: #176e5b; font-size: 11px; }
.saveStatus[data-error="true"] { color: #b91c1c; }
.saveWorkbook { width: 100%; margin-bottom: 8px; padding: 9px; border: 1px solid #bedccc; border-radius: 6px; background: #eff8f2; color: #176e5b; font-weight: 600; }
.grid { max-height: max(320px,calc(100dvh - 235px)); }
table { min-width: calc(290px + var(--roster-extra-width,0px) + var(--roster-days,7) * 57px); }
.personCol { width: 160px; }
.idCol { left: 160px; width: 130px; }
thead th { padding: 5px 2px; }
thead th.weekend { background: #f2f5f7; }
tbody td { height: 39px; padding: 2px; }
tbody .personCol button { min-height: 38px; padding: 6px; }

/* Large monitors: keep the employee roster at workspace height and let the
   grid itself scroll vertically instead of shrinking to visible rows. */
@media (min-width: 1200px) {
  .grid {
    height: calc(100dvh - 235px);
    max-height: none;
  }
}

.duty { width: 100%; min-height: 34px; border: 1px solid transparent; cursor: pointer; }
.duty:hover { border-color: #4b9778; filter: brightness(.97); }
.duty:focus-visible { outline: 2px solid #2563eb; outline-offset: 0; }
.duty.edited { box-shadow: inset 0 -2px #36886d; }
.duty.off:has(strong:first-child) { background: #f8fafc; }
.duty.off strong { font-size: 10px; }
.editDrawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(430px,100vw); height: 100dvh; max-height: 100dvh; padding: 0; border: 0; background: #fff; color: #243746; box-shadow: -12px 0 40px #13283727; overflow: auto; }
.editDrawer::backdrop { background: #0b253e73; }
.drawerTop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 18px 20px; border-bottom: 1px solid #e2e8f0; }
.drawerTop small { color: #718089; font-size: 9px; letter-spacing: .08em; }
.drawerTop h2 { margin: 3px 0; font-size: 19px; }
.drawerTop p { color: #64748b; font-size: 11px; }
.drawerTop button { border: 0; background: transparent; font-size: 23px; line-height: 1; color: #64748b; }
.drawerTopActions { display: flex; align-items: center; gap: 6px; flex: none; }
.drawerTop .editEngineerShortcut { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: #176459; cursor: pointer; }
.drawerTop .editEngineerShortcut:hover:not(:disabled),.drawerTop .editEngineerShortcut:focus-visible { background: #e6f3ee; }
.drawerTop .editEngineerShortcut:disabled { color: #a7b4bd; cursor: not-allowed; }
.editEngineerShortcut svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.drawerBody { padding: 18px 20px 28px; }
.personInfo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 15px; padding-bottom: 15px; border-bottom: 1px solid #e2e8f0; }
.personInfo div { display: flex; flex-direction: column; gap: 2px; }
.personInfo span { color: #718089; font-size: 10px; }
.personInfo strong { color: #243746; font-size: 11px; overflow-wrap: anywhere; }
.personInfo .personQualificationDetails { grid-column: 1 / -1; }
.personQualificationDetails summary { color: #176459; font-size: 11px; font-weight: 700; cursor: pointer; }
.personQualificationDetails ul { max-height: 170px; overflow: auto; margin: 8px 0 0; padding: 8px 10px 8px 27px; border-radius: 8px; background: #f4f8f6; color: #344c55; font-size: 11px; line-height: 1.5; }
.personIssues p { padding: 7px 0; color: #9a5c18; font-size: 11px; border-bottom: 1px solid #f3e6d4; }
.drawerBody form { display: flex; flex-direction: column; gap: 11px; margin-top: 20px; padding-top: 18px; border-top: 1px solid #e2e8f0; }
.drawerBody form:first-of-type { border-top: 0; padding-top: 0; }
.drawerBody h3 { margin: 0; font-size: 13px; }
.drawerBody label { display: flex; flex-direction: column; gap: 5px; color: #526675; font-size: 11px; }
.drawerBody input,.drawerBody select { width: 100%; min-height: 35px; padding: 6px 8px; border: 1px solid #dce3ec; border-radius: 5px; background: white; color: #334155; }
.drawerBody .formPair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.drawerBody .muted { color: #718089; font-size: 11px; line-height: 1.45; }
.drawerBody form button { min-height: 36px; padding: 7px 10px; border: 1px solid #b8d3c5; border-radius: 5px; background: #eff8f2; color: #176e5b; font-weight: 600; }
.drawerBody form button.primary { background: #164b3f; border-color: #164b3f; color: white; }
.drawerBody form button:disabled { opacity: .5; cursor: not-allowed; }
@media(max-width:900px) { .period { width: auto; }.sourceDetails { margin-left: 0; }.controls #search { flex: 1; min-width: 125px; } }
@media(max-width:600px) { .personCol { width: 140px; }.idCol { left: 140px; } table { min-width: calc(270px + var(--roster-extra-width,0px) + var(--roster-days,7) * 56px); }.grid { max-height: 62dvh; }.rangeControls #period-title { min-width: 135px; } }
.publishTrigger { min-height: 34px; padding: 6px 10px; border: 1px solid #165d48; border-radius: 5px; background: #165d48; color: white; font-size: 11px; font-weight: 600; white-space: nowrap; }
.publishDrawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(480px,100vw); height: 100dvh; max-height: 100dvh; padding: 0; border: 0; background: white; color: #243746; box-shadow: -12px 0 40px #13283727; overflow: auto; }
.publishDrawer::backdrop { background: #0b253e73; }
.pilotNotice { padding: 10px 12px; border: 1px solid #d6e7dd; border-radius: 6px; background: #eff8f2; color: #22684d; font-size: 11px; }
.publishSummary { margin: 16px 0 10px; color: #334155; font-size: 12px; font-weight: 600; }
.publishDrawer .drawerBody { display: flex; flex-direction: column; height: calc(100dvh - 104px); overflow: hidden; }
.publishPeople { flex: 1; min-height: 0; overflow: auto; }
.personBrief { border-bottom: 1px solid #e2e8f0; }
.personBrief summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 2px; cursor: pointer; }
.personBrief summary strong { color: #1e293b; }
.personBrief summary span { color: #64748b; font-size: 10px; }
.personBrief pre { margin: 0 0 12px; padding: 10px; border-radius: 5px; background: #f8fafc; color: #334155; font: 11px/1.5 Inter, -apple-system, BlinkMacSystemFont, sans-serif; white-space: pre-wrap; overflow-wrap: anywhere; }
.publicationEmpty { padding: 16px 0; color: #64748b; }
#publish-blocked { flex: none; max-height: 22dvh; margin: 8px 0; overflow: auto; }
#publish-blocked h3 { margin: 0 0 7px; color: #97571b; font-size: 12px; }
#publish-blocked p { padding: 5px 0; color: #835b32; font-size: 11px; }
.recordPublication { flex: none; width: 100%; min-height: 38px; margin-top: 8px; border: 1px solid #165d48; border-radius: 5px; background: #165d48; color: white; font-weight: 600; }
.recordPublication:disabled { opacity: .5; cursor: not-allowed; }
.publishTrigger[data-state="pending"] { border-color: #bd7b20; background: #f9e1b3; color: #80520d; }
.publishTrigger[data-state="published"] { border-color: #b8d6c7; background: #eaf5ed; color: #21644a; }
.publishTrigger[data-state="review"],.publishTrigger[data-state="unsaved"] { border-color: #e3d9c6; background: #f6f2e8; color: #836435; }
.publishTrigger[data-state="checking"],.publishTrigger[data-state="error"] { border-color: #dce3ec; background: #f8fafc; color: #64748b; }
.publishTrigger:disabled { cursor: not-allowed; }
.activateTrigger { min-height: 34px; padding: 6px 10px; border: 1px solid #9abdaa; border-radius: 5px; background: #edf7f0; color: #165d48; font-size: 11px; font-weight: 600; white-space: nowrap; }
.activateTrigger:disabled { opacity: .5; cursor: not-allowed; }
.planningStatus { margin: -2px 0 9px; padding: 7px 10px; border: 1px solid #b8d6c7; border-radius: 5px; background: #eaf5ed; color: #21644a; font-size: 11px; font-weight: 600; }
.activationDrawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(500px,100vw); height: 100dvh; max-height: 100dvh; padding: 0; border: 0; background: white; color: #243746; box-shadow: -12px 0 40px #13283727; overflow: auto; }
.activationDrawer::backdrop { background: #0b253e73; }
.activationDrawer .drawerBody { flex: 1; min-height: 0; overflow-y: auto; max-height: none; }
.activationDrawer .confirmPolicy { flex-direction: row; align-items: flex-start; }
.activationDrawer .confirmPolicy input { width: auto; min-height: auto; margin: 2px 4px 0 0; }
#activation-result { padding: 12px 0; color: #385467; line-height: 1.5; }
#activation-result ul { max-height: 25dvh; overflow: auto; padding-left: 20px; color: #9a5c18; }
.activationFooter { flex: none; padding: 10px 20px 20px; border-top: 1px solid #dce3ec; background: white; }
.historyTrigger { min-height: 34px; padding: 6px 10px; border: 1px solid #dce3ec; border-radius: 5px; background: white; color: #42576a; font-size: 11px; }
.historyDrawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(500px,100vw); height: 100dvh; max-height: 100dvh; padding: 0; border: 0; background: white; color: #243746; box-shadow: -12px 0 40px #13283727; overflow: auto; }
.historyDrawer::backdrop { background: #0b253e73; }
.historyDrawer .drawerBody { padding-top: 4px; }
.scenarioWithdrawDrawer form { display: grid; gap: 14px; padding: 18px; }
.scenarioWithdrawDrawer form label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; }
.scenarioWithdrawDrawer form input,.scenarioWithdrawDrawer form textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: 7px; padding: 9px; font: inherit; }
.scenarioWithdrawDrawer form textarea { min-height: 90px; resize: vertical; }
.scenarioWithdrawDrawer #scenario-withdraw-status { padding: 0 18px; color: #a74425; }
.historyItem { border-bottom: 1px solid #e2e8f0; }
.historyItem summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 0; cursor: pointer; }
.historyItem summary span { display: flex; flex-direction: column; min-width: 0; }
.historyItem summary strong { font-size: 12px; }
.historyItem summary small,.historyItem time { color: #64748b; font-size: 10px; overflow-wrap: anywhere; }
.historyItem time { white-space: nowrap; }
.historyItem ul { margin: 0 0 12px; padding: 8px 8px 8px 26px; max-height: 38dvh; overflow: auto; border-radius: 5px; background: #f8fafc; color: #475569; font-size: 11px; }
.historyItem li + li { margin-top: 4px; }
.historyItem p { margin: 0 0 10px; color: #64748b; font-size: 11px; }
.olderHistory { display: block; width: 100%; margin: 16px 0; padding: 8px; border: 1px solid #dce3ec; border-radius: 5px; background: white; color: #42576a; }
.olderHistory[hidden] { display: none; }

/* Put roster identity and actions above the navigation so the duty grid leads. */
.rosterTopbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 10px; }
.rosterIdentity,.rosterActions { display: flex; align-items: center; gap: 9px; min-width: 0; }
.rosterIdentity h2 { margin: 0; color: #172c35; font-size: 15px; font-weight: 650; white-space: nowrap; }
.rosterCount { padding: 3px 7px; border-radius: 5px; background: #eef5f1; color: #27614a; font-size: 11px; font-weight: 600; white-space: nowrap; }
.rosterState { padding: 3px 7px; border-radius: 5px; background: #eaf5ed; color: #21644a; font-size: 10px; white-space: nowrap; }
.rosterState[data-state="preview"] { background: #fff4dc; color: #8a5a19; }
.rosterState[hidden] { display: none; }
.rosterTopbar .sourceDetails { margin: 0; }
.rosterTopbar .sourceDetails summary { display: flex; align-items: center; justify-content: center; min-width: 27px; min-height: 27px; padding: 2px 5px; border: 0; background: transparent; color: #6d8179; font-size: 15px; line-height: 1; }
.rosterTopbar .sourceDetails summary:hover { background: #edf5f0; color: #176e5b; }
.rosterTopbar .sourcePanel { left: 0; right: auto; }
.sourceCount { display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; border-radius: 8px; background: #fff1d6; color: #8a5a19; font-size: 9px; }
.importReview { margin: 8px 0 12px; padding: 12px 14px; border: 1px solid #d3e3db; border-radius: 8px; background: #f8fcf9; color: #28473b; font-size: 12px; }
.importReviewHeading, .importReviewActions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.importReviewHeading span { color: #657b70; overflow-wrap: anywhere; }
.importReview p { margin: 7px 0 0; }
.importReview .importNotice { color: #95611e; }
.importReviewActions { margin-top: 12px; }
.importReviewActions label { display: flex; align-items: center; gap: 8px; }
.importReviewActions button:disabled { opacity: .5; cursor: not-allowed; }
.sourcePanel #review-issues { margin-top: 10px; color: #176e5b; border-color: #bdd9ce; }
.rosterActions { flex-shrink: 0; }
.rosterActions .historyTrigger { border-color: transparent; color: #58716a; }
.rosterActions .historyTrigger:hover { background: #f1f7f3; }
.controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 9px; }
.rangeControls { flex-shrink: 0; }
.rangeControls .periodTitle { display: flex; align-items: center; justify-content: center; position: relative; min-width: 164px; min-height: 32px; padding: 4px 8px; border: 1px solid #dce3ec; border-radius: 5px; background: #fff; color: #334155; font-size: 11px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.rangeControls .periodTitle:hover { border-color: #9cc6ae; background: #f7fbf8; }
.rangeControls #jump-date { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; margin: 0; opacity: 0; cursor: pointer; }
.rosterFilters { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; }
.controls .rosterFilters #search { width: 190px; min-width: 125px; }
.controls .rosterFilters #status-filter { min-width: 118px; }
.dutyFilter { position: relative; flex: none; min-width: 126px; z-index: 12; }
.dutyFilter > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; padding: 6px 9px; border: 1px solid #dce3ec; border-radius: 5px; background: #fff; color: #334155; cursor: pointer; font-size: 11px; list-style: none; white-space: nowrap; }
.dutyFilter > summary::-webkit-details-marker { display: none; }
.dutyFilter > summary::after { content: '⌄'; color: #64748b; font-size: 14px; line-height: 1; }
.dutyFilter[open] > summary { border-color: #78aa92; box-shadow: 0 0 0 2px #dcefe4; }
.dutyFilterMenu { position: absolute; top: calc(100% + 5px); right: 0; min-width: 190px; max-height: min(330px, 60dvh); overflow: auto; padding: 5px; border: 1px solid #dce3ec; border-radius: 7px; background: #fff; box-shadow: 0 10px 28px #0f172a24; }
.dutyFilterHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 8px; color: #64748b; font-size: 10px; }
.dutyFilterHead button { border: 0; background: none; color: #176e5b; font-weight: 600; cursor: pointer; }
.dutyFilterMenu label { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 5px; color: #334155; cursor: pointer; font-size: 11px; }
.dutyFilterMenu label:hover { background: #f1f7f3; }
.controls .dutyFilterMenu input[type="checkbox"] { flex: none; width: 14px; min-width: 14px; height: 14px; min-height: 14px; margin: 0; padding: 0; accent-color: #176e5b; }
.columnPicker { position: relative; z-index: 13; flex: none; }
.columnPicker > summary { display: flex; align-items: center; gap: 9px; min-height: 34px; padding: 6px 9px; border: 1px solid #dce3ec; border-radius: 5px; background: white; color: #334155; cursor: pointer; font-size: 11px; list-style: none; white-space: nowrap; }
.columnPicker > summary::-webkit-details-marker { display: none; }
.columnPicker > summary::after { content: '⌄'; color: #64748b; font-size: 14px; line-height: 1; }
.columnPicker[open] > summary { border-color: #78aa92; box-shadow: 0 0 0 2px #dcefe4; }
.columnPickerMenu { position: absolute; top: calc(100% + 5px); right: 0; width: min(440px, 88vw); max-height: min(530px, 70dvh); overflow: auto; padding: 12px; border: 1px solid #dce3ec; border-radius: 7px; background: white; box-shadow: 0 10px 28px #0f172a24; }
.columnPickerHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.columnPickerHead strong { color: #334155; font-size: 11px; }
.columnPickerHead button { border: 0; background: none; color: #176e5b; font-weight: 600; font-size: 10px; }
.columnPickerMenu fieldset { margin: 0; padding: 8px 0; border: 0; border-top: 1px solid #edf2f1; }
.columnPickerMenu legend { padding: 0 4px; color: #718089; font-size: 10px; font-weight: 600; }
.columnPickerChoices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
.columnPickerChoices label { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 5px; border-radius: 4px; cursor: pointer; font-size: 10px; }
.columnPickerChoices label:hover { background: #f1f7f3; }
.controls .columnPickerChoices input[type="checkbox"] { flex: none; width: 14px; min-width: 14px; height: 14px; min-height: 14px; margin: 0; padding: 0; accent-color: #176e5b; }
.columnPickerMenu p { padding-top: 8px; border-top: 1px solid #edf2f1; color: #718089; font-size: 10px; }
.rosterExtraCol { padding-inline: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
thead .rosterExtraCol { color: #58716a; font-size: 10px; }
tbody .rosterExtraCol span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rosterExtraCol[data-state="listed"] { color: #176e5b; background: #eef8f2; font-weight: 700; }
.rosterExtraCol[data-state="unknown"] { color: #9a5c18; background: #fff7e6; font-weight: 700; }
.rosterExtraCol[data-state="absent"] { color: #a9b6b5; }
.personCell { display: flex; align-items: center; gap: 7px; min-width: 0; }
.personCell > input[type="checkbox"] { flex: none; width: 14px; height: 14px; margin: 0 0 0 6px; accent-color: #176e5b; cursor: pointer; }
.personCell > button { flex: 1; min-width: 0; }
.bulkBar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 0 0 8px; padding: 7px 9px; border: 1px solid #cde3d5; border-radius: 6px; background: #f3faf5; }
.bulkBar[hidden] { display: none; }
.bulkBar strong { margin-right: 4px; color: #17634c; font-size: 11px; }
.bulkBar button { min-height: 27px; padding: 4px 8px; border: 1px solid #bad7c7; border-radius: 5px; background: white; color: #17634c; font-size: 10px; font-weight: 600; }
.bulkBar button:last-child { margin-left: auto; border-color: transparent; background: transparent; color: #64748b; }
.bulkBar button:disabled { opacity: .5; cursor: not-allowed; }
.bulkDrawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(500px,100vw); height: 100dvh; max-height: 100dvh; padding: 0; border: 0; background: #fff; color: #243746; box-shadow: -12px 0 40px #13283727; overflow: auto; }
.bulkDrawer::backdrop { background: #0b253e73; }
.bulkDrawer .drawerBody { flex: 1; min-height: 0; overflow-y: auto; max-height: none; }
.bulkDrawer .drawerBody form { margin-top: 0; padding-top: 0; border: 0; }
.bulkDrawer .drawerBody label[hidden] { display: none; }
.bulkResult { margin-top: 14px; color: #475569; font-size: 11px; }
.bulkResult strong { color: #17634c; font-size: 12px; }
.bulkResult p { margin: 7px 0; }
.bulkResult .bulkWarning { padding: 8px; border-radius: 5px; background: #fff5df; color: #8a5a19; }
.bulkResult ul { max-height: 33dvh; margin: 10px 0 0; padding: 8px 8px 8px 26px; overflow: auto; border-radius: 5px; background: #f8fafc; }
.bulkResult li + li { margin-top: 4px; }
.bulkFooter { flex: none; padding: 10px 20px 20px; border-top: 1px solid #e2e8f0; background: #fff; }
.bulkFooter .recordPublication { margin: 0; }
.activationDrawer[open],.bulkDrawer[open] { display: flex; flex-direction: column; overflow: hidden; }
.activationDrawer .drawerTop,.bulkDrawer .drawerTop { flex: none; }
.activationFooter[hidden],.bulkFooter[hidden] { display: none; }
.footerHint { display: block; margin-top: 6px; color: #718089; font-size: 10px; text-align: center; }
.footerHint[hidden] { display: none; }
@media (max-width: 1050px) { .rosterTopbar { align-items: flex-start; flex-wrap: wrap; }.rosterActions { margin-left: auto; }.rosterFilters { flex: 1 1 280px; justify-content: flex-end; } }
@media (max-width: 600px) { .rosterTopbar { gap: 7px; }.rosterIdentity { flex-wrap: wrap; }.rosterActions { width: 100%; justify-content: flex-end; gap: 5px; }.rosterActions button { font-size: 10px; padding: 6px; }.controls .rosterFilters { flex: 1 1 100%; }.controls .rosterFilters #search { flex: 1; width: auto; }.controls .rosterFilters #status-filter { flex: none; min-width: 100px; }.rangeControls .periodTitle { min-width: 150px; } }
/* Rosters reference: compact weekly duty matrix and contextual review rail. */
:host{--roster-bg:#f3f5f9;--roster-surface:#fff;--roster-soft:#f6f8fc;--roster-line:#e2e8f1;--roster-text:#0f1b33;--roster-muted:#7584a0;--roster-primary:#0369a1;color:var(--roster-text);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--roster-bg);padding:16px;border:1px solid var(--roster-line);border-radius:12px}button,input,select,summary{font-family:inherit}.rosterTopbar{padding:0 0 16px;gap:16px}.rosterIdentity h2{font-size:18px;color:var(--roster-text);font-weight:700}.rosterCount{background:#e9eef6;color:#47556f;border-radius:6px;font-size:12px}.rosterState{border-radius:999px}.rosterActions button{border-radius:8px;min-height:36px;padding:8px 12px;font-size:12px}.activateTrigger{color:#0369a1;border-color:#0369a133;background:#0369a110}.publishTrigger{background:#0369a1;color:white;border-color:#0369a1}.controls{padding:12px;background:white;border:1px solid var(--roster-line);border-radius:10px;margin-bottom:14px;gap:10px}.controls button,.controls input,.controls select,.controls summary,.rangeControls .periodTitle{border-radius:8px;border-color:#cbd5e4;font-size:12px;color:#47556f}.modeSwitch{background:#e9eef6;border:0;border-radius:8px;padding:3px;gap:2px}.modeSwitch button{border:0;background:transparent;font-weight:600}.modeSwitch button[aria-pressed=true]{background:#fff;color:#0f1b33;box-shadow:0 1px 3px #0f1b3324}.rosterBoard{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 255px;gap:16px;align-items:start}.grid{border:1px solid var(--roster-line);border-radius:12px;background:#fff;max-height:calc(100dvh - 325px);min-height:260px;scrollbar-color:#cbd5e4 transparent;scrollbar-width:thin}table{min-width:calc(350px + var(--roster-extra-width,0px) + var(--roster-days,7)*76px)}th,td{border-right:0;border-bottom:1px solid var(--roster-line)}thead th{z-index:10;background:#f6f8fc;padding:12px 5px;color:#7584a0;font-size:11px;font-weight:600}thead th strong{font-size:15px;color:#0f1b33}thead th small{font-size:9px}tbody td{position:relative;z-index:1;height:62px;padding:7px 5px}.personCol{width:220px;background:white}.idCol{left:220px;width:130px;font-size:11px;color:#7584a0}thead .personCol,thead .idCol{z-index:12;background:#f6f8fc}tbody .personCol button{padding:10px 8px;gap:8px}.personLabel{display:flex;flex-direction:column;gap:4px;min-width:0}.personLabel strong{font-size:12px;font-weight:600;color:#0f1b33}.personLabel small{font-size:10px;color:#7584a0;font-weight:400}.duty{min-height:42px;border-radius:8px;border:1px solid transparent;gap:3px}.duty strong{font-size:11px;font-weight:600}.duty small{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px}.duty.day{background:#0478571a;color:#047857}.duty.night{background:#e9eef6;color:#0f1b33}.duty.standby{background:transparent;border:1.5px dashed #6d28d9;color:#6d28d9}.duty.off{background:transparent;border:1px dashed #cbd5e4;color:#7584a0}.duty.vacation{color:#47556f;border:1px solid #cbd5e4;background:repeating-linear-gradient(45deg,transparent,transparent 5px,#e2e8f1 5px,#e2e8f1 6px)}.duty.sick,.duty.unknown{background:#be123c14;color:#be123c;box-shadow:inset 0 0 0 1px #be123c}.duty.edited{box-shadow:inset 0 -3px #0369a1}.focused{box-shadow:none}thead th.focused,thead th.focused.weekend{background:#0369a112}thead th.focused small{color:#0369a1}td.focused .duty{outline:2px solid #0369a1;outline-offset:1px}.review{background:#b453091a;color:#b45309;border-radius:5px}.periodInspector{background:white;border:1px solid var(--roster-line);border-radius:12px;overflow:hidden}.periodInspector header{padding:18px;border-bottom:1px solid var(--roster-line)}.inspectorEyebrow{font-size:10px;font-weight:600;letter-spacing:1px;color:#7584a0;display:block}.periodInspector header>strong{display:block;font-size:30px;font-weight:700;margin:7px 0}.periodInspector header small{font-size:12px;color:#47556f;font-weight:400}.periodInspector header p{color:#7584a0;font-size:11px}.periodInspector section{padding:16px;border-bottom:1px solid var(--roster-line)}.periodInspector h3{font-size:12px;margin:0 0 12px;font-weight:600;color:#47556f}.periodInspector h3>span{float:right;background:#b453091a;color:#b45309;border-radius:5px;padding:1px 6px}.inspectorStatus{display:flex;align-items:flex-start;gap:9px}.statusDot{width:7px;height:7px;flex-shrink:0;background:#94a3b8;border-radius:50%;margin-top:5px}.statusDot.active{background:#047857}.inspectorStatus strong{font-size:11px;font-weight:600}.inspectorStatus small{display:block;color:#7584a0;font-size:10px;margin-top:4px}.dutyDistribution{display:grid;gap:9px}.dutyDistribution>div{display:grid;grid-template-columns:80px 1fr 25px;align-items:center;gap:8px;font-size:11px;color:#7584a0}.dutyDistribution strong{font-size:11px;text-align:right;color:#47556f}.dutyDistribution i{height:6px;border-radius:4px;background:#e9eef6;overflow:hidden}.dutyDistribution b{display:block;height:100%;background:#94a3b8;border-radius:4px}.dutyDistribution b.day{background:#047857}.dutyDistribution b.night{background:#47556f}.dutyDistribution b.standby{background:#6d28d9}.dutyDistribution b.unknown,.dutyDistribution b.sick{background:#be123c}.reviewPerson{display:flex;flex-direction:column;gap:5px;text-align:left;width:100%;padding:10px;margin:0 0 9px;border:1px solid #b4530933;border-radius:8px;background:#b4530908;color:#47556f}.reviewPerson strong{font-size:11px}.reviewPerson small{font-size:10px;font-weight:400;line-height:1.5}.reviewPerson>span{font-size:10px;color:#0369a1;font-weight:600}.inspectorReview>p,.inspectorFootnote{color:#7584a0;font-size:11px;line-height:1.6}.inspectorFootnote{padding:14px 16px}.reviewAll{border:0;background:transparent;color:#0369a1;font-size:11px;padding:3px}.legend{font-size:11px;gap:14px}.legend .night{background:#94a3b8}.legend .standby{background:transparent;border:1px dashed #6d28d9}.legend .vacation{background:#cbd5e4}.rosterFooter{padding:12px 0 0}.bulkBar{border-color:#0369a133;background:#0369a10a}.drawerTop{background:#f6f8fc}.editDrawer .primary{background:#0369a1;border-color:#0369a1;color:white}.editDrawer input,.editDrawer select{border-radius:8px}.duty:hover{filter:brightness(.97)}
@media(max-width:1400px){.rosterBoard{grid-template-columns:minmax(0,1fr) 220px;gap:12px}.periodInspector section,.periodInspector header{padding:13px}.dutyDistribution>div{grid-template-columns:70px 1fr 22px;gap:5px}}
@media(max-width:1100px){.rosterBoard{grid-template-columns:1fr}.periodInspector{display:grid;grid-template-columns:1fr 1fr}.periodInspector header{border-right:1px solid var(--roster-line)}.periodInspector .inspectorFootnote{grid-column:1/-1}.grid{max-height:65dvh}}
@media(max-width:650px){:host{padding:10px}.periodInspector{grid-template-columns:1fr}.periodInspector header{border-right:0}.personCol{width:175px}.idCol{left:175px;width:120px}table{min-width:calc(295px + var(--roster-extra-width,0px) + var(--roster-days,7)*70px)}.rosterFilters{flex-wrap:wrap}.controls .rosterFilters #search{width:100%;flex-basis:100%}.rosterIdentity h2{font-size:16px}.rosterActions{flex-wrap:wrap}}

.overviewToggleRow{display:none}.periodInspector header{position:relative}.collapseInspector{position:absolute;top:14px;right:14px;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid #cbd5e4;border-radius:6px;background:white;color:#7584a0;padding:0;cursor:pointer}.collapseInspector:hover{background:#f3f5f9;color:#0369a1}.collapseInspector svg{width:14px;height:14px}.showOverviewBtn{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid #cbd5e4;border-radius:7px;background:white;color:#7584a0;padding:0;cursor:pointer;z-index:5}.showOverviewBtn:hover{background:#f3f5f9;color:#0369a1}.showOverviewBtn svg{width:16px;height:16px}.rosterBoard:not(.overviewCollapsed) .showOverviewBtn{display:none}.rosterBoard.overviewCollapsed{grid-template-columns:minmax(0,1fr)}.periodInspector[hidden]{display:none!important}
/* Compact employee navigation, matching the light roster reference. */
.periodNavigation{display:flex;align-items:center;gap:12px;margin:12px 0}
.controls{gap:12px;flex-wrap:wrap;padding:10px 12px}
.staffGroups{display:flex;gap:3px;align-items:center;background:#e9eef6;border-radius:9px;padding:4px}
.staffGroups button{display:flex;align-items:center;gap:7px;border:0;background:transparent;color:#47556f;padding:8px 10px;border-radius:6px;font:500 12px Inter,system-ui,sans-serif;white-space:nowrap;cursor:pointer}
.staffGroups button[aria-pressed=true]{background:#fff;color:#0f1b33;box-shadow:0 1px 3px #0f1b3324;font-weight:600}
.staffGroups button span{font-size:10px;color:#7584a0}
.rosterFilters{margin-left:auto}
.profileAvatar{position:relative;display:inline-flex;flex:none;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#e0eaf3;color:#0369a1;font-size:11px;font-weight:600;overflow:hidden}
.profileAvatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#e0eaf3}
.personCell button{display:flex;align-items:center;gap:9px;min-width:0}
.personLabel{min-width:0;text-align:left}
.personCol{width:250px;min-width:250px}.idCol{left:250px}
.staffGroupRow th{background:#f6f8fc;color:#47556f;text-align:left;padding:9px 14px;font-size:11px;letter-spacing:.03em;border-bottom:1px solid #e2e8f1}
.staffGroupRow th span{position:sticky;left:14px}.staffGroupRow b{margin-left:10px;font-weight:500;color:#7584a0}
.groupEmpty td{padding:13px 16px;color:#7584a0;font-size:12px;background:#fff}
.employeeProfile{grid-column:1/-1;display:flex;align-items:center;gap:12px}.employeeProfile .profileAvatar{width:48px;height:48px;font-size:16px}
@media(max-width:900px){.rosterFilters{margin-left:0;flex:1}.staffGroups{max-width:100%;overflow-x:auto}.controls{align-items:stretch}.periodNavigation{flex-wrap:wrap}}
@media(max-width:650px){.personCol{width:210px;min-width:210px}.idCol{left:210px}.staffGroups button{padding:8px;font-size:11px}}
tbody .personCol button{justify-content:flex-start}.personLabel{flex:1}.personCell .review{flex:none}
.showOverviewBtn{z-index:20}
/* Keep period navigation and actions together; counts live in the group filters. */
:host{padding-top:10px}
.rosterIdentity>h2,.rosterIdentity>#roster-count,.rosterIdentity>#roster-state{display:none}
.rosterTopbar{display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:0;margin:0 0 10px;flex-wrap:wrap}
.rosterTopbar .periodNavigation{margin:0;gap:10px}
.rosterTopbar .rosterIdentity{gap:0;flex:none}
.rosterTopbar .rosterActions{margin-left:auto}
@media(max-width:650px){.rosterTopbar{gap:8px}.rosterTopbar .periodNavigation{flex:1;gap:6px}.rosterTopbar .rosterActions{width:100%;justify-content:flex-end}.rosterTopbar .rosterActions button{min-height:32px;padding:6px 9px}}
/* Single-line weekday/date and compact rows from the roster reference. */
thead th{padding:12px 5px;height:40px}
thead th .dayHeading{display:inline;white-space:nowrap;text-transform:uppercase;font-size:11px;font-weight:600;line-height:16px}
thead th .dayHeading strong{display:inline;font-size:11px;font-weight:600;line-height:inherit;color:#47556f;margin:0}
tbody td{height:52px;padding:5px}
tbody .personCol button{padding:6px 8px}
.duty{min-height:40px}
.staffGroupRow th{padding:7px 14px;background:#fff}
.controls{background:transparent;border:0;padding:0;margin-bottom:12px}
/* Let the roster fill the workspace without an enclosing card border. */
:host{border:0;border-radius:0;padding:8px 0 0}
.grid{max-height:calc(100dvh - 225px)}
@media(max-width:650px){.grid{max-height:calc(100dvh - 285px)}}
/* Keep the matrix and overview independent on desktop. */
@media(min-width:1101px){
  .rosterBoard:not(.overviewCollapsed) .grid{contain:none;align-self:start;max-height:none}
}
.duty .dutyHours{font-size:9px;white-space:nowrap;line-height:1.2;opacity:.85}
.duty .dutyDuration{font-size:9px;line-height:1;opacity:.85}

/* Keep the matrix fluid; the table itself scrolls when a month cannot fit. */
:host,.rosterBoard,.rosterBoard > .grid { width: 100%; min-width: 0; }
/* Respond to the roster's available width, which is smaller than the viewport beside the app sidebar. */
:host{container:roster / inline-size}
.mobileAuthId{display:none}
@container roster (max-width:1200px){
  .rosterBoard:not(.overviewCollapsed){grid-template-columns:minmax(0,1fr)}
  .rosterBoard:not(.overviewCollapsed) .grid{contain:none;align-self:auto;max-height:min(68dvh,700px)}
  .periodInspector{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .periodInspector header{border-right:1px solid var(--roster-line)}
  .periodInspector .inspectorFootnote{grid-column:1/-1}
}
@container roster (max-width:700px){
  .periodInspector{grid-template-columns:minmax(0,1fr)}
  .periodInspector header{border-right:0}
  .personCol{width:150px;min-width:150px}
  .idCol{display:none}
  .mobileAuthId{display:block;font-size:9px;color:#7584a0}
  table{min-width:calc(150px + var(--roster-extra-width,0px) + var(--roster-days,7)*70px)}
  .rosterBoard .grid{max-height:60dvh}
}

/* Final desktop sizing: the roster matrix reaches the bottom of the browser
   workspace. Employee rows remain scrollable inside the matrix. */
@media (min-width:1200px) {
  .rosterBoard .grid {
    contain: none;
    align-self: start;
    height: auto;
    max-height: none;
    overflow: auto;
  }
  .rosterBoard .periodInspector {
    position: sticky;
    top: 16px;
    align-self: start;
    max-height: none;
    overflow: visible;
  }
}