/* Argenta Design Tokens */
:root {
    --color-body: #27282A;
    --color-primary: #00A1BE;
    --color-secondary: #00CC78;
    --color-tertiary: #FF4A11;
    --color-rfv: #FF4A11;
    --color-icons: #FF4A11;
    --font-primary: muli, sans-serif;
    --font-secondary: circle-rounded, sans-serif;
    --font-headings: gotham, sans-serif;
    --font-subheadings: muli, sans-serif;
    --font-titles: gotham, sans-serif;
    --font-controls: normal 1em muli, sans-serif;
    --font-buttons: muli, sans-serif;
    --font-links: muli, sans-serif;
    --color-links: #FF4A11;
    --color-links-hover: #00CC78;
    --color-buttons: #00A1BE;
    --color-buttons-hover: #038CA5;
    --color-buttons-text: #FFF;
    --color-buttons-text-hover: #FFF;
}

/* Form labels — dark gray, overrides inline style="#6c757d" */
.form-label.fw-bold { color: #464646 !important; }

/* Buttons — always teal with white text (exclude specialized button classes) */
:not(.notification-window-footer) > .btn:not(.btn-link):not(.btn-date-range):not(.btn-date-clear):not(.btn-cancel):not(.btn-view-all):not(.btn-green):not(.btn-danger-solid):not(.btn-warning-solid) {
    background-color: var(--color-buttons) !important;
    border-color: var(--color-buttons) !important;
    color: var(--color-buttons-text) !important;
    font-family: var(--font-buttons);
    white-space: nowrap;
}

:not(.notification-window-footer) > .btn:not(.btn-link):not(.btn-date-range):not(.btn-date-clear):not(.btn-cancel):not(.btn-view-all):not(.btn-danger-solid):not(.btn-warning-solid):hover {
    background-color: var(--color-buttons-hover) !important;
    border-color: var(--color-buttons-hover) !important;
    color: var(--color-buttons-text-hover) !important;
}

/* btn-warning-solid — orange #FF4A11 destructive button (Argenta inactive/danger color) */
.btn-warning-solid {
    background-color: #FF4A11;
    border: 1px solid #FF4A11;
    color: #fff;
    font-weight: 500;
    padding: .375rem .9rem;
    border-radius: .375rem;
    transition: background-color .15s ease, border-color .15s ease;
}
.btn-warning-solid:hover,
.btn-warning-solid:focus {
    background-color: #E0400E;
    border-color: #E0400E;
    color: #fff;
}

/* btn-green — green action button */
.btn.btn-green { background-color: #00CC78 !important; border-color: #00CC78 !important; color: #FFF !important; }
.btn.btn-green:hover { background-color: #00b56b !important; border-color: #00b56b !important; }

/* btn-view-all — teal button for "View All" actions */
.btn.btn-view-all {
    background-color: #00A1BE !important;
    border-color: #00A1BE !important;
    color: #FFF !important;
}
.btn.btn-view-all:hover {
    background-color: #008da6 !important;
    border-color: #008da6 !important;
    color: #FFF !important;
}

/* btn-info — Argenta teal (used for all action buttons except bottom save/exit) */
.btn.btn-info {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}
.btn.btn-info:hover {
    background-color: var(--color-buttons-hover) !important;
    border-color: var(--color-buttons-hover) !important;
    color: #fff !important;
}
.btn-outline-info {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    background-color: transparent !important;
}
.btn-outline-info:hover {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
}

/* Date range preset buttons — orange with white text */
.btn-date-range {
    background-color: #00CC78 !important;
    border: 1px solid #00CC78 !important;
    color: #FFF !important;
    flex: 1;
}
.btn-date-range:hover {
    background-color: #00a563 !important;
    border-color: #00a563 !important;
    color: #fff !important;
}

/* Date filter clear button — #464646 background */
.btn.btn-date-clear {
    background-color: #464646 !important;
    border-color: #464646 !important;
    color: #fff !important;
}
.btn.btn-date-clear:hover {
    background-color: #333 !important;
    border-color: #333 !important;
    color: #fff !important;
}

/* Cancel/secondary buttons — dark gray with white text */
.btn.btn-cancel {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #fff !important;
}

.btn.btn-cancel:hover {
    background-color: #5a6268 !important;
    border-color: #5a6268 !important;
    color: #fff !important;
}

.btn-xs {
    padding: .1rem .4rem;
    font-size: .75rem;
    line-height: 1.4;
}

.btn.btn-date-range {
    background-color: #00CC78 !important;
    border-color: #00CC78 !important;
    color: #FFF !important;
    padding: .1rem .4rem !important;
    font-size: .75rem !important;
    flex: 0 0 auto !important;
}

.btn.btn-date-range:hover {
    background-color: #00a563 !important;
    border-color: #00a563 !important;
    color: #FFF !important;
}

/* Connected date range — two pickers sharing one border */
.date-range-connected {
    display: flex;
    align-items: center;
    border: 1px solid #DEE2E6;
    border-radius: .375rem;
    background: #fff;
}

.date-range-connected .dtp-wrapper {
    flex: 1;
    min-width: 0;
}

.date-range-connected .dtp-display {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.date-range-connected .dtp-display:focus {
    box-shadow: none !important;
    border: none !important;
}

.date-range-connected .dtp-wrapper:first-child .dtp-display {
    border-radius: .375rem 0 0 .375rem !important;
}

.date-range-connected .dtp-wrapper:last-child .dtp-display {
    border-radius: 0 .375rem .375rem 0 !important;
}

.date-range-sep {
    color: #00A1BE;
    font-size: .8rem;
    font-weight: 700;
    padding: 0 .25rem;
    flex-shrink: 0;
}

/* Card headers — always gray, never blue */
.card-header {
    background-color: #F8F9FA;
}

/* Base Typography */
html, body {
    font-family: var(--font-primary);
    color: var(--color-body);
    margin: 0;
    padding: 0;
    height: 100%;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headings);
    color: var(--color-body);
}

a {
    color: var(--color-links);
    text-decoration: underline;
}

a:hover {
    color: var(--color-links-hover);
}

/* Form Controls — always white background */
.form-control,
.form-select,
textarea {
    background-color: #FFF !important;
}

/* Override browser autofill blue/yellow tint */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #FFF inset !important;
    box-shadow: 0 0 0 1000px #FFF inset !important;
    background-color: #FFF !important;
}

/* Form Controls — Argenta teal focus */
.form-select:focus,
.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .2rem rgba(0,161,190,.15);
}


/* Form Switches — Argenta teal, no Bootstrap blue */
.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.form-check-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .2rem rgba(0,161,190,.25);
}
.form-check-input:checked:focus {
    box-shadow: 0 0 0 .2rem rgba(0,161,190,.25);
}
.form-check-input:active {
    filter: none;
    background-color: rgba(0,161,190,.25);
    border-color: var(--color-primary);
}
.form-check-input:checked:active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.form-switch .form-check-input:focus:not(:checked) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280,161,190,0.5%29'/%3e%3c/svg%3e");
}

/* Custom Argenta Select Dropdown */
.argenta-select {
    position: relative;
}

.argenta-select.open {
    z-index: 1100;
}

.argenta-select-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .375rem .75rem;
    background: #FFF;
    border: 1px solid #DEE2E6;
    border-radius: .375rem;
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-body);
    cursor: pointer;
    transition: border-color 0.15s;
}

.argenta-select-btn:hover {
    border-color: var(--color-primary);
}

.argenta-select-btn:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .2rem rgba(0,161,190,.15);
    outline: none;
}

.argenta-select-btn:disabled,
.argenta-select-btn[disabled] {
    background-color: #e9ecef !important;
    color: #6c757d;
    cursor: not-allowed;
    opacity: 1;
}

.argenta-select-btn:disabled:hover,
.argenta-select-btn[disabled]:hover {
    border-color: #dee2e6;
}

.argenta-select-btn i,
.argenta-select-btn svg {
    font-size: .7rem;
    color: #999;
    margin-left: .5rem;
}

.argenta-select-btn {
    white-space: nowrap;
}

.argenta-select-list {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    margin: .25rem 0 0;
    padding: .25rem 0;
    background: #FFF;
    border: 1px solid #DEE2E6;
    border-radius: .375rem;
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.1);
    list-style: none;
    white-space: nowrap;
    min-width: 100%;
    width: auto;
    max-height: 250px;
    overflow-y: auto;
}

.argenta-select-list li {
    padding: .4rem .75rem;
    font-family: var(--font-primary);
    font-size: 1rem;
    color: var(--color-body);
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}

.argenta-select-list li:hover {
    background: var(--color-primary);
    color: #FFF;
}

.argenta-select-list li.selected {
    background: rgba(0,161,190,.1);
    color: var(--color-primary);
    font-weight: 600;
}

.argenta-select-list li.selected:hover {
    background: var(--color-primary);
    color: #FFF;
}

/* Keyboard type-ahead highlight (Task 8042) — mirrors the hover look */
.argenta-select-list li.kbd-active {
    background: var(--color-primary);
    color: #FFF;
}

.argenta-select-multi .argenta-select-list li.kbd-active .check-icon {
    color: #FFF;
}

.argenta-select-list li.argenta-select-separator {
    font-weight: 700;
    color: #6c757d;
    font-size: .85rem;
    padding: .5rem .75rem .25rem;
    cursor: default;
    border-top: 1px solid #DEE2E6;
    margin-top: .25rem;
}

.argenta-select-list li.argenta-select-separator:hover {
    background: transparent;
    color: #6c757d;
}

/* ClassCode dropdown — scrollable */
.classcode-list {
    max-height: 250px;
    overflow-y: auto;
}

/* Dropup variant — opens above the button */
.argenta-select-dropup .argenta-select-list {
    top: auto;
    bottom: 100%;
    margin-bottom: 2px;
}

/* Multi-select variant */
.argenta-select-multi .argenta-select-list {
    max-height: 250px;
    overflow-y: auto;
}

.argenta-select-multi .argenta-select-list li {
    display: flex;
    align-items: center;
    gap: .5rem;
    user-select: none;
}

.argenta-select-multi .argenta-select-list li .check-icon {
    width: 1rem;
    text-align: center;
    color: var(--color-primary);
    font-size: .8rem;
    flex-shrink: 0;
}

.argenta-select-multi .argenta-select-list li:hover .check-icon {
    color: #FFF;
}

.argenta-select-btn .filter-count {
    background: var(--color-primary);
    color: #FFF;
    font-size: .7rem;
    font-weight: 700;
    padding: .1rem .45rem;
    border-radius: 1rem;
    margin-left: .4rem;
}

/* Blazor Infrastructure */
h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* ========== Dashboard Components ========== */

/* Info Box - KPI metric cards */
.info-box {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 0.375rem;
    border: 1px solid #dee2e6;
    border-left: 4px solid #dee2e6;
    padding: 1rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.04);
    transition: box-shadow 0.15s;
}

.info-box:hover {
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.08);
}

