:root {
    --ink: #17221e;
    --muted: #69756f;
    --line: #e1e7e3;
    --surface: #ffffff;
    --soft: #f5f8f6;
    --green: #274b40;
    --green-2: #3e6b5e;
    --green-soft: #e4f0eb;
    --amber: #a15f16;
    --amber-soft: #fff2dd;
    --red: #a63d3d;
    --red-soft: #fae4e4;
    --shadow: 0 12px 36px rgba(27, 46, 39, 0.08);
}

* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: #f3f6f4; }
a { color: inherit; }
button, input, select { font: inherit; }

.topbar { position: sticky; top: 0; z-index: 50; min-height: 68px; display: flex; align-items: center; gap: 28px; padding: 10px 24px; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 190px; }
.brand > span:last-child { display: flex; flex-direction: column; line-height: 1.1; }
.brand small { color: var(--muted); margin-top: 3px; font-size: 11px; }
.brand-mark { width: 36px; height: 36px; border-radius: 11px; background: var(--green); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; letter-spacing: -.04em; }
.brand-mark.large { width: 54px; height: 54px; border-radius: 16px; font-size: 20px; }
.topbar nav { display: flex; align-items: center; gap: 5px; flex: 1; overflow-x: auto; }
.topbar nav a { text-decoration: none; color: #52605a; padding: 9px 11px; border-radius: 9px; white-space: nowrap; font-size: 14px; }
.topbar nav a:hover { background: var(--soft); color: var(--ink); }
.logout-form { margin-left: auto; }

.page-shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 34px 0 70px; }
.wide-page { width: min(1580px, calc(100% - 24px)); }
.page-header { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
h1 { margin: 4px 0 8px; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.045em; }
h2 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
.eyebrow { margin: 0; color: var(--green-2); letter-spacing: .16em; font-size: 11px; font-weight: 800; }
.muted { color: var(--muted); margin: 0; }
.header-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.button { border: 0; border-radius: 10px; padding: 10px 14px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.button.primary { background: var(--green); color: #fff; }
.button.primary:hover { background: #1e3d34; }
.button.ghost { border: 1px solid var(--line); background: #fff; color: var(--ink); }
.button.small { padding: 7px 10px; font-size: 12px; }
.button:disabled { opacity: .55; cursor: wait; }

.status-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; margin-bottom: 18px; }
.status-strip > div { padding: 18px 20px; border-right: 1px solid var(--line); }
.status-strip > div:last-child { border-right: 0; }
.status-strip strong { display: block; font-size: 24px; letter-spacing: -.04em; }
.status-strip span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }

.notice-panel, .panel, .roster-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.notice-panel { padding: 16px 18px; margin-bottom: 18px; }
.notice-panel.clean { display: flex; gap: 10px; align-items: center; background: #f4faf7; border-color: #d7e9df; }
.notice-panel.clean span { color: var(--muted); }
.notice-head, .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.notice-head span, .panel-head > span { color: var(--muted); font-size: 12px; }
.notice-list { display: grid; gap: 7px; }
.notice { display: flex; align-items: center; gap: 8px; color: #4b5651; font-size: 13px; }
.notice-dot { width: 8px; height: 8px; border-radius: 999px; background: #88a198; flex: 0 0 auto; }
.notice.error .notice-dot { background: var(--red); }
.notice.warning .notice-dot { background: var(--amber); }
.notice.info .notice-dot { background: #647eaa; }

.roster-card { overflow: hidden; }
.table-scroll { overflow: auto; max-height: calc(100vh - 255px); }
.roster-table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 12px; }
.roster-table th, .roster-table td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.roster-table thead th { position: sticky; top: 0; z-index: 15; background: #f7faf8; padding: 10px 9px; min-width: 128px; }
.roster-table thead th.service-head { text-align: left; }
.service-head span { display: block; font-weight: 800; }
.service-head small { display: block; color: var(--muted); margin-top: 2px; }
.service-head.published::after { content: "Published"; display: inline-block; margin-top: 5px; padding: 2px 6px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 9px; font-weight: 800; }
.sticky-col { position: sticky; z-index: 10; }
thead .sticky-col { z-index: 20; }
.level-col { left: 0; min-width: 72px !important; width: 72px; }
.section-col { left: 72px; min-width: 95px !important; width: 95px; }
.role-col { left: 167px; min-width: 122px !important; width: 122px; }
.roster-table td.sticky-col { background: #fbfcfb; }
.level-cell, .section-cell, .role-cell { padding: 9px 10px; }
.level-badge { display: inline-flex; padding: 4px 7px; background: var(--green); color: #fff; border-radius: 7px; font-weight: 800; font-size: 10px; }
.section-cell span { font-weight: 800; color: var(--green-2); }
.role-cell { font-weight: 650; }
.assignment-cell { padding: 5px; min-width: 128px; }
.assignment-cell.conflict { background: var(--red-soft); }
.assignment-select { width: 100%; border: 1px solid transparent; background: transparent; border-radius: 8px; padding: 7px 7px; color: var(--ink); outline: none; transition: .15s ease; }
.assignment-select:hover, .assignment-select:focus { border-color: #bdccc5; background: #fff; }
.assignment-select.saving { opacity: .55; }
.assignment-select.saved { background: var(--green-soft); }
.assignment-readonly { display: block; min-height: 30px; padding: 7px; }

.panel { padding: 18px; margin-bottom: 18px; }
.inline-form { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.inline-form label, .stack-form label { display: flex; flex-direction: column; gap: 6px; color: #53605b; font-size: 12px; font-weight: 700; }
.inline-form label.grow { flex: 1; min-width: 180px; }
input, select { border: 1px solid #d7dfdb; background: #fff; border-radius: 9px; padding: 9px 10px; color: var(--ink); }
input:focus, select:focus { outline: 2px solid #b8d1c8; outline-offset: 1px; }
.check-label { flex-direction: row !important; align-items: center; padding-bottom: 9px; }

.data-table-wrap { overflow: auto; }
.data-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.data-table th { text-align: left; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; padding: 10px 9px; border-bottom: 1px solid var(--line); }
.data-table td { padding: 11px 9px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.status { display: inline-flex; padding: 4px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.status.approved { background: var(--green-soft); color: var(--green); }
.status.pending { background: var(--amber-soft); color: var(--amber); }
.row-actions { display: flex; gap: 10px; align-items: center; }
.row-actions form { display: inline; }
.link-button { border: 0; background: none; color: var(--green-2); padding: 0; cursor: pointer; font-weight: 700; font-size: 12px; }
.link-button.danger { color: var(--red); }

.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.person-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; box-shadow: 0 5px 18px rgba(27,46,39,.05); }
.person-card form { grid-column: 2 / -1; }
.avatar { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: #e9efec; color: var(--green); font-weight: 850; }
.person-copy { display: flex; flex-direction: column; min-width: 0; }
.person-copy span { color: var(--muted); font-size: 11px; margin-top: 3px; }

.summary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 13px; }
.summary-card { background: #fff; border: 1px solid var(--line); border-radius: 15px; padding: 16px; box-shadow: 0 6px 20px rgba(27,46,39,.05); }
.summary-card-head { display: flex; gap: 10px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.summary-card-head > div:last-child { display: flex; flex-direction: column; }
.summary-card-head span { color: var(--muted); font-size: 11px; }
.summary-items { display: grid; gap: 10px; margin-top: 12px; }
.summary-items > div { padding: 10px; background: var(--soft); border-radius: 10px; }
.summary-items p { margin: 6px 0 0; font-size: 12px; }
.date-pill { color: var(--green-2); font-size: 10px; font-weight: 800; text-transform: uppercase; }

.capability-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.cap-card { padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.cap-card small { display: block; color: var(--muted); margin-top: 8px; }
.chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.chip { padding: 3px 7px; background: #f0f2f1; color: #87918c; border-radius: 999px; font-size: 9px; font-weight: 800; }
.chip.on { background: var(--green-soft); color: var(--green); }
.compact-card { max-width: 850px; }
.cg-table .role-col { left: 0; }

.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 30px 16px; }
.auth-card { width: min(430px, 100%); background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 34px; box-shadow: var(--shadow); }
.auth-brand { margin-bottom: 20px; }
.auth-card h1 { font-size: 34px; }
.stack-form { display: grid; gap: 14px; margin-top: 24px; }
.stack-form .button { margin-top: 4px; padding: 12px; }
.auth-foot { color: var(--muted); font-size: 12px; margin: 18px 0 0; }
.auth-foot a { color: var(--green); font-weight: 750; }

.flash-stack { display: grid; gap: 8px; margin-bottom: 18px; }
.flash { padding: 11px 14px; border-radius: 11px; font-size: 13px; border: 1px solid var(--line); background: #fff; }
.flash.success { background: var(--green-soft); border-color: #cde0d6; color: var(--green); }
.flash.error { background: var(--red-soft); border-color: #efcece; color: var(--red); }
.empty-state { text-align: center; padding: 60px 20px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.empty-state p { color: var(--muted); }

@media (max-width: 900px) {
    .topbar { align-items: flex-start; flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
    .topbar nav { order: 3; width: 100%; }
    .brand { min-width: 0; }
    .page-header { align-items: flex-start; flex-direction: column; }
    .status-strip { grid-template-columns: repeat(2, 1fr); }
    .status-strip > div:nth-child(2) { border-right: 0; }
    .level-col { min-width: 58px !important; width: 58px; }
    .section-col { left: 58px; min-width: 78px !important; width: 78px; }
    .role-col { left: 136px; min-width: 108px !important; width: 108px; }
    .roster-table thead th { min-width: 118px; }
}

.cap-edit-row { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.cap-edit-row label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.cap-note { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--surface); color: var(--ink); }
.cap-note:focus { outline: 2px solid rgba(47, 109, 87, 0.15); border-color: var(--brand); }

/* Role structure / standby-time admin */
.role-editor-panel .panel-head,
.role-list-panel .panel-head { align-items: flex-start; }
.role-create-grid { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: 12px; align-items: end; }
.role-create-grid > label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.role-create-grid .form-actions { display: flex; align-items: end; }
.role-time-fieldset { border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: grid; grid-template-columns: repeat(2, minmax(90px, 1fr)); gap: 8px; min-width: 0; }
.role-time-fieldset legend { padding: 0 5px; color: var(--purple); font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.role-time-fieldset label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 700; }
.role-time-fieldset input { min-width: 0; width: 100%; }
.role-filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.role-table-scroll { overflow: auto; }
.role-admin-table { min-width: 1080px; }
.role-admin-table td { white-space: nowrap; }
.time-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 92px; padding: 5px 8px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 11px; font-weight: 800; }
.time-chip.missing { background: var(--amber-soft); color: var(--amber); }
.role-row-actions { display: flex; align-items: center; gap: 10px; }
.role-delete-form { margin: 0; }
.role-dialog { width: min(720px, calc(100% - 28px)); }
.edit-role-times { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
@media (max-width: 1000px) {
    .role-create-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .role-time-fieldset { grid-column: span 1; }
}
@media (max-width: 620px) {
    .role-create-grid, .edit-role-times { grid-template-columns: 1fr; }
}

/* 2026-08 roster UX refresh */
:root {
    --sheet-teal: #7baea4;
    --sheet-dark: #385b54;
    --sheet-light: #4b7a72;
    --sheet-cream: #fef1e8;
    --sheet-peach: #f3e2d7;
    --sheet-brown: #5f4e11;
    --sheet-grid: #b6a98e;
    --purple: #675d88;
}
.title-with-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.title-with-status h1 { margin-bottom: 4px; }
.publication-status { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.publication-status.draft { background: #eeeae2; color: #6f6a61; border: 1px solid #ddd6ca; }
.publication-status.published { background: var(--green-soft); color: var(--green); border: 1px solid #c8ddd3; }

/* Match Google Sheet border hierarchy: 1px internal, 2px medium boundaries. */
.sheet-roster-card { border: 2px solid var(--sheet-dark); border-radius: 15px; }
.sheet-roster-table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: separate; border-spacing: 0; color: var(--sheet-brown); font-size: 14px; }
.sheet-roster-table th, .sheet-roster-table td { border: 0; border-right: 1px solid var(--sheet-grid); border-bottom: 1px solid var(--sheet-grid); text-align: center; vertical-align: middle; }
.sheet-roster-table thead th { padding: 8px 4px; min-width: 0; color: #fff; font-weight: 850; }
.sheet-side-head { background: var(--sheet-teal) !important; border-right: 2px solid var(--sheet-dark) !important; border-bottom: 2px solid var(--sheet-dark) !important; }
.date-head { font-size: 20px; border-bottom: 2px solid rgba(255,255,255,.4) !important; }
.day-dark { background: var(--sheet-dark) !important; }
.day-light { background: var(--sheet-light) !important; }
.service-head { font-size: 15px; min-height: 42px; }
.sheet-roster-table .day-edge { border-right: 2px solid var(--sheet-dark) !important; }
.sheet-roster-table tbody tr.section-end > td { border-bottom: 2px solid #8f815e; }
.sheet-roster-table tbody tr.level-end > td { border-bottom: 2px solid var(--sheet-dark); }
.sheet-roster-table .level-cell { background: var(--sheet-dark) !important; color: #fff; font-size: 25px; font-weight: 850; border-right: 2px solid var(--sheet-dark); }
.sheet-roster-table .section-cell { background: var(--sheet-cream) !important; color: #675d88; font-size: 18px; font-weight: 850; border-right: 2px solid var(--sheet-grid); }
.sheet-roster-table .role-cell { background: var(--sheet-cream) !important; color: var(--sheet-brown); font-size: 14px; font-weight: 850; border-right: 2px solid var(--sheet-grid); }
.sheet-roster-table .day-cream { background: var(--sheet-cream); }
.sheet-roster-table .day-peach { background: var(--sheet-peach); }
.sheet-roster-table .assignment-cell { padding: 0; height: 42px; min-width: 0; }
.sheet-roster-table .assignment-cell.conflict { background: var(--red-soft) !important; }
.sheet-roster-table .level-col { width: 5.5%; min-width: 0 !important; left: 0; }
.sheet-roster-table .section-col { width: 7.5%; min-width: 0 !important; left: 5.5%; }
.sheet-roster-table .role-col { width: 9%; min-width: 0 !important; left: 13%; }
.sheet-roster-table .assignment-trigger, .sheet-roster-table .assignment-readonly { width: 100%; height: 100%; min-height: 41px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 14px; font-weight: 800; color: var(--sheet-brown); line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assignment-trigger { border: 0; background: transparent; cursor: pointer; padding: 5px 4px; transition: background .12s ease, box-shadow .12s ease; }
.assignment-trigger:hover, .assignment-trigger:focus-visible { background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 2px rgba(56,91,84,.22); outline: none; }
.assignment-trigger.saving { opacity: .45; }
.assignment-trigger.saved { background: rgba(228,240,235,.8); }
.service-head.published::after { display: none !important; content: none !important; }

/* Compact operational health control. */
.roster-health { position: relative; width: fit-content; margin: 0 0 12px auto; }
.roster-health-trigger { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; border: 1px solid #ddd6ca; background: #fffdf9; border-radius: 999px; padding: 7px 10px; box-shadow: 0 5px 16px rgba(40,48,44,.06); }
.roster-health-trigger::-webkit-details-marker { display: none; }
.health-trigger-icon { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: var(--amber-soft); color: var(--amber); font-weight: 900; }
.health-trigger-copy { display: flex; align-items: baseline; gap: 5px; }
.health-trigger-copy strong { font-size: 12px; }
.health-trigger-copy small { color: var(--muted); font-size: 11px; }
.health-badges { display: flex; gap: 4px; }
.health-badge { min-width: 20px; padding: 2px 5px; border-radius: 999px; font-size: 10px; font-weight: 850; text-align: center; }
.health-badge.error { background: var(--red-soft); color: var(--red); }
.health-badge.warning { background: var(--amber-soft); color: var(--amber); }
.roster-health-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 45; width: min(520px, calc(100vw - 32px)); max-height: 320px; overflow: auto; background: #fffdf9; border: 1px solid #ddd6ca; border-radius: 14px; box-shadow: 0 18px 44px rgba(27,46,39,.17); padding: 10px; }
.roster-health-list { display: grid; gap: 6px; }
.health-item { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; padding: 7px 8px; border-radius: 8px; }
.health-item.error { background: #fff5f5; } .health-item.warning { background: #fff9ee; }
.health-item-dot { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: #777; flex: 0 0 auto; }
.health-item.error .health-item-dot { background: var(--red); } .health-item.warning .health-item-dot { background: var(--amber); }

/* Visual assignment / volunteer pickers */
.assignment-dialog, .volunteer-dialog { width: min(560px, calc(100vw - 28px)); max-height: min(760px, calc(100vh - 32px)); border: 0; border-radius: 20px; padding: 0; background: #fffdf9; color: var(--ink); box-shadow: 0 24px 70px rgba(20,30,26,.28); }
.assignment-dialog::backdrop, .volunteer-dialog::backdrop { background: rgba(16,27,23,.42); backdrop-filter: blur(3px); }
.assignment-dialog-shell, .volunteer-edit-form { padding: 22px; }
.dialog-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.dialog-close { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #eee9e0; color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; }
.picker-search-wrap { display: flex; align-items: center; gap: 8px; border: 1px solid #d9d1c5; background: #fff; border-radius: 12px; padding: 0 11px; margin-bottom: 10px; }
.picker-search-wrap input { flex: 1; border: 0; outline: 0; padding: 11px 0; background: transparent; }
.picker-list { display: grid; gap: 5px; max-height: 340px; overflow: auto; padding: 2px; }
.picker-person { display: flex; align-items: center; gap: 10px; width: 100%; border: 1px solid transparent; background: transparent; border-radius: 11px; padding: 9px; cursor: pointer; text-align: left; color: var(--ink); }
.picker-person:hover:not(:disabled) { background: var(--green-soft); border-color: #c6ddd2; }
.picker-person:disabled { opacity: .55; cursor: not-allowed; }
.picker-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--peach-soft, #f7e3d8); color: #6f4636; font-size: 11px; font-weight: 900; flex: 0 0 auto; }
.picker-person-copy { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.picker-person-copy strong { font-size: 13px; }.picker-person-copy small { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-disabled { font-size: 10px; color: var(--red); background: var(--red-soft); border-radius: 999px; padding: 3px 6px; }
.picker-error { color: var(--red); background: var(--red-soft); border-radius: 9px; padding: 8px 10px; font-size: 12px; margin-bottom: 8px; }
.guest-entry { margin-top: 12px; border-top: 1px solid #e3ddd4; padding-top: 12px; }
.guest-entry-copy { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin-bottom: 8px; }.guest-entry-copy strong { font-size: 12px; }.guest-entry-copy small { color: var(--muted); font-size: 10px; }
.guest-entry-row { display: flex; gap: 7px; }.guest-entry-row input { flex: 1; }
.picker-footer { border-top: 1px solid #e3ddd4; margin-top: 12px; padding-top: 10px; text-align: right; }
.visual-select-trigger { display: flex; align-items: center; min-height: 39px; width: 100%; border: 1px solid #d7d0c5; background: #fff; border-radius: 9px; padding: 8px 10px; color: #6d736f; cursor: pointer; text-align: left; }.visual-select-trigger.selected { color: var(--ink); font-weight: 750; }

/* Volunteers database */
.type-counts { display: flex; gap: 8px; flex-wrap: wrap; }.type-counts span { background: #fffdf9; border: 1px solid #ddd6ca; border-radius: 999px; padding: 8px 11px; font-size: 11px; }.type-counts strong { color: var(--green); font-size: 14px; }
.volunteer-toolbar { display: flex; gap: 12px; align-items: end; padding: 14px; }.vol-search { flex: 1; display: flex; align-items: center; gap: 8px; border: 1px solid #d8d1c6; border-radius: 11px; background: #fff; padding: 0 11px; }.vol-search input { border: 0; outline: 0; flex: 1; padding: 11px 0; }.type-filter-label { min-width: 170px; display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.volunteer-table-card { background: #fffdf9; border: 1px solid #ddd6ca; border-radius: 15px; overflow: hidden; }.volunteer-table-scroll { overflow: auto; }.volunteer-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 950px; font-size: 13px; }.volunteer-table th { background: #ebe7df; color: #5d6661; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; padding: 10px 12px; text-align: left; position: sticky; top: 0; z-index: 4; }.volunteer-table td { padding: 10px 12px; border-top: 1px solid #e5dfd6; background: #fffdf9; white-space: nowrap; }.volunteer-table .vol-sticky-id { position: sticky; left: 0; z-index: 6; width: 120px; }.volunteer-table .vol-sticky-name { position: sticky; left: 120px; z-index: 5; min-width: 280px; border-right: 1px solid #ddd6ca; }.volunteer-table td.vol-sticky-id,.volunteer-table td.vol-sticky-name { background: #fffdf9; }.person-inline { display: flex; align-items: center; gap: 9px; }.person-inline .avatar { width: 30px; height: 30px; border-radius: 9px; font-size: 10px; }
.type-badge { display: inline-flex; padding: 4px 8px; border-radius: 999px; font-size: 10px; font-weight: 850; }.type-volunteer { background: var(--green-soft); color: var(--green); }.type-children { background: #ede8f7; color: #625783; }.type-inactive { background: #eeeae4; color: #716d66; }
.edit-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }.edit-form-grid label { display: flex; flex-direction: column; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 750; }.edit-form-grid .span-2 { grid-column: span 2; }.active-switch { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12px; }.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* Compact spreadsheet-like summary */
.summary-sheet-card { border: 1px solid #d5cdbc; border-radius: 14px; overflow: hidden; background: #fffdf9; }.summary-sheet-scroll { overflow: auto; }.summary-sheet { width: 100%; min-width: 850px; border-collapse: separate; border-spacing: 0; font-size: 12px; }.summary-sheet th { background: var(--sheet-dark); color: #fff; padding: 9px; text-align: center; border-right: 1px solid rgba(255,255,255,.24); position: sticky; top: 0; z-index: 3; }.summary-sheet td { padding: 7px; vertical-align: top; border-right: 1px solid #d7cebc; border-bottom: 1px solid #d7cebc; min-width: 130px; }.summary-name-col { position: sticky !important; left: 0; z-index: 4 !important; min-width: 195px !important; text-align: left !important; }.summary-sheet td.summary-name-col { background: var(--sheet-cream); }.summary-name-col small { display: block; margin-top: 2px; color: #7c7467; font-size: 10px; }.summary-slot { display: flex; gap: 5px; align-items: baseline; padding: 4px 5px; border-radius: 6px; background: #f7f1e9; margin: 2px 0; white-space: nowrap; }.summary-slot span { color: var(--purple); font-size: 9px; font-weight: 900; }.summary-slot strong { font-size: 10px; }.empty-summary { text-align: center; color: var(--muted); padding: 30px !important; }
.cell-subtitle { display: block; color: var(--muted); font-size: 10px; margin-top: 2px; }.form-note { margin: 10px 0 0; color: var(--muted); font-size: 11px; }

.cg-table { border-collapse: separate; border-spacing: 0; }.cg-table th,.cg-table td { border-right: 1px solid var(--sheet-grid); border-bottom: 1px solid var(--sheet-grid); text-align: center; }.cg-table .assignment-trigger { min-height: 42px; width: 100%; font-weight: 800; }.cg-table .role-col { left: 0; min-width: 120px !important; }

@media (max-width: 1100px) {
    .sheet-roster-table { width: max-content; min-width: 1250px; table-layout: auto; }
    .sheet-roster-table .level-col { width: 70px; min-width: 70px !important; left: 0; }
    .sheet-roster-table .section-col { width: 95px; min-width: 95px !important; left: 70px; }
    .sheet-roster-table .role-col { width: 115px; min-width: 115px !important; left: 165px; }
    .sheet-roster-table .assignment-cell, .sheet-roster-table thead th:not(.sticky-col) { min-width: 105px; }
}
@media (max-width: 700px) {
    .edit-form-grid { grid-template-columns: 1fr; }.edit-form-grid .span-2 { grid-column: span 1; }
    .volunteer-toolbar { align-items: stretch; flex-direction: column; }.type-filter-label { min-width: 0; }
    .guest-entry-copy { align-items: flex-start; flex-direction: column; }
}

/* 2026-08-10 compact roster viewport + reliable frozen panes */
.wide-page {
    width: min(1800px, calc(100% - 12px));
    padding-top: 14px;
    padding-bottom: 30px;
}
.roster-page-header {
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.roster-page-header .eyebrow { display: none; }
.roster-page-header h1 {
    margin: 0;
    font-size: clamp(24px, 2.2vw, 32px);
    letter-spacing: -.035em;
}
.roster-page-header .title-with-status { gap: 8px; }
.roster-page-header .publication-status {
    min-height: 24px;
    padding: 3px 8px;
    font-size: 10px;
}
.roster-page-header .header-actions { gap: 6px; }
.roster-page-header .button { padding: 7px 10px; font-size: 12px; }
.roster-health { margin-bottom: 8px; }
.table-scroll { max-height: calc(100vh - 170px); }
.sheet-roster-card { border-radius: 10px; }

.sheet-roster-table {
    --date-header-h: 34px;
    --service-header-h: 32px;
    --level-w: 74px;
    --section-w: 112px;
    --role-w: 126px;
}
/* Each frozen header row needs its own top offset. Previously both were top:0. */
.sheet-roster-table .date-header-row th {
    position: sticky;
    top: 0;
    z-index: 31;
    height: var(--date-header-h);
    padding: 4px 3px;
}
.sheet-roster-table .service-header-row th {
    position: sticky;
    top: var(--date-header-h);
    z-index: 30;
    height: var(--service-header-h);
    padding: 3px;
}
.sheet-roster-table thead .sticky-col {
    position: sticky;
    top: 0;
    z-index: 42;
}
.sheet-roster-table tbody .sticky-col { z-index: 12; }
.sheet-roster-table .sheet-side-head {
    height: calc(var(--date-header-h) + var(--service-header-h));
    vertical-align: middle;
}
.sheet-roster-table .date-head {
    font-size: 18px;
    line-height: 1;
}
.sheet-roster-table .service-head {
    min-height: 0;
    height: var(--service-header-h);
    padding: 0 3px !important;
    text-align: center !important;
    vertical-align: middle !important;
    font-size: 14px;
    line-height: var(--service-header-h);
}

/* Exact sticky offsets prevent the frozen pane from drifting as the table resizes. */
.sheet-roster-table .level-col {
    width: var(--level-w);
    min-width: var(--level-w) !important;
    max-width: var(--level-w);
    left: 0;
}
.sheet-roster-table .section-col {
    width: var(--section-w);
    min-width: var(--section-w) !important;
    max-width: var(--section-w);
    left: var(--level-w);
}
.sheet-roster-table .role-col {
    width: var(--role-w);
    min-width: var(--role-w) !important;
    max-width: var(--role-w);
    left: calc(var(--level-w) + var(--section-w));
}
.sheet-roster-table .level-cell {
    padding: 0 5px;
    font-size: 20px;
    background: linear-gradient(180deg, #385b54 0%, #315049 100%) !important;
}
.sheet-roster-table .merged-level > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 7px 5px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 9px;
    background: rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
    letter-spacing: .015em;
}
.sheet-roster-table .section-cell {
    padding: 3px 5px;
    font-size: 16px;
}
.sheet-roster-table .role-cell {
    padding: 3px 5px;
    font-size: 13.5px;
}
.sheet-roster-table .assignment-cell {
    height: 34px;
}
.sheet-roster-table .assignment-trigger,
.sheet-roster-table .assignment-readonly {
    min-height: 33px;
    font-size: 13.5px;
    line-height: 1.05;
}
.sheet-roster-table .assignment-trigger { padding: 2px 3px; }

@media (max-width: 1100px) {
    .wide-page { width: calc(100% - 8px); }
    .sheet-roster-table {
        --level-w: 64px;
        --section-w: 88px;
        --role-w: 108px;
        width: max-content;
        min-width: 1160px;
        table-layout: fixed;
    }
    .sheet-roster-table .assignment-cell,
    .sheet-roster-table thead th:not(.sticky-col) { min-width: 90px; }
}


/* 2026-08-11 roster edit/publish workflow + stronger sheet borders */
.publication-status.editing {
    background: var(--amber-soft);
    color: #7d4c17;
    border: 1px solid #e7c28f;
}
.sheet-roster-card {
    border-top: 3px solid #1f1f1f !important;
    border-left: 3px solid #1f1f1f !important;
    border-right: 3px solid #1f1f1f !important;
    border-bottom: 2px solid #1f1f1f !important;
}
.sheet-roster-table .role-col {
    border-right: 3px solid #1f1f1f !important;
}
.sheet-roster-table .day-edge {
    border-right: 2px solid #1f1f1f !important;
}
.sheet-roster-table .service-header-row th {
    border-bottom: 3px solid #1f1f1f !important;
}
.sheet-roster-table .sheet-side-head {
    border-bottom: 3px solid #1f1f1f !important;
}
.sheet-roster-table .picker-person[hidden],
.picker-person[hidden] {
    display: none !important;
}
.editing-roster .assignment-trigger:hover {
    background: rgba(255, 255, 255, .38);
    box-shadow: inset 0 0 0 1px rgba(31, 31, 31, .16);
}
.published-roster .assignment-readonly,
.draft-roster .assignment-readonly {
    cursor: default;
}

/* 2026-08-11 dark roster header + simplified Level pane */
.sheet-roster-table {
    --level-w: 58px;
}
.sheet-roster-table thead th {
    border-color: #171717 !important;
}
/* Dark spreadsheet structure without stacking into a heavy frame. */
.sheet-roster-table .date-header-row th {
    border-top: 2px solid #171717 !important;
    border-bottom: 1px solid #171717 !important;
}
.sheet-roster-table .service-header-row th {
    border-bottom: 2px solid #171717 !important;
}
.sheet-roster-table .sheet-side-head {
    border-top: 2px solid #171717 !important;
    border-bottom: 2px solid #171717 !important;
    border-right: 1px solid #171717 !important;
}
.sheet-roster-table thead tr > th:first-child {
    border-left: 2px solid #171717 !important;
}
.sheet-roster-table .date-head.day-start,
.sheet-roster-table .service-head.day-start {
    border-left: 1px solid #171717 !important;
}
.sheet-roster-table .date-head:last-child,
.sheet-roster-table .service-head:last-child {
    border-right: 2px solid #171717 !important;
}
.sheet-roster-table .level-cell {
    padding: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
    background: #385b54 !important;
}
.sheet-roster-table .merged-level > span {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 850 !important;
    letter-spacing: .02em !important;
}
.sheet-roster-table .role-col {
    border-right: 2px solid #171717 !important;
}
@media (max-width: 1100px) {
    .sheet-roster-table { --level-w: 52px; }
    .sheet-roster-table .merged-level > span { font-size: 14px !important; }
}

/* 2026-08-11 Level-column and Unavailability polish */

/* Roster Level column: treat it like a merged spreadsheet field, not a dark sidebar. */
.sheet-roster-table {
    --level-w: 62px;
}
.sheet-roster-table .level-cell {
    background: #fef1e8 !important;
    color: #385b54 !important;
    padding: 0 4px !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    border-right: 1px solid #b8aa8e !important;
}
.sheet-roster-table .merged-level > span {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #385b54 !important;
    font-size: 14px !important;
    font-weight: 850 !important;
    letter-spacing: .035em !important;
    writing-mode: horizontal-tb !important;
}
.sheet-roster-table thead .level-col {
    background: #7fb1a9 !important;
    color: white !important;
}
.sheet-roster-table .section-col {
    left: var(--level-w) !important;
}
.sheet-roster-table .role-col {
    left: calc(var(--level-w) + var(--section-w)) !important;
}

/* Unavailability page */
.unavailability-list-panel {
    padding: 16px 18px;
}
.unavailability-table {
    table-layout: fixed;
}
.unavailability-table th:nth-child(1) { width: 24%; }
.unavailability-table th:nth-child(2),
.unavailability-table th:nth-child(3) { width: 13%; }
.unavailability-table th:nth-child(4) { width: 22%; }
.unavailability-table th:nth-child(5) { width: 12%; }
.unavailability-table .actions-head { width: 240px; text-align: left; }
.unavailability-table td {
    vertical-align: middle;
}
.unavailability-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 230px;
    white-space: nowrap;
}
.unavailability-actions form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}
.table-action-button {
    appearance: none;
    border: 1px solid #d7d2ca;
    background: #fffdf9;
    color: #356556;
    border-radius: 8px;
    min-height: 32px;
    padding: 6px 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
}
.table-action-button:hover {
    border-color: #9fb9ae;
    background: #f4f8f6;
}
.table-action-button.danger {
    color: #b54848;
}
.table-action-button.danger:hover {
    border-color: #e5b7b7;
    background: #fff5f5;
}
.edit-unavailability-dialog .assignment-dialog-shell {
    width: min(560px, calc(100vw - 30px));
}
.edit-unavailability-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 16px;
}
.edit-unavailability-grid label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #53605b;
    font-size: 12px;
    font-weight: 750;
}
.edit-unavailability-grid .full {
    grid-column: 1 / -1;
}
.edit-unavailability-grid .check-label {
    flex-direction: row;
    align-items: center;
    padding: 0;
}
.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}
@media (max-width: 760px) {
    .unavailability-table {
        min-width: 980px;
    }
    .edit-unavailability-grid {
        grid-template-columns: 1fr;
    }
    .edit-unavailability-grid .full {
        grid-column: auto;
    }
}

/* 2026-08-11 roster border system reset — preserve palette, simplify hierarchy */

/* One quiet frame for the whole roster; let the grid do the rest. */
.sheet-roster-card {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #385a54 !important;
    border-radius: 10px !important;
    overflow: hidden;
}

/* Reset the accumulated heavy header borders. */
.sheet-roster-table thead th,
.sheet-roster-table .date-header-row th,
.sheet-roster-table .service-header-row th,
.sheet-roster-table .sheet-side-head,
.sheet-roster-table .date-head,
.sheet-roster-table .service-head {
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 1px solid rgba(255,255,255,.22) !important;
    border-bottom: 0 !important;
}

/* The first header row reads as one continuous band, not separate boxes. */
.sheet-roster-table .date-header-row th {
    border-bottom: 1px solid rgba(255,255,255,.32) !important;
}

/* One clean boundary between the frozen header and the body. */
.sheet-roster-table .service-header-row th,
.sheet-roster-table .sheet-side-head {
    border-bottom: 1px solid #385a54 !important;
}

/* Side headings stay unified with the header rather than looking framed individually. */
.sheet-roster-table .sheet-side-head {
    border-right: 1px solid #385a54 !important;
}

/* Sunday groups are already distinguished by alternating fills; use only a quiet edge. */
.sheet-roster-table .date-head.day-start,
.sheet-roster-table .service-head.day-start {
    border-left: 0 !important;
}
.sheet-roster-table .date-head,
.sheet-roster-table .sheet-assignment.day-edge,
.sheet-roster-table .service-head.day-edge {
    border-right: 1px solid #385a54 !important;
}
.sheet-roster-table .date-head:last-child,
.sheet-roster-table .service-head:last-child {
    border-right: 0 !important;
}

/* Restore a spreadsheet-like internal grid without competing weights. */
.sheet-roster-table tbody td {
    border-right-width: 1px !important;
    border-bottom-width: 1px !important;
}

/* Major grouping breaks only. */
.sheet-roster-table tbody tr.section-end td.role-cell,
.sheet-roster-table tbody tr.section-end td.assignment-cell,
.sheet-roster-table td.merged-section {
    border-bottom-width: 2px !important;
}
.sheet-roster-table tbody tr.level-end td.role-cell,
.sheet-roster-table tbody tr.level-end td.assignment-cell,
.sheet-roster-table td.merged-level {
    border-bottom-width: 2px !important;
}

/* Frozen pane: no thick vertical bar. A soft edge communicates the freeze boundary. */
.sheet-roster-table .role-col {
    border-right: 1px solid #385a54 !important;
    box-shadow: 5px 0 7px -7px rgba(24,63,52,.75);
}
.sheet-roster-table thead .role-col {
    box-shadow: 5px 0 7px -7px rgba(24,63,52,.75);
}

/* Prevent the left edge from gaining an extra artificial frame. */
.sheet-roster-table thead tr > th:first-child,
.sheet-roster-table tbody tr > td:first-child {
    border-left: 0 !important;
}

/* Keep the header compact and visually calm. */
.sheet-roster-table .date-head,
.sheet-roster-table .service-head {
    box-shadow: none !important;
}

/* Last visible column relies on the card frame, avoiding a doubled right edge. */
.sheet-roster-table tr > *:last-child {
    border-right: 0 !important;
}

/* 2026-08-11 roster cohort sections — remove Level column and present age groups as page sections */

.sheet-roster-table.cohort-section-layout {
    --section-w: 126px;
    --role-w: 132px;
}

/* Remove the spreadsheet-style Level column entirely. */
.sheet-roster-table.cohort-section-layout .level-col,
.sheet-roster-table.cohort-section-layout .level-cell,
.sheet-roster-table.cohort-section-layout .merged-level {
    display: none !important;
}

/* Re-anchor the frozen pane after removing Level. */
.sheet-roster-table.cohort-section-layout .section-col {
    left: 0 !important;
    width: var(--section-w) !important;
    min-width: var(--section-w) !important;
    max-width: var(--section-w) !important;
}
.sheet-roster-table.cohort-section-layout .role-col {
    left: var(--section-w) !important;
    width: var(--role-w) !important;
    min-width: var(--role-w) !important;
    max-width: var(--role-w) !important;
}

/* A cohort is context, not another table field. Give it breathing room between groups. */
.sheet-roster-table .roster-cohort-row td {
    height: 38px !important;
    padding: 5px 8px !important;
    border: 0 !important;
    background: #eee9df !important;
}
.sheet-roster-table .roster-cohort-row:first-child td {
    padding-top: 7px !important;
}
.sheet-roster-table .roster-cohort-cell {
    text-align: left !important;
}
.sheet-roster-table .roster-cohort-badge {
    position: sticky;
    left: 10px;
    z-index: 13;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 28px;
    padding: 5px 11px;
    border: 1px solid rgba(56,91,84,.22);
    border-radius: 999px;
    background: #fffdf9;
    box-shadow: 0 2px 7px rgba(29,40,36,.07);
    color: #385b54;
    white-space: nowrap;
}
.sheet-roster-table .roster-cohort-badge strong {
    font-size: 13.5px;
    line-height: 1;
    font-weight: 850;
    letter-spacing: -.01em;
}
.sheet-roster-table .roster-cohort-badge span {
    padding-left: 8px;
    border-left: 1px solid #ddd8cf;
    color: #7a817d;
    font-size: 10.5px;
    line-height: 1;
    font-weight: 700;
}

/* The expanded age-group names need a little more horizontal room than AS/ST. */
.sheet-roster-table.cohort-section-layout .section-cell {
    font-size: 13.5px !important;
    line-height: 1.1;
    padding: 4px 7px !important;
}

/* Keep cohort dividers visually independent from section/level separator rules inherited from the sheet. */
.sheet-roster-table .roster-cohort-row + tr td {
    border-top: 0 !important;
}

@media (max-width: 1100px) {
    .sheet-roster-table.cohort-section-layout {
        --section-w: 108px;
        --role-w: 116px;
    }
    .sheet-roster-table .roster-cohort-badge strong { font-size: 12.5px; }
    .sheet-roster-table .roster-cohort-badge span { font-size: 10px; }
}

/* 2026-08-11 chip-based roster board — borderless visual hierarchy */

.sheet-roster-card {
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    background: transparent !important;
    overflow: hidden;
}

.sheet-roster-table.chip-board-layout {
    border: 0 !important;
    background: transparent !important;
}

/* Remove the spreadsheet grid completely. */
.sheet-roster-table.chip-board-layout th,
.sheet-roster-table.chip-board-layout td,
.sheet-roster-table.chip-board-layout thead th,
.sheet-roster-table.chip-board-layout tbody td,
.sheet-roster-table.chip-board-layout .date-head,
.sheet-roster-table.chip-board-layout .service-head,
.sheet-roster-table.chip-board-layout .sheet-side-head,
.sheet-roster-table.chip-board-layout .role-col,
.sheet-roster-table.chip-board-layout .section-col,
.sheet-roster-table.chip-board-layout .assignment-cell,
.sheet-roster-table.chip-board-layout .merged-section {
    border: 0 !important;
    outline: 0 !important;
}

/* Header: one continuous surface, with dates as labels and times as chips. */
.sheet-roster-table.chip-board-layout thead th {
    box-shadow: none !important;
}
.sheet-roster-table.chip-board-layout .date-header-row th,
.sheet-roster-table.chip-board-layout .service-header-row th {
    color: #fff !important;
}
.sheet-roster-table.chip-board-layout .date-head {
    padding-top: 8px !important;
    padding-bottom: 4px !important;
    font-size: 16px !important;
    font-weight: 850 !important;
    letter-spacing: -.02em;
}
.sheet-roster-table.chip-board-layout .service-head {
    height: 40px !important;
    padding: 4px 6px 8px !important;
    text-align: center !important;
}
.sheet-roster-table.chip-board-layout .service-time-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
    font-weight: 850;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(21,29,26,.16);
}
.sheet-roster-table.chip-board-layout .service-time-chip.time-ten {
    background: #356556;
}
.sheet-roster-table.chip-board-layout .service-time-chip.time-twelve {
    background: #675d88;
}

/* Frozen labels become contextual labels, not spreadsheet columns. */
.sheet-roster-table.chip-board-layout .sheet-side-head {
    background: #7eafa5 !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .02em;
}
.sheet-roster-table.chip-board-layout .role-col,
.sheet-roster-table.chip-board-layout .section-col {
    box-shadow: none !important;
}
.sheet-roster-table.chip-board-layout .role-col {
    box-shadow: 8px 0 14px -14px rgba(24,63,52,.65) !important;
}

/* Cohort sections are separated with real whitespace. */
.sheet-roster-table.chip-board-layout .roster-cohort-row td {
    height: 58px !important;
    padding: 16px 10px 10px !important;
    background: #eee9df !important;
}
.sheet-roster-table.chip-board-layout .roster-cohort-row:first-child td {
    padding-top: 12px !important;
}
.sheet-roster-table.chip-board-layout .roster-cohort-badge {
    left: 10px;
    min-height: 30px;
    padding: 6px 12px;
    border: 0 !important;
    border-radius: 999px;
    background: #e2eee8 !important;
    box-shadow: none !important;
    color: #31594d !important;
}
.sheet-roster-table.chip-board-layout .roster-cohort-row[data-level="VT"] .roster-cohort-badge {
    background: #ece8f4 !important;
    color: #5c527b !important;
}
.sheet-roster-table.chip-board-layout .roster-cohort-badge strong {
    font-size: 13px !important;
    font-weight: 850 !important;
}

/* Sub labels are compact context chips. */
.sheet-roster-table.chip-board-layout .section-cell,
.sheet-roster-table.chip-board-layout .merged-section {
    padding: 5px 7px !important;
    background: #fffdf9 !important;
    text-align: center !important;
    vertical-align: middle !important;
}
.sheet-roster-table.chip-board-layout .sub-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 5px 9px;
    border-radius: 999px;
    background: #e2eee8;
    color: #356556 !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    line-height: 1.1;
    white-space: normal;
}

/* Role labels are chips too; the role determines the colour of the whole row. */
.sheet-roster-table.chip-board-layout .role-cell {
    padding: 4px 6px !important;
    background: #fffdf9 !important;
    text-align: center !important;
    vertical-align: middle !important;
}
.sheet-roster-table.chip-board-layout .role-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    max-width: 100%;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--role-strong-bg, #e2eee8);
    color: var(--role-fg, #234c41);
    font-size: 11.5px;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}

/* Preserve the warm day lanes, but remove cell-box styling. */
.sheet-roster-table.chip-board-layout .assignment-cell {
    height: 38px !important;
    padding: 4px 6px !important;
    text-align: center !important;
    vertical-align: middle !important;
}
.sheet-roster-table.chip-board-layout .assignment-cell > * {
    margin-inline: auto;
}

/* Selected assignees are visual chips. 10am and 12pm use matching header accents. */
.sheet-roster-table.chip-board-layout .assignment-chip {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 0 !important;
    max-width: calc(100% - 4px);
    min-height: 27px;
    padding: 5px 10px 5px 12px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--role-strong-bg, #e2eee8) !important;
    color: var(--role-fg, #234c41) !important;
    box-shadow: inset 3px 0 #356556, 0 1px 2px rgba(29,40,36,.08) !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sheet-roster-table.chip-board-layout .slot-12 .assignment-chip {
    background: var(--role-soft-bg, #edf5f1) !important;
    box-shadow: inset 3px 0 #675d88, 0 1px 2px rgba(29,40,36,.07) !important;
}
.sheet-roster-table.chip-board-layout button.assignment-chip {
    cursor: pointer;
}
.sheet-roster-table.chip-board-layout button.assignment-chip:hover {
    transform: translateY(-1px);
    box-shadow: inset 3px 0 #356556, 0 3px 8px rgba(29,40,36,.11) !important;
}
.sheet-roster-table.chip-board-layout .slot-12 button.assignment-chip:hover {
    box-shadow: inset 3px 0 #675d88, 0 3px 8px rgba(29,40,36,.11) !important;
}

/* Empty edit slots remain quiet until the editor interacts with them. */
.sheet-roster-table.chip-board-layout .assignment-chip-empty {
    min-width: 26px !important;
    width: 26px !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #8c948f !important;
    opacity: .18;
}
.sheet-roster-table.chip-board-layout .assignment-chip-empty::before {
    content: "+";
    font-size: 16px;
    font-weight: 700;
}
.sheet-roster-table.chip-board-layout .assignment-cell:hover .assignment-chip-empty {
    opacity: .75;
    background: #fffdf9 !important;
}

/* Section changes get spacing, never rules. */
.sheet-roster-table.chip-board-layout tbody tr.section-end td.role-cell,
.sheet-roster-table.chip-board-layout tbody tr.section-end td.assignment-cell {
    padding-bottom: 9px !important;
}
.sheet-roster-table.chip-board-layout tbody tr.section-end + tr td.role-cell,
.sheet-roster-table.chip-board-layout tbody tr.section-end + tr td.assignment-cell {
    padding-top: 9px !important;
}

/* No residual frame at the edges. */
.sheet-roster-table.chip-board-layout tr > *:first-child,
.sheet-roster-table.chip-board-layout tr > *:last-child {
    border: 0 !important;
}

@media (max-width: 1100px) {
    .sheet-roster-table.chip-board-layout .role-chip,
    .sheet-roster-table.chip-board-layout .assignment-chip {
        font-size: 10.5px !important;
        padding-inline: 8px !important;
    }
    .sheet-roster-table.chip-board-layout .sub-chip {
        font-size: 10.5px !important;
    }
    .sheet-roster-table.chip-board-layout .service-time-chip {
        min-width: 52px;
        font-size: 11px;
    }
}

/* 2026-08-11 grouped roster board — subs own roles, assignments use quiet tiles */

.sheet-roster-table.grouped-board-layout {
    --role-w: 118px;
}

/* Remove the Sub column entirely; subs become group headings. */
.sheet-roster-table.grouped-board-layout .section-col,
.sheet-roster-table.grouped-board-layout .section-cell,
.sheet-roster-table.grouped-board-layout .merged-section {
    display: none !important;
}

.sheet-roster-table.grouped-board-layout .role-col,
.sheet-roster-table.grouped-board-layout .role-cell {
    left: 0 !important;
    width: var(--role-w) !important;
    min-width: var(--role-w) !important;
    max-width: var(--role-w) !important;
}

/* Cohort headings are typography, not chips. */
.sheet-roster-table.grouped-board-layout .roster-cohort-row td {
    height: 46px !important;
    padding: 15px 12px 7px !important;
    background: #eee9df !important;
}
.sheet-roster-table.grouped-board-layout .roster-cohort-badge,
.sheet-roster-table.grouped-board-layout .cohort-heading {
    display: block !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #31594d !important;
}
.sheet-roster-table.grouped-board-layout .roster-cohort-row[data-level="VT"] .roster-cohort-badge {
    background: transparent !important;
    color: #5c527b !important;
}
.sheet-roster-table.grouped-board-layout .roster-cohort-badge strong {
    font-size: 15px !important;
    font-weight: 850 !important;
    letter-spacing: -.015em;
}

/* Each Sub becomes a compact group heading before the roles it owns. */
.sheet-roster-table.grouped-board-layout .sub-group-row td {
    height: 29px !important;
    padding: 8px 10px 3px !important;
    border: 0 !important;
    background: #f5f1e9 !important;
    text-align: left !important;
}
.sheet-roster-table.grouped-board-layout .sub-group-heading {
    position: sticky;
    left: 10px;
    z-index: 12;
    width: max-content;
    color: #356556;
    font-size: 10.5px;
    line-height: 1;
    font-weight: 850;
    letter-spacing: .075em;
    text-transform: uppercase;
}

/* Role is a plain row label. No coloured role chips. */
.sheet-roster-table.grouped-board-layout .role-cell {
    padding: 5px 10px 5px 14px !important;
    background: #fffdf9 !important;
    text-align: left !important;
    vertical-align: middle !important;
    box-shadow: 7px 0 12px -14px rgba(24,63,52,.6) !important;
}
.sheet-roster-table.grouped-board-layout .role-chip,
.sheet-roster-table.grouped-board-layout .role-label {
    display: inline !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #5d4d15 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    white-space: normal !important;
}
.sheet-roster-table.grouped-board-layout .sub-group-start .role-cell {
    padding-top: 8px !important;
}
.sheet-roster-table.grouped-board-layout .sub-group-end .role-cell {
    padding-bottom: 9px !important;
}

/* Dates remain the primary header; time is a small purposeful indicator, not another chip. */
.sheet-roster-table.grouped-board-layout .service-time-chip,
.sheet-roster-table.grouped-board-layout .service-time-label {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
}
.sheet-roster-table.grouped-board-layout .service-time-chip::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
}
.sheet-roster-table.grouped-board-layout .service-time-chip.time-ten::before {
    background: #b8d9cb;
}
.sheet-roster-table.grouped-board-layout .service-time-chip.time-twelve::before {
    background: #c6bde0;
}

/* Assignment tiles: one neutral system. Colour only means service time. */
.sheet-roster-table.grouped-board-layout .assignment-cell {
    height: 35px !important;
    padding: 3px 6px !important;
}
.sheet-roster-table.grouped-board-layout .assignment-chip,
.sheet-roster-table.grouped-board-layout .assignment-tile {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    max-width: calc(100% - 6px);
    min-height: 26px !important;
    padding: 5px 9px 5px 11px !important;
    border: 0 !important;
    border-radius: 7px !important;
    color: #284d44 !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: none !important;
}
.sheet-roster-table.grouped-board-layout .slot-10 .assignment-chip {
    background: #edf5f1 !important;
    box-shadow: inset 3px 0 #356556, 0 1px 2px rgba(29,40,36,.06) !important;
}
.sheet-roster-table.grouped-board-layout .slot-12 .assignment-chip {
    background: #f1eef7 !important;
    color: #51496d !important;
    box-shadow: inset 3px 0 #675d88, 0 1px 2px rgba(29,40,36,.06) !important;
}
.sheet-roster-table.grouped-board-layout button.assignment-chip:hover {
    box-shadow: inset 3px 0 #356556, 0 2px 6px rgba(29,40,36,.11) !important;
}
.sheet-roster-table.grouped-board-layout .slot-12 button.assignment-chip:hover {
    box-shadow: inset 3px 0 #675d88, 0 2px 6px rgba(29,40,36,.11) !important;
}

/* Empty published cells are genuinely empty. No plus, no ghost control. */
.sheet-roster-table.grouped-board-layout .assignment-chip-empty::before,
.sheet-roster-table.grouped-board-layout .assignment-chip-empty::after {
    content: none !important;
}
.sheet-roster-card.published-roster .sheet-roster-table.grouped-board-layout .assignment-chip-empty,
.sheet-roster-card:not(.editing-roster) .sheet-roster-table.grouped-board-layout .assignment-chip-empty {
    display: none !important;
}

/* In edit mode the empty slot remains clickable, but does not advertise itself with a symbol. */
.sheet-roster-card.editing-roster .sheet-roster-table.grouped-board-layout .assignment-chip-empty {
    display: block !important;
    width: calc(100% - 10px) !important;
    max-width: none !important;
    height: 27px !important;
    min-height: 27px !important;
    padding: 0 !important;
    opacity: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.sheet-roster-card.editing-roster .sheet-roster-table.grouped-board-layout .assignment-cell:hover .assignment-chip-empty {
    opacity: 1 !important;
    background: rgba(255,255,255,.35) !important;
}

/* Keep the board airy: group separation comes from spacing, never rules. */
.sheet-roster-table.grouped-board-layout th,
.sheet-roster-table.grouped-board-layout td {
    border: 0 !important;
}
.sheet-roster-table.grouped-board-layout .sub-group-end td.assignment-cell {
    padding-bottom: 8px !important;
}

@media (max-width: 1100px) {
    .sheet-roster-table.grouped-board-layout { --role-w: 104px; }
    .sheet-roster-table.grouped-board-layout .role-chip,
    .sheet-roster-table.grouped-board-layout .role-label,
    .sheet-roster-table.grouped-board-layout .assignment-chip,
    .sheet-roster-table.grouped-board-layout .assignment-tile {
        font-size: 10.5px !important;
    }
}

/* 2026-08-11 grouped roster refinement — full width, plain assignments, subtle grid */

.wide-page {
    width: calc(100% - 12px) !important;
    max-width: none !important;
}
.sheet-roster-card,
.sheet-roster-card .table-scroll,
.sheet-roster-table.grouped-board-layout {
    width: 100% !important;
    max-width: none !important;
}
.sheet-roster-table.grouped-board-layout {
    table-layout: fixed !important;
}

/* Assignments are plain text. Service context comes from the column/header, not a chip. */
.sheet-roster-table.grouped-board-layout .assignment-chip,
.sheet-roster-table.grouped-board-layout .assignment-tile {
    display: inline !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #264f45 !important;
    font: inherit !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-shadow: none !important;
    transform: none !important;
}
.sheet-roster-table.grouped-board-layout button.assignment-chip,
.sheet-roster-table.grouped-board-layout button.assignment-tile {
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer;
}
.sheet-roster-table.grouped-board-layout button.assignment-chip:hover,
.sheet-roster-table.grouped-board-layout button.assignment-tile:hover {
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    transform: none !important;
}

.sheet-roster-table.grouped-board-layout .service-time-chip.time-ten::before {
    background: #9fc7b8 !important;
}
.sheet-roster-table.grouped-board-layout .service-time-chip.time-twelve::before {
    background: #d9aa96 !important;
}

/* Keep a very light working grid in both published and edit views. */
.sheet-roster-card .sheet-roster-table.grouped-board-layout tbody tr:not(.roster-cohort-row):not(.sub-group-row) .role-cell,
.sheet-roster-card .sheet-roster-table.grouped-board-layout tbody tr:not(.roster-cohort-row):not(.sub-group-row) .assignment-cell {
    box-shadow:
        inset -1px 0 rgba(56,91,84,.10),
        inset 0 -1px rgba(56,91,84,.10) !important;
}

.sheet-roster-card.editing-roster .sheet-roster-table.grouped-board-layout .assignment-cell:hover {
    background-color: rgba(255,255,255,.16) !important;
}
.sheet-roster-card.editing-roster .sheet-roster-table.grouped-board-layout .assignment-chip-empty {
    opacity: 0 !important;
}
.sheet-roster-card.editing-roster .sheet-roster-table.grouped-board-layout .assignment-cell:hover .assignment-chip-empty {
    opacity: 1 !important;
    background: rgba(255,255,255,.32) !important;
    outline: 1px dashed rgba(56,91,84,.18) !important;
    outline-offset: -2px;
}

@media (max-width: 1100px) {
    .wide-page { width: calc(100% - 8px) !important; }
    .sheet-roster-table.grouped-board-layout {
        width: max-content !important;
        min-width: 1160px !important;
    }
}

/* 2026-08-11 linked volunteer My roster view */

.my-roster-toggle.active {
    background: #dfece7 !important;
    border-color: #b9d2c9 !important;
    color: #244c41 !important;
}

.sheet-roster-table.my-roster-view {
    width: 100% !important;
}

.sheet-roster-table.my-roster-view .role-cell {
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
}

.my-roster-empty {
    margin: 22px 12px 8px;
    padding: 22px 18px;
    border-radius: 10px;
    background: #f5f1e9;
    color: #31594d;
    text-align: center;
}

.my-roster-empty strong,
.my-roster-empty span {
    display: block;
}

.my-roster-empty strong {
    margin-bottom: 4px;
    font-size: 15px;
}

.my-roster-empty span {
    color: #69756f;
    font-size: 12px;
}

/* Final roster assignment reset: assignment = plain text only. */
.sheet-roster-table.grouped-board-layout .assignment-cell .assignment-chip:not(.assignment-chip-empty),
.sheet-roster-table.grouped-board-layout .assignment-cell .assignment-tile:not(.assignment-chip-empty),
.sheet-roster-table.grouped-board-layout .assignment-cell .assignment-readonly {
    display: inline !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transform: none !important;
    filter: none !important;
    color: #5d4d15 !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

.sheet-roster-table.grouped-board-layout .assignment-cell .assignment-chip:not(.assignment-chip-empty) *,
.sheet-roster-table.grouped-board-layout .assignment-cell .assignment-tile:not(.assignment-chip-empty) *,
.sheet-roster-table.grouped-board-layout .assignment-cell .assignment-readonly * {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: inherit !important;
    font: inherit !important;
}

.sheet-roster-table.grouped-board-layout .assignment-cell .assignment-chip:not(.assignment-chip-empty)::before,
.sheet-roster-table.grouped-board-layout .assignment-cell .assignment-chip:not(.assignment-chip-empty)::after,
.sheet-roster-table.grouped-board-layout .assignment-cell .assignment-tile:not(.assignment-chip-empty)::before,
.sheet-roster-table.grouped-board-layout .assignment-cell .assignment-tile:not(.assignment-chip-empty)::after,
.sheet-roster-table.grouped-board-layout .assignment-cell .assignment-readonly::before,
.sheet-roster-table.grouped-board-layout .assignment-cell .assignment-readonly::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Match the compact plain-text presentation on both sides of the row. */
.sheet-roster-table.grouped-board-layout .assignment-cell {
    height: 30px !important;
    padding: 2px 6px !important;
}
.sheet-roster-table.grouped-board-layout .role-cell {
    padding: 3px 10px 3px 14px !important;
}
.sheet-roster-table.grouped-board-layout .sub-group-start .role-cell {
    padding-top: 5px !important;
}
.sheet-roster-table.grouped-board-layout .sub-group-end .role-cell {
    padding-bottom: 5px !important;
}
.sheet-roster-table.grouped-board-layout .sub-group-end td.assignment-cell {
    padding-bottom: 4px !important;
}

.sheet-roster-table.grouped-board-layout .assignment-cell button.assignment-chip:not(.assignment-chip-empty),
.sheet-roster-table.grouped-board-layout .assignment-cell button.assignment-tile:not(.assignment-chip-empty) {
    cursor: pointer;
}
.sheet-roster-table.grouped-board-layout .assignment-cell button.assignment-chip:not(.assignment-chip-empty):hover,
.sheet-roster-table.grouped-board-layout .assignment-cell button.assignment-tile:not(.assignment-chip-empty):hover {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* 2026-08-11 visual role template builder */
.role-template-page-header{align-items:flex-end}.role-template-card{width:100%;overflow:hidden;border-radius:14px;background:#fffdf9}.role-template-scroll{overflow:auto}.role-template-board{display:grid;grid-template-columns:minmax(150px,220px) minmax(180px,1fr) minmax(180px,1fr) 72px;min-width:760px;background:#fffdf9}.role-template-head{min-height:76px;display:flex;align-items:center;justify-content:center;gap:7px;background:#356556;color:#fff;font-weight:850;font-size:13px}.role-template-role-head{background:#7eafa5}.role-template-actions-head{background:#356556}.time-dot{width:7px;height:7px;border-radius:50%}.time-dot-10{background:#b8d9cb}.time-dot-12{background:#e2ad99}.role-template-level{min-height:54px;padding:16px 18px 10px;display:flex;align-items:center;gap:12px;background:#eee9df;color:#31594d}.role-template-level strong{font-size:18px;font-weight:850;letter-spacing:-.02em}.role-template-sub{min-height:38px;padding:10px 16px 5px;display:flex;align-items:center;gap:10px;background:#f5f1e9;color:#356556}.role-template-sub>span{font-size:11px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}.template-inline-action{border:0;background:transparent;color:#356556;font:inherit;font-size:11px;font-weight:800;cursor:pointer;opacity:.7}.template-inline-action:hover{opacity:1;text-decoration:underline}.role-template-cell{min-height:34px;padding:6px 14px;display:flex;align-items:center;box-shadow:inset -1px 0 rgba(56,91,84,.10),inset 0 -1px rgba(56,91,84,.10)}.role-template-name{color:#5d4d15;font-size:12px;font-weight:800}.role-template-time{justify-content:center;color:#5d4d15;font-size:12px;font-weight:800;background:#fff8ef}.role-template-time:nth-of-type(4n+3){background:#f6e7df}.role-template-row-action{justify-content:center;padding-inline:5px}.template-edit-role{border:0;background:transparent;color:#356556;font-size:11px;font-weight:800;cursor:pointer}.template-edit-role:hover{text-decoration:underline}.role-template-empty{padding:12px 16px;color:var(--muted);font-size:12px;background:#fffdf9}.role-template-dialog{width:min(650px,calc(100% - 28px))}.role-window-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.role-window-grid fieldset{border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.role-window-grid legend{padding:0 5px;color:#356556;font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.06em}.role-window-grid label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:11px;font-weight:700}.role-window-grid input{width:100%}.dialog-actions .grow{flex:1}.button.danger.ghost{color:#a33c36;border-color:rgba(163,60,54,.2)}
@media(max-width:700px){.role-template-board{grid-template-columns:140px 170px 170px 58px}.role-window-grid{grid-template-columns:1fr}.role-template-level strong{font-size:16px}}

/* 2026-08-11 services module */
.services-page-header{align-items:flex-end}.services-card{background:#fffdf9;border-radius:18px;overflow:hidden;box-shadow:0 1px 0 rgba(31,58,51,.06)}.services-card-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:22px 24px 16px;border-bottom:1px solid rgba(47,86,75,.10)}.services-card-head h2{margin:2px 0 0;font-size:24px}.services-count{padding:7px 11px;border-radius:999px;background:#e4f0ec;color:#285348;font-size:12px;font-weight:800}.services-list{display:flex;flex-direction:column}.service-row{display:grid;grid-template-columns:72px minmax(220px,1.3fr) minmax(140px,.7fr) 130px 72px;align-items:center;min-height:68px;padding:0 18px;border-bottom:1px solid rgba(47,86,75,.10);transition:background .15s ease}.service-row:last-child{border-bottom:0}.service-row:hover{background:#fbf8f2}.service-row.inactive{opacity:.58}.service-order{display:flex;gap:3px}.service-order form{margin:0}.service-order-button{width:27px;height:27px;border:1px solid rgba(47,86,75,.16);border-radius:8px;background:#fff;color:#356556;font-weight:900;cursor:pointer}.service-order-button:disabled{opacity:.22;cursor:default}.service-main{display:flex;flex-direction:column;gap:2px}.service-main strong{color:#18332c;font-size:16px}.service-main span,.service-field-label{color:var(--muted);font-size:11px}.service-time-block{display:flex;flex-direction:column;gap:2px}.service-time-block strong{font-size:16px;color:#31594d}.service-status{display:inline-flex;padding:6px 10px;border-radius:999px;font-size:11px;font-weight:850}.service-status.active{background:#e2efeb;color:#285348}.service-status.inactive{background:#eeeae4;color:#6e6961}.service-actions{text-align:right}.service-edit-button{border:0;background:transparent;color:#356556;font-weight:800;cursor:pointer}.service-edit-button:hover{text-decoration:underline}.services-empty{padding:28px;color:var(--muted)}.services-note{margin-top:14px;padding:16px 20px;border-radius:14px;background:#f2eee6;color:#35584f}.services-note strong{display:block;margin-bottom:4px}.services-note p{margin:0;color:#64716d;font-size:13px;line-height:1.5}.service-dialog{width:min(560px,calc(100% - 28px))}.service-form-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:12px}.service-active-toggle{display:flex!important;align-items:flex-start!important;gap:10px!important;margin-top:14px;padding:12px;border-radius:12px;background:#f5f2eb}.service-active-toggle input{width:auto;margin-top:3px}.service-active-toggle span{display:flex;flex-direction:column;gap:2px}.service-active-toggle small{font-weight:500;color:var(--muted)}
.role-template-board{background:#fffdf9}.role-service-head{flex-direction:column;gap:2px}.role-service-head>span:not(.time-dot){display:block}.role-service-head small{font-size:10px;font-weight:700;opacity:.72}.role-template-time{background:#fff8ef!important}.role-template-time.service-alt{background:#f6e7df!important}.dynamic-role-window-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.dynamic-role-window-grid fieldset{min-width:0}
@media(max-width:760px){.service-row{grid-template-columns:56px 1fr 110px 70px;padding:10px 12px}.service-status-block{display:none}.service-form-grid{grid-template-columns:1fr}.services-card-head{padding-inline:16px}}

/* 2026-08-11 services v2 */
.services-v2-header{align-items:flex-end}.services-v2-section{margin-top:24px;background:rgba(255,255,255,.72);border:1px solid rgba(42,83,72,.12);border-radius:22px;overflow:hidden}.services-v2-section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;padding:24px 28px 16px}.services-v2-section-head h2{margin:2px 0 0;font-size:26px}.services-v2-list{display:grid}.services-v2-row{display:grid;grid-template-columns:minmax(120px,.7fr) minmax(180px,1fr) minmax(120px,.5fr) auto;align-items:center;gap:18px;min-height:72px;padding:12px 28px;border-top:1px solid rgba(42,83,72,.10)}.services-v2-row.is-inactive{opacity:.58}.service-time-big{font-size:25px;font-weight:800;color:#173c34}.service-kind{color:#66746f;font-weight:600}.service-state{justify-self:start}.status-pill{display:inline-flex;align-items:center;border-radius:999px;padding:6px 11px;font-size:12px;font-weight:800}.status-pill.active{background:#e3f0eb;color:#24564a}.status-pill.inactive{background:#ece8e1;color:#746f67}.status-pill.draft{background:#fff0d9;color:#895d1a}.service-edit-link,.service-delete-link{appearance:none;background:none;border:0;font:inherit;font-weight:800;cursor:pointer;padding:8px 0}.service-edit-link{color:#2f6658}.service-delete-link{color:#b8443d}.services-v2-empty{padding:28px;color:#77827e;border-top:1px solid rgba(42,83,72,.10)}.service-v2-dialog{width:min(620px,calc(100vw - 28px))}.service-v2-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}.service-active-toggle{display:flex!important;align-items:flex-start;gap:14px;background:#f5f1e9;border-radius:16px;padding:18px!important}.service-active-toggle input{width:20px;height:20px;margin-top:2px}.service-active-toggle span{display:grid;gap:3px}.service-active-toggle strong{font-size:17px}.service-active-toggle small,.service-v2-note{color:#74807c}.service-v2-note{margin:2px 0 0}.services-v2-row form{margin:0}@media(max-width:720px){.services-v2-row{grid-template-columns:1fr auto;gap:8px 16px}.service-kind{grid-column:1}.service-state{grid-column:2;grid-row:1}.service-edit-link,.services-v2-row form{grid-column:2;grid-row:2}.service-v2-two{grid-template-columns:1fr}}

/* 2026-08-11 relative-minute role template */
.role-relative-board{display:grid;grid-template-columns:minmax(180px,260px) minmax(260px,1fr) 72px;min-width:680px;background:#fffdf9}
.role-relative-window{justify-content:center;color:#5d4d15;font-size:12px;font-weight:800;background:#fff8ef}
.role-relative-dialog{width:min(620px,calc(100% - 28px))}
.relative-window-fieldset{margin-top:12px;border:1px solid var(--line);border-radius:14px;padding:14px 16px 16px}
.relative-window-fieldset legend{padding:0 6px;color:#356556;font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.06em}
.relative-window-inputs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.relative-window-inputs label{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;align-items:end;color:var(--muted);font-size:11px;font-weight:700}
.relative-window-inputs input{grid-column:1/-1;width:100%}
.field-hint{font-weight:600;opacity:.75}
.relative-help{margin:12px 0 0;font-size:11px;line-height:1.45}
@media(max-width:700px){.role-relative-board{grid-template-columns:150px 220px 58px}.relative-window-inputs{grid-template-columns:1fr}}

/* 2026-08-11 adaptive multi-service roster */
.sheet-roster-table.service-stack-readonly{width:100%!important;min-width:0!important;table-layout:fixed}
.service-stack-readonly .service-stack-header-row .service-head{padding:0!important;min-height:30px}
.service-stack-head{display:flex;align-items:center;justify-content:center;gap:10px;min-height:30px;padding:4px 6px;flex-wrap:wrap}
.service-stack-head span{font-size:9px;font-weight:850;color:#fff;white-space:nowrap}
.service-stack-readonly .date-head{border-right:1px solid rgba(255,255,255,.24)!important}
.service-stack-readonly .service-head{border-right:1px solid rgba(255,255,255,.18)!important}
.service-stack-readonly .service-stack-merged-cell{padding:3px 6px!important;vertical-align:middle!important}
.service-stack-readonly-list{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:26px}
.service-stack-readonly-line{display:grid;grid-template-columns:auto auto;align-items:center;justify-content:center;gap:6px;min-height:18px;max-width:100%}
.service-stack-readonly-time{font-size:8px;font-weight:800;color:#6f776f;white-space:nowrap}
.service-stack-readonly-value{min-width:0;color:#5d4d15;font-size:11px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.service-stack-readonly-value>*{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;color:inherit!important;font:inherit!important;min-height:0!important}
.service-stack-readonly tbody tr{height:auto!important;min-height:30px}
.service-stack-scroll{overflow-x:auto!important;overscroll-behavior-x:contain}
.service-stack-heavy-edit{table-layout:fixed!important}
.service-stack-heavy-edit .assignment-cell{min-width:100px!important}
@media(min-width:1101px){.sheet-roster-card .table-scroll.service-stack-scroll{overflow-x:auto!important}}


/* 2026-08-11 finalised roster lifecycle */
.publication-status.finalised {
    background: #e5ebe8;
    color: #244f46;
    border: 1px solid #b9cbc5;
}
.finalise-roster-form {
    display: inline-flex;
    margin: 0;
}
.finalise-roster-form .button {
    white-space: nowrap;
}


/* 2026-08-11 roster admin tools */
.roster-view-as-panel {
    position: fixed;
    z-index: 1800;
    padding: 12px;
    border: 1px solid #d7dfdb;
    border-radius: 16px;
    background: #fffdf9;
    box-shadow: 0 16px 38px rgba(29, 50, 44, 0.16);
}
.roster-view-as-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #1e302b;
}
.roster-view-as-head button {
    border: 0;
    background: transparent;
    color: #65736f;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.roster-view-as-search {
    width: 100%;
    min-height: 40px;
    padding: 8px 11px;
    border: 1px solid #d7dfdb;
    border-radius: 10px;
    background: #fff;
    color: #1e302b;
    font: inherit;
    outline: none;
}
.roster-view-as-search:focus { border-color: #6e9b90; box-shadow: 0 0 0 3px rgba(110,155,144,.12); }
.roster-view-as-list {
    display: grid;
    gap: 4px;
    max-height: 330px;
    margin-top: 8px;
    overflow-y: auto;
}
.roster-view-as-option {
    display: grid;
    grid-template-columns: minmax(76px, auto) 1fr;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #263934;
    text-align: left;
    cursor: pointer;
}
.roster-view-as-option:hover { background: #edf4f1; }
.roster-view-as-option strong { color: #27584d; }
.roster-view-as-option span { color: #6a7672; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roster-view-as-full { display: block; color: #27584d; font-weight: 800; border-bottom: 1px solid #e6ebe8; border-radius: 8px 8px 0 0; }

.roster-summary-dialog {
    width: min(920px, calc(100vw - 32px));
    max-height: min(820px, calc(100vh - 32px));
    padding: 0;
    border: 0;
    border-radius: 24px;
    background: #fffdf9;
    color: #1d2f2a;
    box-shadow: 0 24px 70px rgba(26, 45, 40, .24);
}
.roster-summary-dialog::backdrop { background: rgba(25, 36, 33, .42); backdrop-filter: blur(2px); }
.roster-summary-shell { padding: 26px; overflow: auto; max-height: min(820px, calc(100vh - 32px)); }
.roster-summary-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.roster-summary-head .eyebrow { display: block; margin-bottom: 4px; color: #3b7468; font-size: 12px; font-weight: 900; letter-spacing: .16em; }
.roster-summary-head h2 { margin: 0; font-size: 32px; line-height: 1.05; }
.roster-summary-close { width: 42px; height: 42px; border: 0; border-radius: 50%; background: #f0ece4; color: #243630; font-size: 28px; line-height: 1; cursor: pointer; }
.roster-summary-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 22px 0; }
.roster-summary-totals > div { padding: 16px 18px; border-radius: 15px; background: #eef4f1; }
.roster-summary-totals strong { display: block; color: #24564b; font-size: 28px; line-height: 1; }
.roster-summary-totals span { display: block; margin-top: 7px; color: #687671; font-size: 13px; font-weight: 700; }
.roster-summary-section { margin-top: 22px; }
.roster-summary-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.roster-summary-section-head h3 { margin: 0; font-size: 17px; }
.roster-summary-section-head > span { color: #78837f; font-size: 12px; font-weight: 700; }
.roster-summary-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 8px; }
.roster-summary-level-card { padding: 13px 14px; border: 1px solid #e1e6e3; border-radius: 13px; background: #fff; }
.roster-summary-level-card span { display: block; min-height: 32px; color: #406e64; font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.roster-summary-level-card strong { display: block; margin-top: 4px; color: #1e302b; font-size: 25px; }
.roster-summary-level-card small { color: #7b8581; }
.roster-summary-table-wrap { overflow: auto; border: 1px solid #e2e7e4; border-radius: 14px; }
.roster-summary-table { width: 100%; border-collapse: collapse; background: #fff; }
.roster-summary-table th, .roster-summary-table td { padding: 11px 14px; border-bottom: 1px solid #edf0ee; text-align: left; }
.roster-summary-table th { position: sticky; top: 0; background: #f5f3ed; color: #63706c; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.roster-summary-table th:nth-child(2), .roster-summary-table th:nth-child(3), .roster-summary-table td:nth-child(2), .roster-summary-table td:nth-child(3) { width: 120px; text-align: center; }
.roster-summary-table td strong { display: block; color: #263934; }
.roster-summary-table td span { display: block; margin-top: 2px; color: #89918e; font-size: 11px; }
.roster-summary-table tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 640px) {
    .roster-summary-totals { grid-template-columns: 1fr; }
    .roster-summary-shell { padding: 18px; }
}


/* 2026-08-11 admin cleanup and sticky tables */
.sticky-data-table-wrap {
    max-height: calc(100vh - 220px);
    overflow: auto;
    position: relative;
}
.sticky-admin-table thead th {
    position: sticky;
    top: 0;
    z-index: 8;
    background: #f1eee7;
    box-shadow: 0 1px 0 #d8ddd9;
}
.preacher-create-form {
    display: grid;
    grid-template-columns: minmax(280px, .9fr) minmax(460px, 1.5fr) auto;
    gap: 18px;
    align-items: end;
}
.preacher-external-fields {
    display: grid;
    grid-template-columns: 1.4fr .8fr;
    gap: 16px;
}
.preacher-external-fields[hidden] { display: none; }
.preacher-dialog-actions { display: flex; align-items: center; width: 100%; }
.dialog-action-spacer { flex: 1; }
.roster-summary-services { display: grid; gap: 18px; }
.roster-summary-service-block {
    padding: 14px;
    border-radius: 16px;
    background: #f7f4ee;
}
.roster-summary-service-block h4 {
    margin: 0 0 10px;
    color: #315f55;
    font-size: 18px;
}
@media (max-width: 900px) {
    .preacher-create-form { grid-template-columns: 1fr; }
    .preacher-external-fields { grid-template-columns: 1fr; }
}


/* 2026-08-11 preacher layout v2 */
.preacher-create-panel {
    max-width: 1180px;
}
.preacher-create-form {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: 16px !important;
}
.preacher-create-form > label {
    width: 100%;
}
.preacher-create-form > label select {
    width: 100%;
}
.preacher-external-fields {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr) !important;
    gap: 16px;
    width: 100%;
}
.preacher-external-fields[hidden] {
    display: none !important;
}
.preacher-create-form > .button {
    align-self: flex-end;
    min-width: 150px;
}
@media (max-width: 760px) {
    .preacher-external-fields {
        grid-template-columns: 1fr !important;
    }
    .preacher-create-form > .button {
        width: 100%;
    }
}


/* 2026-08-11 admin cleanup v3 */
.viewport-sticky-table-wrap {
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
}
.viewport-sticky-admin-table {
    border-collapse: separate;
    border-spacing: 0;
}
.viewport-sticky-admin-table thead th {
    position: sticky !important;
    top: 74px !important;
    z-index: 30 !important;
    background: #f1eee7 !important;
    box-shadow: 0 1px 0 #d8ddd9, 0 5px 12px rgba(31, 48, 42, .05);
}

/* Preacher add form: compact, intentional hierarchy rather than a stretched form strip. */
.preacher-create-panel {
    max-width: none !important;
    padding: 28px 30px !important;
}
.preacher-create-form {
    display: grid !important;
    grid-template-columns: minmax(0, 760px) !important;
    justify-content: start !important;
    align-items: stretch !important;
    gap: 18px !important;
    max-width: 900px;
}
.preacher-create-form > label,
.preacher-external-fields label {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 !important;
}
.preacher-create-form input,
.preacher-create-form select {
    width: 100% !important;
    min-width: 0 !important;
}
.preacher-external-fields {
    display: grid !important;
    grid-template-columns: minmax(0, 1.7fr) minmax(220px, .8fr) !important;
    gap: 16px !important;
    width: 100% !important;
}
.preacher-external-fields[hidden] { display: none !important; }
.preacher-create-form > .button {
    justify-self: start !important;
    align-self: auto !important;
    min-width: 150px;
}

.roster-month-empty-state {
    min-height: 360px;
    margin: 14px 0 0;
    border: 1px solid #dbe2de;
    border-radius: 22px;
    background: #fbfaf7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 56px 28px;
    gap: 18px;
}
.roster-month-empty-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #e3efeb;
    color: #315f55;
    font-size: 34px;
    font-weight: 500;
    line-height: 1;
}
.roster-month-empty-copy {
    max-width: 560px;
}
.roster-month-empty-copy .eyebrow {
    display: block;
    margin-bottom: 8px;
}
.roster-month-empty-copy h2 {
    margin: 0 0 8px;
    color: #17271f;
    font-size: clamp(28px, 3vw, 42px);
}
.roster-month-empty-copy p {
    margin: 0;
    color: #68756f;
    font-size: 17px;
    line-height: 1.5;
}

@media (max-width: 820px) {
    .viewport-sticky-admin-table thead th { top: 64px !important; }
    .preacher-create-form { grid-template-columns: 1fr !important; }
    .preacher-external-fields { grid-template-columns: 1fr !important; }
    .preacher-create-form > .button { width: 100%; }
    .roster-month-empty-state { min-height: 300px; }
}


/* 2026-08-11 UI integrity v4 */
.force-viewport-table-wrap {
    overflow-y: visible !important;
    max-height: none !important;
}
.force-sticky-admin-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
.force-sticky-admin-table thead th {
    position: sticky !important;
    top: var(--admin-sticky-top, 72px) !important;
    z-index: 60 !important;
    background: #f1eee7 !important;
    box-shadow: 0 1px 0 #d7ddd9, 0 6px 14px rgba(31, 48, 42, .07) !important;
}
.roster-empty-state-v4 {
    min-height: 360px;
    margin: 14px 0 0;
    border: 1px solid #dbe2de;
    border-radius: 22px;
    background: #fbfaf7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 52px 28px;
    text-align: center;
}
.roster-empty-state-v4__icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #e3efeb;
    color: #315f55;
    font-size: 34px;
    line-height: 1;
}
.roster-empty-state-v4__copy {
    max-width: 560px;
}
.roster-empty-state-v4__copy h2 {
    margin: 8px 0 8px;
    color: #17271f;
    font-size: clamp(28px, 3vw, 42px);
}
.roster-empty-state-v4__copy p {
    margin: 0;
    color: #68756f;
    font-size: 17px;
    line-height: 1.5;
}
@media (max-width: 820px) {
    .roster-empty-state-v4 { min-height: 300px; }
}


/* 2026-08-12 UI stability v5 */
.admin-floating-table-head {
    background: #f1eee7;
    box-shadow: 0 1px 0 #d7ddd9;
}
.admin-floating-table-inner {
    background: #f1eee7;
}
.admin-floating-table-head table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #f1eee7 !important;
}
.admin-floating-table-head thead th,
.admin-floating-table-head thead td {
    background: #f1eee7 !important;
}
/* Disable superseded sticky-thead implementations. */
.force-sticky-admin-table thead th,
.force-sticky-admin-table thead td,
.viewport-sticky-admin-table thead th,
.viewport-sticky-admin-table thead td,
.sticky-admin-table thead th,
.sticky-admin-table thead td {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
}


/* 2026-08-12 CG roster cleanup */
html.cg-roster-clean .cg-main-clean {
    padding-bottom: 48px;
}

html.cg-roster-clean .cg-roster-layer-0,
html.cg-roster-clean .cg-roster-layer-1,
html.cg-roster-clean .cg-roster-layer-2,
html.cg-roster-clean .cg-roster-layer-3 {
    width: min(1440px, calc(100vw - 48px)) !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html.cg-roster-clean .cg-roster-layer-0 {
    overflow-x: auto;
    border-radius: 18px;
}

html.cg-roster-clean .cg-roster-table-clean {
    width: 100% !important;
    min-width: 760px;
    table-layout: fixed;
}

html.cg-roster-clean .cg-roster-table-clean th:first-child,
html.cg-roster-clean .cg-roster-table-clean td:first-child {
    width: 140px;
}

html.cg-roster-clean .cg-month-title-clean,
html.cg-roster-clean .cg-month-actions-clean {
    max-width: min(1440px, calc(100vw - 48px)) !important;
}

html.cg-roster-clean .cg-month-actions-clean {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

@media (max-width: 820px) {
    html.cg-roster-clean .cg-roster-layer-0,
    html.cg-roster-clean .cg-roster-layer-1,
    html.cg-roster-clean .cg-roster-layer-2,
    html.cg-roster-clean .cg-roster-layer-3 {
        width: calc(100vw - 24px) !important;
    }

    html.cg-roster-clean .cg-roster-table-clean {
        min-width: 680px;
    }
}