:root {
    --ink: #172239; --muted: #667085; --line: #dfe5ec; --soft-line: #edf0f4;
    --paper: #fff; --canvas: #f4f6f8; --navy: #0e2a47; --blue: #0968d8; --blue-dark: #0756b3;
    --blue-soft: #eaf3ff; --cyan: #33b2c9; --green: #18865b; --green-soft: #e8f7f0;
    --amber: #b35c00; --amber-soft: #fff4df; --red: #b42318; --red-soft: #fff0ee;
    --radius: 14px; --shadow: 0 14px 38px rgba(17, 36, 63, .10);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink); background: var(--canvas); font-synthesis: none;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; background: var(--canvas); }
button, input, select, textarea { font: inherit; color: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid rgba(9,104,216,.28); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 200; transform: translateY(-140%); padding: 10px 14px; background: var(--navy); color: white; border-radius: 8px; }
.skip-link:focus { transform: none; }
.app-shell { min-height: 100vh; }
.topbar { min-height: 82px; display: grid; grid-template-columns: 230px 1fr auto; align-items: center; gap: 24px; padding: 14px 32px; color: white; background: var(--navy); border-bottom: 1px solid rgba(255,255,255,.09); }
.brand-lockup { display: flex; align-items: center; gap: 11px; }
.brand-lockup > div { display: flex; flex-direction: column; line-height: 1.05; }
.brand-lockup strong { font-size: 18px; letter-spacing: -.02em; }.brand-lockup span:last-child { color: #9bb1c7; font-size: 11px; text-transform: uppercase; letter-spacing: .11em; margin-top: 5px; }
.brand-mark { width: 39px; height: 39px; display: grid; place-items: center; background: var(--blue); color: white; font-weight: 900; font-size: 21px; border-radius: 7px 14px 7px 14px; }
.facility-heading h1 { margin: 2px 0 0; font-size: 23px; letter-spacing: -.03em; }.facility-heading .eyebrow { color: #a9bed1; }
.eyebrow { color: var(--blue); font-weight: 800; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.topbar-actions { display: flex; align-items: center; gap: 14px; }.topbar .button-quiet { color: white; border-color: #49627b; background: rgba(255,255,255,.04); }
.save-status { color: #c8d5e2; font-size: 12px; white-space: nowrap; }.save-status i { display: inline-block; width: 7px; height: 7px; background: #4fd29b; border-radius: 50%; margin-right: 7px; }
.context-strip { min-height: 66px; padding: 12px 32px; display: flex; gap: 36px; align-items: center; background: #fff; border-bottom: 1px solid var(--line); }
.context-strip > div:not(.context-note) { display: flex; flex-direction: column; gap: 3px; }.context-label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }.context-strip strong { font-size: 13px; }
.context-note { margin-left: auto; color: var(--muted); font-size: 12px; }.context-note span { display: inline-flex; padding: 4px 7px; margin-right: 7px; color: var(--blue-dark); background: var(--blue-soft); border-radius: 5px; font-weight: 700; }
.view-tabs { height: 52px; display: flex; gap: 3px; align-items: end; padding: 0 32px; background: #fff; border-bottom: 1px solid var(--line); }
.view-tab { height: 45px; display: flex; align-items: center; gap: 8px; padding: 0 17px; color: var(--muted); background: transparent; border: 0; border-bottom: 3px solid transparent; font-weight: 700; font-size: 13px; }
.view-tab b { min-width: 24px; padding: 2px 6px; color: var(--muted); background: #edf0f3; border-radius: 12px; font-size: 10px; }
.view-tab.active { color: var(--blue); border-bottom-color: var(--blue); }.view-tab.active b { color: var(--blue); background: var(--blue-soft); }
.view { display: none; }.view.active { display: block; }
.board-toolbar, .section-heading { min-height: 116px; padding: 25px 32px 20px; display: flex; justify-content: space-between; align-items: end; gap: 30px; }
h2 { margin: 3px 0 4px; font-size: 24px; letter-spacing: -.035em; line-height: 1.15; } h3 { margin: 3px 0; font-size: 16px; letter-spacing: -.015em; }.board-toolbar p, .section-heading p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.button { min-height: 39px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; background: white; font-weight: 750; font-size: 12px; white-space: nowrap; }
.button:hover { border-color: #b8c4d1; }.button-primary { color: white; background: var(--blue); border-color: var(--blue); box-shadow: 0 4px 12px rgba(9,104,216,.18); }.button-primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }.button-danger { color: var(--red); background: var(--red-soft); border-color: #ffd0ca; }.button-small { min-height: 30px; padding: 0 9px; }
.board-grid { display: grid; grid-template-columns: 305px minmax(0, 1fr); gap: 16px; padding: 0 32px 32px; align-items: start; }
.action-library { position: sticky; top: 12px; height: calc(100vh - 246px); min-height: 510px; overflow: hidden; display: flex; flex-direction: column; background: white; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 3px 10px rgba(17,36,63,.04); }
.panel-heading { min-height: 68px; padding: 13px 15px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--soft-line); }.count-pill { min-width: 30px; padding: 4px 8px; text-align: center; color: var(--blue-dark); background: var(--blue-soft); border-radius: 12px; font-weight: 800; font-size: 11px; }
.search-control { position: relative; display: block; margin: 12px; }.search-control svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; fill: none; stroke: #8290a3; stroke-width: 2; stroke-linecap: round; }.search-control input { width: 100%; height: 39px; padding: 0 10px 0 35px; background: #f8fafb; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; }
.library-hint { margin: -2px 12px 8px; color: #8290a3; font-size: 10px; }.library-hint span { color: var(--blue); }.action-list { padding: 0 8px 12px; overflow: auto; }
.action-item { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 9px; align-items: center; padding: 10px 8px; margin-bottom: 3px; border: 1px solid transparent; border-radius: 9px; background: #fff; cursor: grab; }.action-item:hover { background: #f7faff; border-color: #d8e8fb; }.action-item.dragging { opacity: .45; }.action-icon { width: 30px; height: 30px; display: grid; place-items: center; color: var(--blue-dark); background: var(--blue-soft); border-radius: 7px; font-weight: 900; font-size: 11px; }
.action-copy { min-width: 0; }.action-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }.action-copy span { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }.add-action { width: 27px; height: 27px; display: grid; place-items: center; color: var(--blue); background: transparent; border: 1px solid #d6e5f7; border-radius: 6px; font-weight: 900; }.add-action:hover { color: white; background: var(--blue); }
.shift-workspace { min-width: 0; }.shift-legend { min-height: 42px; display: flex; gap: 16px; align-items: center; padding: 0 4px; color: var(--muted); font-size: 10px; }.legend-dot { width: 7px; height: 7px; display: inline-block; margin-right: 5px; border-radius: 50%; }.legend-dot.daily { background: var(--green); }.legend-dot.periodic { background: var(--blue); }.legend-dot.confirm { background: #e28a2b; }.text-button { margin-left: auto; padding: 4px; color: var(--blue); background: transparent; border: 0; font-size: 11px; font-weight: 750; }
.shift-columns { display: grid; grid-template-columns: repeat(3, minmax(230px,1fr)); gap: 12px; }
.shift-column { min-width: 0; min-height: 530px; padding: 0 9px 12px; background: #eef1f4; border: 1px solid #dce2e9; border-radius: var(--radius); transition: .15s ease; }.shift-column.drag-over { background: #e5f0fd; border-color: var(--blue); box-shadow: inset 0 0 0 2px rgba(9,104,216,.12); }
.shift-header { position: sticky; top: 0; z-index: 3; margin: 0 -9px 9px; padding: 14px 12px 11px; background: rgba(238,241,244,.96); border-radius: var(--radius) var(--radius) 0 0; border-bottom: 1px solid #dae1e8; backdrop-filter: blur(8px); }.shift-header-top { display: flex; justify-content: space-between; gap: 8px; }.shift-header h3 { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; }.shift-glyph { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 7px; background: var(--navy); color: white; font-size: 11px; }.shift-time { margin: 5px 0 0 30px; color: var(--muted); font-size: 10px; }.shift-count { color: var(--muted); font-size: 10px; font-weight: 750; }.drop-copy { margin-top: 8px; padding: 7px; text-align: center; color: #738197; border: 1px dashed #c9d2dc; border-radius: 7px; font-size: 9px; }
.assignment-list { display: flex; flex-direction: column; gap: 7px; }.assignment-card { position: relative; padding: 10px; background: #fff; border: 1px solid #dfe4ea; border-left: 3px solid var(--blue); border-radius: 9px; box-shadow: 0 2px 4px rgba(20,38,60,.035); cursor: grab; }.assignment-card.routine { border-left-color: var(--green); }.assignment-card.confirm { border-left-color: #e28a2b; }.assignment-card:hover { border-color: #b9cce2; box-shadow: 0 5px 12px rgba(20,38,60,.07); }.assignment-card.dragging { opacity: .4; }
.assignment-top { display: flex; gap: 7px; align-items: start; }.source-badge { flex: 0 0 auto; min-width: 29px; padding: 3px 4px; text-align: center; color: #526177; background: #f0f3f6; border-radius: 5px; font-size: 8px; font-weight: 850; }.assignment-name { min-width: 0; font-size: 11px; font-weight: 800; line-height: 1.3; }.assignment-name small { display: block; margin-top: 2px; color: var(--muted); font-weight: 600; }.card-menu { margin-left: auto; width: 24px; height: 24px; border: 0; background: transparent; color: #7b8797; border-radius: 5px; }.card-menu:hover { background: #eef4fa; color: var(--blue); }
.assignment-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 9px; }.meta-chip { max-width: 100%; padding: 3px 6px; color: #445168; background: #f2f5f7; border-radius: 5px; font-size: 8px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.meta-chip.cadence { color: var(--blue-dark); background: var(--blue-soft); }.meta-chip.needed { color: var(--green); background: var(--green-soft); }.meta-chip.warning { color: var(--amber); background: var(--amber-soft); }.assignment-location { margin-top: 8px; color: var(--muted); font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.collapsed .assignment-meta, .collapsed .assignment-location, .collapsed .assignment-name small { display: none; }
.section-heading { padding-top: 30px; }.filter-bar { margin: 0 32px 14px; padding: 12px; display: flex; align-items: end; gap: 10px; background: white; border: 1px solid var(--line); border-radius: 10px; }.filter-bar .search-control { flex: 1; min-width: 220px; margin: 0; }.filter-bar > label:not(.search-control):not(.check-filter) { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; }.filter-bar select { height: 39px; min-width: 135px; padding: 0 30px 0 10px; background: #f8fafb; border: 1px solid var(--line); border-radius: 8px; font-size: 11px; }.check-filter { height: 39px; display: flex; align-items: center; gap: 6px; padding: 0 9px; color: #536176; background: #f8fafb; border: 1px solid var(--line); border-radius: 8px; font-size: 10px; white-space: nowrap; }
.table-wrap { margin: 0 32px 32px; overflow: auto; background: white; border: 1px solid var(--line); border-radius: 11px; }.table-wrap table { width: 100%; border-collapse: collapse; font-size: 11px; }.table-wrap th { padding: 11px 12px; color: #687588; background: #f7f9fb; border-bottom: 1px solid var(--line); text-align: left; text-transform: uppercase; letter-spacing: .06em; font-size: 8px; }.table-wrap td { padding: 11px 12px; border-bottom: 1px solid var(--soft-line); vertical-align: top; }.table-wrap tr:last-child td { border-bottom: 0; }.table-wrap tbody tr:hover { background: #fbfdff; }.table-action { max-width: 260px; font-weight: 800; }.table-action small { display: block; color: var(--muted); margin-top: 3px; font-weight: 500; }.table-locations { max-width: 260px; color: #536176; }.row-action { color: var(--blue); background: transparent; border: 0; font-weight: 750; font-size: 11px; }.empty-state { margin: 30px; padding: 50px; color: var(--muted); text-align: center; }
.group-grid { padding: 0 32px 40px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }.group-card { min-width: 0; padding: 16px; background: white; border: 1px solid var(--line); border-radius: 11px; }.group-card-head { display: flex; gap: 8px; align-items: start; }.group-card h3 { flex: 1; margin: 0; font-size: 14px; }.group-source { margin-top: 4px; color: var(--muted); font-size: 9px; }.group-labels { display: flex; flex-wrap: wrap; gap: 5px; margin: 13px 0; }.group-label { padding: 4px 7px; color: #4d5b70; background: #f1f4f7; border-radius: 5px; font-size: 9px; }.group-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--soft-line); color: var(--muted); font-size: 9px; }.group-actions { display: flex; gap: 5px; }.group-warning { color: var(--amber); }
.modal { width: min(780px, calc(100vw - 28px)); max-height: calc(100vh - 28px); padding: 0; border: 0; border-radius: 14px; box-shadow: 0 30px 90px rgba(4,18,34,.36); overflow: hidden; }.modal::backdrop { background: rgba(8,25,43,.60); backdrop-filter: blur(2px); }.modal-small { width: min(540px, calc(100vw - 28px)); }.modal form { max-height: calc(100vh - 28px); display: flex; flex-direction: column; }.modal-header { flex: 0 0 auto; min-height: 73px; padding: 17px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }.modal-header h2 { margin: 3px 0 0; font-size: 20px; }.icon-button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: white; color: var(--muted); font-size: 22px; }.modal-body { padding: 19px 20px; overflow: auto; }.modal-footer { flex: 0 0 auto; min-height: 66px; padding: 12px 20px; display: flex; gap: 8px; align-items: center; background: #f8fafb; border-top: 1px solid var(--line); }.footer-spacer { flex: 1; }
.form-grid { display: grid; gap: 12px; margin-bottom: 14px; }.form-grid.two { grid-template-columns: 1.4fr 1fr; }.form-grid.three { grid-template-columns: 1fr .75fr 1fr; }.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }.form-grid .field { margin: 0; }.field > span, fieldset legend { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; color: #536176; }.field input, .field select, .field textarea { width: 100%; min-height: 41px; padding: 9px 10px; background: white; border: 1px solid #ccd5df; border-radius: 8px; font-size: 12px; }.field textarea { resize: vertical; }.field small { color: var(--muted); font-size: 9px; }.location-picker { margin: 0 0 14px; padding: 0; border: 0; }.location-picker legend { display: flex; justify-content: space-between; width: 100%; margin-bottom: 7px; }.location-picker legend span { color: var(--muted); font-weight: 500; text-transform: none; letter-spacing: 0; }.location-options { max-height: 150px; overflow: auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; padding: 8px; background: #f8fafb; border: 1px solid var(--line); border-radius: 9px; }.location-option { display: flex; align-items: start; gap: 7px; padding: 7px; background: white; border: 1px solid var(--soft-line); border-radius: 7px; font-size: 10px; }.location-option input { margin: 1px 0 0; accent-color: var(--blue); }.location-option span { min-width: 0; }.location-option strong { display: block; }.location-option small { display: block; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.date-section { padding: 13px; margin-bottom: 14px; background: var(--blue-soft); border: 1px solid #cfe3fb; border-radius: 9px; }.date-heading strong, .date-heading span { display: block; }.date-heading strong { font-size: 11px; }.date-heading span { margin-top: 2px; color: #52677e; font-size: 9px; }.date-inputs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; margin-top: 10px; }.date-field span { display: block; margin-bottom: 4px; color: #52677e; font-size: 8px; font-weight: 800; }.date-field input { width: 100%; min-height: 36px; padding: 5px; border: 1px solid #b8d3f0; border-radius: 6px; font-size: 10px; }
.switch-row { display: flex; gap: 10px; align-items: start; padding: 12px; background: #f8fafb; border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }.switch-row > input { position: absolute; opacity: 0; }.switch-control { flex: 0 0 auto; position: relative; width: 34px; height: 19px; background: #b7c1cd; border-radius: 12px; transition: .15s; }.switch-control::after { content: ''; position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; background: white; border-radius: 50%; transition: .15s; }.switch-row input:checked + .switch-control { background: var(--green); }.switch-row input:checked + .switch-control::after { transform: translateX(15px); }.switch-row strong, .switch-row small { display: block; }.switch-row strong { font-size: 11px; }.switch-row small { margin-top: 3px; color: var(--muted); font-size: 9px; }.source-details { margin-top: 12px; border-top: 1px solid var(--soft-line); }.source-details summary { padding-top: 10px; color: var(--blue); font-size: 10px; cursor: pointer; }.source-details div { margin-top: 8px; padding: 9px; color: #526177; background: #f7f9fb; border-radius: 7px; font-size: 10px; line-height: 1.5; }.form-errors { margin-bottom: 13px; padding: 10px 12px; color: var(--red); background: var(--red-soft); border: 1px solid #ffccc7; border-radius: 8px; font-size: 10px; }.form-errors ul { margin: 0; padding-left: 18px; }.info-callout { margin: 0; padding: 11px; color: #52677e; background: var(--blue-soft); border-radius: 8px; font-size: 10px; line-height: 1.45; }
.toast { position: fixed; z-index: 300; left: 50%; bottom: 20px; transform: translate(-50%, 20px); padding: 11px 16px; color: white; background: var(--navy); border-radius: 8px; box-shadow: var(--shadow); font-size: 11px; opacity: 0; pointer-events: none; transition: .2s; }.toast.show { transform: translate(-50%,0); opacity: 1; }
/* Keep the location selector readable at browser zoom and on narrow displays. */
.modal-body { min-width: 0; overflow-x: hidden; overflow-y: auto; }
.field, .field input, .field select, .field textarea, .location-picker { min-width: 0; }
.location-options { width: 100%; max-height: 230px; overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; }
.location-option { flex: 0 0 auto; min-width: 0; width: 100%; align-items: flex-start; gap: 9px; padding: 9px 10px; overflow: hidden; }
.location-option input { flex: 0 0 18px; width: 18px; height: 18px; margin: 0; }
.location-option span { min-width: 0; flex: 1; }
.location-option strong, .location-option small { overflow-wrap: anywhere; }
.location-option small { white-space: normal; line-height: 1.35; }
@media (max-width: 1100px) { .topbar { grid-template-columns: 180px 1fr auto; }.shift-columns { grid-template-columns: 1fr; }.shift-column { min-height: 220px; }.action-library { height: calc(100vh - 238px); }.group-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 760px) { .topbar { grid-template-columns: 1fr auto; padding: 12px 16px; }.facility-heading { order: 3; grid-column: 1 / -1; }.topbar-actions .save-status { display: none; }.context-strip { padding: 10px 16px; gap: 18px; overflow-x: auto; }.context-strip > div { flex: 0 0 auto; }.context-note { display: none; }.view-tabs { padding: 0 10px; overflow-x: auto; }.view-tab { padding: 0 11px; }.board-toolbar, .section-heading { align-items: start; padding: 20px 16px; flex-direction: column; gap: 13px; }.board-grid { grid-template-columns: 1fr; padding: 0 16px 24px; }.action-library { position: static; height: 350px; min-height: 0; }.shift-legend { overflow-x: auto; white-space: nowrap; }.filter-bar { margin: 0 16px 12px; flex-wrap: wrap; }.filter-bar .search-control { flex-basis: 100%; }.table-wrap { margin: 0 16px 24px; }.group-grid { padding: 0 16px 30px; grid-template-columns: 1fr; }.form-grid.two, .form-grid.three { grid-template-columns: 1fr; }.location-options { grid-template-columns: 1fr; }.date-inputs { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 430px) { .brand-lockup span:last-child { display: none; }.brand-lockup { min-width: 95px; }.topbar .button-quiet { padding: 0 9px; }.facility-heading h1 { font-size: 20px; }.context-strip { gap: 25px; }.view-tab span { white-space: nowrap; }.modal-footer { flex-wrap: wrap; }.modal-footer .button { flex: 1; }.modal-footer .footer-spacer { display: none; }.modal-footer .button-danger { flex-basis: 100%; }.date-inputs { grid-template-columns: 1fr; } }