.info-box--teal  { border-left-color: #00A1BE; }
.info-box--green { border-left-color: #00CC78; }
.info-box--orange { border-left-color: #FF4A11; }
.info-box--blue  { border-left-color: #4682B4; }
.info-box--purple { border-left-color: #9370DB; }
.info-box--red   { border-left-color: #CD5C5C; }

/* Auto-color the left border to match the icon's background-color across every dashboard. */
.info-box:has(.info-box-icon[style*="#00A1BE" i]) { border-left-color: #00A1BE; }
.info-box:has(.info-box-icon[style*="#00CC78" i]) { border-left-color: #00CC78; }
.info-box:has(.info-box-icon[style*="#FF4A11" i]) { border-left-color: #FF4A11; }
.info-box:has(.info-box-icon[style*="#9B659B" i]) { border-left-color: #9B659B; }
.info-box:has(.info-box-icon[style*="#D8237C" i]) { border-left-color: #D8237C; }
.info-box:has(.info-box-icon[style*="#F4AD2A" i]) { border-left-color: #F4AD2A; }

.info-box-icon {
    font-size: 1.6rem;
    width: 2.5rem;
    text-align: center;
    margin-right: 0.85rem;
    flex-shrink: 0;
}

.info-box--teal  .info-box-icon { color: #00A1BE; }
.info-box--green .info-box-icon { color: #00CC78; }
.info-box--orange .info-box-icon { color: #FF4A11; }
.info-box--blue  .info-box-icon { color: #4682B4; }
.info-box--purple .info-box-icon { color: #9370DB; }
.info-box--red   .info-box-icon { color: #CD5C5C; }

.info-box-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.info-box-label {
    font-size: 0.78rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.info-box-value {
    font-size: 1.25rem;
    font-weight: 600;
    font-family: var(--font-headings);
    color: var(--color-body);
}

.info-box--grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* WebForms-style info boxes (indicator bar + content + icon) */
.info-box-wf {
    box-shadow: 0 .125rem .25em rgba(0,0,0,.075);
    border-radius: 0.25rem;
    background: #FFF;
    display: flex;
    align-items: center;
    min-height: 80px;
    padding: .5rem;
    position: relative;
    width: 100%;
}

.info-box-wf:hover {
    box-shadow: 0 .25rem .5rem rgba(0,0,0,.1);
}

.info-box-wf .indicator {
    width: 5px;
    height: 60px;
    margin-right: 10px;
    border-radius: 5px;
    flex-shrink: 0;
}

.info-box-wf .info-box-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 120%;
    flex: 1;
    padding: 0 10px;
    color: #464646;
}

.info-box-wf .info-box-number {
    display: block;
    margin-top: .25rem;
    font-weight: 700;
    color: #464646;
    font-size: 120%;
}

.info-box-wf .info-box-icon {
    border-radius: 0.25rem;
    align-items: center;
    display: flex;
    font-size: 1.875rem;
    justify-content: center;
    text-align: center;
    width: 70px;
    flex-shrink: 0;
}

/* Event Workspace nav */
.event-ws-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .5rem;
    padding: .5rem 0;
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}
.event-ws-nav-label {
    font-size: .7rem;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .2rem .5rem;
    white-space: nowrap;
    align-self: center;
}
.event-ws-nav-item {
    text-decoration: none;
    color: #555;
    font-size: .85rem;
    padding: .2rem .5rem;
    white-space: nowrap;
    cursor: default;
}
a.event-ws-nav-item {
    cursor: pointer;
}
a.event-ws-nav-item:hover {
    color: var(--color-primary);
}
.event-ws-nav-item.active {
    border: 2px solid var(--color-primary);
    border-radius: .25rem;
    color: var(--color-primary);
    font-weight: 500;
}

/* Christine Panel info boxes */
.christine-quick-links a {
    text-decoration: none;
}

/* Dashboard title bar quick links */
.dashboard-ql {
    font-size: 1.15rem;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.15s;
}

.dashboard-ql:hover {
    opacity: 1;
}

.dashboard-quick-links {
    border-left: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    padding: 0 12px;
}

.christine-panel .info-box {
    box-shadow: 0 .125rem .25em rgba(0,0,0,.075);
    border-radius: 0.25rem;
    background: #fff;
    display: flex;
    margin-bottom: 1rem;
    min-height: 56px;
    padding: .4rem;
    position: relative;
    width: 100%;
    border-left: none;
}

.christine-panel .info-box .info-box-icon {
    border-radius: 0.25rem;
    align-items: center;
    display: flex;
    font-size: 1.4rem;
    justify-content: center;
    text-align: center;
    width: 56px;
    min-height: 40px;
    margin-right: 0;
    padding: 6px;
}

.christine-panel .info-box .info-box-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 120%;
    flex: 1;
    padding: 0 10px;
    color: #464646;
}

.christine-panel .info-box .info-box-number {
    display: block;
    margin-top: .25rem;
    font-weight: 700;
    color: #464646;
    font-size: inherit;
    font-family: inherit;
}

.christine-panel .info-box .info-box-text {
    font-size: inherit;
    color: #464646;
    text-transform: none;
    letter-spacing: normal;
}

.christine-panel .info-box:hover {
    box-shadow: 0 .25rem .5rem rgba(0,0,0,.1);
}

.fgc-dashboard .info-box {
    box-shadow: 0 .125rem .25em rgba(0,0,0,.075);
    border-radius: 0.25rem;
    background: #fff;
    display: flex;
    margin-bottom: 1rem;
    min-height: 80px;
    padding: .5rem;
    position: relative;
    width: 100%;
    border-left: none;
}

.fgc-dashboard .info-box .info-box-icon {
    border-radius: 0.25rem;
    align-items: center;
    display: flex;
    font-size: 1.875rem;
    justify-content: center;
    text-align: center;
    width: 70px;
    min-height: 60px;
    margin-right: 0;
    padding: 10px;
}

.fgc-dashboard .info-box .info-box-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 120%;
    flex: 1;
    padding: 0 10px;
    color: #464646;
}

.fgc-dashboard .info-box .info-box-number {
    display: block;
    margin-top: .25rem;
    font-weight: 700;
    color: #464646;
    font-size: inherit;
}

.fgc-dashboard .info-box .info-box-text {
    font-size: inherit;
    color: #464646;
    text-transform: none;
    letter-spacing: normal;
}

.fgc-dashboard .info-box:hover {
    box-shadow: 0 .25rem .5rem rgba(0,0,0,.1);
}

.a-no-underline, .a-no-underline:hover {
    text-decoration: none;
    color: inherit;
}

.elevation-1 { box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24) !important; }

.white { color: #fff !important; }

/* Constituent count boxes */
.constituent-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.constituent-box {
    text-align: center;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.85rem 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.04);
}

.constituent-count {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-headings);
    color: var(--color-primary);
}

.constituent-label {
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-top: 0.15rem;
}

@media (max-width: 575.98px) {
    .constituent-grid {
        grid-template-columns: 1fr;
    }
}

/* Metrics section */
.metrics-section {
    background: transparent;
}

.metrics-title {
    font-family: var(--font-headings);
    font-size: 1rem;
    color: var(--color-body);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #dee2e6;
}

.metrics-title i {
    color: var(--color-primary);
    margin-right: 0.35rem;
}

/* ============================================================ */
/* My To-Do List — dashboard widget (redesigned 2026-05-20)     */
/* Goals: clean modern card, soft hover lift, custom checkboxes  */
/* with a springy check-in, friendly empty state, completion     */
/* celebration. Teal accents to match the new top-right menu.    */
/* ============================================================ */

.todo-card {
    border: 1px solid #E3E7EB;
    border-radius: 14px;
    background: #FFF;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    /* overflow stays visible so a date-picker dropdown opened on a to-do row's date
       field isn't clipped by the card edge. The rounded corners are preserved by
       rounding the header's top corners (the only child with a filled background). */
    overflow: visible;
}

.todo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    padding: .9em 1.15em;
    background: linear-gradient(180deg, #FFF 0%, #F8FCFD 100%);
    border-bottom: 1px solid #EEF1F4;
    border-radius: 14px 14px 0 0;
}

.todo-title-wrap {
    display: flex;
    align-items: center;
    gap: .55em;
    min-width: 0;
}

.todo-title-icon {
    color: #00A1BE;
    font-size: 1.25em;
}

.todo-title {
    margin: 0;
    font-size: 1.05em;
    font-weight: 600;
    color: #27282A;
    line-height: 1.2;
    white-space: nowrap;
}

.todo-counter {
    margin-left: .35em;
    padding: .15em .6em;
    background: rgba(0,161,190,.08);
    color: #00A1BE;
    border-radius: 999px;
    font-size: .75em;
    font-weight: 500;
    white-space: nowrap;
}

.todo-add-btn {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    background: #00A1BE;
    color: #FFF !important;
    border: none;
    border-radius: 999px;
    padding: .42em 1em;
    font-size: .85em;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
    white-space: nowrap;
}

.todo-add-btn:hover:not(:disabled),
.todo-add-btn:focus-visible:not(:disabled) {
    background: #008CA5;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,161,190,.25);
    outline: none;
}

.todo-add-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.todo-body {
    padding: .5em .85em .85em;
}

.todo-loading {
    text-align: center;
    padding: 1.5em 1em;
    color: #6B7280;
    font-size: .9em;
}

.todo-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.todo-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: .85em;
    padding: .65em .35em;
    border-bottom: 1px dashed #EEF1F4;
    transition: background .2s ease;
}

.todo-item:last-child { border-bottom: none; }

.todo-item:hover {
    background: rgba(0,161,190,.035);
}

/* Custom checkbox — springy fill + check pop on toggle */
.todo-check-wrap {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    margin-top: .15em;
    flex: 0 0 auto;
}

.todo-check-wrap input[type="checkbox"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
}

.todo-check-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    border: 2px solid #D1D5DB;
    border-radius: .4em;
    background: #FFF;
    transition: background .25s cubic-bezier(.34, 1.56, .64, 1),
                border-color .2s ease,
                transform .2s ease;
}

.todo-check-box i {
    color: #FFF;
    font-size: .85em;
    opacity: 0;
    transform: scale(.4);
    transition: opacity .15s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

.todo-check-wrap:hover .todo-check-box { border-color: #00A1BE; }

.todo-check-wrap input[type="checkbox"]:checked + .todo-check-box {
    background: #00A1BE;
    border-color: #00A1BE;
}

.todo-check-wrap input[type="checkbox"]:checked + .todo-check-box i {
    opacity: 1;
    transform: scale(1);
}

.todo-check-wrap input[type="checkbox"]:focus-visible + .todo-check-box {
    box-shadow: 0 0 0 3px rgba(0,161,190,.25);
    border-color: #00A1BE;
}

/* Task text area */
.todo-text { min-width: 0; }

.todo-text-input {
    width: 100%;
    resize: none;
    overflow: hidden;
    min-height: 1.85em;
    line-height: 1.4;
    border: none;
    background: transparent;
    padding: .1em .35em;
    font-size: .95em;
    color: #27282A;
    border-radius: .35em;
    transition: background .15s ease, color .25s ease;
}

.todo-text-input:focus,
.todo-text-input:focus-visible {
    background: #F8FCFD;
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(0,161,190,.25);
}

.todo-text-input.is-done-text {
    text-decoration: line-through;
    color: #9CA3AF;
}

/* Date + delete column */
.todo-meta {
    display: flex;
    align-items: center;
    gap: .35em;
    flex: 0 0 auto;
}

.todo-date { max-width: 10rem; }

.todo-delete {
    background: transparent;
    border: none;
    color: #C7CCD1;
    padding: .35em .5em;
    border-radius: .4em;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease, color .15s ease, background .15s ease, transform .15s ease;
}

.todo-item:hover .todo-delete,
.todo-delete:focus-visible {
    opacity: 1;
}

.todo-delete:hover,
.todo-delete:focus-visible {
    color: #DC3545;
    background: rgba(220,53,69,.08);
    transform: scale(1.08);
    outline: none;
}

/* Footer (Add another / Save) */
.todo-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5em;
    margin-top: .65em;
    padding-top: .65em;
    border-top: 1px solid #F0F2F5;
}

/* Mobile: the to-do row is a 3-column grid (check | text | date+delete) with a fixed
   ~10rem date control. On a phone that fixed column crushes the task text, so drop the
   date + delete onto their own row under the text. Also force the per-row delete visible
   (it's hover-only on desktop, and touch has no hover). */
@media (max-width: 575.98px) {
    .todo-item {
        grid-template-columns: auto 1fr;
    }
    .todo-meta {
        grid-column: 1 / -1;
        padding-left: 2.35em;
        margin-top: .15em;
    }
    .todo-date {
        max-width: none;
        flex: 1 1 auto;
    }
    .todo-delete {
        opacity: 1;
    }
}

.todo-add-link {
    background: transparent;
    border: 1px dashed rgba(0,161,190,.5);
    color: #00A1BE;
    border-radius: .55em;
    padding: .45em 1em;
    font-size: .85em;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.todo-add-link:hover:not(:disabled),
.todo-add-link:focus-visible:not(:disabled) {
    background: rgba(0,161,190,.08);
    border-style: solid;
    transform: translateY(-1px);
    outline: none;
}

.todo-add-link:disabled { opacity: .55; cursor: not-allowed; }

.todo-save-btn {
    background: transparent;
    border: 1px solid #D1D5DB;
    color: #27282A;
    border-radius: .55em;
    padding: .45em 1.15em;
    font-size: .85em;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
    display: inline-flex;
    align-items: center;
}

.todo-save-btn:hover:not(:disabled),
.todo-save-btn:focus-visible:not(:disabled) {
    background: #F4F6F8;
    border-color: #9CA3AF;
    outline: none;
}

.todo-save-btn:disabled { opacity: .55; cursor: not-allowed; }

/* Empty state — friendly, not preachy */
.todo-empty {
    text-align: center;
    padding: 2em 1em 1.5em;
    color: #6B7280;
}

.todo-empty-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5em;
    height: 3.5em;
    background: rgba(0,161,190,.08);
    border-radius: 50%;
    margin-bottom: .6em;
}

.todo-empty-icon {
    font-size: 1.75em;
    color: #00A1BE;
}

.todo-empty-msg {
    margin: 0 0 .85em;
    font-size: .95em;
    color: #6B7280;
}

/* Celebration banner — shows when every task is checked off */
.todo-celebrate {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .55em .85em;
    margin: .35em 0 .65em;
    background: linear-gradient(135deg, rgba(0,161,190,.10), rgba(217,55,143,.10));
    border: 1px solid rgba(0,161,190,.25);
    border-radius: .75em;
    color: #00A1BE;
    font-size: .9em;
    font-weight: 500;
    animation: todo-celebrate-pop .45s cubic-bezier(.34, 1.56, .64, 1);
}

@@keyframes todo-celebrate-pop {
    0%   { opacity: 0; transform: scale(.85); }
    100% { opacity: 1; transform: scale(1);    }
}

/* Soft fade for completed items so they recede visually but stay readable */
.todo-item.is-done { opacity: .72; }
.todo-item.is-done:hover { opacity: 1; }

/* Tiny autosave reassurance — bottom-right corner of the list */
.todo-autosave-note {
    text-align: right;
    margin-top: .5em;
    padding-top: .35em;
    font-size: .72em;
    color: #9CA3AF;
    line-height: 1;
    letter-spacing: .01em;
}

.todo-autosave-note i {
    margin-right: .3em;
    color: #00A1BE;
    opacity: .75;
}

/* When the autosave note lives in the header (e.g., My Quick Notes), drop the
   block-flow spacing so it sits flush on the right side of the title bar. */
.todo-header .todo-autosave-note.in-header {
    margin: 0;
    padding: 0;
}

.no-counters + .ata-counters {
    display: none;
}

.ata-wrapper:has(.no-counters) .ata-counters {
    display: none;
}

/* Quick Notes */
.quick-notes-textarea {
    resize: vertical;
    border: 1px solid #dee2e6;
    font-size: 0.9rem;
    min-height: 200px;
}

.quick-notes-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(0,161,190,0.15);
}

/* Message Cards */
.message-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    margin-bottom: 0.75rem;
    border-left: 4px solid #dee2e6;
}

.message-card .card-header {
    background: #f8f9fa;
    padding: 0.75rem 1rem;
    font-weight: 600;
    border-bottom: 1px solid #dee2e6;
}

.message-card .card-body {
    padding: 1rem;
}

.message-card--user { border-left-color: #00CC78; }
.message-card--devscape { border-left-color: #FF4A11; }
.message-card--team { border-left-color: #00CC78; }

/* Action Tiles — "What Would You Like To Do?" full-width band (redesigned 2026-06-27) */
.action-tile-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:1rem}
.action-tile{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; padding:1.5rem .8rem 1.25rem; background:#fff; border:1px solid #dee2e6; border-radius:.7rem; text-decoration:none; color:var(--color-body); overflow:hidden; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.action-tile::before{content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--at-color)}
.action-tile:hover{transform:translateY(-5px); border-color:var(--at-color); color:var(--color-body); box-shadow:0 .6rem 1.1rem rgba(0,0,0,.12)}
.action-tile-icon{display:flex; align-items:center; justify-content:center; width:62px; height:62px; border-radius:50%; background:var(--at-color); color:#fff; font-size:1.7rem; margin-bottom:.9rem; transition:transform .16s ease}
.action-tile:hover .action-tile-icon{transform:scale(1.05)}
.action-tile-title{font-family:var(--font-headings); font-weight:700; font-size:1rem; line-height:1.2; margin-bottom:.2rem; min-height:2.4em; display:flex; align-items:center; justify-content:center}
.action-tile-tag{font-size:.8rem; font-weight:600; color:#6c757d}
@media (max-width:991.98px){.action-tile-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:575.98px){.action-tile-grid{grid-template-columns:repeat(2,1fr)}}

/* Compact quick-action row inside the "What Would You Like To Do?" section (Christine 2026-06-27) */
.quick-do-row{display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem}
.quick-do{display:flex; align-items:center; gap:.6rem; padding:.55rem .8rem; background:#f8f9fa; border:1px solid #dee2e6; border-radius:.375rem; text-decoration:none; color:var(--color-body); font-weight:600; font-size:.88rem; line-height:1.2; transition:background .15s, border-color .15s, color .15s}
.quick-do:hover{background:#fff; border-color:var(--qd-color); color:var(--color-body)}
.quick-do i{font-size:1.15rem; color:var(--qd-color); flex:0 0 auto}
.quick-do:hover i{color:var(--qd-color)}
@media (max-width:991.98px){.quick-do-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:575.98px){.quick-do-row{grid-template-columns:1fr}}

/* "On your calendar today" reminder bar under the dashboard greeting (Christine 2026-07-14) */
.cal-today-bar{margin-top:1rem; display:flex; align-items:center; flex-wrap:wrap; gap:.75rem 1.1rem; padding:.8rem 1.1rem; background:linear-gradient(135deg,rgba(0,161,190,.06) 0%,rgba(0,204,120,.05) 100%); border:1px solid rgba(0,161,190,.20); border-radius:.75rem; box-shadow:0 .125rem .35rem rgba(0,0,0,.05)}
.cal-today-head{display:flex; align-items:center; gap:.7rem; flex:0 0 auto}
.cal-today-icon{display:inline-flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem; border-radius:50%; background:linear-gradient(135deg,#00A1BE 0%,#00CC78 100%); color:#fff; font-size:1.05rem; box-shadow:0 .15rem .4rem rgba(0,161,190,.35)}
.cal-today-heading{display:flex; flex-direction:column; line-height:1.2}
.cal-today-title{font-family:var(--font-headings); font-weight:700; font-size:.98rem; color:#27282A}
.cal-today-sub{font-family:var(--font-primary); font-size:.78rem; color:#6c757d}
.cal-today-events{display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; flex:1 1 auto; min-width:0}
.cal-today-chip{display:inline-flex; align-items:center; gap:.5rem; max-width:100%; padding:.4rem .75rem; background:#fff; border:1px solid rgba(39,40,42,.12); border-left:.28rem solid var(--chip-color,#00A1BE); border-radius:.5rem; font-family:var(--font-primary); color:#27282A !important; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease}
.cal-today-chip:hover{transform:translateY(-1px); box-shadow:0 .2rem .5rem rgba(0,0,0,.10); border-color:rgba(39,40,42,.22); color:#27282A !important}
.cal-today-time{flex:0 0 auto; font-weight:700; font-size:.82rem; color:#00A1BE; white-space:nowrap}
.cal-today-name{font-size:.85rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:16rem}
.cal-today-loc{display:inline-flex; align-items:center; gap:.3rem; font-size:.76rem; color:#6c757d; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:12rem}
.cal-today-loc i{font-size:.72rem}
.cal-today-viewall{flex:0 0 auto; margin-left:auto; display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-primary); font-weight:600; font-size:.82rem; color:#00A1BE !important; white-space:nowrap}
.cal-today-viewall:hover{color:#00CC78 !important}
.cal-today-viewall i{transition:transform .12s ease}
.cal-today-viewall:hover i{transform:translateX(2px)}
@media (max-width:575.98px){.cal-today-viewall{margin-left:0}.cal-today-name{max-width:11rem}}

/* Page Title Bar — standard across all paywall pages */
.page-title {
    margin-top: 0rem;
    margin-bottom: 1rem;
    padding: 1rem;
    font-family: var(--font-headings);
    font-size: 140%;
    color: #27282A;
    background-color: #FFF;
    border: 1px solid #DEE2E6 !important;
    border-radius: .375em;
    box-shadow: 0 .125rem .25em rgba(0,0,0,.075);
}

.page-title i {
    color: var(--color-primary);
    margin-right: .25em;
}

/* Grid action buttons inside .page-title (e.g., the back arrow circle) keep their own white icon color. */
.page-title .grid-action-btn i {
    color: #fff !important;
    margin-right: 0;
}

.page-title a {
    text-decoration: none !important;
}

.page-title a:last-of-type {
    margin-right: 0 !important;
}

/* ========== Workspace Menu (ported from WebForms navActivityLogs / _paywall.css) ========== */

.ws-nav-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .2rem .1rem;
    padding: .5rem .75rem;
    margin-bottom: .75rem;
    border: 1px solid #DEE2E6;
    border-radius: .375rem;
    background: #FFF;
}

.ws-nav-wrapper::before {
    content: "WORKSPACE MENU";
    font-family: var(--font-primary);
    font-size: .7em;
    font-weight: 700;
    color: #999;
    letter-spacing: .08em;
    padding: .25rem .5rem .25rem 0;
    margin-right: .25rem;
    border-right: 1px solid #DEE2E6;
    white-space: nowrap;
}

.ws-nav-row {
    display: contents;
}

.ws-nav-item,
.ws-nav-item-active {
    flex: none;
    padding: .25rem .6rem;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none !important;
    font-family: var(--font-primary);
    font-size: .85em !important;
    color: #444 !important;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    box-shadow: none;
    transition: all 0.1s ease-in-out;
    white-space: nowrap;
    cursor: pointer;
}

.ws-nav-item-active {
    border: 1px solid #00A1BE !important;
    font-weight: bold !important;
    color: #00A1BE !important;
    background: rgba(0,161,190,.06);
}

.ws-nav-item:hover {
    border: 1px solid #A4E5E0 !important;
    font-weight: bold !important;
    color: #00A1BE !important;
    background: rgba(0,161,190,.06);
}

.ws-nav-toggle {
    display: none;
    font-size: 1.5rem;
    color: #27282A;
    cursor: pointer;
    margin-bottom: 1rem;
    text-decoration: none !important;
}

.ws-nav-close {
    display: none;
    text-align: right;
    margin-bottom: 1rem;
    font-size: 1rem;
    color: #27282A;
    cursor: pointer;
    text-decoration: none !important;
}

@media (max-width: 991px) {
    .ws-nav-toggle {
        display: inline-block;
    }

    .ws-nav-close {
        display: block;
    }

    .ws-nav-wrapper {
        position: fixed;
        top: 0;
        left: -100%;
        width: 280px;
        height: 100vh;
        background: #fff;
        z-index: 9999;
        transition: left .3s ease-in-out;
        padding: 1rem;
        overflow-y: auto;
        box-shadow: 2px 0 5px rgba(0,0,0,.2);
        display: block;
        flex-wrap: nowrap;
        flex-direction: column;
        border-bottom: none;
        margin-bottom: 0;
    }

    .ws-nav-wrapper::before {
        display: none;
    }

    .ws-nav-wrapper.open {
        left: 0;
    }

    .ws-nav-row {
        display: block;
        border: none !important;
        box-shadow: none;
        padding: 0;
        margin: 0;
    }

    .ws-nav-item,
    .ws-nav-item-active {
        display: block;
        width: 100%;
        margin: 0 0 .5rem 0;
    }
}

/* ========== Paywall Layout (Header + Main) ========== */

.paywall-header {
    position: fixed;
    top: .25em;
    left: .5em;
    right: .5em;
    height: 6em;
    z-index: 5000;
    border: 1px solid #DEE2E6;
    border-radius: .375em;
    box-shadow: 0 .125rem .25em rgba(0,0,0,.075);
    padding: .5em;
    background: #FFF;
    overflow: visible;
}

.paywall-header ul {
    font-family: var(--font-headings);
    color: #27282A;
    text-decoration: none;
}

.paywall-header a,
.header-link {
    font-family: var(--font-headings);
    color: #27282A;
    text-decoration: none;
    font-size: .9em;
}

.paywall-header a:hover,
.header-link:hover {
    color: var(--color-primary);
    text-decoration: none;
}

@media (max-width: 870px) {
    .paywall-header {
        height: auto;
        padding-bottom: .25em;
    }
    .paywall-header > .row {
        flex-wrap: wrap;
    }
    .paywall-header .header-links-row {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center !important;
        margin-top: .25em !important;
        margin-bottom: 0 !important;
    }
    .paywall-header .header-links-row .float-md-end {
        float: none !important;
    }
}

/* ===== Phone header (<=767.98px) — Campbell 2026-07-15 =====
   The header used to render 126px tall on a phone (15% of the screen, on EVERY page): the three
   identity pills stacked into full-width rows, and the Help Center / Settings links added a fourth.
   Here the pills sit on ONE compact line and the header comes in at ~68px. Desktop is untouched —
   every rule below is inside this max-width query.
   NOTE: .paywall-main's top offset is part of this fix. It is a hand-tuned constant that must track
   the header's real height; if you change the header's size here, re-measure and update it too, or
   you just trade the tall header for an empty white gap. */
@media (max-width: 767.98px) {
    /* One line, tucked clear of the absolutely-positioned hamburger at the left edge. */
    .paywall-header .row.justify-content-center {
        flex-wrap: nowrap;
        gap: .25rem;
        padding-left: 3.1em;
        align-items: center;
    }
    .paywall-header .header-trigger {
        font-size: .78em;
        padding: .3rem .45rem;
        margin: 0;
    }
    /* the team pill's icon carries a desktop ms-3 that is dead weight at this size */
    .paywall-header .header-trigger i.ms-3 {
        margin-left: 0;
    }
    /* Long names truncate instead of forcing the row to wrap. */
    .paywall-header .header-trigger > span {
        display: inline-block;
        max-width: 4.6rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
    }
    /* Ava / Birdie are shortcuts, not identity — the icon alone carries them here and buys the
       room that keeps the row on one line. Both are still one tap, and still labelled via title. */
    .paywall-header .ava-trigger > span,
    .paywall-header .birdie-trigger > span {
        display: none;
    }
    .paywall-header .ava-trigger i,
    .paywall-header .birdie-trigger i {
        margin-right: 0 !important;
    }
    .paywall-header .header-links-row {
        margin-top: .15em !important;
    }
    .paywall-header .header-link {
        font-size: .78em;
    }
}

.teal {
    color: #00A1BE !important;
}

.paywall-main {
    position: fixed;
    top: calc(.25em + 6em + .75em);
    left: 19.5em;
    right: .5em;
    bottom: .25em;
    overflow-y: auto;
    padding-bottom: 500px;
    padding-right: 1rem;
    padding-left: .5rem;
    transition: left 0.2s ease;
    background: #FFF;
}

.paywall-main.modal-open {
    z-index: 999999;
}


.paywall-main.sidebar-collapsed {
    left: 5.5em;
}

/* Reconnect toast: replaces Blazor's full-screen "rejoining the server" overlay (see App.razor).
   Hidden by default; the framework adds components-reconnect-show while it retries. */
#components-reconnect-modal {
    display: none;
}

#components-reconnect-modal.components-reconnect-show {
    display: flex;
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    z-index: 99999;
}

#components-reconnect-modal.components-reconnect-hide,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: none;
}

.argenta-reconnect-toast {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: #27282A;
    color: #FFF;
    padding: .55rem .95rem;
    border-radius: 999px;
    font-family: var(--font-primary);
    font-size: .85rem;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
}

.argenta-reconnect-spinner {
    width: 14px;
    height: 14px;
    min-width: 14px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #FFF;
    border-radius: 50%;
    animation: argentaSpin .8s linear infinite;
}

@keyframes argentaSpin {
    to { transform: rotate(360deg); }
}

.sidebar-mobile-toggle {
    /* Lives INSIDE .paywall-header (left edge, vertically centered) so it never floats over
       page content (Christine 2026-06-11). Hidden at >=1280px below. */
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: .75em;
    z-index: 10;
    padding: .4em .6em;
    color: #464646;
    background: #FFF;
    border: 1px solid #DEE2E6;
    border-radius: .375rem;
}

/* Tablets show the logo in the header's left column — nudge it right so the in-header
   toggle never overlaps it. Phones hide the logo, desktop hides the toggle. */
@media (min-width: 768px) and (max-width: 1279.98px) {
    .paywall-logo {
        margin-left: 3.2em;
    }
}

.sidebar-mobile-toggle:hover {
    color: #000;
    background: #F8F9FA;
}

@media (min-width: 1280px) {
    .sidebar-mobile-toggle {
        display: none !important;
    }
}

.settings-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: #FFF;
    border: 1px solid #DEE2E6;
    border-radius: .375em;
    box-shadow: 0 .125rem .25em rgba(0,0,0,.075);
    padding: .5em 0;
    z-index: 6000;
    min-width: 220px;
}

/* Header triggers (user + team name in top-right) — pill-button affordance for "this is a menu" */
.header-trigger {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    padding: .3em .75em;
    border-radius: 999px;
    background: #F4F6F8;
    border: 1px solid #E3E7EB;
    color: #27282A !important;
    text-decoration: none !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
    user-select: none;
    line-height: 1.2;
}

.header-trigger:hover,
.header-trigger:focus {
    background: rgba(0,161,190,.08);
    border-color: rgba(0,161,190,.30);
    color: #27282A !important;
    outline: none;
}

.header-trigger:focus-visible {
    box-shadow: 0 0 0 2px rgba(0,161,190,.35);
}

.header-trigger[aria-expanded="true"] {
    background: rgba(0,161,190,.15);
    border-color: rgba(0,161,190,.45);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04);
}

.header-trigger-chevron {
    font-size: .7em;
    opacity: .6;
    margin-left: .4em;
    transition: transform .2s ease, opacity .2s ease;
}

.header-trigger[aria-expanded="true"] .header-trigger-chevron {
    transform: rotate(180deg);
    opacity: 1;
}

/* Surf-instructor team label: strips the pill so it renders as plain text — no
   hover state, no chevron, not clickable. Mirrors WebForms _paywall.css. */
.header-trigger.header-trigger-static,
.header-trigger.header-trigger-static:hover,
.header-trigger.header-trigger-static:focus {
    background: transparent;
    border-color: transparent;
    cursor: default;
    pointer-events: none;
    box-shadow: none;
    padding: .3em 0;
}

/* Header pill + slide-out title icons render gray instead of the global .green
   (#00CC78). Scoped to the header so it doesn't bleed elsewhere. */
.header-trigger .green,
.argenta-slideout-title-wrap .green { color: #646464 !important; }

/* ===== Chat with Birdie — delightful FGC-only header pill (team 48599) =====
   Only rendered for FGC (PaywallLayout gates it on _teamId==48599), so these
   rules never touch any other team even though they live in shared app.css.
   Shares .header-trigger's box model (padding/border-radius/inline-flex) so the
   pill is the SAME height as the User + Organization menus, then paints the FGC
   melon fill and gives the little bird a gentle idle bob + a happy flap on hover. */
.birdie-trigger {
    background: linear-gradient(135deg, #EE7779 0%, #F2938F 100%);
    border-color: #EE7779;
    color: #FFF !important;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(238,119,121,.35);
    transition: transform .18s ease, box-shadow .18s ease;
}
.birdie-trigger:hover,
.birdie-trigger:focus {
    background: linear-gradient(135deg, #EC6A6C 0%, #F0857F 100%);
    border-color: #EC6A6C;
    color: #FFF !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(238,119,121,.45);
    outline: none;
}
.birdie-trigger:focus-visible { box-shadow: 0 0 0 2px rgba(238,119,121,.55); }
.birdie-trigger i {
    display: inline-block;
    color: #FFF !important;
    transform-origin: center bottom;
    animation: birdie-bob 3s ease-in-out infinite;
}
.birdie-trigger:hover i { animation: birdie-flap .55s ease-in-out infinite; }
@keyframes birdie-bob {
    0%, 92%, 100% { transform: translateY(0) rotate(0deg); }
    96%           { transform: translateY(-2px) rotate(-8deg); }
}
@keyframes birdie-flap {
    0%, 100% { transform: translateY(0) rotate(-8deg); }
    50%      { transform: translateY(-2px) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
    .birdie-trigger i { animation: none; }
    .birdie-trigger:hover { transform: none; }
}

/* ===== Work with Ava — Argenta Virtual Agent header pill (every team EXCEPT 48599) =====
   Mirrors the Birdie pill's box model (via .header-trigger) so it sits at the exact same
   height as the User + Organization menus, painted in Argenta teal (--color-primary,
   #00A1BE). This one shows across the whole customer base, so the sparkle plays ONLY on
   hover (no constant idle animation) to keep every team's header calm. (Christine 2026-07-04.) */
.ava-trigger {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #FFF !important;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,161,190,.35);
    transition: transform .18s ease, box-shadow .18s ease;
}
.ava-trigger:hover,
.ava-trigger:focus {
    background: #008DA6;
    border-color: #008DA6;
    color: #FFF !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,161,190,.45);
    outline: none;
}
.ava-trigger:focus-visible { box-shadow: 0 0 0 2px rgba(0,161,190,.55); }
.ava-trigger i {
    display: inline-block;
    color: #FFF !important;
    transform-origin: center;
}
.ava-trigger:hover i { animation: ava-sparkle .7s ease-in-out infinite; }
@keyframes ava-sparkle {
    0%, 100% { transform: scale(1) rotate(0deg); }
    40%      { transform: scale(1.15) rotate(-6deg); }
    70%      { transform: scale(1.05) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
    .ava-trigger i { animation: none; }
    .ava-trigger:hover { transform: none; }
}

/* Header-links-row icons (New Tab / Report Center / Help Center / Settings /
   Sign Out) render gray instead of the global .orange (#FF4A11). On hover of
   the parent link, the icon transitions to teal with a tiny spring-pop. */
.header-links-row a .orange {
    color: #646464 !important;
    display: inline-block;
    transform-origin: center;
    transition: color .25s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.header-links-row a:hover .orange,
.header-links-row a:focus-visible .orange {
    color: #00A1BE !important;
    transform: scale(1.25) translateY(-1px) rotate(-8deg);
}

/* Shared backdrop for the header slide-outs */
.argenta-slideout-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 24, 32, .42);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 6500;
}

.argenta-slideout-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* Slide-out panel */
.argenta-slideout-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: 92vw;
    background: #FFF;
    border-left: 1px solid #DEE2E6;
    box-shadow: -.5rem 0 1.5rem rgba(0, 0, 0, .12);
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1);
    z-index: 7000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    outline: none;
}

.argenta-slideout-panel.is-open {
    transform: translateX(0);
}

.argenta-slideout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75em;
    padding: 1em 1.25em;
    border-bottom: 1px solid #DEE2E6;
    background: linear-gradient(180deg, #FFF 0%, #F8F9FA 100%);
    flex: 0 0 auto;
}

.argenta-slideout-title-wrap {
    display: flex;
    align-items: center;
    min-width: 0;
}

.argenta-slideout-title {
    margin: 0;
    font-family: var(--font-headings);
    font-size: 1.05em;
    font-weight: 600;
    color: #27282A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.argenta-slideout-close {
    background: transparent;
    border: none;
    color: #6B7280;
    font-size: 1.25em;
    line-height: 1;
    padding: .25em .55em;
    border-radius: .375em;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.argenta-slideout-close:hover,
.argenta-slideout-close:focus-visible {
    background: rgba(0, 0, 0, .05);
    color: #27282A;
    outline: none;
}

.argenta-slideout-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .75em .85em;
}

.slideout-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.slideout-list li {
    margin: 0;
}

.slideout-list a {
    display: flex;
    align-items: center;
    gap: .65em;
    padding: .55em .75em;
    font-family: var(--font-headings);
    color: #27282A;
    text-decoration: none;
    border-radius: .375em;
    font-size: .92em;
    line-height: 1.25;
    transition: background .15s ease, color .15s ease, padding-left .15s ease;
}

.slideout-list a > i {
    width: 1.25em;
    text-align: center;
    color: var(--color-primary);
    opacity: .85;
    flex: 0 0 auto;
    font-size: 1em;
}

.slideout-list a:hover,
.slideout-list a:focus-visible {
    background: rgba(0, 161, 190, .08);
    color: var(--color-primary);
    padding-left: 1em;
    outline: none;
}

.slideout-list a:hover > i,
.slideout-list a:focus-visible > i {
    opacity: 1;
}

.slideout-divider {
    border-top: 1px solid #DEE2E6;
    margin: .5em .5em;
    height: 0;
}

.settings-dropdown .nav-item a {
    font-family: var(--font-headings);
    color: #27282A;
    text-decoration: none;
    display: block;
    padding: .4em 1em;
    font-size: .9em;
}

.settings-dropdown .nav-item a:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.settings-dropdown .nav-item a i {
    color: #27282A;
}

@media (max-width: 1279.98px) {
    .paywall-main {
        position: absolute;
        top: 8em;
        left: 0;
        right: 0;
        width: auto;
        margin: 0 .25em;
        padding: 0 .5em;
        border: 1px solid #DEE2E6;
        border-radius: .375em;
        box-shadow: 0 .125rem .25em rgba(0,0,0,.075);
        background: #FFF;
        overflow-y: auto;
        transition: none;
    }
}

/* Phones: the header above is ~68px here, not the 126px the 8em above was sized for, so pull the
   content up to meet it or you just trade the tall header for an empty white gap.
   ⚠️ MUST stay AFTER the 1279.98px block — same specificity, so source order decides the winner.
   Paired with .chatter-shell's calc() in Chatter.razor. Campbell 2026-07-15. */
@media (max-width: 767.98px) {
    .paywall-main {
        top: 4.9em;
    }
}

/* ========== Sidebar Navigation ========== */

.paywall-sidebar {
    width: 18em;
    background: #FFF;
    color: var(--color-body);
    display: flex;
    flex-direction: column;
    transition: width 0.2s ease;
    overflow: hidden;
    position: fixed;
    top: calc(.25em + 6em + .75em);
    left: 0;
    bottom: .25em;
    z-index: 1000;
    border-right: 1px solid #DEE2E6;
    font-family: var(--font-primary);
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

.paywall-sidebar:hover {
    scrollbar-color: rgba(0,0,0,.2) transparent;
}

.paywall-sidebar::-webkit-scrollbar { width: 6px; }
.paywall-sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 6px; }
.paywall-sidebar:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); }
.paywall-sidebar::-webkit-scrollbar-track { background: transparent; }

.paywall-sidebar.collapsed { width: 4em; }

.paywall-sidebar.collapsed .brand-text,
.paywall-sidebar.collapsed .sidebar-search-wrap,
.paywall-sidebar.collapsed .nav-link span,
.paywall-sidebar.collapsed .nav-header span,
.paywall-sidebar.collapsed .nav-submenu,
.paywall-sidebar.collapsed .chevron {
    display: none;
}

.paywall-sidebar.collapsed .nav-link,
.paywall-sidebar.collapsed .nav-header {
    justify-content: center;
    padding: .6em 0;
}

.paywall-sidebar.collapsed .nav-link i:first-child,
.paywall-sidebar.collapsed .nav-header i:first-child {
    margin-right: 0;
}

.sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .75em 1em;
    border-top: 1px solid #EEE;
    color: #CCC;
    font-size: .85em;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
    text-decoration: none;
    gap: .5em;
}

.sidebar-toggle:hover {
    background: #F5F5F5;
    color: #00A1BE;
}

.paywall-sidebar.collapsed .sidebar-toggle .nav-text {
    display: none;
}

.paywall-sidebar.collapsed .sidebar-toggle {
    justify-content: center;
}

.sidebar-brand {
    display: none;
}

.sidebar-search-wrap {
    padding: .75em .75em .25em;
    flex-shrink: 0;
}

/* Menu Settings gear, right-aligned single-icon strip ABOVE the search bar.
   Row height = icon height. No vertical padding, tight line-height. */
.sidebar-settings-strip {
    display: flex;
    justify-content: flex-end;
    padding: 0 .75em;
    line-height: 1;
    flex-shrink: 0;
}
.sidebar-settings-label{color:#464646; font-size:.7em; text-transform:uppercase; letter-spacing:.04em; line-height:1; margin-right:.5em; align-self:center}
.sidebar-settings-link {
    color: var(--color-tertiary);
    text-decoration: none;
    font-size: 1.15em;
    line-height: 1;
    padding: 0;
    transition: color .15s ease;
}
.sidebar-settings-link:hover {
    color: var(--color-primary);
    text-decoration: none;
}
.paywall-sidebar.collapsed .sidebar-settings-strip { display: none; }

.sidebar-search {
    width: 100%;
    padding: .45em .75em .45em 2.25em;
    border: 1px solid #DEE2E6;
    border-radius: .375em;
    font-family: var(--font-primary);
    font-size: .85em;
    color: var(--color-body);
    background: #F5F5F5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2327282A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat .75em center;
    outline: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.sidebar-search::placeholder {
    color: #CCC;
    font-weight: 400;
}

.sidebar-search:focus {
    border-color: var(--color-primary);
    background-color: #FFF;
    box-shadow: none;
}

.sidebar-menu {
    flex: 1 1 auto;
    padding: .5em 0;
    float: none;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    /* Column flex so the menu-order feature can position groups with CSS `order`
       (see /menu-settings). Without a flex container, `order` is inert. */
    display: flex;
    flex-direction: column;
}

.sidebar-menu .nav-item {
    margin: 0;
    padding: 0;
}

.sidebar-menu .nav-link {
    display: flex;
    align-items: center;
    width: 100%;
    padding: .6em 1em;
    color: var(--color-body);
    text-decoration: none;
    font-family: var(--font-primary);
    font-size: .9em;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    border-left: 3px solid transparent;
}

.sidebar-menu .nav-link:hover {
    background: #F5F5F5;
    color: var(--color-primary);
    text-decoration: none;
}

.sidebar-menu .nav-link.active {
    border-left: 3px solid var(--color-primary);
    background: rgba(0,161,190,.06);
    color: var(--color-primary);
    font-weight: 700;
}

.sidebar-menu .nav-link i:first-child {
    width: 1.5em;
    min-width: 1.5em;
    text-align: center;
    margin-right: .75em;
    font-size: 1em;
    color: #00A1BE;
    flex-shrink: 0;
}

.sidebar-menu .nav-link:hover i:first-child,
.sidebar-menu .nav-link.active i:first-child {
    color: var(--color-primary);
}

.nav-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: .6em 1em;
    color: var(--color-body);
    text-decoration: none;
    font-family: var(--font-primary);
    font-size: .9em;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    border-left: 3px solid transparent;
    user-select: none;
}

.nav-header:hover {
    background: #F5F5F5;
    color: var(--color-primary);
    text-decoration: none;
}

.nav-header:hover i:first-child {
    color: var(--color-primary);
}

.nav-header i:first-child {
    width: 1.5em;
    min-width: 1.5em;
    text-align: center;
    margin-right: .75em;
    font-size: 1em;
    color: #00A1BE;
    flex-shrink: 0;
}

.chevron {
    margin-left: auto;
    font-size: .7em;
    color: #CCC;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.chevron.expanded {
    transform: rotate(90deg);
}

/* "New" badge on a sidebar group (e.g. Surveys). Small on-brand pill with a soft
   pulsing ring so it reads as new without shouting. Hidden when the rail is collapsed. */
.nav-badge-new {
    margin-left: .5em;
    padding: .14em .5em;
    font-family: var(--font-primary);
    font-size: .6em;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #FFF;
    background: var(--color-tertiary);
    border-radius: 999px;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(255,74,17,.5);
    animation: navBadgeNewPulse 2.4s ease-out infinite;
}

@keyframes navBadgeNewPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,74,17,.5); }
    70%  { box-shadow: 0 0 0 .4em rgba(255,74,17,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,74,17,0); }
}

@media (prefers-reduced-motion: reduce) {
    .nav-badge-new { animation: none; }
}

.paywall-sidebar.collapsed .nav-badge-new {
    display: none;
}

.nav-submenu {
    list-style: none;
    padding: 0 0 .25em 0;
    margin: 0;
    display: none;
}

.nav-submenu.show {
    /* Column flex (was `block`) so sub-items can be positioned with CSS `order` by the
       menu-order feature. Visually identical to block for full-width <li> rows. */
    display: flex;
    flex-direction: column;
}

.nav-submenu li a {
    display: block;
    width: 100%;
    padding: .4em 1em .4em 3.25em;
    color: #646464;
    text-decoration: none;
    font-family: var(--font-primary);
    font-size: .84em;
    font-weight: 400;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
    border-left: 3px solid transparent;
}

.nav-submenu li a:hover {
    background: #F5F5F5;
    color: var(--color-primary);
    text-decoration: none;
}

.nav-submenu li a.active {
    border-left: 3px solid var(--color-primary);
    background: rgba(0,161,190,.06);
    color: var(--color-primary);
    font-weight: 600;
}

.nav-submenu .nav-separator { border-top: 1px solid #EEE; margin-top: .35em; padding-top: .35em; }
.nav-submenu .nav-section-label{font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--color-primary); padding:.4rem 1rem .4rem 1.1rem; margin-top:.4rem; background:rgba(0,161,190,.07); border-left:3px solid var(--color-primary); list-style:none; text-align:left}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 999;
}

.sidebar-backdrop.active {
    display: block;
}

@media (max-width: 1279.98px) {
    .paywall-sidebar {
        position: fixed;
        top: 0;
        left: -18em;
        bottom: 0;
        width: 18em;
        z-index: 10000;
        border-right: 1px solid #DEE2E6;
        box-shadow: 2px 0 8px rgba(0,0,0,.15);
        transition: left 0.3s ease;
    }

    .paywall-sidebar.mobile-open {
        left: 0;
    }

    .sidebar-toggle {
        display: none;
    }
}

/* ========== Grid Utilities ========== */

.grid-title {
    display: block;
    margin: 0;
    font-weight: bold;
    font-family: var(--font-primary);
    font-size: 14px;
    color: #27282A;
}

.grid-label {
    display: block;
    margin: 0;
    font-family: var(--font-primary);
    font-size: 14px;
    color: #27282A;
}

.font-120 { font-size: 120%; }
.font-90 { font-size: 90%; }
.green { color: #00CC78 !important; }
.orange { color: #FF4A11 !important; }
.red { color: #CC3333 !important; }
.pink { color: #D8237C !important; }
.gold { color: #FFCC33 !important; }
.purple { color: #9B659B !important; }
.gray { color: #646464 !important; }
.brown { color: #4A3C3B !important; }
.dark { color: #27282A; }

.a-no-underline { text-decoration: none !important; }
.a-no-underline:hover { text-decoration: none !important; }

.btn-icon {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.border-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #DEE2E6;
    border-radius: .375rem;
    padding: .5rem;
    gap: .5rem;
}

/* ========== Grid Search ========== */

.grid-search-wrap {
    position: relative;
    width: 350px;
}

.grid-search {
    width: 100%;
    padding: .5rem .75rem .5rem 2.25rem;
    border: 1px solid #DEE2E6;
    border-radius: .375rem;
    font-family: var(--font-primary);
    font-size: .9rem;
    color: var(--color-body);
    background: #FFF;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.grid-search::placeholder {
    color: #B0B0B0;
    font-weight: 400;
}

.grid-search:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .2rem rgba(0,161,190,.12);
}

.grid-search-icon {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #B0B0B0;
    font-size: .9rem;
    pointer-events: none;
}

.grid-search-clear {
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: .15rem .35rem;
    cursor: pointer;
    color: #999;
    font-size: .9rem;
    line-height: 1;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
}

.grid-search-clear:hover {
    color: #D8237C;
    background: rgba(216,35,124,.08);
}

/* ========== FilteredGrid — Generic Reusable Grid ========== */

.filtered-grid {
    width: 100%;
    border: 1px solid #CCC;
    border-collapse: collapse;
}

.filtered-grid thead {
    display: none;
}

.filtered-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem .75rem !important;
    vertical-align: top;
    border-bottom: 1px solid #DEE2E6;
}

.filtered-grid tbody tr {
    background: #FFF;
}

.filtered-grid a {
    color: #000;
    text-decoration: none;
}

.filtered-grid a:hover {
    color: var(--color-tertiary);
}

.filtered-grid .col-action {
    width: 60px;
}

/* ========== Grid Filter Panel ========== */

.grid-filter-panel {
    position: relative;
    border: 1px solid #DEE2E6;
    border-radius: .5rem;
    background: #FFF;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.04);
    overflow: visible;
    transition: box-shadow .2s ease;
}

.grid-filter-panel::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--color-primary);
    border-radius: .5rem 0 0 .5rem;
    transition: width .2s ease, background .2s ease;
}

.grid-filter-panel:hover {
    box-shadow: 0 .25rem .5rem rgba(0,0,0,.06);
}

.grid-filter-panel:hover::before {
    width: 6px;
}

.grid-filter-panel.is-open {
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.06);
}

.grid-filter-panel.is-open::before {
    width: 6px;
    background: var(--color-tertiary);
}

.grid-filter-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    padding: .875rem 1.125rem;
    font-family: var(--font-headings);
    font-size: .95rem;
    font-weight: 600;
    color: var(--color-body);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.grid-filter-header > .ms-auto {
    flex-wrap: wrap;
}

.grid-saved-filter-text-short {
    display: none;
}

.grid-filter-header:hover {
    background: linear-gradient(to right, rgba(0,161,190,.04), transparent 60%);
}

.grid-filter-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-right: .75rem;
    background: transparent;
    color: var(--color-primary);
    font-size: 1rem;
    transition: color .2s ease;
}

.grid-filter-panel.is-open .grid-filter-icon-badge {
    background: transparent;
    color: var(--color-primary);
}

.grid-filter-title {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-headings);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-body);
    letter-spacing: .01em;
}

.grid-filter-toggle-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem .875rem;
    border: 1px solid var(--color-primary);
    border-radius: 999px;
    background: #FFF;
    color: var(--color-primary);
    font-family: var(--font-primary);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
    white-space: nowrap;
}

.grid-filter-header:hover .grid-filter-toggle-pill {
    background: var(--color-primary);
    color: #FFF;
    transform: translateY(-1px);
}

.grid-filter-panel.is-open .grid-filter-toggle-pill {
    background: var(--color-tertiary);
    border-color: var(--color-tertiary);
    color: #FFF;
}

.grid-filter-panel.is-open .grid-filter-header:hover .grid-filter-toggle-pill {
    background: #E0400E;
    border-color: #E0400E;
    transform: translateY(-1px);
}

.grid-filter-toggle-text {
    line-height: 1;
}

.grid-filter-chevron {
    font-size: .8125rem;
    font-weight: 900;
    color: inherit;
    transition: transform 0.25s ease;
}

.grid-filter-chevron.expanded {
    transform: rotate(180deg);
}

/* ── Saved Filter Dropdown (matches WebForms FilterControl) ── */

.saved-filter-wrap {
    position: relative;
}

.saved-filter-trigger {
    text-decoration: none !important;
    line-height: 1;
}

.grid-saved-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem .875rem;
    border: 1px solid #CED4DA;
    border-radius: 999px;
    background: #FFF;
    color: #6c757d;
    font-family: var(--font-primary);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.grid-saved-filter-pill:hover,
.grid-saved-filter-pill:focus {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: #F4FBFD;
    transform: translateY(-1px);
    box-shadow: 0 .125rem .375rem rgba(0,161,190,.15);
}

.grid-saved-filter-pill.is-open {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #FFF;
}

.grid-saved-filter-pill.is-open:hover,
.grid-saved-filter-pill.is-open:focus {
    background: #008CA6;
    border-color: #008CA6;
    color: #FFF;
}

.grid-saved-filter-text {
    line-height: 1;
}

.grid-saved-filter-chevron {
    font-size: .8125rem;
    font-weight: 900;
    transition: transform 0.25s ease;
}

.grid-saved-filter-chevron.expanded {
    transform: rotate(180deg);
}

/* ── Clear Filter pill ── */
.grid-clear-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .375rem .875rem;
    border: 1px solid #CED4DA;
    border-radius: 999px;
    background: #FFF;
    color: #6c757d;
    font-family: var(--font-primary);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.grid-clear-filter-pill:hover,
.grid-clear-filter-pill:focus {
    border-color: #EE7779;
    color: #EE7779;
    background: #FDF4F4;
    transform: translateY(-1px);
    box-shadow: 0 .125rem .375rem rgba(238,119,121,.15);
    text-decoration: none;
}

.grid-clear-filter-text {
    line-height: 1;
}

/* ── Responsive: stack pills under the title on narrow screens ── */

@media (max-width: 767.98px) {
    .grid-filter-header {
        padding: .75rem .875rem;
        gap: .625rem;
    }

    .grid-filter-title {
        flex: 1 1 0;
        min-width: 0;
        font-size: .9375rem;
    }

    .grid-filter-header > .ms-auto {
        flex: 1 1 100%;
        margin-left: 0 !important;
        gap: .5rem;
        align-items: stretch;
    }

    /* Action row: Save/Load and Clear collapse to circular icon buttons,
       Show Filter stays the prominent text pill that fills the remaining space. */
    .grid-filter-header > .ms-auto > .saved-filter-wrap {
        flex: 0 0 auto;
        min-width: 0;
    }

    .grid-filter-header > .ms-auto > .grid-filter-toggle-pill {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        padding: .5rem .875rem;
        font-size: .75rem;
        letter-spacing: .015em;
    }

    .grid-filter-header > .ms-auto > .grid-clear-filter-pill {
        flex: 0 0 auto;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        gap: 0;
        justify-content: center;
        border-radius: 999px;
    }

    .grid-saved-filter-pill {
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
        gap: 0;
        justify-content: center;
        border-radius: 999px;
        font-size: .9375rem;
    }

    .grid-saved-filter-pill > i.fa-bookmark,
    .grid-saved-filter-pill > i:first-child {
        font-size: .9375rem;
    }

    .grid-saved-filter-pill .grid-saved-filter-chevron {
        display: none;
    }

    .grid-clear-filter-pill > i {
        font-size: .9375rem;
    }

    .grid-clear-filter-pill .grid-clear-filter-text,
    .grid-saved-filter-text-full,
    .grid-saved-filter-text-short {
        display: none;
    }

    /* Tactile press feedback on touch */
    .grid-saved-filter-pill:active,
    .grid-clear-filter-pill:active,
    .grid-filter-toggle-pill:active {
        transform: scale(.94);
    }

    /* Open-state for the icon-only Save/Load button:
       filled primary circle so the menu trigger is obvious */
    .grid-saved-filter-pill.is-open {
        box-shadow: 0 .25rem .625rem rgba(0,161,190,.25);
    }

    .grid-filter-icon-badge {
        width: 1.75rem;
        height: 1.75rem;
        margin-right: .5rem;
        font-size: .875rem;
    }

    .grid-filter-body.show {
        padding: .25rem .875rem 1rem;
    }

    .saved-filter-menu {
        right: auto;
        left: 0;
        min-width: 0;
        width: calc(100vw - 2rem);
        max-width: calc(100vw - 2rem);
    }

    .saved-filter-menu::before {
        right: auto;
        left: 1.5rem;
    }
}

@media (max-width: 399.98px) {
    .grid-filter-toggle-pill {
        padding: .4375rem .625rem;
        font-size: .6875rem;
        gap: .375rem;
    }

    .grid-filter-toggle-pill .grid-filter-chevron {
        font-size: .75rem;
    }

    .grid-saved-filter-pill,
    .grid-filter-header > .ms-auto > .grid-clear-filter-pill {
        width: 2.25rem;
        height: 2.25rem;
    }

    .grid-saved-filter-pill > i:first-child,
    .grid-clear-filter-pill > i {
        font-size: .875rem;
    }
}

.saved-filter-menu {
    position: absolute;
    top: calc(100% + .5rem);
    right: 0;
    z-index: 1100;
    min-width: 260px;
    background: #FFF;
    border: 1px solid #DEE2E6;
    border-radius: .5rem;
    box-shadow: 0 .75rem 1.75rem rgba(0,0,0,.12), 0 .25rem .5rem rgba(0,0,0,.06);
    padding: .375rem 0;
}

.saved-filter-menu::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 1.5rem;
    width: 12px;
    height: 12px;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-left: 1px solid #DEE2E6;
    transform: rotate(45deg);
}

.saved-filter-item {
    display: block;
    padding: .375rem 1rem;
    font-size: .9375rem;
    color: #212529;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.saved-filter-item.save-new {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin: .125rem .375rem .25rem;
    padding: .5rem .75rem;
    border-radius: .375rem;
    background: #FFF4EF;
    color: var(--color-tertiary);
    font-weight: 600;
}

.saved-filter-item.save-new i {
    font-size: 1rem;
    color: var(--color-tertiary) !important;
}

.saved-filter-item.save-new:hover,
.saved-filter-item.save-new:focus,
.saved-filter-item.save-new:active {
    background-color: var(--color-tertiary) !important;
    color: #FFF !important;
}

.saved-filter-item.save-new:hover i,
.saved-filter-item.save-new:focus i,
.saved-filter-item.save-new:active i {
    color: #FFF !important;
}

.saved-filter-item.filter-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 12px;
}

.saved-filter-item.filter-item:hover,
.saved-filter-item.filter-item:focus {
    background-color: var(--color-primary) !important;
    color: white !important;
}

.saved-filter-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.saved-filter-delete {
    color: #CC3333;
    cursor: pointer;
    margin-left: 20px;
    font-size: .85rem;
    transition: opacity 0.15s;
}

.saved-filter-item.filter-item:hover .saved-filter-delete {
    color: white;
}

.saved-filter-divider {
    height: 0;
    margin: .5rem 0;
    overflow: hidden;
    border-top: 1px solid rgba(0,0,0,.15);
}

.saved-filter-header {
    padding: .5rem 1rem .25rem;
    font-size: .75rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .025em;
}

/* ── Save Filter Modal (Bootstrap-style) ───────────────────── */

.saved-filter-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
}

.saved-filter-modal {
    background: #FFF;
    border-radius: .5rem;
    box-shadow: 0 .5rem 2rem rgba(0,0,0,.2);
    width: 500px;
    max-width: 90vw;
}

.saved-filter-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #DEE2E6;
}

.saved-filter-modal-header .modal-title {
    font-size: 1.25rem;
    font-weight: 500;
    margin: 0;
    line-height: 1.5;
}

.saved-filter-modal-body {
    padding: 1rem;
}

.saved-filter-modal-footer {
    padding: .75rem 1rem;
    border-top: 1px solid #DEE2E6;
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}

.grid-filter-body {
    max-height: 0;
    overflow: hidden;
    padding: 0 1.125rem;
    opacity: 0;
    transition: max-height .3s ease, opacity .2s ease, padding .3s ease;
}

.grid-filter-body.show {
    max-height: 3000px;
    padding: .25rem 1.125rem 1.125rem;
    opacity: 1;
    border-top: 1px solid #E9ECEF;
    /* Once the panel has finished sliding open, stop clipping children so popups
       (DateTimePicker calendar, select dropdowns, etc.) can escape the filter body. */
    overflow: visible;
}

/* ========== Grid Filter Bar ========== */

.grid-filter-bar {
    /* Generic wrapper for status/sort bar — no specific styles needed beyond layout */
}

.grid-sort-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.grid-sort-label {
    font-size: .8rem;
    font-weight: 600;
    color: #6C757D;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.grid-sort-label i {
    color: #00A1BE !important;
    font-size: .8rem;
}

.grid-sort-dir {
    background: none;
    border: 1px solid #DEE2E6;
    border-radius: .375rem;
    padding: .35rem .5rem;
    cursor: pointer;
    color: #6C757D;
    transition: all .15s ease;
    display: flex;
    align-items: center;
}

.grid-sort-dir:hover {
    border-color: #00A1BE;
    color: #00A1BE;
}

.grid-sort-dir i {
    font-size: .85rem;
}

.grid-paging-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 0;
    border-top: 1px solid #DEE2E6;
    margin-top: .25rem;
}

.grid-paging-bar .btn {
    min-width: 2rem;
    padding: .25rem .5rem;
}

.grid-paging-info {
    font-size: .85rem;
    font-weight: 600;
    color: #6c757d;
    margin: 0 .5rem;
}

.grid-top-btn {
    margin-left: 1rem;
}

.grid-export-btn {
    background: #FFF !important;
    color: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
    /* Sit immediately after Add New / Run Bulk Action in the flex action row.
       order:1 puts this after default-0 items but before order:99 ms-auto items
       (which we explicitly bump below so they always end up at the right edge). */
    order: 1;
}

/* Right-aligned action-row items (Bootstrap ms-auto utility) always render LAST,
   regardless of their source-order position. This keeps Export CSV (order:1) in
   front of pushed-right helpers like the "Show All List Details" toggle on /volunteers. */
.mb-5.d-flex.flex-wrap.align-items-center.gap-2 > .ms-auto {
    order: 99 !important;
}

/* ActionButtonsAfter content (page-supplied buttons rendered AFTER the Export CSV
   button in FilteredGrid's markup — e.g., the admin "Export Data" full-PII export
   on Donors / Members / Recipients) sits AFTER Export CSV but before any ms-auto
   right-aligned items. CSS subsequent-sibling combinator targets every element that
   comes after .grid-export-btn in source order. */
.mb-5.d-flex.flex-wrap.align-items-center.gap-2 > .grid-export-btn ~ * {
    order: 5;
}

/* The ms-auto rule above (order:99) wins because it's more specific (.ms-auto class
   match beats the *), so right-aligned items still go to the far right. */

.grid-export-btn:hover:not(:disabled) {
    background: var(--color-primary) !important;
    color: #FFF !important;
}

.grid-export-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========== Constituent Grid Styles ========== */

.cst-name {
    font-family: var(--font-headings);
    font-size: 1.05rem;
    font-weight: 600;
    color: #27282A;
    text-decoration: none;
    display: block;
}

.cst-name:hover {
    color: #00A1BE;
}

.cst-email {
    font-size: .85rem;
    color: #00A1BE;
    text-decoration: none;
}

.cst-email:hover {
    color: #00CC78;
}

.cst-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .6rem;
    border-radius: 1rem;
    font-size: .78rem;
    margin-right: .35rem;
    font-weight: 500;
}

.cst-badge-type {
    background: #00A1BE;
    color: #fff;
}

.cst-badge-role {
    background: #00CC78;
    color: #fff;
}

.cst-badge-donot {
    background: #FEF2F2;
    color: #B91C1C;
}

.cst-email-blocked {
    font-size: .85rem;
    color: #999;
}

.cst-email-blocked s {
    text-decoration: line-through;
    text-decoration-color: #B91C1C;
}

.grid-row-details {
    border-top: 1px solid #EEE;
    padding-top: .75rem;
}

.grid-row-toggle {
    text-decoration: none !important;
    cursor: pointer;
}

.grid-row-toggle:hover {
    color: var(--color-primary);
}

.grid-row-toggle .fa-chevron-right {
    transition: transform 0.2s ease;
}

.grid-row-toggle.expanded .fa-chevron-right {
    transform: rotate(90deg);
}

.grid-toggle-all {
    text-decoration: none !important;
    cursor: pointer;
}

.grid-toggle-all:hover {
    color: var(--color-primary);
}

.grid-toggle-all .fa-chevron-right {
    transition: transform 0.2s ease;
}

.grid-toggle-all.expanded .fa-chevron-right {
    transform: rotate(90deg);
}

/* ========== QuickGrid — Constituents ========== */

.constituents-grid {
    width: 100%;
    border: 1px solid #CCC;
    border-collapse: collapse;
}

.constituents-grid thead {
    display: none;
}

.constituents-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem .75rem !important;
    vertical-align: top;
    border-bottom: 1px solid #DEE2E6;
}

.constituents-grid tbody tr {
    background: #FFF;
}

.constituents-grid a {
    color: #000;
    text-decoration: none;
}

.constituents-grid a:hover {
    color: var(--color-tertiary);
}

.constituents-grid .col-action {
    width: 60px;
}

/* ========== Surveys Grid (full-width rounded row cards) ========== */

.survey-grid { width: 100%; border-collapse: separate; border-spacing: 0 .5rem; }
.survey-grid thead { display: none; }
.survey-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}
.survey-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}
.survey-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}
.survey-grid a { color: #000; text-decoration: none; }
.survey-grid a:hover { color: var(--color-tertiary); }
.survey-grid .col-select { padding-right: 1rem !important; }

/* ========== Participants Grid ========== */

.participants-grid {
    width: 100%;
    border: 1px solid #CCC;
    border-collapse: collapse;
}

.participants-grid thead {
    display: none;
}

.participants-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem .75rem !important;
    vertical-align: top;
    border-bottom: 1px solid #DEE2E6;
}

.participants-grid tbody tr {
    background: #FFF;
}

.participants-grid a {
    color: #000;
    text-decoration: none;
}

.participants-grid a:hover {
    color: var(--color-tertiary);
}

/* ========== Tasks Grid ========== */

.tasks-grid {
    width: 100%;
    border: 1px solid #CCC;
    border-collapse: collapse;
}

.tasks-grid thead {
    display: none;
}

.tasks-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem .75rem !important;
    vertical-align: top;
    border-bottom: 1px solid #DEE2E6;
}

.tasks-grid tbody tr {
    background: #FFF;
}

.tasks-grid a {
    color: #000;
    text-decoration: none;
}

.tasks-grid a:hover {
    color: var(--color-tertiary);
}

.tasks-grid .col-action {
    width: 60px;
}

.tasks-grid .col-select {
    padding-right: 1rem !important;
}

/* ========== Projects Grid ========== */

.projects-grid {
    width: 100%;
    border: 1px solid #CCC;
    border-collapse: collapse;
}

.projects-grid thead {
    display: none;
}

.projects-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem .75rem !important;
    vertical-align: top;
    border-bottom: 1px solid #DEE2E6;
}

.projects-grid tbody tr {
    background: #FFF;
}

.projects-grid a {
    color: #000;
    text-decoration: none;
}

.projects-grid a:hover {
    color: var(--color-tertiary);
}

.projects-grid .col-action {
    width: 60px;
}

.projects-grid .col-select {
    padding-right: 1rem !important;
}

/* ========== Campaigns Grid ========== */

.campaigns-grid {
    width: 100%;
    border: 1px solid #CCC;
    border-collapse: collapse;
}

.campaigns-grid thead {
    display: none;
}

.campaigns-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem .75rem !important;
    vertical-align: top;
    border-bottom: 1px solid #DEE2E6;
}

.campaigns-grid tbody tr {
    background: #FFF;
}

.campaigns-grid a {
    color: #000;
    text-decoration: none;
}

.campaigns-grid a:hover {
    color: var(--color-tertiary);
}

.campaigns-grid .col-select {
    padding-right: 1rem !important;
}

/* ========== Material Inventory Grid ========== */

.material-inventory-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.material-inventory-grid thead {
    display: none;
}

.material-inventory-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.material-inventory-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.material-inventory-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.material-inventory-grid a {
    color: #000;
    text-decoration: none;
}

.material-inventory-grid a:hover {
    color: var(--color-tertiary);
}

.material-inventory-grid .col-select {
    padding-right: 1rem !important;
}

/* ========== Recognitions Grid ========== */

.recognitions-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.recognitions-grid thead {
    display: none;
}

.recognitions-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.recognitions-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.recognitions-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

/* ========== Auction Bids Grid ========== */

.auction-bids-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.auction-bids-grid thead {
    display: none;
}

.auction-bids-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.auction-bids-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.auction-bids-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.auction-bids-grid a {
    color: #000;
    text-decoration: none;
}

/* ========== Websites Grid ========== */

.websites-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.websites-grid thead {
    display: none;
}

.websites-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.websites-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.websites-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.websites-grid a { color: #000; text-decoration: none; }
.websites-grid a:hover { color: var(--color-tertiary); }
.websites-grid .col-select { padding-right: 1rem !important; }

/* ========== Fund Transfers Grid ========== */

.fund-transfers-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.fund-transfers-grid thead {
    display: none;
}

.fund-transfers-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.fund-transfers-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.fund-transfers-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.fund-transfers-grid a {
    color: #000;
    text-decoration: none;
}

.fund-transfers-grid a:hover {
    color: var(--color-tertiary);
}

.fund-transfers-grid .col-action {
    width: 60px;
}

.fund-transfers-grid .col-select {
    padding-right: 1rem !important;
}

.fund-transfers-grid .fund-transfer-row-section {
    padding: .25rem .5rem;
    margin-bottom: .25rem;
}

/* ========== Evaluations Grid ========== */
.evaluations-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.evaluations-grid thead {
    display: none;
}

.evaluations-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.evaluations-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.evaluations-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.evaluations-grid a {
    color: #000;
    text-decoration: none;
}

.evaluations-grid a:hover {
    color: var(--color-tertiary);
}

.evaluations-grid .col-action {
    width: 60px;
}

.evaluations-grid .col-select {
    padding-right: 1rem !important;
}

.evaluations-grid .evaluation-row-section {
    border: 1px solid #DEE2E6;
    border-radius: .375rem;
    padding: .5rem .75rem;
    margin-bottom: .5rem;
    background: #FFF;
}

/* ========== Account Transfers Grid ========== */

.account-transfers-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.account-transfers-grid thead {
    display: none;
}

.account-transfers-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.account-transfers-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.account-transfers-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.account-transfers-grid a {
    color: #000;
    text-decoration: none;
}

.account-transfers-grid a:hover {
    color: var(--color-tertiary);
}

.account-transfers-grid .col-action {
    width: 60px;
}

.account-transfers-grid .col-select {
    padding-right: 1rem !important;
}

.account-transfers-grid .account-transfer-row-section {
    padding: .25rem .5rem;
    margin-bottom: .25rem;
}

/* ========== Auctions Grid ========== */

.auctions-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.auctions-grid thead {
    display: none;
}

.auctions-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.auctions-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.auctions-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.auctions-grid a {
    color: #000;
    text-decoration: none;
}

.auctions-grid a:hover {
    color: var(--color-tertiary);
}

.auctions-grid .col-action {
    width: 60px;
}

.auctions-grid .col-select {
    padding-right: 1rem !important;
}

/* ========== Inventory Lending Lists Grid ========== */

.lending-lists-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.lending-lists-grid thead {
    display: none;
}

.lending-lists-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.lending-lists-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.lending-lists-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.lending-lists-grid a {
    color: #000;
    text-decoration: none;
}

.lending-lists-grid a:hover {
    color: var(--color-tertiary);
}

.lending-lists-grid .col-action {
    width: 60px;
}

.lending-lists-grid .col-select {
    padding-right: 1rem !important;
}

/* ========== Grants Grid ========== */

.grants-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.grants-grid thead {
    display: none;
}

.grants-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.grants-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.grants-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.grants-grid a {
    color: #000;
    text-decoration: none;
}

.grants-grid a:hover {
    color: var(--color-tertiary);
}

.grants-grid .col-action {
    width: 60px;
}

.grants-grid .col-select {
    padding-right: 1rem !important;
}

/* ========== Funds Grid ========== */

.funds-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.funds-grid thead {
    display: none;
}

.funds-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.funds-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.funds-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.funds-grid a {
    color: #000;
    text-decoration: none;
}

.funds-grid a:hover {
    color: var(--color-tertiary);
}

.funds-grid .col-action {
    width: 60px;
}

.funds-grid .col-select {
    padding-right: 1rem !important;
}

/* ========== Portal Documents Grid ========== */

.portal-documents-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.portal-documents-grid thead {
    display: none;
}

.portal-documents-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.portal-documents-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.portal-documents-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.portal-documents-grid a {
    color: #000;
    text-decoration: none;
}

.portal-documents-grid a:hover {
    color: var(--color-tertiary);
}

.portal-documents-grid .col-action {
    width: 60px;
}

.portal-documents-grid .col-select {
    padding-right: 1rem !important;
}

/* Portal document workspace — small fixed-size description box; height set so the
   label + textarea stack equals the upload card and their bottoms line up. */
.pd-desc-box {
    height: 146px !important;
    overflow-y: auto !important;
}

/* ========== Events Grid ========== */

.events-page .page-title i {
    color: #00A1BE !important;
}

.events-grid {
    width: 100%;
    border: 1px solid #CCC;
    border-collapse: collapse;
}

.events-grid thead {
    display: none;
}

.events-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem .75rem !important;
    vertical-align: top;
    border-bottom: 1px solid #DEE2E6;
}

.events-grid tbody tr {
    background: #FFF;
}

.events-grid a {
    color: #000;
    text-decoration: none;
}

.events-grid a:hover {
    color: var(--color-tertiary);
}

.events-grid .col-action {
    width: 60px;
}

.events-grid .col-select {
    padding-right: 1rem !important;
}

/* ========== My Contact Log Grid ========== */

.my-contact-log-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .4rem;
}

.my-contact-log-grid thead {
    display: none;
}

.my-contact-log-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: .5rem .75rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.my-contact-log-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.my-contact-log-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.my-contact-log-grid a:hover {
    color: var(--color-tertiary);
}

/* ========== My Follow-Up Grid ========== */

.my-follow-up-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .4rem;
}

.my-follow-up-grid thead {
    display: none;
}

.my-follow-up-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: .5rem .75rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.my-follow-up-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.my-follow-up-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.my-follow-up-grid a.follow-up-name-link {
    font-size: 120%;
    color: #27282A;
    font-weight: 600;
    text-decoration: none;
}

.my-follow-up-grid a.follow-up-name-link:hover {
    color: var(--color-tertiary);
}

/* Wider search field to fit "Constituent Name, Email or Reason for Follow-up" placeholder */
body:has(.my-follow-up-grid) .grid-search-wrap {
    width: 500px;
    max-width: 100%;
}

/* ========== Links & Resources Grid ========== */

.links-resources-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.links-resources-grid thead {
    display: none;
}

.links-resources-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.links-resources-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.links-resources-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.links-resources-grid a {
    color: #000;
    text-decoration: none;
}

.links-resources-grid a:hover {
    color: var(--color-tertiary);
}

.links-resources-grid .col-action {
    width: 60px;
}

.links-resources-grid .col-select {
    padding-right: 1rem !important;
}

/* ========== Constituent Groups Grid ========== */

.constituent-groups-grid {
    width: 100%;
    border: 1px solid #CCC;
    border-collapse: collapse;
}

.constituent-groups-grid thead {
    display: none;
}

.constituent-groups-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem .75rem !important;
    vertical-align: top;
    border-bottom: 1px solid #DEE2E6;
}

.constituent-groups-grid tbody tr {
    background: #FFF;
}

.constituent-groups-grid a {
    color: #000;
    text-decoration: none;
}

.constituent-groups-grid a:hover {
    color: var(--color-tertiary);
}

.constituent-groups-grid .col-action {
    width: 60px;
}

.constituent-groups-grid .col-select {
    padding-right: 1rem !important;
}

.constituent-group-row-section {
    border: 1px solid #DEE2E6;
    border-radius: .375rem;
    padding: .5rem .75rem;
    margin-bottom: .5rem;
    background: #FFF;
}

/* ========== Volunteer Task Groups Grid ========== */
/* Full-width grid. Every row is its own rounded-border card:
   border-collapse: separate + border-spacing produce the gap between rows;
   per-td top/bottom borders + first/last-child corner rounding give each
   row a full-width card look. */

.volunteer-task-groups-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.volunteer-task-groups-grid thead {
    display: none;
}

.volunteer-task-groups-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.volunteer-task-groups-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.volunteer-task-groups-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.volunteer-task-groups-grid a {
    color: #000;
    text-decoration: none;
}

.volunteer-task-groups-grid a:hover {
    color: var(--color-tertiary);
}

.volunteer-task-groups-grid .col-select {
    padding-right: 1rem !important;
}

/* ========== Bakes Page (FGC Volunteer Bakes — FkTeam 48599) ==========
   FGC SITE-WIDE THEME has moved to wwwroot/css/fgc.css (under .fgc selector,
   loaded via PaywallLayout's <main class="fgc"> wrapper for team 48599 users).
   The rules below are list-page-specific (status badges, table styling) and
   stay here under .bakes-page. */

/* Bake status badges — solid color, white bold text. List-page-specific. */
.bakes-page .bake-status-badge {
    color: #FFF !important;
    font-weight: 700;
    font-size: .85rem;
    padding: .35rem .7rem;
    display: inline-block;
}

.bakes-page .bake-status-badge.bake-status-open {
    background: #92C4B6 !important;
}

.bakes-page .bake-status-badge.bake-status-closed {
    background: #EE7779 !important;
}

.bakes-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.bakes-grid thead {
    display: none;
}

.bakes-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.bakes-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.bakes-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.bakes-grid a {
    color: #000;
    text-decoration: none;
}

.bakes-grid a:hover {
    color: var(--color-tertiary);
}

.bakes-grid .col-select {
    padding-right: 1rem !important;
}

.vol-tasks-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.vol-tasks-grid thead {
    display: none;
}

.vol-tasks-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.vol-tasks-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.vol-tasks-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.vol-tasks-grid a {
    color: #000;
    text-decoration: none;
}

.vol-tasks-grid a:hover {
    color: var(--color-tertiary);
}

.vol-tasks-grid .col-select {
    padding-right: 1rem !important;
}

/* ========== Paid Time Off Requests Grid ========== */

.paid-time-off-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.paid-time-off-grid thead {
    display: none;
}

.paid-time-off-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: .65rem 1rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.paid-time-off-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.paid-time-off-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.paid-time-off-grid a {
    color: #000;
    text-decoration: none;
}

.paid-time-off-grid a:hover {
    color: var(--color-tertiary);
}

.paid-time-off-grid .col-select {
    padding-right: 1rem !important;
}

/* Per Christine 2026-05-09: each grid row should have ONE rounded border (the outer
   card from the td borders above) and no inner section borders. Sections are
   spacing-only divs now. */
.paid-time-off-grid .pto-row-section {
    margin-bottom: .5rem;
}

.paid-time-off-grid .pto-row-section:last-child {
    margin-bottom: 0;
}

/* ========== Approver-of-record callout (Paid Time Off Approval page) ==========
   Sits under the "I Approve This Request" switch. Three states:
     approved  → green tint, solid check
     cleared   → muted amber tint, history icon (last approver still on file but switch is off)
     pending   → light gray, info icon (signed-in user is the prospective approver)
*/
.approver-callout {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    padding: .65rem .85rem;
    margin-top: .5rem;
    border: 1px solid transparent;
    border-radius: .5rem;
    font-family: var(--font-primary);
    font-size: 13px;
    line-height: 1.4;
}

.approver-callout > i {
    font-size: 1.1rem;
    margin-top: .12rem;
    flex-shrink: 0;
}

.approver-callout-title {
    font-weight: 600;
}

.approver-callout-sub {
    margin-top: .15rem;
    font-size: 12px;
    color: #6c757d;
}

.approver-callout-approved {
    background: #f0fff5;
    border-color: #b6e7c9;
    color: #1d7a4a;
}
.approver-callout-approved > i { color: #00CC78; }
.approver-callout-approved .approver-callout-sub { color: #4a8d6a; }

.approver-callout-cleared {
    background: #fff8eb;
    border-color: #f0d5a3;
    color: #8a6a1f;
}
.approver-callout-cleared > i { color: #c08b2a; }
.approver-callout-cleared .approver-callout-sub { color: #a08358; }

.approver-callout-pending {
    background: #f6f8fa;
    border-color: #DEE2E6;
    color: #464646;
}
.approver-callout-pending > i { color: #00A1BE; }

/* ========== Documents Grid ========== */

.documents-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.documents-grid thead {
    display: none;
}

.documents-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.documents-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.documents-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.documents-grid a {
    color: #000;
    text-decoration: none;
}

.documents-grid a:hover {
    color: var(--color-tertiary);
}

.documents-grid .col-select {
    padding-right: 1rem !important;
}

/* ========== Text Message Delivery Log Grid ========== */

.text-message-log-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.text-message-log-grid thead {
    display: none;
}

.text-message-log-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.text-message-log-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.text-message-log-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.text-message-log-grid a {
    color: #000;
    text-decoration: none;
}

.text-message-log-grid a:hover {
    color: var(--color-tertiary);
}

/* ========== Product Inventory Change Log Grid ========== */

.inventory-change-log-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.inventory-change-log-grid thead {
    display: none;
}

.inventory-change-log-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.inventory-change-log-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.inventory-change-log-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.inventory-change-log-grid a {
    color: #000;
    text-decoration: none;
}

.inventory-change-log-grid a:hover {
    color: var(--color-tertiary);
}

/* Text-message delivery status badge — solid color, white bold text, on the first row. */
.tml-status-badge {
    color: #FFF !important;
    font-weight: 700;
    font-size: .8rem;
    padding: .3rem .8rem;
    border-radius: 1rem;
    display: inline-block;
    text-transform: capitalize;
    white-space: nowrap;
}

.tml-status-badge.tml-status-delivered { background: #00CC78 !important; }
.tml-status-badge.tml-status-undelivered { background: #FF4A11 !important; }
.tml-status-badge.tml-status-other { background: #6c757d !important; }

/* ========== Text Message Unsubscribes Grid (reuses .tml-status-badge above) ========== */

.text-unsubscribes-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.text-unsubscribes-grid thead {
    display: none;
}

.text-unsubscribes-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.text-unsubscribes-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.text-unsubscribes-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.text-unsubscribes-grid a {
    color: #000;
    text-decoration: none;
}

.text-unsubscribes-grid a:hover {
    color: var(--color-tertiary);
}

/* ========== Volunteer Groups Grid ========== */

.volunteer-groups-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.volunteer-groups-grid thead {
    display: none;
}

.volunteer-groups-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.volunteer-groups-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.volunteer-groups-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.volunteer-groups-grid a {
    color: #000;
    text-decoration: none;
}

.volunteer-groups-grid a:hover {
    color: var(--color-tertiary);
}

.volunteer-groups-grid .col-select {
    padding-right: 1rem !important;
}

/* ========== Member Groups Grid ========== */
.member-groups-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.member-groups-grid thead {
    display: none;
}

.member-groups-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.member-groups-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.member-groups-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.member-groups-grid a {
    color: #000;
    text-decoration: none;
}

.member-groups-grid a:hover {
    color: var(--color-tertiary);
}

.member-groups-grid .col-select {
    padding-right: 1rem !important;
}

/* ========== Mission Trip Types Grid ========== */

.mission-trip-types-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.mission-trip-types-grid thead {
    display: none;
}

.mission-trip-types-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.mission-trip-types-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.mission-trip-types-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.mission-trip-types-grid a {
    color: #000;
    text-decoration: none;
}

.mission-trip-types-grid a:hover {
    color: var(--color-tertiary);
}

.mission-trip-types-grid .col-select {
    padding-right: 1rem !important;
}

.mission-trip-accounts-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.mission-trip-accounts-grid thead {
    display: none;
}

.mission-trip-accounts-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.mission-trip-accounts-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.mission-trip-accounts-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.mission-trip-accounts-grid a {
    color: #000;
    text-decoration: none;
}

.mission-trip-accounts-grid a:hover {
    color: var(--color-tertiary);
}

.mission-trip-accounts-grid .col-select {
    padding-right: 1rem !important;
}

.mission-trip-enrollments-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.mission-trip-enrollments-grid thead {
    display: none;
}

.mission-trip-enrollments-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.mission-trip-enrollments-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.mission-trip-enrollments-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.mission-trip-enrollments-grid a {
    color: #000;
    text-decoration: none;
}

.mission-trip-enrollments-grid a:hover {
    color: var(--color-tertiary);
}

.mission-trip-enrollments-grid .col-select {
    padding-right: 1rem !important;
}

/* Mission Trip Payments list (/mission-trip-payments) — full-width rounded row cards */
.mission-trip-payments-grid { width: 100%; border-collapse: separate; border-spacing: 0 .5rem; }
.mission-trip-payments-grid thead { display: none; }
.mission-trip-payments-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}
.mission-trip-payments-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}
.mission-trip-payments-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}
.mission-trip-payments-grid a { color: #000; text-decoration: none; }
.mission-trip-payments-grid a:hover { color: var(--color-tertiary); }
.mission-trip-payments-grid .col-select { padding-right: 1rem !important; }

/* Member Archive list (/members-archive) — full-width rounded row cards */
.members-archive-grid { width: 100%; border-collapse: separate; border-spacing: 0 .5rem; }
.members-archive-grid thead { display: none; }
.members-archive-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}
.members-archive-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}
.members-archive-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}
.members-archive-grid a { color: #000; text-decoration: none; }
.members-archive-grid a:hover { color: var(--color-tertiary); }
.members-archive-grid .col-select { padding-right: 1rem !important; }

/* Budgets list (/budgets) — full-width rounded row cards */
.budgets-grid { width: 100%; border-collapse: separate; border-spacing: 0 .5rem; }
.budgets-grid thead { display: none; }
.budgets-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}
.budgets-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}
.budgets-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}
.budgets-grid a { color: #000; text-decoration: none; }
.budgets-grid a:hover { color: var(--color-tertiary); }
.budgets-grid .col-select { padding-right: 1rem !important; }

/* Mission Trip Enrollment Requests list (/mission-trip-enrollment-requests) — full-width rounded row cards */
.mission-trip-requests-grid { width: 100%; border-collapse: separate; border-spacing: 0 .5rem; }
.mission-trip-requests-grid thead { display: none; }
.mission-trip-requests-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}
.mission-trip-requests-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}
.mission-trip-requests-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}
.mission-trip-requests-grid a { color: #000; text-decoration: none; }
.mission-trip-requests-grid a:hover { color: var(--color-tertiary); }
.mission-trip-requests-grid .col-select { padding-right: 1rem !important; }

/* Mission Trip Refunds list (/mission-trip-refunds) — full-width rounded row cards */
.mission-trip-refunds-grid { width: 100%; border-collapse: separate; border-spacing: 0 .5rem; }
.mission-trip-refunds-grid thead { display: none; }
.mission-trip-refunds-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}
.mission-trip-refunds-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}
.mission-trip-refunds-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}
.mission-trip-refunds-grid a { color: #000; text-decoration: none; }
.mission-trip-refunds-grid a:hover { color: var(--color-tertiary); }
.mission-trip-refunds-grid .col-select { padding-right: 1rem !important; }

/* Trip/account workspace Enrollments tabs — one rounded card per enrollment row */
.mte-row-card {
    border: 1px solid #DEE2E6;
    border-radius: .375rem;
    padding: .75rem 1rem;
    margin-bottom: .5rem;
    background: #FFF;
    font-family: var(--font-primary);
    font-size: 14px;
}

.mission-trip-fees-forfeitures-grid,
.mission-trip-credits-grid,
.mission-trip-reserved-credits-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.mission-trip-fees-forfeitures-grid thead,
.mission-trip-credits-grid thead,
.mission-trip-reserved-credits-grid thead {
    display: none;
}

.mission-trip-fees-forfeitures-grid td,
.mission-trip-credits-grid td,
.mission-trip-reserved-credits-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.mission-trip-fees-forfeitures-grid td:first-child,
.mission-trip-credits-grid td:first-child,
.mission-trip-reserved-credits-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.mission-trip-fees-forfeitures-grid td:last-child,
.mission-trip-credits-grid td:last-child,
.mission-trip-reserved-credits-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.mission-trip-fees-forfeitures-grid a,
.mission-trip-credits-grid a,
.mission-trip-reserved-credits-grid a {
    color: #000;
    text-decoration: none;
}

.mission-trip-fees-forfeitures-grid a:hover,
.mission-trip-credits-grid a:hover,
.mission-trip-reserved-credits-grid a:hover {
    color: var(--color-tertiary);
}

.mission-trip-fees-forfeitures-grid .col-select,
.mission-trip-reserved-credits-grid .col-select {
    padding-right: 1rem !important;
}

.mt-vehicles-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.mt-vehicles-grid thead {
    display: none;
}

.mt-vehicles-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.mt-vehicles-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.mt-vehicles-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.mt-vehicles-grid a {
    color: #000;
    text-decoration: none;
}

.mt-vehicles-grid a:hover {
    color: var(--color-tertiary);
}

.mt-vehicles-grid .col-select {
    padding-right: 1rem !important;
}

/* ========== Payments Grid ========== */

.payments-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.payments-grid thead { display: none; }

.payments-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: .75rem 1rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.payments-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.payments-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.payments-grid a {
    color: #000;
    text-decoration: none;
}

.payments-grid a:hover {
    color: var(--color-tertiary);
}

.payments-grid .col-action { width: 60px; }

.payments-grid .col-select { padding-right: 1rem !important; }

.payments-grid .payment-row-section {
    padding: 0 .5rem;
    margin-bottom: 0;
}

/* ========== Account Register Grid ========== */

.account-register-grid { width: 100%; border-collapse: separate; border-spacing: 0 .5rem; }
.account-register-grid thead { display: none; }
.account-register-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}
.account-register-grid td:first-child { border-left: 1px solid #DEE2E6; border-top-left-radius: .375rem; border-bottom-left-radius: .375rem; }
.account-register-grid td:last-child { border-right: 1px solid #DEE2E6; border-top-right-radius: .375rem; border-bottom-right-radius: .375rem; }
.account-register-grid a { color: #000; text-decoration: none; }
.account-register-grid a:hover { color: var(--color-tertiary); }
.account-register-grid .col-select { padding-right: 1rem !important; }

.fund-register-grid { width: 100%; border-collapse: separate; border-spacing: 0 .5rem; }
.fund-register-grid thead { display: none; }
.fund-register-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}
.fund-register-grid td:first-child { border-left: 1px solid #DEE2E6; border-top-left-radius: .375rem; border-bottom-left-radius: .375rem; }
.fund-register-grid td:last-child { border-right: 1px solid #DEE2E6; border-top-right-radius: .375rem; border-bottom-right-radius: .375rem; }
.fund-register-grid a { color: #000; text-decoration: none; }
.fund-register-grid a:hover { color: var(--color-tertiary); }
.fund-register-grid .col-select { padding-right: 1rem !important; }
/* Pending status pill = Argenta orange (#FF4A11), reconciled stays green (.pill--active). Scoped to
   this grid (more specific than the global gray .pill--inactive) so no other page's inactive pill moves. */
.fund-register-grid .pill--inactive { background-color: #FCEBE5; color: #FF4A11; }

/* Grid formatting restored on 3 list pages that named a grid class but never defined it (they rendered
   as plain tables — caught by LintGridCssClassDefined, Christine 2026-07-17). Standard rounded-card grid. */
.team-members-grid, .background-checks-grid, .email-health-grid { width: 100%; border-collapse: separate; border-spacing: 0 .5rem; }
.team-members-grid thead, .background-checks-grid thead, .email-health-grid thead { display: none; }
.team-members-grid td, .background-checks-grid td, .email-health-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}
.team-members-grid td:first-child, .background-checks-grid td:first-child, .email-health-grid td:first-child { border-left: 1px solid #DEE2E6; border-top-left-radius: .375rem; border-bottom-left-radius: .375rem; }
.team-members-grid td:last-child, .background-checks-grid td:last-child, .email-health-grid td:last-child { border-right: 1px solid #DEE2E6; border-top-right-radius: .375rem; border-bottom-right-radius: .375rem; }
.team-members-grid a, .background-checks-grid a, .email-health-grid a { color: #000; text-decoration: none; }
.team-members-grid a:hover, .background-checks-grid a:hover, .email-health-grid a:hover { color: var(--color-tertiary); }
.team-members-grid .col-select, .background-checks-grid .col-select, .email-health-grid .col-select { padding-right: 1rem !important; }

/* ========== Member Payments Grid ========== */

.member-payments-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.member-payments-grid thead { display: none; }

.member-payments-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.member-payments-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.member-payments-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.member-payments-grid a { color: #000; text-decoration: none; }

.member-payments-grid a:hover { color: var(--color-tertiary); }

.member-payments-grid .col-action { width: 60px; }

.member-payments-grid .col-select { padding-right: 1rem !important; }

.member-payments-grid .payment-row-section {
    padding: .25rem .5rem;
    margin-bottom: .25rem;
}

/* ========== Member Payments Page (stats + rows) ========== */

.mp-stats-row { margin-bottom: 1.25rem; }

.mp-stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: .75rem;
    background: #FFF;
    border: 1px solid #E9ECEF;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    transition: transform .15s ease, box-shadow .15s ease;
    height: 100%;
}

.mp-stat-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

.mp-stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mp-stat-icon i {
    font-size: 1.5rem;
}

.mp-stat-primary .mp-stat-icon { background: rgba(0, 161, 190, 0.1); color: #00A1BE; }
.mp-stat-secondary .mp-stat-icon { background: rgba(0, 204, 120, 0.1); color: #00CC78; }
.mp-stat-tertiary .mp-stat-icon { background: rgba(255, 74, 17, 0.1); color: #FF4A11; }

.mp-stat-body { flex: 1; min-width: 0; }

.mp-stat-label {
    font-family: 'Muli', sans-serif;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6C757D;
    font-weight: 700;
    margin-bottom: .25rem;
}

.mp-stat-value {
    font-family: 'Muli', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #27282A;
    line-height: 1.1;
}

/* Row content inside .member-payments-grid */

.mp-amount {
    font-family: 'Muli', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #27282A;
    line-height: 1.1;
    margin-bottom: .25rem;
}

.mp-date {
    font-family: 'Muli', sans-serif;
    font-size: .85rem;
    color: #6C757D;
}

.mp-pill {
    display: inline-flex;
    align-items: center;
    padding: .25rem .65rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.mp-pill-category {
    background: #E0F5F9;
    color: #00A1BE;
}

.mp-pill-method {
    background: #F1F3F5;
    color: #495057;
}

.mp-pill-recurring {
    background: #FFF4E6;
    color: #B86500;
}

.mp-pill-status-paid {
    background: rgba(0, 204, 120, 0.12);
    color: #008855;
}

.mp-pill-status-pending {
    background: rgba(255, 152, 0, 0.12);
    color: #B86500;
}

.mp-pill-status-refunded {
    background: rgba(216, 35, 124, 0.12);
    color: #B91D67;
}

.mp-pill-status-failed {
    background: rgba(255, 74, 17, 0.12);
    color: #C5390E;
}

.mp-meta {
    font-family: 'Muli', sans-serif;
    font-size: .8rem;
    color: #6C757D;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}

.mp-meta-divider { color: #ADB5BD; }

.mp-meta-mono {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-size: .75rem;
    background: #F8F9FA;
    padding: .15rem .4rem;
    border-radius: .25rem;
    color: #495057;
}

.mp-meta-link {
    color: #00A1BE;
    text-decoration: none;
    font-weight: 600;
}

.mp-meta-link:hover { color: #007D94; text-decoration: underline; }

.mp-meta-locked { color: #D8237C; font-weight: 600; }

.mp-recurring-banner {
    padding: .75rem 1rem;
    background: #FFF4E6;
    border: 1px solid #FFD8A8;
    border-radius: .375rem;
    color: #B86500;
    font-family: 'Muli', sans-serif;
    font-size: .9rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.mp-recurring-link {
    color: #00A1BE;
    text-decoration: none;
    font-weight: 600;
    margin-left: auto;
}

.mp-recurring-link:hover { color: #007D94; text-decoration: underline; }

/* ========== Member Attribution (PaymentDetails) ========== */

.member-attr-empty {
    padding: .55rem .75rem;
    border: 1px dashed #DEE2E6;
    border-radius: .375rem;
    color: #6C757D;
    font-size: .85rem;
    background: #F8F9FA;
}

.member-attr-warn {
    padding: .55rem .75rem;
    border: 1px solid #FFD8A8;
    border-radius: .375rem;
    color: #B86500;
    font-size: .85rem;
    background: #FFF8E1;
}

.member-attr-single {
    padding: .55rem .75rem;
    border: 1px solid #B8E5EF;
    border-radius: .375rem;
    background: #E0F5F9;
}

.member-attr-name {
    color: #00A1BE;
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.2;
}

.member-attr-id {
    color: #6C757D;
    font-size: .75rem;
    margin-top: .15rem;
}

/* ========== Expenses Grid ========== */

.expenses-grid {
    width: 100%;
    border: 1px solid #CCC;
    border-collapse: collapse;
}

.expenses-grid thead {
    display: none;
}

.expenses-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem .75rem !important;
    vertical-align: top;
    border-bottom: 1px solid #DEE2E6;
}

.expenses-grid tbody tr {
    background: #FFF;
}

.expenses-grid a {
    color: #000;
    text-decoration: none;
}

.expenses-grid a:hover {
    color: var(--color-tertiary);
}

/* ========== Recurring Expenses Grid (full-width rounded row cards) ========== */
/* Shared by /recurring-expenses, /recurring-deposits and /recurring-invoices — same row-card grid, so one rule set. */
.recurring-expenses-grid, .recurring-deposits-grid, .recurring-invoices-grid { width: 100%; border-collapse: separate; border-spacing: 0 .5rem; }
.recurring-expenses-grid thead, .recurring-deposits-grid thead, .recurring-invoices-grid thead { display: none; }
.recurring-expenses-grid td, .recurring-deposits-grid td, .recurring-invoices-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}
.recurring-expenses-grid td:first-child, .recurring-deposits-grid td:first-child, .recurring-invoices-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}
.recurring-expenses-grid td:last-child, .recurring-deposits-grid td:last-child, .recurring-invoices-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
    width: 60px;
}
.recurring-expenses-grid a, .recurring-deposits-grid a, .recurring-invoices-grid a { color: #000; text-decoration: none; }
.recurring-expenses-grid a:hover, .recurring-deposits-grid a:hover, .recurring-invoices-grid a:hover { color: var(--color-tertiary); }

/* ========== Refunds Payable Grid (full-width rounded row cards) ========== */
.refunds-payable-grid { width: 100%; border-collapse: separate; border-spacing: 0 .5rem; }
.refunds-payable-grid thead { display: none; }
.refunds-payable-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}
.refunds-payable-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}
.refunds-payable-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}
.refunds-payable-grid a { color: #000; text-decoration: none; }
.refunds-payable-grid a:hover { color: var(--color-tertiary); }
.refunds-payable-grid .col-select { padding-right: 1rem !important; }
.refunds-payable-grid .refund-row-section { padding: .25rem .5rem; margin-bottom: .25rem; }

/* ========== Staff Previous Positions Grid (full-width rounded row cards) ========== */
.staffpositions-grid { width: 100%; border-collapse: separate; border-spacing: 0 .5rem; }
.staffpositions-grid thead { display: none; }
.staffpositions-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}
.staffpositions-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}
.staffpositions-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}
.staffpositions-grid a { color: #000; text-decoration: none; }
.staffpositions-grid a:hover { color: var(--color-tertiary); }
.staffpositions-grid .grid-title, .staffpositions-grid .grid-label { display: inline; }
.staffpositions-grid .grid-title { margin-right: .25rem; }

/* ========== Staff Direct Reports Grid (full-width rounded row cards) ========== */
.staffdirectreports-grid { width: 100%; border-collapse: separate; border-spacing: 0 .5rem; }
.staffdirectreports-grid thead { display: none; }
.staffdirectreports-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}
.staffdirectreports-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}
.staffdirectreports-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}
.staffdirectreports-grid a { color: #000; text-decoration: none; }
.staffdirectreports-grid a:hover { color: var(--color-tertiary); }
.staffdirectreports-grid .grid-title, .staffdirectreports-grid .grid-label { display: inline; }
.staffdirectreports-grid .grid-title { margin-right: .25rem; }

/* ========== Staff Related Expenses Grid (full-width rounded row cards) ========== */
.staffexpenses-grid { width: 100%; border-collapse: separate; border-spacing: 0 .5rem; }
.staffexpenses-grid thead { display: none; }
.staffexpenses-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}
.staffexpenses-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}
.staffexpenses-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}
.staffexpenses-grid a { color: #000; text-decoration: none; }
.staffexpenses-grid a:hover { color: var(--color-tertiary); }
.staffexpenses-grid .grid-title, .staffexpenses-grid .grid-label { display: inline; }
.staffexpenses-grid .grid-title { margin-right: .25rem; }

/* ========== Property Maintenance workspace subgrids (Expenses/Tasks) — full-width rounded row cards ========== */
.maintenance-subgrid { width: 100%; border-collapse: separate; border-spacing: 0 .5rem; }
.maintenance-subgrid thead { display: none; }
.maintenance-subgrid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}
.maintenance-subgrid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}
.maintenance-subgrid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}
.maintenance-subgrid a { color: #000; text-decoration: none; }
.maintenance-subgrid a:hover { color: var(--color-tertiary); }
.maintenance-subgrid .grid-title, .maintenance-subgrid .grid-label { display: inline; }
.maintenance-subgrid .grid-title { margin-right: .25rem; }

/* ========== Refunds Receivable Grid (full-width rounded row cards) ========== */
.refunds-receivable-grid { width: 100%; border-collapse: separate; border-spacing: 0 .5rem; }
.refunds-receivable-grid thead { display: none; }
.refunds-receivable-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}
.refunds-receivable-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}
.refunds-receivable-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}
.refunds-receivable-grid a { color: #000; text-decoration: none; }
.refunds-receivable-grid a:hover { color: var(--color-tertiary); }
.refunds-receivable-grid .col-select { padding-right: 1rem !important; }
.refunds-receivable-grid .refund-row-section { padding: .25rem .5rem; margin-bottom: .25rem; }

/* ========== Subscription Payments Grid (customer-facing) ========== */
.sub-payments-grid { width: 100%; border-collapse: separate; border-spacing: 0 .5rem; }
.sub-payments-grid thead { display: none; }
.sub-payments-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    color: #464646;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}
.sub-payments-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}
.sub-payments-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}
.sub-payments-grid tbody tr { background: transparent; }
.sub-payments-grid .row-title { color:#464646; font-family:'Muli',sans-serif; font-size:120%; font-weight:600; }
.sub-payments-grid .grid-title { color:#464646; }
.sub-payments-grid .grid-label { color:#464646; }
.sub-payments-grid a:not(.grid-action-btn) { color: #464646; text-decoration: none; }
.sub-payments-grid a:not(.grid-action-btn):hover { color: var(--color-tertiary); }

.expense-row-link {
    color: var(--color-primary) !important;
    text-decoration: none !important;
    font-weight: 500;
    font-size: 1.1rem;
}

.expense-row-link:hover {
    color: var(--color-tertiary) !important;
}

.expenses-grid .col-action {
    width: 60px;
}

.expenses-grid .col-select {
    padding-right: 1rem !important;
}

/* ========== Properties Grid ========== */

.properties-grid { width: 100%; border: 1px solid #CCC; border-collapse: collapse; }
.properties-grid thead { display: none; }
.properties-grid td { font-family: var(--font-primary); font-size: 14px; padding: 1.25rem .75rem !important; vertical-align: top; border-bottom: 1px solid #DEE2E6; }
.properties-grid tbody tr { background: #FFF; }
.properties-grid a { color: #000; text-decoration: none; }
.properties-grid a:hover { color: var(--color-tertiary); }
.properties-grid .col-select { padding-right: 1rem !important; }

/* ========== Property Appraisals Grid ========== */
.property-appraisals-grid { width: 100%; border: 1px solid #CCC; border-collapse: collapse; }
.property-appraisals-grid thead { display: none; }
.property-appraisals-grid td { font-family: var(--font-primary); font-size: 14px; padding: .6rem .75rem !important; vertical-align: middle; border-bottom: 1px solid #DEE2E6; }
.property-appraisals-grid tbody tr { background: #FFF; }
.property-appraisals-grid a { color: #000; text-decoration: none; }
.property-appraisals-grid a:hover { color: var(--color-tertiary); }

/* ========== Appraisals List Grid (/appraisals) — rounded row cards ========== */
.appraisals-grid { width: 100%; border-collapse: separate; border-spacing: 0 .5rem; }
.appraisals-grid thead { display: none; }
.appraisals-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}
.appraisals-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}
.appraisals-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}
.appraisals-grid a { color: #000; text-decoration: none; }
.appraisals-grid a:hover { color: var(--color-tertiary); }
.appraisals-grid .col-select { padding-right: 1rem !important; }

/* ========== Canned Messages List Grid (/canned-messages) — rounded row cards ========== */
.canned-messages-grid { width: 100%; border-collapse: separate; border-spacing: 0 .5rem; }
.canned-messages-grid thead { display: none; }
.canned-messages-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}
.canned-messages-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}
.canned-messages-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}
.canned-messages-grid a { color: #000; text-decoration: none; }
.canned-messages-grid a:hover { color: var(--color-tertiary); }
.canned-messages-grid .col-select { padding-right: 1rem !important; }

/* ========== Property Maintenance List Grid (/property-maintenance) — rounded row cards ========== */
.property-maintenance-grid { width: 100%; border-collapse: separate; border-spacing: 0 .5rem; }
.property-maintenance-grid thead { display: none; }
.property-maintenance-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}
.property-maintenance-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}
.property-maintenance-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}
.property-maintenance-grid a { color: #000; text-decoration: none; }
.property-maintenance-grid a:hover { color: var(--color-tertiary); }
.property-maintenance-grid .col-select { padding-right: 1rem !important; }

/* ========== Property Leases Grid (full-width rounded row cards) ========== */
.property-leases-grid { width: 100%; border-collapse: separate; border-spacing: 0 .5rem; }
.property-leases-grid thead { display: none; }
.property-leases-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}
.property-leases-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}
.property-leases-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}
.property-leases-grid a { color: #000; text-decoration: none; }
.property-leases-grid a:hover { color: var(--color-tertiary); }
.property-leases-grid .col-select { padding-right: 1rem !important; }

/* ========== Renters Grid (full-width rounded row cards) ========== */
.renters-grid { width: 100%; border-collapse: separate; border-spacing: 0 .5rem; }
.renters-grid thead { display: none; }
.renters-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}
.renters-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}
.renters-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}
.renters-grid a { color: #000; text-decoration: none; }
.renters-grid a:hover { color: var(--color-tertiary); }
.renters-grid .col-select { padding-right: 1rem !important; }

/* ========== Grid Action Buttons (circular) ========== */
.grid-action-btn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; border:none; font-size:14px; color:#fff !important; text-decoration:none !important; }
.grid-action-btn:hover, .grid-action-btn:focus, .grid-action-btn:active, .grid-action-btn:visited { text-decoration:none !important; }
.grid-action-btn.green { background:#00CC78; }
.grid-action-btn.green:hover { background:#00a563; color:#fff !important; }
.grid-action-btn.green-outline { background:#FFF; border:2px solid #00CC78; color:#00CC78 !important; }
.grid-action-btn.green-outline:hover { background:#00CC78; color:#FFF !important; }
.grid-action-btn.pink { background:#D8237C; }
.grid-action-btn.pink:hover { background:#b81d68; color:#fff !important; }
.grid-action-btn.orange { background:#FF4A11; }
.grid-action-btn.orange:hover { background:#E0400E; color:#fff !important; }
.grid-action-btn.purple { background:#9B659B; }
.grid-action-btn.purple:hover { background:#845284; color:#fff !important; }
.grid-action-btn.tealpastel { background:#92C4B6; }
.grid-action-btn.tealpastel:hover { background:#7AAFA0; color:#fff !important; }

/* ========== Deposits Grid ========== */

.timesheets-grid {
    width: 100%;
    border: 1px solid #CCC;
    border-collapse: collapse;
}

.timesheets-grid thead {
    display: none;
}

.timesheets-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem .75rem !important;
    vertical-align: top;
    border-bottom: 1px solid #DEE2E6;
}

.timesheets-grid tbody tr {
    background: #FFF;
}

.timesheets-grid a {
    color: #000;
    text-decoration: none;
}

.timesheets-grid a:hover {
    color: var(--color-tertiary);
}

.timesheets-grid .col-select {
    padding-right: 1rem !important;
}

.timesheets-grid .ts-icon-col {
    width: 1%;
    white-space: nowrap;
}

.deposits-grid {
    width: 100%;
    border: 1px solid #CCC;
    border-collapse: collapse;
}

.deposits-grid thead {
    display: none;
}

.deposits-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: .5rem .75rem !important;
    vertical-align: top;
    border-bottom: 1px solid #DEE2E6;
}

.deposits-grid tbody tr {
    background: #FFF;
}

.deposits-grid a {
    color: #000;
    text-decoration: none;
}

.deposits-grid a:hover {
    color: var(--color-tertiary);
}

.deposits-grid .col-select {
    padding-right: 1rem !important;
}

/* Section styling for deposit rows */
.deposit-row-section {
    padding: .25rem .75rem;
    margin-bottom: .25rem;
}

/* ── Parents Grid ───────────────────────────────── */
.parents-grid {
    width: 100%;
    border: 1px solid #CCC;
    border-collapse: collapse;
}

.parents-grid thead {
    display: none;
}

.parents-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: .5rem .75rem !important;
    vertical-align: top;
    border-bottom: 1px solid #DEE2E6;
}

.parents-grid tbody tr {
    background: #FFF;
}

.parents-grid a {
    color: #000;
    text-decoration: none;
}

.parents-grid a:hover {
    color: var(--color-tertiary);
}

.parents-grid .col-select {
    padding-right: 1rem !important;
}

.parent-row-section {
    padding: .25rem .75rem;
    margin-bottom: .25rem;
}

/* ========== Withdrawals Grid ========== */

.withdrawls-grid {
    width: 100%;
    border: 1px solid #CCC;
    border-collapse: collapse;
}

.withdrawls-grid thead {
    display: none;
}

.withdrawls-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: .6rem .75rem !important;
    vertical-align: top;
    border-bottom: 1px solid #DEE2E6;
}

.withdrawls-grid tbody tr {
    background: #FFF;
}

.withdrawls-grid a {
    color: #000;
    text-decoration: none;
}

.withdrawls-grid a:hover {
    color: var(--color-tertiary);
}

.withdrawls-grid .col-action {
    width: 60px;
}

.withdrawls-grid .col-select {
    padding-right: 1rem !important;
}

.expenses-grid .expense-row-section,
.withdrawls-grid .withdrawl-row-section,
.programs-grid .program-row-section {
    padding: .25rem .5rem;
    margin-bottom: .25rem;
}

/* ========== Programs Grid ========== */

.programs-grid {
    width: 100%;
    border: 1px solid #CCC;
    border-collapse: collapse;
}

.programs-grid thead {
    display: none;
}

.programs-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem .75rem !important;
    vertical-align: top;
    border-bottom: 1px solid #DEE2E6;
}

.programs-grid tbody tr {
    background: #FFF;
}

.programs-grid a {
    color: #000;
    text-decoration: none;
}

.programs-grid a:hover {
    color: var(--color-tertiary);
}

.programs-grid .col-action {
    width: 60px;
}

.programs-grid .col-select {
    padding-right: 1rem !important;
}

/* ========== Reconcile Page ========== */

/* Controls panel */
.reconcile-controls {
    border: 1px solid #DEE2E6;
    border-radius: .5rem;
    padding: 1.25rem 1.5rem;
    background: #FAFBFC;
}

.reconcile-controls-row {
    display: flex;
    gap: 3rem;
    flex-wrap: wrap;
}

.reconcile-control-group {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.reconcile-control-label {
    font-family: var(--font-primary);
    font-size: .8rem;
    font-weight: 700;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .03em;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.reconcile-optional-badge {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
    background: #E9ECEF;
    border-radius: 3px;
    padding: .1rem .45rem;
}

.reconcile-date-pair {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.reconcile-date-pair > div,
.reconcile-date-pair > :first-child,
.reconcile-date-pair > :last-child {
    min-width: 135px;
}

.reconcile-date-sep {
    font-family: var(--font-primary);
    font-size: .8rem;
    font-weight: 700;
    color: #00A1BE;
    text-transform: uppercase;
    flex-shrink: 0;
}

.reconcile-go-btn {
    white-space: nowrap;
    align-self: flex-start;
    margin-top: 1px;
}

.reconcile-subtext {
    font-family: var(--font-primary);
    font-size: .75rem;
    color: #999;
    margin-top: .15rem;
}

.reconcile-clear-link {
    font-family: var(--font-primary);
    font-size: .7rem;
    font-weight: 600;
    color: #FF4A11;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.reconcile-clear-link:hover {
    color: #00CC78;
    text-decoration: underline;
}

.reconcile-filter-active {
    font-family: var(--font-primary);
    font-size: .78rem;
    font-weight: 600;
    color: #00A1BE;
    margin-top: .25rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.reconcile-filter-error {
    font-family: var(--font-primary);
    font-size: .78rem;
    font-weight: 600;
    color: #D8237C;
    margin-top: .25rem;
}

/* Summary cards */
.reconcile-summary {
    display: flex;
    border: 1px solid #DEE2E6;
    border-radius: .5rem;
    margin-top: 1rem;
}

.reconcile-summary-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.25rem;
    border-right: 1px solid #DEE2E6;
}

.reconcile-summary-card-last {
    border-right: none;
}

.reconcile-summary-icon {
    font-size: 2.5em;
    flex-shrink: 0;
    line-height: 1;
}

.reconcile-summary-data {
    min-width: 0;
}

.reconcile-summary-label {
    font-family: var(--font-primary);
    font-size: .85rem;
    font-weight: 600;
    color: #6c757d;
}

.reconcile-summary-value {
    font-family: var(--font-primary);
    font-size: 1.4em;
    font-weight: 700;
    color: #27282A;
    line-height: 1.2;
}

.reconcile-balanced {
    color: #00CC78 !important;
}

.reconcile-summary-hint {
    font-family: var(--font-primary);
    font-size: .7rem;
    color: #999;
    font-weight: 400;
    margin-top: .15rem;
}

@media (max-width: 767.98px) {
    .reconcile-controls-row {
        flex-direction: column;
        gap: 1.25rem;
    }

    .reconcile-date-pair {
        flex-direction: column;
        gap: .35rem;
        width: 100%;
    }

    .reconcile-date-pair > div,
    .reconcile-date-pair > :first-child,
    .reconcile-date-pair > :last-child {
        min-width: unset;
        width: 100%;
    }

    .reconcile-date-sep {
        display: none;
    }

    .reconcile-summary {
        flex-direction: column;
    }

    .reconcile-summary-card {
        border-right: none;
        border-bottom: 1px solid #DEE2E6;
    }

    .reconcile-summary-card-last {
        border-bottom: none;
    }
}

/* Grid */
.reconcile-grid {
    width: 100%;
    border: 1px solid #CCC;
    border-collapse: collapse;
}

.reconcile-grid thead th {
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 600;
    color: #6c757d;
    padding: .75rem;
    border-bottom: 2px solid #DEE2E6;
    background: #F8F9FA;
}

.reconcile-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem .75rem !important;
    vertical-align: top;
    border-bottom: 1px solid #DEE2E6;
}

.reconcile-grid tbody tr {
    background: #FFF;
}

.reconcile-grid a {
    color: #000;
    text-decoration: none;
}

.reconcile-grid a:hover {
    color: var(--color-tertiary);
}

/* ========== Account Statements Grid ========== */

.account-statements-grid {
    width: 100%;
    border: 1px solid #CCC;
    border-collapse: collapse;
}

.account-statements-grid thead {
    display: none;
}

.account-statements-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: .5rem .75rem !important;
    vertical-align: middle;
    border-bottom: 1px solid #DEE2E6;
}

.account-statements-grid tbody tr {
    background: #FFF;
}

.account-statements-grid a {
    color: #000;
    text-decoration: none;
}

.account-statements-grid a:hover {
    color: var(--color-tertiary);
}

.account-statements-grid .col-action {
    width: 90px;
}

/* ========== Board Members Grid ========== */

.board-members-grid {
    width: 100%;
    border: 1px solid #CCC;
    border-collapse: collapse;
}

.board-members-grid thead {
    display: none;
}

.board-members-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem .75rem !important;
    vertical-align: top;
    border-bottom: 1px solid #DEE2E6;
}

.board-members-grid tbody tr {
    background: #FFF;
}

.board-members-grid a {
    color: #000;
    text-decoration: none;
}

.board-members-grid a:hover {
    color: var(--color-tertiary);
}

.board-members-grid .col-action {
    width: 60px;
}

.board-members-grid .col-select {
    padding-right: 1rem !important;
}

.board-members-grid .bm-name {
    font-family: var(--font-primary);
    font-size: 120%;
    font-weight: bold;
    color: #464646;
}

.board-members-grid .bm-email {
    color: var(--color-primary);
    font-size: 90%;
}

.board-members-grid .bm-email:hover {
    color: var(--color-tertiary);
}

/* ========== Grant Applicants Grid ========== */

.grant-applicants-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.grant-applicants-grid thead {
    display: none;
}

.grant-applicants-grid tbody tr {
    background: #FFF;
}

.grant-applicants-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem .75rem !important;
    vertical-align: top;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
    background: #FFF;
}

.grant-applicants-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.grant-applicants-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.grant-applicants-grid a {
    color: #000;
    text-decoration: none;
}

.grant-applicants-grid a:hover {
    color: var(--color-tertiary);
}

.grant-applicants-grid .col-action {
    width: 60px;
}

.grant-applicants-grid .col-select {
    padding-right: 1rem !important;
}

.grant-applicants-grid .ga-name {
    font-family: var(--font-primary);
    font-size: 120%;
    font-weight: bold;
    color: #464646;
}

.grant-applicants-grid .ga-email {
    color: var(--color-primary);
    font-size: 90%;
}

.grant-applicants-grid .ga-email:hover {
    color: var(--color-tertiary);
}

/* ========== Precincts Grid ========== */
.precincts-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.precincts-grid thead { display: none; }

.precincts-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.precincts-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.precincts-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.precincts-grid a { color: #000; text-decoration: none; }
.precincts-grid a:hover { color: var(--color-tertiary); }
.precincts-grid .col-action { width: 60px; }
.precincts-grid .col-select { padding-right: 1rem !important; }

/* ========== Districts Grid ========== */
/* Rounded-card pattern (Auctions 2026-04-22 standard). Each row is a self-contained
   card: border-collapse: separate + border-spacing for the gap, per-td borders + first/last
   corner rounding for the card look. NEVER copy the legacy `border: 1px solid #CCC` block
   from divisions-grid/departments-grid below — those are deprecated. */
.districts-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.districts-grid thead {
    display: none;
}

.districts-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.districts-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.districts-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.districts-grid a {
    color: #000;
    text-decoration: none;
}

.districts-grid a:hover {
    color: var(--color-tertiary);
}

.districts-grid .col-action {
    width: 60px;
}

.districts-grid .col-select {
    padding-right: 1rem !important;
}

/* ========== Divisions Grid ========== */

.divisions-grid {
    width: 100%;
    border: 1px solid #CCC;
    border-collapse: collapse;
}

.divisions-grid thead {
    display: none;
}

.divisions-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: .5rem .75rem !important;
    vertical-align: top;
    border-bottom: 1px solid #DEE2E6;
}

.divisions-grid tbody tr {
    background: #FFF;
}

.divisions-grid a {
    color: #000;
    text-decoration: none;
}

.divisions-grid a:hover {
    color: var(--color-tertiary);
}

.divisions-grid .col-action {
    width: 60px;
}

.divisions-grid .col-select {
    padding-right: 1rem !important;
}

/* ========== Departments Grid ========== */

.departments-grid {
    width: 100%;
    border: 1px solid #CCC;
    border-collapse: collapse;
}

.departments-grid thead {
    display: none;
}

.departments-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem .75rem !important;
    vertical-align: top;
    border-bottom: 1px solid #DEE2E6;
}

.departments-grid tbody tr {
    background: #FFF;
}

.departments-grid a {
    color: #000;
    text-decoration: none;
}

.departments-grid a:hover {
    color: var(--color-tertiary);
}

.departments-grid .col-action {
    width: 60px;
}

.departments-grid .col-select {
    padding-right: 1rem !important;
}

/* ========== Chapters Grid ========== */

.chapters-grid {
    width: 100%;
    border: 1px solid #CCC;
    border-collapse: collapse;
}

.chapters-grid thead {
    display: none;
}

.chapters-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: .5rem .75rem !important;
    vertical-align: top;
    border-bottom: 1px solid #DEE2E6;
}

.chapters-grid tbody tr {
    background: #FFF;
}

.chapters-grid a {
    color: #000;
    text-decoration: none;
}

.chapters-grid a:hover {
    color: var(--color-tertiary);
}

.chapters-grid .col-action {
    width: 60px;
}

.chapters-grid .col-select {
    padding-right: 1rem !important;
}

/* ========== Policies & Procedures Grid ========== */

.policies-grid {
    width: 100%;
    border: 1px solid #CCC;
    border-collapse: collapse;
}

.policies-grid thead {
    display: none;
}

.policies-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: .5rem .75rem !important;
    vertical-align: top;
    border-bottom: 1px solid #DEE2E6;
}

.policies-grid tbody tr {
    background: #FFF;
}

.policies-grid a {
    color: #000;
    text-decoration: none;
}

.policies-grid a:hover {
    color: var(--color-tertiary);
}

.policies-grid .col-action {
    width: 60px;
}

.policies-grid .col-select {
    padding-right: 1rem !important;
}

/* ========== Contracts Grid ========== */

.permits-grid {
    width: 100%;
    border: 1px solid #CCC;
    border-collapse: collapse;
}

.permits-grid thead {
    display: none;
}

.permits-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem .75rem !important;
    vertical-align: top;
    border-bottom: 1px solid #DEE2E6;
}

.permits-grid tbody tr {
    background: #FFF;
}

.permits-grid a {
    color: #000;
    text-decoration: none;
}

.permits-grid a:hover {
    color: var(--color-tertiary);
}

.permits-grid .permit-row-section {
    border: 1px solid #DEE2E6;
    border-radius: .375rem;
    padding: .5rem .75rem;
    margin-bottom: .5rem;
    background: #FFF;
}

.contracts-grid {
    width: 100%;
    border: 1px solid #CCC;
    border-collapse: collapse;
}

.contracts-grid thead {
    display: none;
}

.contracts-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1rem .75rem !important;
    vertical-align: top;
    border-bottom: 1px solid #DEE2E6;
}

.contracts-grid tbody tr {
    background: #FFF;
}

.contracts-grid a {
    color: #000;
    text-decoration: none;
}

.contracts-grid a:hover {
    color: var(--color-tertiary);
}

.contracts-grid .col-action {
    width: 60px;
}

.contracts-grid .col-select {
    padding-right: 1rem !important;
}

/* ========== Event Sessions Grid ========== */

.event-sessions-grid {
    width: 100%;
    border: 1px solid #CCC;
    border-collapse: collapse;
}

.event-sessions-grid thead {
    display: none;
}

.event-sessions-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem .75rem !important;
    vertical-align: top;
    border-bottom: 1px solid #DEE2E6;
}

.event-sessions-grid tbody tr {
    background: #FFF;
}

.event-sessions-grid a {
    color: #000;
    text-decoration: none;
}

.event-sessions-grid a:hover {
    color: var(--color-tertiary);
}

.event-sessions-grid .col-select {
    width: 60px;
    position: relative;
    padding-left: calc(12px + .75rem) !important;
}

.event-sessions-grid .col-action {
    width: 60px;
    position: relative;
    padding-left: calc(12px + .75rem) !important;
}

.session-color-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 12px;
}

.event-sessions-grid .col-action input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
}

.event-sessions-grid .dtp-dropdown.open {
    left: 100%;
    top: 0;
    right: auto;
}

.session-name {
    font-weight: 600;
    font-size: 1.05rem;
}

.session-event-name {
    font-size: .85rem;
    color: #6c757d;
}

/* ========== Session Date Tile + Time Strip ========== */

.session-date-tile {
    width: 78px;
    border: 1px solid #DEE2E6;
    border-radius: .5rem;
    background: #FFF;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
}
.session-date-tile-band {
    padding: .3rem .4rem;
    color: #FFF;
    background: #00A1BE;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
}
.session-date-day {
    font-size: 28px;
    font-weight: 700;
    color: #1F1F1F;
    line-height: 1.05;
    padding: .4rem 0 .15rem 0;
    font-family: var(--font-headings);
}
.session-date-dow {
    font-size: 10px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    padding: 0 0 .45rem 0;
}

.session-datetime-wrap {
    flex-wrap: wrap;
    flex-shrink: 0;
}
.session-time-strip {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #DEE2E6;
    border-radius: .5rem;
    background: linear-gradient(135deg, #FFFFFF 0%, #F4FAFC 100%);
    padding: .35rem .85rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    flex: 1 1 auto;
    min-width: 0;
}
.session-time-row {
    display: flex;
    align-items: center;
    gap: .85rem;
    justify-content: center;
    flex-wrap: wrap;
}
@media (max-width: 480px) {
    .session-time-value { font-size: 17px; }
    .session-time-row { gap: .5rem; }
    .session-time-strip { padding: .35rem .5rem; }
    .session-date-tile { width: 70px; }
    .session-date-day { font-size: 24px; }
}
.session-time-block { text-align: center; line-height: 1.1; }
.session-time-label {
    font-size: 9px;
    color: #6c757d;
    letter-spacing: .14em;
    font-weight: 700;
    text-transform: uppercase;
}
.session-time-value {
    font-size: 20px;
    font-weight: 700;
    color: #1F1F1F;
    font-family: var(--font-headings);
    line-height: 1.1;
    margin-top: .1rem;
}
.session-time-altday {
    font-size: 10px;
    color: #FF4A11;
    font-weight: 700;
    letter-spacing: .04em;
    margin-top: .1rem;
}
.session-time-arrow {
    color: #00A1BE;
    font-size: 16px;
    padding: 0 .25rem;
    align-self: center;
    margin-top: .8rem;
}
.session-time-duration {
    text-align: center;
    font-size: 11px;
    color: #6c757d;
    letter-spacing: .04em;
    font-weight: 600;
    margin-top: .35rem;
    padding-top: .3rem;
    border-top: 1px dashed #E0E4E8;
}

/* ========== My Sessions Dashboard Card (Surf Instructor) ========== */

.my-sessions-card .card-header i.fa-stopwatch { color: var(--color-primary); font-size: 1.1rem; }
.my-sessions-card .card-header .grid-search-wrap { width: 100%; }

/* My Sessions filter strip */
.my-sessions-filter {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .65rem 1rem;
    background: #FCFCFC;
    border-bottom: 1px solid #EEF1F4;
}
.my-sessions-filter-label {
    font-size: 11px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    margin-right: .25rem;
}
.my-sessions-filter-pill { position: relative; }
.my-sessions-filter-pill > button {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: #FFF;
    border: 1px solid #DEE2E6;
    border-radius: 999px;
    padding: .3rem .85rem .3rem .7rem;
    font-size: 13px;
    color: #1F1F1F;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s, color .15s;
}
.my-sessions-filter-pill > button:hover {
    border-color: #00A1BE;
    box-shadow: 0 1px 4px rgba(0,161,190,.18);
}
.my-sessions-filter-pill > button > i:first-child { color: #00A1BE; font-size: 13px; }
.my-sessions-filter-pill > button > i.chev { font-size: 11px; color: #6c757d; margin-left: .15rem; }
.my-sessions-filter-pill.is-active > button {
    background: #00A1BE;
    border-color: #00A1BE;
    color: #FFF;
}
.my-sessions-filter-pill.is-active > button > i,
.my-sessions-filter-pill.is-active > button > i.chev { color: #FFF; }
.my-sessions-filter-pill.is-active > button:hover { box-shadow: 0 2px 6px rgba(0,161,190,.35); }
.my-sessions-filter-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: #FFF;
    border: 1px solid #DEE2E6;
    border-radius: .5rem;
    box-shadow: 0 6px 18px rgba(0,0,0,.10);
    list-style: none;
    padding: .25rem 0;
    margin: 0;
    min-width: 200px;
    max-height: 320px;
    overflow-y: auto;
    z-index: 50;
}
.my-sessions-filter-menu li {
    padding: .45rem 1rem;
    cursor: pointer;
    font-size: 13px;
    color: #1F1F1F;
    transition: background .1s;
    white-space: nowrap;
}
.my-sessions-filter-menu li:hover { background: #F0F8FA; }
.my-sessions-filter-menu li.selected { background: #E6F4F8; color: #00A1BE; font-weight: 700; }
.my-sessions-filter-clear {
    background: transparent;
    border: none;
    color: #FF4A11;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: .3rem .6rem;
    border-radius: .375rem;
    transition: background .15s;
    margin-left: auto;
}
.my-sessions-filter-clear:hover { background: rgba(255,74,17,.1); }
.my-sessions-filter-custom { display: flex; align-items: center; gap: .35rem; }
.my-sessions-filter-custom .date-range-connected { background: #FFF; }
.my-sessions-card .card-body .page-title { display: none; }
.my-sessions-card .card-body .grid-filter-bar { padding: .75rem 1rem .25rem 1rem; margin-bottom: 0; }
.my-sessions-card .card-body .session-tracking-grid { margin: 0 1rem 1rem 1rem; width: calc(100% - 2rem); }

/* ========== Session Time Tracking Grid ========== */

.session-tracking-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
    border: none;
}

.session-tracking-grid thead {
    display: none;
}

.session-tracking-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem .75rem !important;
    vertical-align: top;
    border: 1px solid #CCC;
    border-radius: .375rem;
}

.session-tracking-grid tbody tr {
    background: #FFF;
}

.session-badge {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: .25rem;
    font-size: .8rem;
    font-weight: 500;
}

.session-badge-public {
    background: #E0F5E0;
    color: #198754;
}

.session-badge-private {
    background: #F5E0E0;
    color: #6c757d;
}

.session-booked-badge {
    background-color: #D8237C;
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .04em;
    padding: .35em .75em;
    animation: bookedPulse 2s ease-in-out infinite;
}

@keyframes bookedPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .7; }
}

.session-capacity {
    text-align: right;
}

.session-capacity-label {
    font-size: .85rem;
    font-weight: 600;
    color: #464646;
    margin-bottom: .25rem;
}

.session-capacity-track {
    width: 120px;
    height: 6px;
    background: #E9ECEF;
    border-radius: 3px;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
}

.session-capacity-fill {
    height: 100%;
    background: var(--color-primary);
    border-radius: 3px;
    transition: width .3s ease;
}

.session-capacity-fill.booked {
    background: #D8237C;
}

/* ========== Promo Codes Grid ========== */

.promo-codes-grid {
    width: 100%;
    border: 1px solid #CCC;
    border-collapse: collapse;
}

.promo-codes-grid thead {
    display: none;
}

.promo-codes-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem .75rem !important;
    vertical-align: top;
    border-bottom: 1px solid #DEE2E6;
}

.promo-codes-grid tbody tr {
    background: #FFF;
}

.promo-codes-grid a {
    color: #000;
    text-decoration: none;
}

.promo-codes-grid a:hover {
    color: var(--color-tertiary);
}

.promo-codes-grid .col-action {
    width: 60px;
}

.promo-badge {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: .25rem;
    font-size: .8rem;
    font-weight: 500;
}

.promo-badge-active {
    background: #E0F5E0;
    color: #198754;
}

.promo-badge-expired {
    background: #F5E0E0;
    color: #DC3545;
}

.promo-badge-maxed {
    background: #FFF3CD;
    color: #856404;
}

.promo-badge-inactive {
    background: #E9ECEF;
    color: #6c757d;
}

/* ========== Bulk Actions & Selection ========== */

.col-select {
    width: 40px;
    accent-color: var(--color-primary);
}

.col-select input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.bulk-all-banner {
    background: rgba(0,161,190,.08);
    border: 1px solid rgba(0,161,190,.25);
    border-radius: .375rem;
    padding: .6rem 1rem;
    font-family: var(--font-headings);
    font-size: .85rem;
    font-weight: 600;
    color: var(--color-primary);
    text-align: center;
}

.bulk-all-banner i {
    color: var(--color-primary);
}

.bulk-action-separator {
    font-size: .78rem !important;
    font-weight: 600 !important;
    color: #6c757d !important;
    cursor: default !important;
    padding: .5rem .75rem .25rem !important;
    pointer-events: none;
}

.bulk-action-separator:hover {
    background: transparent !important;
    color: #6c757d !important;
}

.bulk-actions-select {
    min-width: 320px;
}

.bulk-actions-select .argenta-select-list {
    min-width: 320px;
}

/* Support Page — Resource Boxes */
.support-box {
    display: block;
    width: 100%;
    min-height: 200px;
    padding: 15px;
    border: 1px solid #DEE2E6;
    border-radius: .375rem;
    background: #FFF;
    text-align: center;
    text-decoration: none;
    color: var(--color-body);
    transition: box-shadow .2s, transform .2s;
}

.support-box:hover {
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.12);
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--color-body);
}

.support-box .icon {
    color: var(--color-primary);
}

.support-box-heading {
    font-family: var(--font-headings);
    font-size: 1rem;
    font-weight: 600;
    margin-top: .75rem;
    margin-bottom: .5rem;
    color: var(--color-body);
}

.support-box-text {
    font-size: .85rem;
    color: #6c757d;
    line-height: 1.4;
}

/* ========== Choose Constituent Type ========== */

.choose-type-grid {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.choose-type-card {
    display: inline-block;
    width: 200px;
    padding: 1.5rem 0;
    border-radius: .5rem;
    cursor: pointer;
    color: #FFF;
    font-family: var(--font-headings);
    font-size: 1rem;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.choose-type-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.2);
}

.choose-type-circle {
    width: 150px;
    height: 150px;
    padding: 20px;
    border: 10px solid #FFF;
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========== Staff Members Grid ========== */
.staff-members-grid {
    width: 100%;
    border: 1px solid #CCC;
    border-collapse: collapse;
}

.staff-members-grid thead {
    display: none;
}

.staff-members-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem .75rem !important;
    vertical-align: top;
    border-bottom: 1px solid #CCC;
}

.staff-members-grid tbody tr {
    background: #FFF;
}

.staff-members-grid a {
    color: #000;
    text-decoration: none;
}

.staff-members-grid a:hover {
    color: var(--color-tertiary);
}

.staff-members-grid .col-select {
    padding-right: 1rem !important;
}

.staff-members-grid .staff-row-section {
    border: 1px solid #DEE2E6;
    border-radius: .375rem;
    padding: .5rem .75rem;
    margin-bottom: .5rem;
    background: #FFF;
}

.staff-members-grid .staff-row-section:last-child {
    margin-bottom: 0;
    padding-bottom: .25rem;
}

.staff-members-grid .staff-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #f0f0f0;
}

.staff-members-grid .staff-avatar-placeholder {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00A1BE, #00CC78);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}

/* ========== Delegates Grid ========== */
.delegates-grid table {
    width: 100% !important;
}

.delegates-grid thead {
    display: none;
}

.delegates-grid tr {
    background-color: #FFF;
    border: 1px solid #DEE2E6;
}

.delegates-grid td:first-child {
    vertical-align: top !important;
}

.delegates-grid td {
    padding: 1.25rem !important;
    padding-right: 1rem !important;
}

.delegates-grid .delegate-row-section {
    border: 1px solid #DEE2E6;
    border-radius: .375rem;
    padding: .5rem .75rem;
    margin-bottom: .5rem;
    background: #FFF;
}

.delegates-grid .delegate-row-section:last-child {
    margin-bottom: 0;
    padding-bottom: .25rem;
}

/* ========== Argenta Modal ========== */
.argenta-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.argenta-modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.argenta-modal {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    transform: scale(0.95) translateY(-10px);
    transition: transform 0.2s ease;
}

.argenta-modal-overlay.show .argenta-modal {
    transform: scale(1) translateY(0);
}

.argenta-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #F8F9FA;
    border-bottom: 1px solid #dee2e6;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    color: #6c757d;
}

.argenta-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
}

.argenta-modal-close:hover {
    color: #333;
}

.argenta-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.argenta-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 15px 20px;
    border-top: 1px solid #dee2e6;
}

@media (max-width: 576px) {
    .argenta-modal {
        width: 95%;
        margin: 10px;
    }
}

/* ========== Constituent Edit Page ========== */

.constituent-type-roles {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .35rem;
}

.constituent-type-badge {
    display: inline-flex;
    align-items: center;
    padding: .35rem .85rem;
    border-radius: .375rem;
    font-family: var(--font-headings);
    font-size: .95rem;
    font-weight: 600;
    background: #E0F5F9;
    color: #00A1BE;
}

.constituent-type-badge i {
    color: #00A1BE;
}

.constituent-status-row {
    padding: .25rem 0;
}

/* Title Bar Link Buttons */
.cst-title-link,
.cst-title-link i {
    color: #FF4A11 !important;
    font-size: 1.1rem;
    text-decoration: none !important;
    transition: opacity 0.15s;
}

.cst-title-link:hover,
.cst-title-link:hover i {
    color: #FF4A11 !important;
    opacity: .75;
    text-decoration: none !important;
}

/* Workspace Icon Bar */
.cst-iconbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .2rem;
    padding: .4rem .6rem;
    background: #FFF;
    border: 1px solid #E8E8E8;
    border-radius: .375rem;
}

.cst-iconbar-menu-label {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-headings);
    font-weight: bold;
    font-size: .8em;
    color: #646464;
    padding: .15rem .5rem .15rem .25rem;
    border-right: 1px solid #DEE2E6;
    margin-right: .25rem;
    white-space: nowrap;
    text-transform: uppercase;
}

.cst-iconbar-menu-label i {
    padding-top: .15em;
}

.cst-iconbar a {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .6rem;
    font-size: .85em;
    color: #444;
    text-decoration: none;
    border-radius: .25rem;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}

.cst-iconbar a:hover {
    background: rgba(0,161,190,.08);
    color: #444;
    text-decoration: none;
}

.cst-iconbar a i {
    font-size: .85em;
    color: #00A1BE;
}

.cst-iconbar a:hover i {
    color: #00A1BE;
}

.cst-iconbar a.active,
.cst-iconbar a.active:hover {
    color: var(--color-primary);
    font-weight: 600;
    background: rgba(0,161,190,.1);
    border-bottom: 2px solid var(--color-primary);
}

.cst-iconbar a.active i {
    color: #00A1BE;
}

.cst-iconbar-name {
    font-weight: 600;
    font-size: .85rem;
    color: var(--color-primary);
    white-space: nowrap;
    padding: .25rem .5rem;
    text-decoration: none;
    border-radius: .25rem;
    transition: background 0.12s;
}

.cst-iconbar-name:hover {
    background: rgba(0,161,190,.08);
    text-decoration: none;
}

.cst-iconbar-name.active {
    background: rgba(0,161,190,.1);
    border-bottom: 2px solid var(--color-primary);
}

.cst-iconbar-sep {
    display: inline-block;
    width: 1px;
    height: .9rem;
    background: #DDD;
    margin: 0 .2rem;
    flex-shrink: 0;
}

/* ─── Workspace Mobile Responsive ─── */
@media (max-width: 767.98px) {
    .page-title {
        font-size: 110%;
        padding: .65rem .75rem;
    }

    .page-title .row {
        flex-direction: column;
        gap: .5rem;
    }

    .page-title .col-auto {
        justify-content: flex-start !important;
    }

    .cst-iconbar {
        gap: .1rem;
        padding: .3rem .4rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }

    .cst-iconbar a {
        font-size: .75em;
        padding: .2rem .4rem;
    }

    .cst-iconbar-menu-label {
        font-size: .7em;
    }

    .cst-title-link i {
        font-size: 1rem !important;
    }
}

@media (max-width: 575.98px) {
    .page-title {
        font-size: 100%;
        padding: .5rem .65rem;
    }
}

/* Event Workspace — Inline Category Labels */
.event-ws-cat {
    display: inline-flex;
    align-items: center;
    font-size: .55rem;
    font-weight: 700;
    color: #fff;
    background: #00A1BE;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .15rem .45rem;
    border-radius: 2rem;
    white-space: nowrap;
    margin: .1rem .05rem;
    line-height: 1.3;
}

/* Record Audits */
/* Constituent Photo */
.cst-photo-frame {
    width: 130px;
    height: 130px;
    border-radius: .5rem;
    overflow: hidden;
    border: 2px solid #DEE2E6;
    flex-shrink: 0;
    background: #F8F9FA;
}

.cst-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cst-photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #CCC;
    font-size: 3.5rem;
}

.cst-photo-upload-btn {
    cursor: pointer;
}

.cst-record-audits {
    font-size: .75rem;
    color: #999;
    text-align: right;
    line-height: 1.5;
}

.cst-record-audits strong {
    color: #666;
    font-weight: 600;
}

.cst-audit-sep {
    display: inline-block;
    width: 1px;
    height: .7rem;
    background: #DDD;
    margin: 0 .75rem;
    vertical-align: middle;
}

/* ===== Constituent Files Upload ===== */
.cst-file-upload-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cst-file-dropzone {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    background: #fafafa;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.cst-file-dropzone:hover,
.cst-file-dropzone.dragover {
    border-color: #00CC78;
    background: #f0fff4;
}

.cst-file-dropzone.dragover {
    transform: scale(1.01);
}

.cst-file-dropzone-icon {
    font-size: 3rem;
    color: #00A1BE;
    margin-bottom: 0.5rem;
}

.cst-file-dropzone-text {
    color: #666;
    margin-bottom: 0.5rem;
}

.cst-file-dropzone-subtext {
    color: #999;
    font-size: 0.85rem;
}

.cst-file-input-hidden {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

.cst-file-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 200px;
    overflow-y: auto;
}

.cst-file-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.cst-file-list-item:last-child {
    margin-bottom: 0;
}

.cst-file-list-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.cst-file-list-name i {
    color: #6c757d;
}

.cst-file-list-name span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cst-file-list-size {
    color: #999;
    font-size: 0.85rem;
    margin-right: 1rem;
}

.cst-file-list-remove {
    background: none;
    border: none;
    color: #CC3333;
    cursor: pointer;
    padding: 0.25rem;
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.2s;
}

.cst-file-list-remove:hover {
    transform: scale(1.2);
}

.cst-file-count-badge {
    display: inline-block;
    background: #00CC78;
    color: #fff;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.85rem;
    margin-left: 0.5rem;
}

.cst-file-upload-progress {
    margin-top: 1rem;
    display: none;
}

.cst-file-upload-progress.active {
    display: block;
}

.cst-progress-bar-container {
    height: 20px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}

.cst-progress-bar-fill {
    height: 100%;
    background: #00CC78;
    transition: width 0.3s ease;
    width: 0%;
}

.cst-progress-text {
    text-align: center;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #666;
}

/* ── Project Progress Meter ── */
.progress-meter { padding: 8px 0; }
.progress-meter-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.progress-meter-percent { font-family: var(--font-headings); font-size: 1.5rem; font-weight: 700; color: #27282A; }
.progress-meter-detail { font-size: .85rem; color: #6C757D; }
.progress-meter-track { width: 100%; height: 10px; background: #E9ECEF; border-radius: 5px; overflow: hidden; }
.progress-meter-bar { height: 100%; border-radius: 5px; transition: width .6s ease, background-color .4s ease; }

/* ── Booking Form Admin (Participant Workspace) ── */
.booking-form-admin { padding: 0; }

/* Booking Selector — multi-booking card picker */
.booking-selector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .75rem;
}
.booking-selector-card {
    border: 2px solid #DEE2E6;
    border-radius: .5rem;
    padding: .875rem 1rem;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, transform .15s;
    background: #FFF;
    position: relative;
}
.booking-selector-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0,161,190,.12);
    transform: translateY(-1px);
}
.booking-selector-card.selected {
    border-color: var(--color-primary);
    background: #F0FAFB;
    box-shadow: 0 2px 12px rgba(0,161,190,.15);
}
.booking-selector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
}
.booking-selector-conf {
    font-weight: 700;
    font-size: .9rem;
    color: #464646;
    letter-spacing: .02em;
}
.booking-selector-badge {
    font-size: .7rem;
    font-weight: 600;
    padding: .15rem .5rem;
    border-radius: 1rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.booking-selector-badge.paid {
    background: #E6F9F0;
    color: #00CC78;
}
.booking-selector-badge.unpaid {
    background: #FFF3E6;
    color: #E89830;
}
.booking-selector-detail {
    font-size: .8rem;
    color: #6c757d;
    line-height: 1.6;
    display: flex;
    align-items: center;
    gap: .35rem;
}
.booking-selector-detail i {
    width: 14px;
    text-align: center;
    color: #999;
}
.booking-selector-promo {
    font-size: .7rem;
    background: #F0F0F0;
    color: #666;
    padding: .05rem .4rem;
    border-radius: .2rem;
    margin-left: .25rem;
    font-family: monospace;
}
.booking-selector-active-indicator {
    position: absolute;
    bottom: .5rem;
    right: .75rem;
    font-size: .7rem;
    font-weight: 600;
    color: var(--color-primary);
}
@media (max-width: 575.98px) {
    .booking-selector-grid { grid-template-columns: 1fr; }
}
.wizard-steps-admin { display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; position: relative; }
.wizard-step-admin { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; flex: 1; }
.wizard-circle-admin { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; color: #FFF; background: #CCC; }
.wizard-step-admin.completed .wizard-circle-admin { background: var(--color-primary); }
.wizard-label-admin { margin-top: .3rem; font-size: .7rem; color: var(--color-primary); font-weight: 600; }
.wizard-line-admin { position: absolute; top: 16px; left: 0; right: 0; height: 3px; background: #CCC; z-index: 0; }
.wizard-line-fill-admin { height: 3px; width: 100%; background: var(--color-primary); }

/* ===== Invoice Document ===== */
.invoice-document { background: #fff; border: 1px solid #ddd; box-shadow: 0 2px 12px rgba(0,0,0,.08); padding: 0; margin-top: 8px; font-family: 'Segoe UI', Arial, sans-serif; color: #464646; overflow: hidden; }
.invoice-header { display: flex; justify-content: space-between; align-items: center; padding: 32px 36px 24px; position: relative; }
.invoice-header-left h1 { font-size: 2rem; font-weight: 700; color: var(--color-primary); letter-spacing: .06em; margin: 0; text-transform: uppercase; }
.invoice-header-right { display: flex; align-items: center; gap: 16px; }
.invoice-logo-circle { width: 80px; height: 80px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; overflow: hidden; background: transparent; position: relative; z-index: 1; }
.invoice-logo-circle img { width: 100%; height: 100%; object-fit: contain; }
.invoice-logo-placeholder { font-size: .7rem; color: #999; text-transform: uppercase; letter-spacing: .08em; }
.invoice-header-right::before { content: ''; position: absolute; top: -40px; right: -40px; width: 200px; height: 200px; border-radius: 50%; background: var(--color-primary); opacity: .12; z-index: 0; }
.invoice-info-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 0 36px 20px; gap: 24px; }
.invoice-to { font-size: .85rem; line-height: 1.5; }
.invoice-to-label { font-size: .78rem; color: #999; margin-bottom: 2px; }
.invoice-to .name { font-weight: 700; font-size: .95rem; color: #464646; text-transform: uppercase; }
.invoice-meta-card { text-align: right; font-size: .85rem; }
.invoice-meta-table { border-collapse: collapse; margin-left: auto; }
.invoice-meta-table td { padding: 2px 0; font-size: .82rem; white-space: nowrap; }
.invoice-meta-table .label { color: #999; text-align: left; padding-right: 16px; }
.invoice-meta-table .value { color: #464646; font-weight: 600; text-align: right; }
.invoice-table-wrap { padding: 0 36px; }
.invoice-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.invoice-table thead tr { background: var(--color-primary); }
.invoice-table th { color: #fff; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; padding: 10px 12px; text-align: left; border: none; }
.invoice-table th:nth-child(2), .invoice-table th:nth-child(3), .invoice-table th:nth-child(4) { text-align: right; }
.invoice-table tbody tr { border-bottom: 1px solid #eee; }
.invoice-table tbody tr:last-child { border-bottom: 2px solid var(--color-primary); }
.invoice-table td { padding: 10px 12px; color: #464646; border: none; }
.invoice-table td:nth-child(2), .invoice-table td:nth-child(3), .invoice-table td:nth-child(4) { text-align: right; }
.invoice-bottom { display: flex; justify-content: space-between; align-items: flex-start; padding: 20px 36px 24px; gap: 24px; }
.invoice-payment-info { font-size: .78rem; color: #464646; line-height: 1.6; }
.invoice-payment-info .title { font-weight: 700; font-size: .82rem; margin-bottom: 4px; color: #464646; }
.invoice-summary-table { border-collapse: collapse; font-size: .82rem; min-width: 220px; }
.invoice-summary-table td { padding: 4px 0; }
.invoice-summary-table .label { color: #464646; padding-right: 24px; }
.invoice-summary-table .value { text-align: right; color: #464646; font-weight: 600; }
.invoice-total-bar { display: flex; justify-content: space-between; align-items: center; background: var(--color-primary); color: #fff; padding: 10px 16px; font-size: .9rem; font-weight: 700; border-radius: 4px; margin-top: 8px; min-width: 220px; }
.invoice-content { padding: 16px 36px; font-size: .82rem; color: #464646; line-height: 1.5; }
.invoice-addr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 0 36px 16px; }
.invoice-addr-row .invoice-block-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: #999; margin-bottom: 2px; }
.invoice-addr-row .name { font-weight: 600; color: #464646; }
.invoice-addr-row .invoice-block { font-size: .82rem; line-height: 1.5; }
@media print { .invoice-document { box-shadow: none; border: none; } }

/* ========== Financial Dashboard ========== */

.fin-dashboard { display: flex; flex-direction: column; gap: 1.25rem; }

/* Quick Access row */
.fin-quick-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.fin-quick-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1.15rem 1.25rem;
    background: #fff;
    border: 1px solid #dee2e6;
    border-left: 4px solid #dee2e6;
    border-radius: 0.5rem;
    text-decoration: none !important;
    color: var(--color-body) !important;
    transition: box-shadow 0.15s, transform 0.15s;
}

.fin-quick-card i {
    font-size: 1.5rem;
    flex-shrink: 0;
    width: 1.75rem;
    text-align: center;
}

.fin-quick-card span {
    font-family: var(--font-headings);
    font-size: 1rem;
    font-weight: 600;
}

.fin-quick-card:hover { box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.08); transform: translateY(-1px); }
.fin-quick-card:active { transform: translateY(0); }

.fin-quick-card--teal   { border-left-color: #00A1BE; }
.fin-quick-card--teal i { color: #00A1BE; }
.fin-quick-card--orange   { border-left-color: #FF4A11; }
.fin-quick-card--orange i { color: #FF4A11; }
.fin-quick-card--green   { border-left-color: #00CC78; }
.fin-quick-card--green i { color: #00CC78; }
.fin-quick-card--blue   { border-left-color: #4682B4; }
.fin-quick-card--blue i { color: #4682B4; }

/* Two-column layout */
.fin-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: start;
}

.fin-col { display: flex; flex-direction: column; gap: 1.25rem; }

/* Section cards */
.fin-section {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    overflow: hidden;
}

.fin-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.15rem;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
}

.fin-section-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.fin-section-icon--teal   { background: rgba(0,161,190,0.1); color: #00A1BE; }
.fin-section-icon--green  { background: rgba(0,204,120,0.1); color: #00CC78; }
.fin-section-icon--orange { background: rgba(255,74,17,0.08); color: #FF4A11; }
.fin-section-icon--purple { background: rgba(147,112,219,0.1); color: #9370DB; }
.fin-section-icon--blue   { background: rgba(70,130,180,0.1); color: #4682B4; }

.fin-section-title {
    font-family: var(--font-headings);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-body);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* List items */
.fin-list { display: flex; flex-direction: column; }

.fin-list-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 1.15rem;
    text-decoration: none !important;
    color: #464646 !important;
    font-size: 0.88rem;
    border-bottom: 1px solid #f3f3f3;
    transition: background 0.12s, padding-left 0.12s;
}

.fin-list-item:last-child { border-bottom: none; }

.fin-list-item i {
    width: 1.25rem;
    text-align: center;
    color: var(--color-primary);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.fin-list-item:hover {
    background: #f4fafb;
    padding-left: 1.4rem;
}

@media (max-width: 991.98px) {
    .fin-columns { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    .fin-quick-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
    .fin-quick-row { grid-template-columns: 1fr; }
}

/* Event Workspace action dropdowns */
.event-ws-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    min-width: 340px;
    white-space: nowrap;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    background: #fff;
    border-radius: .375rem;
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.12);
    padding: 0 .75rem;
}

.event-ws-dropdown-right {
    left: auto;
    right: 0;
}

.event-ws-dropdown.show {
    max-height: 300px;
    padding: .75rem;
    border: 1px solid #DEE2E6;
}

.event-ws-dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.event-ws-dropdown li {
    margin-bottom: .5rem;
}

.event-ws-dropdown li:last-child {
    margin-bottom: 0;
}

.event-ws-dropdown a {
    display: block;
    padding: .35rem .5rem;
    color: #464646;
    text-decoration: none;
    text-align: left;
    font-size: 1rem;
    border-radius: .25rem;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.event-ws-dropdown a:hover {
    background-color: #f0f9fb;
    color: var(--color-primary);
}

/* Switch toggle (ported from WebForms _paywall.css) */
.switch-sm{position:relative; top:.5em; display:inline-block; width:30px; height:17px}
.switch-sm input{opacity:0; width:0; height:0}
.slider-sm{position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#ccc; transition:.4s; border-radius:17px}
.slider-sm:before{position:absolute; content:""; height:13px; width:13px; left:2px; bottom:2px; background-color:white; transition:.4s; border-radius:50%}
.switch-sm input:checked + .slider-sm{background-color:var(--color-primary)}
.switch-sm input:focus + .slider-sm{box-shadow:0 0 1px #FFF}
.switch-sm input:checked + .slider-sm:before{transform:translateX(13px)}
.slider-sm-label{margin-top:0; margin-left:.25em; display:inline-flex; align-items:center; min-height:34px; font-size:1em}

/* GeneralJournalControl — placeholder fund styling */
.gjc-placeholder-fund .lookup-input { font-style: italic; color: #adb5bd !important; }

/* ========== QuickGrid — Bug Tracker ========== */

.bugs-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .75rem;
}

.bugs-grid thead {
    display: none;
}

.bugs-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem .75rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.bugs-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-radius: .375rem 0 0 .375rem;
}

.bugs-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-radius: 0 .375rem .375rem 0;
}

.bugs-grid tbody tr {
    background: transparent;
}

.bugs-grid a {
    color: #000;
    text-decoration: none;
}

.bugs-grid a:hover {
    color: var(--color-tertiary);
}

/* ===== Credentials Grid ===== */
.credentials-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .75rem;
}

.credentials-grid thead {
    display: none;
}

.credentials-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem .75rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.credentials-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-radius: .375rem 0 0 .375rem;
}

.credentials-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-radius: 0 .375rem .375rem 0;
}

.credentials-grid tbody tr {
    background: transparent;
}

.credentials-grid a {
    color: #000;
    text-decoration: none;
}

.credentials-grid a:hover {
    color: var(--color-tertiary);
}

/* ===== Fact Tables Grid ===== */
.fact-tables-grid { width: 100% !important; }
.fact-tables-grid thead { display: none; }
.fact-tables-grid tr { border: none !important; }
.fact-tables-grid td { padding: .35rem .5rem !important; border: none !important; background: transparent !important; width: 100% !important; }

.ft-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1.1rem;
    background: #FFF;
    border: 1px solid #E8EAED;
    border-left: 4px solid #00A1BE;
    border-radius: .5rem;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.ft-row:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}
.ft-row-body { flex: 1; min-width: 0; }
.ft-row-title {
    font-family: var(--font-headings);
    font-size: 1rem;
    font-weight: 600;
    color: #27282A;
    margin-bottom: .25rem;
}
.ft-row-meta {
    font-size: .85rem;
    color: #6C757D;
}
.ft-row-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}
.ft-action {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    transition: background .15s ease, color .15s ease;
    text-decoration: none !important;
}
.ft-action-open { color: #FFF; background: #00CC78; }
.ft-action-open:hover { background: #00995A; color: #FFF; }
.ft-action-delete { color: #FFF; background: #D8237C; }
.ft-action-delete:hover { background: #B01A65; color: #FFF; }
.ft-action-save { color: #FFF; background: #FF4A11; }
.ft-action-save:hover { background: #E0400E; color: #FFF; }
.checklist-ta { resize: none; overflow: hidden; min-height: 38px; }

/* ===== Specification Lists Grid ===== */
.spec-lists-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .75rem;
}

.spec-lists-grid thead {
    display: none;
}

.spec-lists-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 0 !important;
    vertical-align: middle;
    border: none !important;
}

.spec-lists-grid tbody tr {
    background: transparent;
}

.spec-list-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    border: 1px solid #DEE2E6;
    border-radius: .5rem;
    padding: .75rem;
    background: #FFF;
}

.spec-list-row textarea.form-control {
    flex: 1;
    resize: none;
}

.spec-lists-grid .grid-filter-bar {
    margin-bottom: 0 !important;
}

/* ===== Specification List Items ===== */
.sli-header {
    background: #FFF;
    border: 1px solid #DEE2E6;
    border-radius: .375rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.04);
}

.sli-title {
    font-family: var(--font-headings);
    color: #27282A;
    font-size: 1.25rem;
}

.sli-back-btn {
    color: #6c757d;
    text-decoration: none;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background .2s, color .2s;
}

.sli-back-btn:hover {
    background: #F0F0F0;
    color: var(--color-primary);
}

.sli-stat {
    font-size: .8rem;
    color: #6c757d;
    font-family: var(--font-primary);
    white-space: nowrap;
}

.sli-progress-track {
    flex: 1;
    max-width: 200px;
    height: 6px;
    background: #E9ECEF;
    border-radius: 3px;
    overflow: hidden;
}

.sli-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    border-radius: 3px;
    transition: width .4s ease;
}

.sli-card {
    border: 1px solid #DEE2E6;
    border-radius: .375rem;
    overflow: hidden;
    box-shadow: 0 .0625rem .125rem rgba(0,0,0,.04);
}

.sli-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .25rem 1rem;
    border-bottom: 1px solid #F0F0F0;
    transition: background .15s ease;
}

.sli-item:last-child {
    border-bottom: none;
}

.sli-item:hover {
    background: #FAFBFC;
}

.sli-item-done {
    background: #F0FFF4 !important;
}

.sli-item-done:hover {
    background: #E6F9EC !important;
}

.sli-item-new {
    background: #FFFAF5 !important;
    border-left: 3px solid #FF4A11;
}

.sli-item-check {
    flex-shrink: 0;
}

.sli-item-text {
    flex: 1;
    min-width: 0;
}

.sli-textarea {
    border: 1px solid transparent !important;
    background: transparent !important;
    resize: none;
    overflow: hidden;
    font-family: var(--font-primary);
    font-size: .95rem;
    color: #27282A;
    padding: .25rem .5rem;
    border-radius: .25rem;
    transition: border-color .15s, box-shadow .15s, background .15s;
    width: 100%;
    line-height: 1.4;
    box-sizing: border-box;
    display: block;
}

.sli-textarea:focus {
    border-color: var(--color-primary) !important;
    background: #FFF !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,161,190,.12);
}

.sli-done-text {
    text-decoration: line-through;
    color: #999 !important;
}

.sli-item-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-shrink: 0;
}

.sli-check-all {
    width: 1.15rem;
    height: 1.15rem;
}

/* ===== Mission Control Back Link ===== */
.mission-control-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.25rem;
    font-family: 'Muli', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #00CC78 0%, #00A65F 100%);
    border-radius: 2rem;
    text-decoration: none;
    letter-spacing: .025em;
    transition: all .2s ease;
    box-shadow: 0 2px 8px rgba(0, 204, 120, .25);
}
.mission-control-link:hover {
    color: #fff;
    background: linear-gradient(135deg, #1AD98A 0%, #00CC78 100%);
    box-shadow: 0 4px 14px rgba(0, 204, 120, .4);
    transform: translateY(-1px);
    text-decoration: none;
}
.mission-control-link:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 204, 120, .2);
}
.mission-control-link i {
    font-size: 1.1rem;
    color: #fff !important;
}

/* ===== Connections Panel Multi-Select Dropdown ===== */
.conn-multiselect {
    position: relative;
}

.conn-multiselect-btn {
    cursor: pointer;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.conn-multiselect-btn:hover {
    border-color: var(--color-primary);
}

.conn-multiselect-menu {
    position: absolute;
    z-index: 1050;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #DEE2E6;
    border-top: none;
    border-radius: 0 0 .375rem .375rem;
    max-height: 280px;
    overflow-y: auto;
    box-shadow: 0 .25rem .5rem rgba(0,0,0,.1);
}

.conn-multiselect-item {
    padding: .4rem .75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: .9rem;
}

.conn-multiselect-item:hover {
    background: #E0F5F9;
}

.conn-multiselect-checkall {
    border-bottom: 1px solid #DEE2E6;
    background: #F8F9FA;
}

.conn-multiselect-checkall:hover {
    background: #E0F5F9;
}

.conn-multiselect-item .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.conn-section-header {
    cursor: pointer;
    user-select: none;
}

.conn-section-header:hover {
    background: #EDF0F2 !important;
}

.conn-section-chevron {
    font-size: .7rem;
    color: #6C757D;
}

.conn-section-header.card-header {
    border-radius: .375rem;
}

.conn-grid {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}

.conn-save-status {
    animation: conn-save-pop 0.25s ease-out;
}

@keyframes conn-save-pop {
    from { opacity: 0; transform: translateY(-2px); }
    to { opacity: 1; transform: translateY(0); }
}

.conn-grid-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* When a column holds a single panel, stretch the card to match the row's tallest column */
.conn-grid-col > .card:only-child {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.conn-grid-col > .card:only-child > .card-body {
    flex: 1;
}

@media (max-width: 991.98px) {
    .conn-grid {
        flex-direction: column;
    }
}

/* ========== Payroll Grid ========== */

.payroll-grid {
    width: 100%;
    border: 1px solid #CCC;
    border-collapse: collapse;
}

.payroll-grid thead {
    display: none;
}

.payroll-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem .75rem !important;
    vertical-align: top;
    border-bottom: 1px solid #DEE2E6;
}

.payroll-grid tbody tr {
    background: #FFF;
}

.payroll-grid a {
    color: #000;
    text-decoration: none;
}

.payroll-grid a:hover {
    color: var(--color-tertiary);
}

.payroll-grid .col-select {
    padding-right: 1rem !important;
}

.payroll-grid .payroll-row-section {
    padding: .25rem .5rem;
    margin-bottom: .25rem;
}

/* ========== My Payroll Distributions Grid (self-service) ========== */

.my-payroll-grid { width: 100%; border-collapse: separate; border-spacing: 0 .5rem; }
.my-payroll-grid thead { display: none; }
.my-payroll-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}
.my-payroll-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}
.my-payroll-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}
.my-payroll-grid a { color: #000; text-decoration: none; }
.my-payroll-grid a:hover { color: var(--color-tertiary); }
.my-payroll-grid .col-select { padding-right: 1rem !important; }
/* In this grid only, render label + value on the same line with a small gap. */
.my-payroll-grid .grid-title,
.my-payroll-grid .grid-label { display: inline; }
.my-payroll-grid .grid-title { margin-right: .35rem; }

/* ========== Staff Positions Grid ========== */
.staff-positions-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.staff-positions-grid thead {
    display: none;
}

.staff-positions-grid tbody tr {
    background: #FFF;
}

.staff-positions-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem .75rem !important;
    vertical-align: top;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.staff-positions-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.staff-positions-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.staff-positions-grid a {
    color: #000;
    text-decoration: none;
}

.staff-positions-grid a:hover {
    color: var(--color-tertiary);
}

.staff-positions-grid .col-action {
    width: 60px;
}

/* ========== Staff Write-Ups Grid ========== */
.staff-writeups-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.staff-writeups-grid thead {
    display: none;
}

.staff-writeups-grid tbody tr {
    background: #FFF;
}

.staff-writeups-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.staff-writeups-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.staff-writeups-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.staff-writeups-grid a {
    color: #000;
    text-decoration: none;
}

.staff-writeups-grid a:hover {
    color: var(--color-tertiary);
}

.staff-writeups-grid .col-action {
    width: 60px;
}

/* ===== Mail Room Email - Action Hero Cards ===== */

.email-actions-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.email-action-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: #FFF;
    border: 1px solid #DEE2E6;
    border-radius: .5rem;
    cursor: pointer;
    transition: all .25s ease;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
}

.email-action-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    transition: background .25s ease;
}

.email-action-card:hover {
    border-color: #CCC;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
    color: inherit;
    text-decoration: none;
}

.email-action-card:nth-child(1):hover::before {
    background: linear-gradient(90deg, #00A1BE, #00CC78);
}

.email-action-card:nth-child(2):hover::before {
    background: linear-gradient(90deg, #FF4A11, #FF8A50);
}

.email-action-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-size: 1.5rem;
    transition: transform .25s ease;
}

.email-action-card:hover .email-action-icon {
    transform: scale(1.08);
}

.email-action-body {
    flex: 1;
    min-width: 0;
}

.email-action-body h3 {
    margin: 0 0 .25rem;
    font-family: var(--font-headings);
    font-size: 1.05rem;
    font-weight: 700;
    color: #27282A;
}

.email-action-body p {
    margin: 0;
    font-size: .85rem;
    color: #6c757d;
    line-height: 1.4;
}

.email-action-arrow {
    flex-shrink: 0;
    font-size: 1.1rem;
    color: #CCC;
    transition: all .25s ease;
}

.email-action-card:hover .email-action-arrow {
    color: #00A1BE;
    transform: translateX(4px);
}

.email-action-card:nth-child(2):hover .email-action-arrow {
    color: #FF4A11;
}

@media (max-width: 767.98px) {
    .email-actions-hero {
        grid-template-columns: 1fr;
    }
}

/* Mission Control */
.mc-card {
    border: 1px solid #DEE2E6;
    transition: box-shadow 0.2s ease;
}
.mc-card:hover {
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.1);
}
.mc-card .card-header {
    font-weight: 600;
    font-size: .95rem;
    color: #464646;
}
.mc-card .card-header i {
    font-size: 1.1rem;
}
.mc-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mc-link-list li {
    padding: .4rem 0;
    border-bottom: 1px solid #F0F0F0;
}
.mc-link-list li:last-child {
    border-bottom: none;
}
.mc-link-list li a {
    color: #464646;
    text-decoration: none;
    font-size: .88rem;
    font-family: var(--font-body);
    transition: color 0.15s;
    display: block;
    padding: .15rem .25rem;
    border-radius: .25rem;
}
.mc-link-list li a:hover {
    color: #00A1BE;
    background: #F8FDFE;
}
.mc-link-list li a i {
    color: #6c757d;
    width: 1.2rem;
    text-align: center;
    transition: color 0.15s;
}
.mc-link-list li a:hover i {
    color: #00A1BE;
}
.mc-collapse-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s;
}
.mc-collapse-header:hover {
    background-color: #F0F0F0;
}
.mc-chevron {
    color: #6c757d;
    font-size: .85rem;
    transition: transform 0.2s;
}

/* Mission Control — Reports card (MRR snapshot) */
.mc-report-title {
    font-family: var(--font-headings);
    font-size: 1.05rem;
    font-weight: 700;
    color: #464646;
    margin-bottom: .75rem;
}
.mc-report-subhead {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6c757d;
    margin: 1rem 0 .5rem;
}
.mc-kpi-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}
.mc-kpi {
    flex: 1 1 150px;
    border: 1px solid #DEE2E6;
    border-radius: .5rem;
    padding: .85rem 1rem;
    background: #FFF;
}
.mc-kpi-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: #6c757d;
}
.mc-kpi-value {
    font-family: var(--font-headings);
    font-size: 1.6rem;
    font-weight: 700;
    color: #464646;
    margin-top: .15rem;
    line-height: 1.1;
}
.mc-kpi-sub {
    font-size: .75rem;
    color: #6c757d;
    margin-top: .15rem;
}
.mc-kpi.accent-teal { border-top: 3px solid var(--color-primary); }
.mc-kpi.accent-green { border-top: 3px solid var(--color-secondary); }
.mc-kpi.accent-orange { border-top: 3px solid var(--color-tertiary); }
.mc-kpi.accent-pink { border-top: 3px solid #D8237C; }
.mc-report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}
.mc-report-table th {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
    text-align: left;
    padding: .35rem .5rem;
    border-bottom: 1px solid #DEE2E6;
}
.mc-report-table td {
    padding: .4rem .5rem;
    color: #464646;
    border-bottom: 1px solid #F0F0F0;
}
.mc-report-table tfoot td {
    font-weight: 700;
    border-top: 1px solid #DEE2E6;
    border-bottom: none;
}
.mc-move-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    font-size: .9rem;
}
.mc-move-new { color: #00A65F; font-weight: 600; }
.mc-move-churn { color: #D8237C; font-weight: 600; }
.mc-nonrev {
    font-size: .82rem;
    color: #6c757d;
    line-height: 1.5;
}

/* Mission Control info-box on Christine dashboard */
.christine-info-row > a,
.christine-info-row > .legacy-link {
    min-width: 180px;
}
.mc-info-icon {
    background: linear-gradient(135deg, #00A1BE, #0082a0) !important;
}
.mc-info-box {
    border-left-color: #00A1BE;
}

/* ========== Dimension Tables Grid — row styling ========== */
.dimension-tables-grid { width: 100% !important; }
.dimension-tables-grid thead { display: none; }
.dimension-tables-grid tr { border: none !important; }
.dimension-tables-grid td { padding: .35rem .5rem !important; border: none !important; background: transparent !important; width: 100% !important; }

.dt-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1.1rem;
    background: #FFF;
    border: 1px solid #E8EAED;
    border-left: 4px solid #00A1BE;
    border-radius: .5rem;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.dt-row:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}
.dt-row-body { flex: 1; min-width: 0; }
.dt-row-title {
    font-family: var(--font-headings);
    font-size: 1rem;
    font-weight: 600;
    color: #27282A;
    margin-bottom: .25rem;
}
.dt-row-meta {
    font-size: .85rem;
    color: #6C757D;
}
.dt-row-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-shrink: 0;
}
.dt-action {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    transition: background .15s ease, color .15s ease;
    text-decoration: none !important;
}
.dt-action-open { color: #FFF; background: #00CC78; }
.dt-action-open:hover { background: #00995A; color: #FFF; }
.dt-action-cleanup { color: #FFF; background: #FF4A11; }
.dt-action-cleanup:hover { background: #E0400E; color: #FFF; }
.dt-action-delete { color: #FFF; background: #D8237C; }
.dt-action-delete:hover { background: #B01A65; color: #FFF; }

/* ========== Admin Grid — Rounded Row Borders (all migrated admin pages) ========== */
.password-resets-grid,
.sms-permissions-grid,
.persistent-filters-grid,
.blog-grid,
.kb-grid,
.whatsnew-grid,
.reports-grid,
.social-posts-grid,
.subscriptions-admin-grid,
.sub-payments-admin-grid,
.ava-training-grid,
.ava-log-grid,
.sign-in-log-grid,
.modifications-log-grid,
.activity-log-grid,
.interface-log-grid,
.stripe-txn-grid,
.stripe-payout-grid,
.recurring-donations-grid,
.recurring-payments-grid,
.ticket-sales-grid,
.events-current-grid,
.email-log-grid,
.email-batches-grid,
.spam-email-grid,
.customer-sub-grid,
.customer-sub-payments-grid,
.chat-mgmt-grid,
.past-due-grid,
.sub-record-counts-grid,
.trial-sub-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .75rem;
}

.password-resets-grid thead,
.sms-permissions-grid thead,
.persistent-filters-grid thead,
.blog-grid thead,
.kb-grid thead,
.whatsnew-grid thead,
.reports-grid thead,
.social-posts-grid thead,
.subscriptions-admin-grid thead,
.sub-payments-admin-grid thead,
.ava-training-grid thead,
.ava-log-grid thead,
.sign-in-log-grid thead,
.modifications-log-grid thead,
.activity-log-grid thead,
.interface-log-grid thead,
.stripe-txn-grid thead,
.stripe-payout-grid thead,
.recurring-donations-grid thead,
.recurring-payments-grid thead,
.ticket-sales-grid thead,
.events-current-grid thead,
.email-log-grid thead,
.email-batches-grid thead,
.spam-email-grid thead,
.customer-sub-grid thead,
.customer-sub-payments-grid thead,
.chat-mgmt-grid thead,
.past-due-grid thead,
.sub-record-counts-grid thead,
.trial-sub-grid thead {
    display: none;
}

.password-resets-grid td,
.sms-permissions-grid td,
.persistent-filters-grid td,
.blog-grid td,
.kb-grid td,
.whatsnew-grid td,
.reports-grid td,
.social-posts-grid td,
.subscriptions-admin-grid td,
.sub-payments-admin-grid td,
.ava-training-grid td,
.ava-log-grid td,
.sign-in-log-grid td,
.modifications-log-grid td,
.activity-log-grid td,
.interface-log-grid td,
.stripe-txn-grid td,
.stripe-payout-grid td,
.recurring-donations-grid td,
.recurring-payments-grid td,
.ticket-sales-grid td,
.events-current-grid td,
.email-log-grid td,
.email-batches-grid td,
.spam-email-grid td,
.customer-sub-grid td,
.customer-sub-payments-grid td,
.chat-mgmt-grid td,
.past-due-grid td,
.sub-record-counts-grid td,
.trial-sub-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem .75rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.sub-payments-admin-grid td {
    padding: .35rem .75rem !important;
    vertical-align: middle;
}

.spam-email-grid { border-spacing: 0 .4rem; }
.spam-email-grid td { padding: .4rem .75rem !important; vertical-align: middle; }

.password-resets-grid td:first-child,
.sms-permissions-grid td:first-child,
.persistent-filters-grid td:first-child,
.blog-grid td:first-child,
.kb-grid td:first-child,
.whatsnew-grid td:first-child,
.reports-grid td:first-child,
.social-posts-grid td:first-child,
.subscriptions-admin-grid td:first-child,
.sub-payments-admin-grid td:first-child,
.ava-training-grid td:first-child,
.ava-log-grid td:first-child,
.sign-in-log-grid td:first-child,
.modifications-log-grid td:first-child,
.activity-log-grid td:first-child,
.interface-log-grid td:first-child,
.stripe-txn-grid td:first-child,
.stripe-payout-grid td:first-child,
.recurring-donations-grid td:first-child,
.recurring-payments-grid td:first-child,
.ticket-sales-grid td:first-child,
.events-current-grid td:first-child,
.email-log-grid td:first-child,
.email-batches-grid td:first-child,
.spam-email-grid td:first-child,
.customer-sub-grid td:first-child,
.customer-sub-payments-grid td:first-child,
.chat-mgmt-grid td:first-child,
.past-due-grid td:first-child,
.sub-record-counts-grid td:first-child,
.trial-sub-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-radius: .375rem 0 0 .375rem;
}

.password-resets-grid td:last-child,
.sms-permissions-grid td:last-child,
.persistent-filters-grid td:last-child,
.blog-grid td:last-child,
.kb-grid td:last-child,
.whatsnew-grid td:last-child,
.reports-grid td:last-child,
.social-posts-grid td:last-child,
.subscriptions-admin-grid td:last-child,
.sub-payments-admin-grid td:last-child,
.ava-training-grid td:last-child,
.ava-log-grid td:last-child,
.sign-in-log-grid td:last-child,
.modifications-log-grid td:last-child,
.activity-log-grid td:last-child,
.interface-log-grid td:last-child,
.stripe-txn-grid td:last-child,
.stripe-payout-grid td:last-child,
.recurring-donations-grid td:last-child,
.recurring-payments-grid td:last-child,
.ticket-sales-grid td:last-child,
.events-current-grid td:last-child,
.email-log-grid td:last-child,
.email-batches-grid td:last-child,
.spam-email-grid td:last-child,
.customer-sub-grid td:last-child,
.customer-sub-payments-grid td:last-child,
.chat-mgmt-grid td:last-child,
.past-due-grid td:last-child,
.sub-record-counts-grid td:last-child,
.trial-sub-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-radius: 0 .375rem .375rem 0;
}

.password-resets-grid tbody tr,
.sms-permissions-grid tbody tr,
.persistent-filters-grid tbody tr,
.blog-grid tbody tr,
.kb-grid tbody tr,
.whatsnew-grid tbody tr,
.reports-grid tbody tr,
.social-posts-grid tbody tr,
.subscriptions-admin-grid tbody tr,
.sub-payments-admin-grid tbody tr,
.ava-training-grid tbody tr,
.ava-log-grid tbody tr,
.sign-in-log-grid tbody tr,
.modifications-log-grid tbody tr,
.activity-log-grid tbody tr,
.interface-log-grid tbody tr,
.stripe-txn-grid tbody tr,
.stripe-payout-grid tbody tr,
.recurring-donations-grid tbody tr,
.recurring-payments-grid tbody tr,
.ticket-sales-grid tbody tr,
.events-current-grid tbody tr,
.email-log-grid tbody tr,
.email-batches-grid tbody tr,
.spam-email-grid tbody tr,
.customer-sub-grid tbody tr,
.customer-sub-payments-grid tbody tr,
.chat-mgmt-grid tbody tr,
.past-due-grid tbody tr,
.sub-record-counts-grid tbody tr,
.trial-sub-grid tbody tr {
    background: transparent;
}

.password-resets-grid a,
.sms-permissions-grid a,
.persistent-filters-grid a,
.blog-grid a,
.kb-grid a,
.whatsnew-grid a,
.reports-grid a,
.social-posts-grid a,
.subscriptions-admin-grid a,
.sub-payments-admin-grid a,
.ava-training-grid a,
.ava-log-grid a,
.sign-in-log-grid a,
.modifications-log-grid a,
.activity-log-grid a,
.interface-log-grid a,
.stripe-txn-grid a,
.stripe-payout-grid a,
.recurring-donations-grid a,
.recurring-payments-grid a,
.ticket-sales-grid a,
.events-current-grid a,
.email-log-grid a,
.email-batches-grid a,
.spam-email-grid a,
.customer-sub-grid a,
.customer-sub-payments-grid a,
.chat-mgmt-grid a,
.past-due-grid a,
.sub-record-counts-grid a,
.trial-sub-grid a {
    color: #000;
    text-decoration: none;
}

.password-resets-grid a:hover,
.sms-permissions-grid a:hover,
.persistent-filters-grid a:hover,
.blog-grid a:hover,
.kb-grid a:hover,
.whatsnew-grid a:hover,
.reports-grid a:hover,
.social-posts-grid a:hover,
.subscriptions-admin-grid a:hover,
.sub-payments-admin-grid a:hover,
.ava-training-grid a:hover,
.ava-log-grid a:hover,
.sign-in-log-grid a:hover,
.modifications-log-grid a:hover,
.activity-log-grid a:hover,
.interface-log-grid a:hover,
.stripe-txn-grid a:hover,
.stripe-payout-grid a:hover,
.recurring-donations-grid a:hover,
.recurring-payments-grid a:hover,
.ticket-sales-grid a:hover,
.events-current-grid a:hover,
.email-log-grid a:hover,
.email-batches-grid a:hover,
.spam-email-grid a:hover,
.customer-sub-grid a:hover,
.customer-sub-payments-grid a:hover,
.chat-mgmt-grid a:hover,
.past-due-grid a:hover,
.sub-record-counts-grid a:hover,
.trial-sub-grid a:hover {
    color: var(--color-tertiary);
}

/* Subscriptions admin grid — hide checkbox but keep action icons */
.subscriptions-admin-grid .col-select > div.mb-3 {
    display: none;
}



/* Stripe Transactions column widths */
.stripe-col-icon { width: 60px; }
.stripe-col-actions { width: 50px; }

/* Stripe Transaction Log (customer-facing, /stripe-transaction-log) — full-width
   rounded-card rows. Migrated from paywall/frmTransactionsStripe.aspx. */
.stripe-transaction-log-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.stripe-transaction-log-grid thead {
    display: none;
}

.stripe-transaction-log-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.stripe-transaction-log-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.stripe-transaction-log-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.stripe-transaction-log-grid a {
    color: #000;
    text-decoration: none;
}

.stripe-transaction-log-grid a:hover {
    color: var(--color-tertiary);
}

/* Chart of Accounts grid (/accounts) — migrated from paywall/frmAccounts.aspx */
.accounts-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.accounts-grid thead {
    display: none;
}

.accounts-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.accounts-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.accounts-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.accounts-grid a {
    color: #000;
    text-decoration: none;
}

.accounts-grid a:hover {
    color: var(--color-tertiary);
}

.accounts-grid .accounts-row-section {
    margin-bottom: .5rem;
}

/* Project Meeting Minutes grid */
.project-meeting-minutes-grid { width: 100%; }
.project-meeting-minutes-grid a { color: inherit; text-decoration: none; }
.project-meeting-minutes-grid a:hover { color: var(--color-tertiary); }

/* ── Event Financials ── */

.ef-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

@media (max-width: 991.98px) {
    .ef-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
    .ef-cards { grid-template-columns: 1fr; }
}

.ef-card {
    position: relative;
    background: #fff;
    border-radius: 0.5rem;
    border: 1px solid #E8EAED;
    border-left: 4px solid #E8EAED;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;
}

.ef-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

.ef-card--active {
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    border-left-width: 5px;
    background: #FAFBFC;
    pointer-events: none;
}

.ef-card--orange { border-left-color: #FF4A11; }
.ef-card--pink   { border-left-color: #D8237C; }
.ef-card--teal   { border-left-color: #00A1BE; }
.ef-card--green  { border-left-color: #00CC78; }

.ef-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.ef-card-icon--orange { background-color: #FF4A11; }
.ef-card-icon--pink   { background-color: #D8237C; }
.ef-card-icon--teal   { background-color: #00A1BE; }
.ef-card-icon--green  { background-color: #00CC78; }

.ef-card-title {
    font-weight: 700;
    color: #464646;
    font-size: 0.95rem;
    font-family: var(--font-primary);
}

.ef-card-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: #27282A;
    margin-bottom: 0.25rem;
}

.ef-card-count {
    font-size: 0.8rem;
    color: #6c757d;
    margin-bottom: 0.75rem;
}

.ef-card-open {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    font-size: 0.85rem;
    color: #999;
    transition: color .15s ease, transform .15s ease;
}
.ef-card:hover .ef-card-open { color: #666; transform: translateX(2px); }
.ef-card--active .ef-card-open { display: none; }

.ef-card-link {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none !important;
}

.ef-card--orange .ef-card-link { color: #FF4A11; }
.ef-card--pink   .ef-card-link { color: #D8237C; }
.ef-card--teal   .ef-card-link { color: #00A1BE; }
.ef-card--green  .ef-card-link { color: #00CC78; }

.ef-card--orange .ef-card-link:hover { color: #E0400E; }
.ef-card--pink   .ef-card-link:hover { color: #B81D68; }
.ef-card--teal   .ef-card-link:hover { color: #038CA5; }
.ef-card--green  .ef-card-link:hover { color: #00b56b; }

.ef-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #F0F0F0;
    font-size: 0.95rem;
    color: #464646;
}

.ef-summary-row:last-child {
    border-bottom: none;
}

.ef-summary-total {
    background: #F8F9FA;
    border-radius: 0.375rem;
    padding: 1rem 1.25rem;
}

.ef-net-positive { color: #00CC78; }
.ef-net-negative { color: #D8237C; }

a.ef-id-link, a.ef-id-link:hover, a.ef-id-link:focus { color: #FF4A11 !important; text-decoration-color: #FF4A11 !important; }

/* ── Event Financials Summary Bar ── */
.ef-summary-bar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1rem;
    padding: 0.875rem 1.25rem;
    background: linear-gradient(135deg, #FAFBFC 0%, #F4F6F8 100%);
    border: 1px solid #E8EAED;
    border-radius: 0.5rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}
.ef-summary-bar:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-color: #00A1BE;
    text-decoration: none;
    color: inherit;
}
.ef-summary-bar-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.ef-summary-bar-icon {
    font-size: 1.25rem;
}
.ef-summary-bar-icon--green { color: #00CC78; }
.ef-summary-bar-icon--orange { color: #FF4A11; }
.ef-summary-bar-icon--pink { color: #D8237C; }
.ef-summary-bar-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1;
    margin-bottom: 0.15rem;
}
.ef-summary-bar-value {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
}
.ef-summary-bar-divider {
    width: 1px;
    height: 2rem;
    background: #DEE2E6;
    flex-shrink: 0;
}
.ef-summary-bar-action {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #00A1BE;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
}
.ef-summary-bar:hover .ef-summary-bar-action { color: #038CA5; }

@media (max-width: 767.98px) {
    .ef-summary-bar { flex-wrap: wrap; gap: 0.75rem; }
    .ef-summary-bar-divider { display: none; }
    .ef-summary-bar-action { flex-basis: 100%; justify-content: center; padding-top: 0.5rem; border-top: 1px solid #E8EAED; }
}

/* ── Event Financials Grid Action Circles ── */
.ef-action-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: opacity .15s ease, transform .15s ease;
}
.ef-action-circle:hover { opacity: .85; transform: scale(1.08); }
.ef-action-circle--save { background: #FF4A11; }
.ef-action-circle--delete { background: #D8237C; }

/* ==================== Report Center & Report Layout ==================== */
/* Category card grid */
.report-center-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.report-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #DEE2E6;
    border-radius: .5rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.report-card:hover {
    border-color: #00A1BE;
    box-shadow: 0 .25rem .75rem rgba(0, 161, 190, .12);
    text-decoration: none;
    color: inherit;
}

.report-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: .5rem;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.report-card-title { font-weight: 600; color: #27282A; font-size: 1rem; }
.report-card-count { font-size: .85rem; color: #6c757d; margin-top: .15rem; }

/* Report list items */
.report-list { display: flex; flex-direction: column; gap: .5rem; }

.report-list-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .875rem 1rem;
    background: #fff;
    border: 1px solid #DEE2E6;
    border-radius: .375rem;
    transition: border-color .15s ease;
}
.report-list-item:hover { border-color: #00A1BE; }

.report-fav-btn {
    background: none;
    border: none;
    padding: .125rem;
    cursor: pointer;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: .1rem;
}

.report-list-link { text-decoration: none; color: inherit; flex: 1; cursor: pointer; }
.report-list-link:hover { text-decoration: none; color: inherit; }
.report-list-name { font-weight: 600; color: #27282A; font-size: .95rem; }
.report-list-desc { font-size: .85rem; color: #6c757d; margin-top: .2rem; }

/* Report layout — filter card */
.report-filter-card .card-header { font-weight: 600; color: #464646; }
.report-description { font-size: .9rem; color: #6c757d; padding: 0 .25rem; }

@media (max-width: 575.98px) {
    .report-center-grid { grid-template-columns: 1fr; }
    .report-center-search { width: 160px; }
}

/* ========== Gnome Booking Grid ========== */
.gnome-booking-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;
}

.gnome-booking-grid thead {
    display: none;
}

.gnome-booking-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem .75rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.gnome-booking-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-radius: .5rem 0 0 .5rem;
}

.gnome-booking-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-radius: 0 .5rem .5rem 0;
}

.gnome-booking-grid tbody tr:hover td {
    background: #F9FAFB;
}

.gnome-booking-grid a {
    color: #000;
    text-decoration: none;
}

.gnome-booking-grid a:hover {
    color: var(--color-tertiary);
}

.gnome-booking-grid .col-action {
    width: 60px;
}

/* /gnome-booking action row: one row, "Export to CSV" pinned far LEFT and the
   "Public Sign-Up Forms" menu pinned far RIGHT. FilteredGrid renders Export AFTER the
   ActionButtons content in DOM order, so flex-order puts Export first (left) and an auto
   left-margin on the dropdown pushes it to the opposite (right) edge. */
.gnome-booking-signup ~ .grid-export-btn {
    order: -1;
}

.gnome-booking-signup {
    margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   AVA SUPPORT CHAT
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Keep the AVA chat and its input box fully within the viewport, below the fixed paywall header,
   so the text box never drops below the fold. paywall-main starts at 7em (the .25em+6em+.75em
   header), so the page height subtracts that plus a little breathing room. The 500px scroll
   padding on paywall-main is also removed for this page so nothing pushes the input down.
   (Christine 2026-06-27; matches the Chatter height approach.) */
.paywall-main:has(.ava-chat-page) { padding-bottom: 0 !important; overflow: hidden !important; }

.ava-chat-page {
    height: calc(100vh - 8.5em);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #F8F9FA;
}

.ava-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
    height: 100%;
}

/* ── Sidebar ── */
.ava-sidebar {
    width: 280px;
    min-width: 280px;
    background: #FFFFFF;
    border-right: 1px solid #E5E7EB;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ava-sidebar-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #F0F0F0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.ava-sidebar-new {
    padding: .75rem 1rem;
    flex-shrink: 0;
}

.ava-sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: .5rem .75rem;
}

.ava-sidebar-top {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem .7rem .25rem;
    flex-shrink: 0;
}

.ava-newchat-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 1;
    padding: .6rem .8rem;
    border: 1px solid #E3E3E5;
    background: #FFF;
    border-radius: .6rem;
    color: #1F2937;
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.ava-newchat-btn:hover {
    border-color: #D4D4D6;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.ava-newchat-btn i {
    color: var(--color-primary);
    font-size: .85rem;
}

.ava-sidebar-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #9CA3AF;
    padding: .9rem .9rem .35rem;
    flex-shrink: 0;
}

.ava-chat-item {
    display: flex;
    align-items: center;
    padding: .5rem .7rem;
    border-radius: .5rem;
    cursor: pointer;
    transition: background-color .12s ease;
    margin-bottom: .1rem;
}

.ava-chat-item:hover {
    background: #EDEDEF;
}

.ava-chat-item.active {
    background: #E7E7EA;
    font-weight: 600;
}

.ava-chat-title {
    font-size: .9rem;
    color: #3F4451;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.ava-chat-actions {
    display: flex;
    align-items: center;
    margin-left: auto;
    padding-left: .35rem;
    opacity: 0;
    transition: opacity .15s ease;
}

.ava-chat-item:hover .ava-chat-actions {
    opacity: 1;
}

.ava-chat-item.active .ava-chat-actions {
    opacity: 1;
}

/* ── Main Chat Area ── */
.ava-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.ava-info-banner {
    padding: .75rem 1.5rem;
    background: #FFFFFF;
    border-bottom: 1px solid #E5E7EB;
    flex-shrink: 0;
}

/* ── Messages ── */
.ava-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ava-msg-user {
    align-self: flex-end;
    max-width: 74%;
    background: #F1F1F3;
    color: #1F2937;
    border-radius: 1.1rem;
    padding: .7rem 1.05rem;
    font-size: .95rem;
    line-height: 1.55;
}

.ava-msg-user .ava-msg-content {
    color: #1F2937;
}

.ava-msg-user .ava-msg-content a {
    color: var(--color-primary);
    text-decoration: underline;
}

.ava-msg-ai-wrap {
    align-self: flex-start;
    max-width: 82%;
}

.ava-msg-ai {
    background: transparent;
    padding: 0;
}

.ava-msg-ai-header {
    font-weight: 700;
    font-size: .8rem;
    color: #6B7280;
    margin-bottom: .4rem;
    display: flex;
    align-items: center;
}

.ava-msg-content {
    font-size: .95rem;
    line-height: 1.7;
    color: #1F2937;
}

/* Per-message date/time stamps (Christine 2026-07-12) */
.ava-msg-time {
    font-weight: 400;
    font-size: .72rem;
    color: #9CA3AF;
    white-space: nowrap;
}
.ava-msg-ai-header .ava-msg-time {
    margin-left: .5rem;
}
.ava-msg-time-user {
    display: block;
    text-align: right;
    margin-top: .35rem;
    color: #6B7280;
}

.ava-msg-content p {
    margin-bottom: .5rem;
}

.ava-msg-content p:last-child {
    margin-bottom: 0;
}

.ava-msg-content ul,
.ava-msg-content ol {
    padding-left: 1.25rem;
    margin: .5rem 0;
}

.ava-msg-content li {
    margin-bottom: .35rem;
}

.ava-msg-content strong {
    font-weight: 600;
}

.ava-msg-content a {
    color: var(--color-primary);
    text-decoration: none;
}

.ava-msg-content a:hover {
    text-decoration: underline;
}

.ava-thinking {
    display: flex;
    align-items: center;
    padding: .25rem 0;
}

/* ── Input Area ── */
.ava-input-area {
    padding: 1rem 1.5rem 1.1rem;
    background: #FFFFFF;
    border-top: 1px solid #ECECEE;
    flex-shrink: 0;
}

.ava-input-wrap {
    display: flex;
    align-items: flex-end;
    max-width: 760px;
    margin: 0 auto;
    border: 1px solid #DCDCDF;
    border-radius: 1.4rem;
    background: #FFF;
    padding: .3rem .35rem .3rem .25rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    transition: border-color .2s, box-shadow .2s;
}

.ava-input-wrap:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0,161,190,.12);
}

.ava-input {
    flex: 1;
    min-height: 24px;
    max-height: 200px;
    border: none;
    padding: .55rem .6rem .55rem 1rem;
    font-size: .95rem;
    color: #1F2937;
    line-height: 1.5;
    resize: none;
    background: transparent;
    outline: none;
    overflow-y: auto;
    font-family: var(--font-primary);
}

.ava-input:focus {
    outline: none;
}

.ava-input::placeholder {
    color: #9CA3AF;
}

.ava-input:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.ava-input-hint {
    max-width: 760px;
    margin: .5rem auto 0;
    text-align: center;
    font-size: .75rem;
    color: #A1A1A8;
}

.ava-send-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    border: none;
    background: var(--color-primary);
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .9rem;
    align-self: flex-end;
    transition: background-color .15s, transform .1s;
}

.ava-send-btn:hover:not(:disabled) {
    background: #007A8F;
    transform: scale(1.05);
}

.ava-send-btn:disabled {
    background: #D1D5DB;
    cursor: not-allowed;
}

/* ── Mobile Hamburger ── */
.ava-hamburger {
    position: fixed;
    top: 75px;
    left: 12px;
    z-index: 1010;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.92);
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #374151;
    cursor: pointer;
}

.ava-close-btn {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: #6B7280;
    cursor: pointer;
    padding: .25rem;
}

.ava-close-btn:hover {
    color: #374151;
}

/* ── Mobile Overlay ── */
.ava-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 1040;
}

/* ── Mobile Responsive ── */
@media (max-width: 767.98px) {
    .ava-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 85%;
        max-width: 320px;
        transform: translateX(-100%);
        transition: transform .25s ease;
        z-index: 1050;
        box-shadow: 4px 0 16px rgba(0,0,0,.1);
    }

    .ava-sidebar.open {
        transform: translateX(0);
    }

    .ava-messages {
        padding: 1rem;
        max-height: calc(100vh - 200px);
    }

    .ava-msg-user {
        max-width: 85%;
    }

    .ava-msg-ai-wrap {
        max-width: 92%;
    }

    .ava-input-area {
        padding: .75rem 1rem 1rem;
    }

    .ava-input {
        font-size: .9rem;
        padding: .5rem .6rem .5rem .9rem;
    }

    .ava-send-btn {
        width: 34px;
        height: 34px;
        min-width: 34px;
        font-size: .8rem;
    }

    .ava-info-banner {
        padding: .625rem 1rem;
    }
}

/* ========================================================================
   Workspace "Public Forms" dropdown (RecordWorkspace shell)
   Slide-down/up animation, click-outside to close, modern UI.
   ======================================================================== */
.ws-public-forms {
    position: relative;
    display: inline-block;
}

.ws-public-forms-trigger {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    background: #fff;
    border: 1px solid #DEE2E6;
    border-radius: 999px;
    color: #464646;
    font-family: muli, sans-serif;
    font-size: .95rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.ws-public-forms-trigger:hover {
    border-color: var(--color-primary);
    background-color: #f4fbfd;
    box-shadow: 0 2px 6px rgba(0, 161, 190, .12);
}

.ws-public-forms-trigger.open {
    border-color: var(--color-primary);
    background-color: #f4fbfd;
    box-shadow: 0 2px 6px rgba(0, 161, 190, .18);
}

.ws-public-forms-trigger .ws-public-forms-chevron {
    color: var(--color-primary);
    font-size: 1.05rem;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.ws-public-forms-trigger.open .ws-public-forms-chevron {
    transform: rotate(180deg);
}

.ws-public-forms-menu {
    position: absolute;
    top: calc(100% + .35rem);
    right: 0;
    min-width: 340px;
    max-height: 0;
    overflow: hidden;
    background: #fff;
    border-radius: .5rem;
    border: 1px solid transparent;
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, 0);
    opacity: 0;
    transform: translateY(-6px);
    transition:
        max-height .3s cubic-bezier(.4, 0, .2, 1),
        opacity .2s ease,
        transform .25s cubic-bezier(.4, 0, .2, 1),
        box-shadow .25s ease,
        border-color .2s ease;
    z-index: 100;
    pointer-events: none;
}

.ws-public-forms-menu.open {
    max-height: 400px;
    opacity: 1;
    transform: translateY(0);
    border-color: #DEE2E6;
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .12);
    pointer-events: auto;
}

.ws-public-forms-menu ul {
    list-style: none;
    margin: 0;
    padding: .5rem 0;
}

.ws-public-forms-menu li {
    margin: 0;
}

.ws-public-forms-menu a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem 1rem;
    color: #464646;
    text-decoration: none;
    font-family: muli, sans-serif;
    font-size: .9rem;
    border-left: 3px solid transparent;
    transition: background-color .15s ease, color .15s ease, border-left-color .15s ease;
}

.ws-public-forms-menu a:hover {
    background-color: #f4fbfd;
    color: var(--color-primary);
    border-left-color: var(--color-primary);
}

.ws-public-forms-menu a i {
    color: var(--color-primary);
    width: 1.15rem;
    text-align: center;
}

/* ImageManager delete-usage modal */
.img-usage-badge {
    display: inline-block;
    padding: .15rem .5rem;
    font-family: muli, sans-serif;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.4;
    flex-shrink: 0;
}

.img-usage-badge.direct {
    background-color: #E0F5F9;
    color: #00A1BE;
}

.img-usage-badge.embedded {
    background-color: #FEF0E6;
    color: #FF4A11;
}

.btn-danger-solid {
    background-color: #D8237C;
    border: 1px solid #D8237C;
    color: #fff;
    font-weight: 500;
    padding: .375rem .9rem;
    border-radius: .375rem;
    transition: background-color .15s ease, border-color .15s ease;
}

.btn-danger-solid:hover,
.btn-danger-solid:focus {
    background-color: #B51D66;
    border-color: #B51D66;
    color: #fff;
}

/* ========== Products Grid ========== */
/* Rounded-card pattern per migrate-page skill — do NOT copy flat-table CSS
   from Payroll/Campaigns/etc. */
.products-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.products-grid thead {
    display: none;
}

.products-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.products-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.products-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.products-grid a {
    color: #000;
    text-decoration: none;
}

.products-grid a:hover {
    color: var(--color-tertiary);
}

.products-grid .col-action {
    width: 60px;
}

.products-grid .col-select {
    padding-right: 1rem !important;
}

.products-grid .product-row-section {
    padding: .5rem .75rem;
    margin-bottom: .5rem;
}

/* ========== In-Kind Donations Grid ========== */
.donations-in-kind-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.donations-in-kind-grid thead {
    display: none;
}

.donations-in-kind-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.donations-in-kind-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.donations-in-kind-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.donations-in-kind-grid a {
    color: #000;
    text-decoration: none;
}

.donations-in-kind-grid a:hover {
    color: var(--color-tertiary);
}

.donations-in-kind-grid .col-action {
    width: 60px;
}

.donations-in-kind-grid .col-select {
    padding-right: 1rem !important;
}

.donations-in-kind-grid .donation-row-section {
    padding: .5rem .75rem;
    margin-bottom: .5rem;
}

/* ========== Meeting Minutes Grid ========== */

.meeting-minutes-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.meeting-minutes-grid thead {
    display: none;
}

.meeting-minutes-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.meeting-minutes-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.meeting-minutes-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.meeting-minutes-grid a {
    color: #000;
    text-decoration: none;
}

.meeting-minutes-grid a:hover {
    color: var(--color-tertiary);
}

.meeting-minutes-grid .col-select {
    padding-right: 1rem !important;
}

/* ========== Recurring Membership Schedules (RMS) ========== */

.rms-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.rms-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) minmax(170px, 1fr) minmax(190px, 1fr) auto;
    gap: 1.25rem;
    align-items: center;
    padding: 1rem 1.25rem;
    background: #FFF;
    border: 1px solid #E9ECEF;
    border-radius: .75rem;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

.rms-row:hover {
    border-color: #00A1BE;
    box-shadow: 0 .25rem .75rem rgba(0, 161, 190, .08);
    transform: translateY(-1px);
}

.rms-row-left { min-width: 0; }

.rms-name {
    font-family: 'Muli', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #27282A;
    line-height: 1.25;
}

.rms-meta {
    margin-top: .25rem;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    font-size: .82rem;
    color: #6C757D;
}

.rms-meta .rms-level { color: #00A1BE; font-weight: 600; }

.rms-row-amount {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.rms-amount-value {
    font-family: 'Muli', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #27282A;
    line-height: 1;
}

.rms-freq-pill {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: .15rem .6rem;
    background: rgba(0, 161, 190, .1);
    color: #00A1BE;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.rms-row-next { display: flex; flex-direction: column; gap: .2rem; }

.rms-next-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6C757D;
    font-weight: 700;
}

.rms-next-pill {
    display: inline-flex;
    align-items: center;
    padding: .35rem .7rem;
    border-radius: .5rem;
    font-size: .85rem;
    align-self: flex-start;
    border: 1px solid transparent;
}

.rms-pill-overdue { background: #FDE8F0; color: #D8237C; border-color: #F8C9DD; }
.rms-pill-soon    { background: #FFF4E6; color: #B86500; border-color: #FFD8A8; }
.rms-pill-future  { background: #E0F5F9; color: #00A1BE; border-color: #B8E4ED; }
.rms-pill-neutral { background: #F8F9FA; color: #6C757D; border-color: #DEE2E6; }

.rms-next-relative {
    font-size: .75rem;
    color: #6C757D;
    margin-top: .15rem;
    font-style: italic;
}

.rms-row-actions {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.rms-action {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    color: #FFF;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.rms-action i { font-size: 1rem; }

.rms-action-open  { background: #00CC78; }
.rms-action-open:hover  { background: #00B36B; transform: translateY(-1px); box-shadow: 0 .25rem .5rem rgba(0, 204, 120, .25); }

.rms-action-stop  { background: #D8237C; }
.rms-action-stop:hover  { background: #B81E69; transform: translateY(-1px); box-shadow: 0 .25rem .5rem rgba(216, 35, 124, .25); }

@media (max-width: 991.98px) {
    .rms-row {
        grid-template-columns: 1fr;
        gap: .75rem;
    }
    .rms-row-amount { flex-direction: row; align-items: center; gap: .75rem; }
    .rms-row-actions { justify-content: flex-end; }
}

/* ========== Portal Users Grid ========== */

.portal-account-requests-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.portal-account-requests-grid thead {
    display: none;
}

.portal-account-requests-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.portal-account-requests-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.portal-account-requests-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.portal-account-requests-grid a {
    color: #000;
    text-decoration: none;
}

.portal-account-requests-grid a:hover {
    color: var(--color-tertiary);
}

.portal-account-requests-grid .col-action {
    width: 60px;
}

.portal-account-requests-grid .col-select {
    padding-right: 1rem !important;
}

.portal-account-requests-grid .par-name {
    font-family: 'Muli', sans-serif;
    font-size: 120%;
    font-weight: 600;
    color: #464646;
}

.portal-users-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.portal-users-grid thead {
    display: none;
}

.portal-users-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.portal-users-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.portal-users-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.portal-users-grid a {
    color: #000;
    text-decoration: none;
}

.portal-users-grid a:hover {
    color: var(--color-tertiary);
}

.portal-users-grid .col-action {
    width: 60px;
}

.portal-users-grid .col-select {
    padding-right: 1rem !important;
}

.portal-users-grid .pu-name {
    font-family: 'Muli', sans-serif;
    font-size: 120%;
    font-weight: 600;
    color: #464646;
}

.portal-users-grid .pu-email {
    color: var(--color-primary);
    font-size: 90%;
}

.portal-users-grid .pu-email:hover {
    color: var(--color-tertiary);
}

.email-opt-in-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.email-opt-in-grid thead {
    display: none;
}

.email-opt-in-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.email-opt-in-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.email-opt-in-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.email-opt-in-grid a {
    color: #000;
    text-decoration: none;
}

.email-opt-in-grid a:hover {
    color: var(--color-tertiary);
}

.email-opt-in-grid .col-action {
    width: 60px;
}

.email-opt-in-grid .col-select {
    padding-right: 1rem !important;
}

.email-opt-in-grid .email-opt-in-row-section {
    border: 1px solid #DEE2E6;
    border-radius: .375rem;
    padding: .5rem .75rem;
    margin-bottom: .5rem;
    background: #FFF;
}

/* ===== Automated Processes (admin) ===== */
.ap-progress {
    font-family: 'Muli', sans-serif;
    font-size: .9rem;
    color: #00A1BE;
    font-weight: 600;
}

.ap-intro {
    margin: 1rem 0 1.5rem;
    color: #6c757d;
    font-family: 'Muli', sans-serif;
    font-size: .95rem;
    line-height: 1.55;
}

.ap-group {
    margin-bottom: 1.5rem;
}

.ap-process {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid #DEE2E6;
    border-radius: .5rem;
    background: #FFF;
    margin-bottom: .75rem;
    transition: box-shadow .15s ease, transform .15s ease;
}

.ap-process:last-child {
    margin-bottom: 0;
}

.ap-process:hover {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .06);
    transform: translateY(-1px);
}

.ap-process.destructive {
    border-left: 4px solid #D8237C;
}

.ap-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.ap-body {
    flex: 1 1 auto;
    min-width: 0;
}

.ap-title {
    font-family: 'Muli', sans-serif;
    font-weight: 700;
    color: #464646;
    font-size: 1.02rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.ap-desc {
    font-family: 'Muli', sans-serif;
    color: #6c757d;
    font-size: .85rem;
    margin-top: .15rem;
}

.ap-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ap-input {
    width: 130px;
}

.ap-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border-radius: 1rem;
    font-family: 'Muli', sans-serif;
    font-weight: 700;
    font-size: .68rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ap-pill-live {
    background: #E8F8F0;
    color: #00A65F;
}

.ap-pill-live::before {
    content: '';
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #00CC78;
    display: inline-block;
}

.ap-pill-soon {
    background: #F1F3F5;
    color: #868E96;
}

.ap-pill-soon::before {
    content: '';
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #ADB5BD;
    display: inline-block;
}

.ap-tag-danger {
    font-family: 'Muli', sans-serif;
    font-weight: 700;
    font-size: .6rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #D8237C;
    background: #FBE7F1;
    padding: .15rem .45rem;
    border-radius: .35rem;
}

.btn-run-danger {
    background: #D8237C;
    border: 1px solid #D8237C;
    color: #FFF;
}

.btn-run-danger:hover {
    background: #b81d68;
    border-color: #b81d68;
    color: #FFF;
}

.ap-run {
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .ap-process {
        flex-wrap: wrap;
    }

    .ap-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Automated Processes — details modal (for tools that need extra inputs, e.g. Create GL Entries) */
.ap-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(39, 40, 42, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1080;
    padding: 1rem;
}

.ap-modal {
    background: #FFF;
    border-radius: .5rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25);
    width: 100%;
    max-width: 32rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ap-modal-header {
    padding: 1rem 1.25rem;
    font-family: var(--font-headings);
    font-size: 1.1rem;
    color: #27282A;
    border-bottom: 1px solid #DEE2E6;
}

.ap-modal-body {
    padding: 1.25rem;
    overflow-y: auto;
}

.ap-modal-desc {
    margin: 0 0 1rem;
    color: #6c757d;
    font-size: .9rem;
}

.ap-modal-field {
    margin-bottom: 1rem;
}

.ap-modal-field label {
    display: block;
    margin-bottom: .35rem;
    font-weight: 600;
    font-size: .9rem;
    color: #27282A;
}

.ap-modal-hint {
    font-weight: 400;
    color: #6c757d;
}

.ap-modal-error {
    margin-top: .5rem;
    padding: .5rem .75rem;
    background: #FFEEE9;
    color: #FF4A11;
    border-radius: .375rem;
    font-size: .875rem;
}

.ap-modal-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid #DEE2E6;
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}

/* ── Social Media Manager (/social-media) ─────────────────────────────── */
.smm-limit-pill{display:inline-flex; align-items:center; gap:.5rem; padding:.35rem .85rem; border-radius:1rem; background:#F8F9FA; border:1px solid #DEE2E6; font-family:var(--font-primary); font-size:.85rem; font-weight:700; color:#6c757d; white-space:nowrap}
.smm-platform-icon{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; color:#FFF; font-size:18px; flex-shrink:0}
.smm-platform-icon.sm{width:24px; height:24px; font-size:12px}
.smm-account-row{display:flex; align-items:center; gap:.75rem; border:1px solid #DEE2E6; border-radius:.375rem; padding:.6rem .75rem; margin-bottom:.5rem; background:#FFF}
.smm-account-row.inactive{opacity:.65; background:#F8F9FA}
.smm-account-info{flex-grow:1; min-width:0}
.smm-account-name{font-family:var(--font-primary); font-weight:700; color:#27282A; font-size:.95rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.smm-account-handle{font-family:var(--font-primary); font-size:.8rem; color:#6c757d; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.smm-section-label{font-family:var(--font-primary); font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#ADB5BD; margin-bottom:.5rem}
.smm-empty{text-align:center; padding:2.5rem 1rem; color:#6c757d; font-family:var(--font-primary)}
.smm-chips{display:flex; flex-wrap:wrap; gap:.5rem}
.smm-chip{display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .85rem; border-radius:2rem; border:1px solid #DEE2E6; background:#FFF; font-family:var(--font-primary); font-size:.85rem; font-weight:600; color:#27282A; cursor:pointer; transition:border-color .15s, background .15s}
.smm-chip:hover{border-color:var(--color-primary)}
.smm-chip.selected{border-color:var(--color-primary); background:rgba(0,161,190,.08)}
.smm-chip-check{color:var(--color-primary)}
.smm-char-count{font-family:var(--font-primary); font-size:.75rem; color:#ADB5BD}
.smm-char-count.over{color:#D8237C; font-weight:700}
.smm-media-add{position:relative; display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .9rem; border:1px dashed #CED4DA; border-radius:.5rem; background:#F8F9FA; color:#6C757D; font-family:var(--font-primary); font-size:.85rem; font-weight:600; cursor:pointer; transition:border-color .15s, color .15s}
.smm-media-add:hover{border-color:var(--color-primary); color:var(--color-primary)}
.smm-media-add.busy{opacity:.7; cursor:default}
.smm-media-add input[type=file]{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer}
.smm-media-err{margin-top:.4rem; color:#D8237C; font-size:.8rem; font-family:var(--font-primary)}
.smm-media-preview{position:relative; display:inline-block; margin-top:.25rem}
.smm-media-preview img{max-width:160px; max-height:160px; border-radius:.5rem; border:1px solid #DEE2E6; display:block; object-fit:cover}
.smm-media-remove{position:absolute; top:-.5rem; right:-.5rem; width:1.5rem; height:1.5rem; border-radius:50%; border:none; background:#27282A; color:#FFF; font-size:.75rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.3)}
.smm-media-remove:hover{background:#D8237C}
.smm-post-thumb{max-width:84px; max-height:84px; border-radius:.4rem; border:1px solid #DEE2E6; object-fit:cover; margin-top:.4rem}
.smm-tab{display:inline-flex; align-items:center; gap:.5rem; padding:.45rem 1rem; border-radius:2rem; border:1px solid #DEE2E6; background:#FFF; font-family:var(--font-primary); font-size:.9rem; font-weight:600; color:#6c757d; cursor:pointer}
.smm-tab:hover{border-color:var(--color-primary); color:var(--color-primary)}
.smm-tab.active{background:var(--color-primary); border-color:var(--color-primary); color:#FFF}
.smm-tab-count{display:inline-flex; align-items:center; justify-content:center; min-width:1.4rem; height:1.4rem; padding:0 .35rem; border-radius:.7rem; background:rgba(0,0,0,.1); font-size:.75rem; font-weight:700}
.smm-tab.active .smm-tab-count{background:rgba(255,255,255,.25)}
.smm-post-card{border:1px solid #DEE2E6; border-radius:.375rem; padding:1rem 1.25rem; margin-bottom:.5rem; background:#FFF}
.smm-post-content{font-family:var(--font-primary); color:#27282A; white-space:pre-wrap; word-break:break-word}
.smm-post-link{display:inline-flex; align-items:center; gap:.35rem; font-family:var(--font-primary); font-size:.85rem; color:var(--color-tertiary); margin-top:.35rem; word-break:break-all}
.smm-post-targets{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem}
.smm-target{display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .6rem; border-radius:2rem; border:1px solid #DEE2E6; background:#F8F9FA; font-family:var(--font-primary); font-size:.8rem; font-weight:600; color:#27282A}
.smm-target-dot{width:.55rem; height:.55rem; border-radius:50%; background:#ADB5BD}
.smm-target-dot.posted{background:#00CC78}
.smm-target-dot.failed{background:#D8237C}
.smm-target-dot.pending{background:#ADB5BD}
.smm-status-badge{display:inline-flex; align-items:center; padding:.25rem .7rem; border-radius:1rem; font-family:var(--font-primary); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#FFF}
.smm-status-badge.draft{background:#ADB5BD}
.smm-status-badge.scheduled{background:#00A1BE}
.smm-status-badge.posted{background:#00CC78}
.smm-status-badge.partial{background:#FF4A11}
.smm-status-badge.failed{background:#D8237C}
.smm-post-meta{font-family:var(--font-primary); font-size:.8rem; color:#6c757d}
.smm-live-badge{display:inline-block; margin-left:.35rem; padding:.1rem .45rem; border-radius:.6rem; background:#00CC78; color:#FFF; font-size:.6rem; font-weight:700; letter-spacing:.05em; vertical-align:middle}
.smm-tag{display:inline-block; margin-left:.35rem; padding:.1rem .45rem; border-radius:.6rem; border:1px solid #ADB5BD; color:#6c757d; background:#FFF; font-size:.6rem; font-weight:700; letter-spacing:.05em; vertical-align:middle; white-space:nowrap}
.smm-tag.paused{border-color:#FF4A11; color:#FF4A11}
.smm-chip:disabled{opacity:.45; cursor:not-allowed}
.smm-consent{border:1px solid #DEE2E6; background:#F8F9FA; border-radius:.375rem; padding:.75rem 1rem}

/* Grant Applications list page (/grant-applications) — full-width rounded row cards */
.grant-applications-grid { width: 100%; border-collapse: separate; border-spacing: 0 .5rem; }
.grant-applications-grid thead { display: none; }
.grant-applications-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}
.grant-applications-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}
.grant-applications-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}
.grant-applications-grid a { color: #000; text-decoration: none; }
.grant-applications-grid a:hover { color: var(--color-tertiary); }
.grant-applications-grid .col-select { padding-right: 1rem !important; }

/* Grant Application Questions attachments (MOSAIC viewer) */
.ga-attachment-card{background:linear-gradient(135deg,#f8f9fa 0%,#ffffff 100%); transition:all 0.2s ease}
.ga-attachment-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.1); transform:translateY(-2px)}

/* ========== Volunteer Positions Grid (/volunteer-positions) ========== */

.volunteer-positions-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 .5rem;
}

.volunteer-positions-grid thead {
    display: none;
}

.volunteer-positions-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}

.volunteer-positions-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}

.volunteer-positions-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}

.volunteer-positions-grid a {
    color: #000;
    text-decoration: none;
}

.volunteer-positions-grid a:hover {
    color: var(--color-tertiary);
}

.volunteer-positions-grid .col-action {
    width: 60px;
}

.volunteer-positions-grid .col-select {
    padding-right: 1rem !important;
}

.volunteer-positions-grid .position-row-section {
    border: 1px solid #DEE2E6;
    border-radius: .375rem;
    padding: .5rem .75rem;
    margin-bottom: .5rem;
    background: #FFF;
}

/* ========== Sign-In Activity Log Grid (full-width rounded row cards) — frmLogSignIn migration ========== */
.sign-in-log-grid { width: 100%; border-collapse: separate; border-spacing: 0 .5rem; }
.sign-in-log-grid thead { display: none; }
.sign-in-log-grid td {
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 1.25rem 1.25rem !important;
    vertical-align: top;
    background: #FFF;
    border-top: 1px solid #DEE2E6;
    border-bottom: 1px solid #DEE2E6;
}
.sign-in-log-grid td:first-child {
    border-left: 1px solid #DEE2E6;
    border-top-left-radius: .375rem;
    border-bottom-left-radius: .375rem;
}
.sign-in-log-grid td:last-child {
    border-right: 1px solid #DEE2E6;
    border-top-right-radius: .375rem;
    border-bottom-right-radius: .375rem;
}
.sign-in-log-grid a { color: #000; text-decoration: none; }
.sign-in-log-grid a:hover { color: var(--color-tertiary); }

/* Sign-in status badges + icons (ported verbatim from frmLogSignIn.aspx inline styles) */
.signin-badge-success { display: inline-block; padding: .25em .6em; font-size: .8em; font-weight: 600; color: #fff; background-color: #00CC78; border-radius: .375rem; }
.signin-badge-failed { display: inline-block; padding: .25em .6em; font-size: .8em; font-weight: 600; color: #fff; background-color: #FF4A11; border-radius: .375rem; }
.signin-icon-success { color: #00CC78; font-size: 1.5rem; margin-top: .25rem; }
.signin-icon-failed { color: #FF4A11; font-size: 1.5rem; margin-top: .25rem; }

/* ============================================================================
   WAIVERS  (Charlie, 2026-07-14)
   Design tokens only, never raw hex. Mobile-first: every signing control is finger-sized,
   because the person signing is standing in a surf shop holding a phone, not at a desk.
   ============================================================================ */

/* ============================================================================
   PILLS — the team-standard status chips (blazor-formatting: "use existing pill
   classes only"). They were never defined globally: every page that wanted one
   copy-pasted the same block into its own <style>, so a page that used a pill
   WITHOUT a local copy rendered it as bare unstyled text (that is exactly what
   the Waivers pages were doing). Defined once here, verbatim from the existing
   definitions so nothing changes visually anywhere. A page that still carries
   its own local copy wins on cascade order and is unaffected.
   ============================================================================ */
.pill{display:inline-block; padding:.2em .7em; border-radius:1em; font-size:85%; font-weight:600}
.pill--active{display:inline-block; padding:.2em .7em; border-radius:1em; font-size:85%; font-weight:600; background-color:#E6F9F0; color:#00CC78}
.pill--inactive{display:inline-block; padding:.2em .7em; border-radius:1em; font-size:85%; font-weight:600; background-color:#F5F5F5; color:#999}
.pill--info{display:inline-block; padding:.2em .7em; border-radius:1em; font-size:85%; font-weight:600; background-color:#E6F4F8; color:#00A1BE}
.pill--danger{display:inline-block; padding:.2em .7em; border-radius:1em; font-size:85%; font-weight:600; background-color:#FBE9F1; color:#D8237C}
.pill--outline{display:inline-block; padding:.2em .7em; border-radius:1em; font-size:85%; font-weight:600; background-color:transparent; border:1px solid #DEE2E6; color:#6c757d}

/* --- The list/console grids: full-width rounded row cards (the mandatory grid pattern).
   border-collapse:separate + border-spacing gives every <tr> its own gap; per-td top/bottom
   borders with rounded first/last-child corners turn each row into its own card. --- */
/* Christine, 2026-07-14: "The rows are stacked on top of each other with no padding between them.
   There should be at least mb-2 between the rows." mb-2 is .5rem; .75rem reads as a clear gap
   between cards rather than a hairline. */
.waivers-grid, .waiver-templates-grid{width:100%; border-collapse:separate; border-spacing:0 .75rem}
.waivers-grid thead, .waiver-templates-grid thead{display:none}
.waivers-grid td, .waiver-templates-grid td{font-family:var(--font-primary); font-size:14px; padding:1.25rem 1.25rem !important; vertical-align:top; background:#FFF; border-top:1px solid #DEE2E6; border-bottom:1px solid #DEE2E6}
.waivers-grid td:first-child, .waiver-templates-grid td:first-child{border-left:1px solid #DEE2E6; border-top-left-radius:.375rem; border-bottom-left-radius:.375rem}
.waivers-grid td:last-child, .waiver-templates-grid td:last-child{border-right:1px solid #DEE2E6; border-top-right-radius:.375rem; border-bottom-right-radius:.375rem}
.waivers-grid a:not(.grid-action-btn), .waiver-templates-grid a:not(.grid-action-btn){color:#000; text-decoration:none}
.waivers-grid a:not(.grid-action-btn):hover, .waiver-templates-grid a:not(.grid-action-btn):hover{color:var(--color-tertiary)}
.waivers-grid .col-select, .waiver-templates-grid .col-select{padding-right:1rem !important}

/* The grid row title: plain text, never a link. */
.waiver-row-title{color:#464646; font-family:'Muli',sans-serif; font-size:120%; font-weight:600}

/* A flat grouping bar inside a row card. Deliberately square: the row card is the only
   rounded border, and nothing rounded may nest inside it. */
.waiver-row-bar{background:#F8F9FA; padding:.5rem .75rem}

/* --- Template designer --- */
.waiver-toggles{display:flex; flex-wrap:wrap; gap:.9rem 2.25rem}

/* --- Signed-record detail --- */
.waiver-people{display:flex; flex-wrap:wrap; gap:1rem 2.5rem}
.waiver-person{min-width:12rem}
.waiver-answer{padding:.75rem 1rem; border-left:3px solid #DEE2E6; margin-bottom:.5rem}
.waiver-answer--flagged{border-left-color:var(--color-tertiary); background:rgba(255,74,17,.04)}
.waiver-signature-img{max-width:100%; width:22rem; border:1px solid #DEE2E6; border-radius:.375rem; background:#FFF}
.waiver-signature-typed{font-family:var(--font-secondary); font-size:180%; color:var(--color-body); padding:.5rem 0}
.waiver-hash{font-family:monospace; font-size:85%; word-break:break-all}
.waiver-content-snapshot{border:1px solid #DEE2E6; border-radius:.375rem; padding:1.5rem; background:#FFF; max-height:32rem; overflow-y:auto}

/* --- Public signing page --- */
.interface-layout .border-all.if-card{padding:1.5rem; margin-bottom:1rem}
.waiver-content{border:1px solid #DEE2E6; border-radius:.375rem; padding:1.5rem; background:#FFF; max-height:26rem; overflow-y:auto}
.waiver-perperson{padding-left:1rem; border-left:2px solid #DEE2E6}

/* The signature pad. touch-action:none stops the browser scrolling the page out from under a
   finger that is mid-signature; without it a phone signature is impossible to draw. */
.waiver-sig-wrap{position:relative; border:1px dashed #ADB5BD; border-radius:.375rem; background:#FFF; height:11rem; touch-action:none}
.waiver-sig-canvas{display:block; width:100%; height:100%; cursor:crosshair; touch-action:none}
.waiver-sig-clear{position:absolute; top:.25rem; right:.5rem; font-size:85%}

/* Segmented choice buttons. A native <select> is banned (its OS-rendered option list has an
   unstyleable blue highlight that breaks the brand), and on a public interface the plain
   .radio-group leaves the native input visible inside the pill. This is the segmented switch. */
.waiver-choices{display:flex; flex-wrap:wrap; gap:.5rem}
.waiver-choice{min-height:48px; padding:0 1.5rem; border:1px solid #DEE2E6; border-radius:2rem; background:#FFF; font-family:var(--font-buttons); color:var(--color-body); cursor:pointer}
.waiver-choice:hover{border-color:var(--color-primary)}
.waiver-choice--on{background:var(--color-primary) !important; border-color:var(--color-primary) !important; color:#FFF !important}
.waiver-initials{max-width:8rem; text-transform:uppercase}
.waiver-consent{padding:1rem; border:1px solid #DEE2E6; border-radius:.375rem; background:#FFF}
.interface-layout .submit-row{margin-top:1.75rem}

/* The honeypot. Off-screen rather than display:none, because some bots skip hidden inputs and
   the whole point is that a bot DOES fill it in. Never shown to a person or a screen reader. */
.waiver-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* Kiosk: full-bleed, no distractions, big targets for a shared tablet. */
.waiver-kiosk{max-width:none; padding:2rem}
.waiver-kiosk .form-control{min-height:48px; font-size:110%}

/* Phone. Christine's standing rule: every single thing we build must be beautiful on a phone. */
@media (max-width:640px){
.waiver-toggles{gap:.75rem 1rem}
.waiver-people{gap:.75rem}
.waiver-sig-wrap{height:9rem}
.waiver-choice{flex:1 1 auto; padding:0 1rem}
.waiver-content, .waiver-content-snapshot{max-height:20rem; padding:1rem}
}

/* Print: the signed record is a legal document people file. Drop the app chrome. */
@media print{
.waiver-content-snapshot{max-height:none; overflow:visible; border:none; padding:0}
.waiver-answer{break-inside:avoid}
}

/* Waivers panel on the constituent workspace. Stacks into labelled cards on a phone: a
   .table-responsive wrapper only adds a sideways scrollbar, which Christine has rejected on sight. */
.waivers-panel-table th{font-weight:600; color:#6c757d; font-size:85%}
@media (max-width:640px){
.waivers-panel-table thead{display:none}
.waivers-panel-table tr{display:block; border:1px solid #DEE2E6; border-radius:.375rem; margin-bottom:.75rem; padding:.5rem}
.waivers-panel-table td{display:block; width:100%; border:none; padding:.35rem .5rem}
.waivers-panel-table td[data-label]::before{content:attr(data-label) ": "; font-weight:600; color:#6c757d}
.waivers-panel-table td:empty{display:none}
}