/*!*************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./application/assets/js/app/utilities/Modal/Modal.css ***!
  \*************************************************************************************************************************************************/
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 20px;
    box-sizing: border-box;
}

.modal-container {
    width: 450px;
    max-width: 100%;
    /* GC2-788 follow-up: a fixed 150px top margin (with no max-height/overflow
       anywhere in the stack) let content taller than ~(viewport - 300px) get
       clipped top AND bottom at once -- on a ~880px-tall viewport the close
       button rendered above y=0, unreachable, with no scrollbar to reach it.
       max-height + overflow-y here caps the modal to the viewport and scrolls
       only the body when content doesn't fit, matching the pattern already
       used correctly by ListSetupTypeStep.css's .list-setup-container. */
    max-height: calc(100vh - 40px);
    margin: 0 auto;
    padding: 20px 30px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
    position: relative;
    text-transform: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

/* Wider variant for content-heavy modals (e.g. Check-In List's Access
   Settings step) -- desktop only, so mobile still gets the standard 450px
   sizing/behavior via .modal-container's own max-width: 100%. */
@media (min-width: 768px) {
    .modal-container--wide {
        width: 650px;
    }
}

.modal-container .modal-header {
    flex-shrink: 0;
}

.modal-container .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.modal-content-inner {
    background: white;
    padding: 0;
    border-radius: 8px;

    text-transform: none;
}

.modal-container .modal-header h2{
    font-size: 21px;
    font-weight: bold;
    text-align: center;
}

.modal-container .modal-header .icon-delete{
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 20px;

}

.modal-container .agency-selected{
    max-height: 100px;
    overflow-y: auto;
}

.modal-container .agency-selected .agency{
    border-radius: 5px;
    border: 1px solid #cccccc;
    display: inline-block;
    margin-top: 4px;
    padding: 2px 5px;
}
.modal-container .agency-selected .icon-delete{
    cursor: pointer;
    font-size: 8px;
}

.modal-container .modal-footer{
    margin-top: 30px;
}

.modal-container .modal-footer button{
    width: 100%;
}

.modal-container input,
.modal-container select{
    background: var(--ms-bg, #fff);
    border: solid 1px #d1d5db;
    border-radius: var(--ms-radius, 4px);
    bottom: 0;
    box-sizing: border-box;
    font-family: inherit;
    font-size: inherit;
    height: 100%;
    left: 0;
    min-height: 35px;
    outline: none;
    padding-left: var(--ms-px, .875rem);
    padding-top: 5px;
    padding-bottom: 5px;
    right: 0;
    top: 0;
    width: 100%;
}

/*
 * QA fix: the blanket rule above (sized/positioned for a text/select-style
 * input) was never meant for radio/checkbox inputs, but nothing excluded
 * them -- confirmed live, a huge, disproportionate "Existing Volunteer" /
 * "New Volunteer" mode radio in AddVolunteerModal. Root cause is subtler
 * than it looks: per the flexbox spec, an explicit `width` becomes a flex
 * item's used flex-basis when flex-basis is `auto` (the default) --  so
 * `width: 100%` here doesn't just size the radio, it makes the radio compete
 * for space in its flex row as if it wanted 100% of the row's width, which
 * flex-shrink then only partially claws back. This was silently distorting
 * every radio/checkbox inside every modal, including ones that looked fine
 * (ExistingVolunteerSearch's Name/Email/Phone/User Group radios happened to
 * shrink down to a passable size purely because they split the row 4 ways
 * instead of 2 -- not because they were actually unaffected). Restoring
 * `width`/`height` to `auto` lets these render at their normal native size
 * regardless of how many siblings share the row.
 */
.modal-container input[type="radio"],
.modal-container input[type="checkbox"] {
    width: auto;
    height: auto;
    min-height: 0;
}

.gcComponent{
    margin-top: 10px;
}
/*!****************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./application/assets/js/app/components/AgencySelect/AgencySelect.css ***!
  \****************************************************************************************************************************************************************/
.gcComponent.select-field select.error{
    border:  2px solid  #d9534f;
}

.gcComponent.input-field label{
    font-weight: normal;
}

.gcComponent.select-field ul{
    margin-top: 5px;
    max-height: 100px;
    overflow-y: auto;
    padding: 0;
}

.gcComponent.select-field ul li{
    display: inline-block;
    list-style-type: none;
    margin-right: 5px;
}

.gcComponent.select-field ul li span{
    border: 1px solid rgb(103,112,126);
    padding: 2px 10px;
    border-radius: 5px;
    font-size: 11px;
    background-color: rgb(103,112,126);
    color: #ffffff;
}

.gcComponent.select-field ul li span a{
    display: inline !important;
    color: #ffffff;
    font-size: 10px;
    margin-left: 5px;
    padding: 0 !important;
    text-decoration: none;
}

.gcComponent.select-field ul li span button.icon-delete {
    width: 12px;
    height: 12px;
    font-size: 8px;
    vertical-align: middle;
    margin-left: 4px;
    padding: 0;
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
}

/*!***********************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./application/assets/js/app/utilities/InputField/InputField.css ***!
  \***********************************************************************************************************************************************************/
.gcComponent.input-field input.error{
    border:  2px solid  #d9534f;
}

.gcComponent.input-field label{
    font-weight: normal;
}

.gcComponent.input-field .error-message{
    width: 100%;
    margin-top: .25rem;
    font-size: .875em;
    color: #d9534f;
}
/*!***************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./application/assets/js/app/utilities/SubmitButton/SubmitButton.css ***!
  \***************************************************************************************************************************************************************/
.gcComponent.input-submit-button button{
    margin-top: 15px;
    width: 100%;
}

.gcComponent.input-submit-button button.input-submit-button--success{
    background-color: #3c763d;
    border-color: #3c763d;
    color: #fff;
    transition: background-color .15s ease-in;
}

.input-submit-button__check{
    vertical-align: -1px;
}
/*!************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./application/assets/js/app/KioskApp.css ***!
  \************************************************************************************************************************************/
#utility-bar .nav-utility-bar .nav-item > span a {
    color: #caced9;
    padding: 7px 20px;
    text-decoration: none;
}

@media (max-width: 992px) {
    #utility-bar .nav-utility-bar .nav-item > span a {
        display: inline-block;
        padding: 20px;
    }
}

#utility-bar .nav-utility-bar .nav-item > span a:hover {
    text-decoration: none;
}
/*!***************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./application/assets/js/app/utilities/ConfirmAlert/ConfirmAlert.css ***!
  \***************************************************************************************************************************************************************/
.confirm-alert-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.confirm-alert-box {
    background: white;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
}

.confirm-alert-box .button-wrapper {
    display: flex;
    justify-content: center;
    max-witdh: 85%;
}

.confirm-alert-box button {
    margin: 5px;
}
/*!**************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./application/assets/js/app/components/ListSetupTypeStep/ListSetupTypeStep.css ***!
  \**************************************************************************************************************************************************************************/
/* List Setup — Step 1 (type selector + inline searchable item picker).
   Class names are "list-setup-" prefixed (ported/renamed from the vanilla-JS
   prototype) to avoid clashing with any existing global class names. */

.list-setup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1300;
}

/* select2's dropdown is appended to document.body with a hardcoded
   z-index: 1051 (vendor select2.css) -- below this overlay's 1300 (and the
   shared Modal's 1050), so it painted BEHIND whichever overlay was open,
   visible only as a darkened silhouette through the semi-transparent
   backdrop instead of a legible white dropdown on top. Confirmed live: a
   real user opening "Show list by" saw the options rendered as illegible
   gray text behind the modal.
   Tried scoping this per-instance first via select2's `dropdownCssClass`
   option, but this codebase's select2 build doesn't bundle the optional
   `select2/compat/dropdownCss` module that option requires -- passing it
   throws synchronously inside the init effect and, with no Error Boundary
   above KioskApp, crashes the entire React root (worse than the original
   bug). A plain global bump is simpler, can't hit that landmine, and matches
   this codebase's own existing convention for "float above everything"
   widgets (see .colpick { z-index: 9999999 } in
   application/assets/less/components/_forms.less) -- app.css (this file's
   bundle) loads after every vendor stylesheet including select2's own, so
   this wins by source order at equal specificity; every select2 dropdown
   in the app should render on top of any overlay regardless, so there's no
   plausible regression from raising it everywhere. */
.select2-dropdown {
    z-index: 10001;
}

.list-setup-container {
    position: relative;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    width: 520px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 64px);
    padding: 28px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Matches Step 2's (shared Modal, size="wide") desktop width so the two-step
   Check-In List wizard reads as one consistent size, not a narrow step
   followed by a wider one. */
@media (min-width: 768px) {
    .list-setup-container {
        width: 650px;
    }
}

/* Only this region scrolls -- the NEXT button (.list-setup-btn-row) lives
   outside it, in the container's normal flex flow, so it's always visible
   without needing to scroll the modal itself. The item picker's own dropdown
   (.list-setup-dropdown-panel) still scrolls internally via its own
   max-height/overflow-y below, independent of this region. */
.list-setup-scroll-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.list-setup-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #5b5d63;
    padding: 6px;
    line-height: 1;
}

.list-setup-step-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #70727a;
    font-weight: 700;
    margin-bottom: 6px;
}

.list-setup-title {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
    color: #28282b;
}

.list-setup-field-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin: 18px 0 6px;
    color: #28282b;
}

.list-setup-help-text {
    font-size: 12px;
    color: #70727a;
    margin-top: 4px;
}

/* The site-wide standalone-select2 default (manager/_misc.less) is
   pill-shaped (30px radius), which read as inconsistent next to this
   modal's own 6px-radius search input right below it. Scoped to this
   modal only -- other selects relying on the pill default elsewhere in
   the app are untouched. */
.list-setup-container .select2-container--default .select2-selection--single {
    border-radius: 6px;
}

.list-setup-type-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    color: #28282b;
    box-sizing: border-box;
}

.list-setup-picker {
    margin-top: 6px;
}

.list-setup-search-wrap {
    position: relative;
}

.list-setup-search-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    box-sizing: border-box;
}

.list-setup-dropdown-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e2e4e8;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    max-height: 220px;
    overflow-y: auto;
    z-index: 60;
}

.list-setup-select-all {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 700;
    background: #f7f8f9;
    border-bottom: 1px solid #e2e4e8;
    cursor: pointer;
    margin: 0;
}

.list-setup-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 1px solid #e2e4e8;
    margin: 0;
}

.list-setup-option:last-child {
    border-bottom: none;
}

.list-setup-option:hover {
    background: #f1f2f4;
}

.list-setup-no-match {
    padding: 12px 14px;
    font-size: 12px;
    color: #70727a;
    font-style: italic;
}

.list-setup-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.list-setup-tag {
    list-style-type: none;
}

.list-setup-tag span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #67707e;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 12px;
    background-color: #3a3a3e;
    color: #ffffff;
}

.list-setup-tag-remove {
    width: 12px;
    height: 12px;
    font-size: 8px;
    vertical-align: middle;
    padding: 0;
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
}

.list-setup-error {
    font-size: 12px;
    color: #b23a3a;
    margin-top: 8px;
}

.list-setup-btn-row {
    display: flex;
    gap: 10px;
    margin-top: 24px;
    flex-shrink: 0;
}

.list-setup-btn {
    width: 100%;
}

/*!************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./application/assets/js/app/components/AccessSettings/AccessSettingsStep.css ***!
  \************************************************************************************************************************************************************************/
/*
 * Mirrors ListSetupTypeStep.css's .list-setup-step-label exactly (same
 * font-size/weight/letter-spacing/color) -- Step 1 and Step 2 of the same
 * wizard should read as one consistent step sequence.
 */
.access-settings-step__step-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #70727a;
    font-weight: 700;
    margin-bottom: 6px;
}

/* Log Out & Launch failure -- same red used by every other inline error in this wizard (CheckInTimeModal.css, AddVolunteerModal.css). */
.access-settings-step__error {
    color: #B3261E;
    font-size: 13px;
    margin-top: 8px;
}

/*!****************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./application/assets/js/app/components/ResponseFlow/ResponseFlow.css ***!
  \****************************************************************************************************************************************************************/
.rf-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
}

.rf-container {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    width: 680px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rf-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.rf-header__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rf-header__title {
    font-size: 22px;
    font-weight: 800;
    color: #111827;
    margin: 0;
    flex: 1;
    padding-right: 12px;
    line-height: 1.2;
}

.rf-header__subtitle {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
    margin-top: 6px;
}

.rf-header__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-left: auto;
}

.rf-overlay .rf-header__close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    line-height: 0;
    border-radius: 4px;
    color: #555;
    flex-shrink: 0;
    box-shadow: none;
}

.rf-header__close:focus {
    outline: 2px solid #0055a5;
    outline-offset: 2px;
}

.rf-header__close:hover {
    color: #111;
    background: #f3f4f6;
}

.rf-header__close .icon {
    width: 18px;
    height: 18px;
    display: block;
}

.rf-progress {
    width: 110px;
    height: 10px;
    background: #e5e7eb;
    border-radius: 99px;
    overflow: hidden;
    flex-shrink: 0;
}

.rf-progress__fill {
    height: 100%;
    background: #4ade80;
    border-radius: 99px;
    transition: width 0.3s ease;
}

.rf-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.rf-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 24px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.rf-filter-row__controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rf-filter-row__select,
.rf-filter-row__date {
    height: 32px;
    padding: 0 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 13px;
    color: #374151;
    background: #fff;
}

.rf-filter-row__select {
    min-width: 120px;
}

.rf-filter-row__date {
    min-width: 130px;
}

.rf-filter-row__select:focus,
.rf-filter-row__date:focus {
    outline: 2px solid #0055a5;
    outline-offset: 1px;
}

.rf-shift-list {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.rf-shift-list__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0 4px;
}

.rf-shift-list__header-left {
    display: flex;
    align-items: center;
}

.rf-shift-list__header-label {
    font-size: 13px;
    font-weight: 600;
    color: #111;
}

.rf-shift-list__header-label--empty {
    font-style: italic;
    color: #9ca3af;
    font-weight: 400;
}

.rf-shift-list__pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-bottom:3px;
}

.rf-shift-list__page-range {
    font-size: 12px;
    color: #6b7280;
}

.rf-shift-list__page-btn {
    background: none;
    border: none;
    padding: 0 6px;
    margin-bottom: 2px;
    font-size: 16px;
    height: 20px;
    line-height: 20px;
    color: #374151;
    cursor: pointer;
    border-radius: 3px;
}

.rf-shift-list__page-btn:hover {
    background: #f3f4f6;
    color: #111;
}

.rf-shift-list__page-btn:focus {
    outline: 2px solid #0055a5;
    outline-offset: 1px;
}

.rf-shift-list__rows {
    display: flex;
    flex-direction: column;
}

.rf-shift-list__error,
.rf-shift-list__empty {
    padding: 32px 0;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}

.rf-shift-list__error {
    color: #b91c1c;
}

.rf-shift-row__checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid #d1d5db;
    border-radius: 3px;
    background: #fff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.rf-shift-row__checkbox--selected {
    border-color: #0055a5;
    background: #0055a5;
}

.rf-shift-row__checkbox--selected::after,
.rf-shift-row__checkbox--waitlisted::after {
    content: '';
    display: block;
    width: 5px;
    height: 9px;
    /* Nudge up slightly so the checkmark glyph, which isn't visually
       symmetric before rotation, appears centered in the box (matches
       the vertically/horizontally centered look of the native
       "select all" checkbox in the list header). */
    margin-top: -2px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.rf-shift-row__checkbox--waitlisted {
    border-color: #ea580c;
    background: #ea580c;
}

.rf-shift-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
}

.rf-shift-row:focus {
    outline: 2px solid #0055a5;
    outline-offset: 2px;
    border-radius: 3px;
}

.rf-shift-row:last-child {
    border-bottom: none;
}

.rf-shift-row__date-col {
    display: flex;
    flex-direction: column;
    min-width: 130px;
}

.rf-shift-row__time-col {
    display: flex;
    flex-direction: column;
    min-width: 80px;
}

.rf-shift-row__date,
.rf-shift-row__time {
    font-weight: 600;
    font-size: 14px;
    color: #111;
}

.rf-shift-row__day,
.rf-shift-row__duration {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

.rf-shift-row__spots-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-left: auto;
    text-align: right;
}

.rf-shift-row__slots {
    font-size: 13px;
    color: #111;
}

.rf-shift-row__registered,
.rf-shift-row__registered-link {
    font-size: 12px;
    color: #6b7280;
}

.rf-shift-row__registered-link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #6b3fa0;
    text-decoration: underline;
}

.rf-shift-row__registered-link:focus {
    outline: 2px solid #0055a5;
    outline-offset: 2px;
    border-radius: 2px;
}

.rf-shift-row__waitlisted-label {
    font-size: 13px;
    font-weight: 700;
    color: #ea580c;
}

.rf-shift-row--unavailable {
    cursor: default;
}

.rf-shift-row__full-label {
    font-size: 13px;
    font-weight: 700;
    color: #6b7280;
}

.rf-shift-row__waitlisted-sub {
    font-size: 12px;
    color: #6b7280;
}

.rf-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.rf-footer__goback {
    background: #fff;
    border: 1px solid #d1d5db;
    color: #374151;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: auto;
}

.rf-footer__goback:hover {
    background: #f9fafb;
}

.rf-footer__goback:focus {
    outline: 2px solid #0055a5;
    outline-offset: 2px;
}

.rf-footer__cancel {
    background: #fff;
    border: 1px solid #d1d5db;
    color: #374151;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.rf-footer__cancel:hover {
    background: #f9fafb;
}

.rf-footer__cancel:focus {
    outline: 2px solid #0055a5;
    outline-offset: 2px;
}

.rf-footer__cta {
    height: 40px;
    padding: 0 20px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: default;
    border: 2px solid #5dbaf0;
    background: transparent;
    color: #333;
    opacity: 0.55;
    transition: background 0.15s, color 0.15s, opacity 0.15s;
}

.rf-footer__cta--enabled {
    background: #5dbaf0;
    color: #fff;
    opacity: 1;
    cursor: pointer;
}

.rf-footer__cta--enabled:hover {
    filter: brightness(0.88);
}

.rf-footer__cta--enabled:focus {
    outline: 2px solid #0055a5;
    outline-offset: 2px;
}

.rf-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
}

.rf-loading__spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #e5e7eb;
    border-top-color: #0055a5;
    border-radius: 50%;
    animation: rf-spin 0.7s linear infinite;
}

@keyframes rf-spin {
    to {
        transform: rotate(360deg);
    }
}

.rf-calendar-view {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.rf-calendar-left {
    display: flex;
    flex-direction: column;
    width: 300px;
    flex-shrink: 0;
    border-right: 1px solid #e5e7eb;
    padding: 12px 16px;
}

.rf-calendar-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.rf-calendar-view-toggle,
.rf-calendar-today {
    font-size: 12px;
}

.rf-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.rf-calendar-nav__month {
    font-size: 14px;
    font-weight: 600;
    color: #111;
}

.rf-calendar-nav__btn {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    color: #374151;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
}

.rf-calendar-nav__btn:hover {
    background: #f3f4f6;
}

.rf-calendar-nav__btn:focus {
    outline: 2px solid #0055a5;
    outline-offset: 1px;
}

.rf-calendar-grid__header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 4px;
}

.rf-calendar-grid__day-label {
    text-align: center;
    font-size: 11px;
    color: #9ca3af;
    font-weight: 600;
    padding: 4px 0;
}

.rf-calendar-grid__cells {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.rf-calendar-cell {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: relative;
}

.rf-calendar-cell--empty {
    pointer-events: none;
}

.rf-calendar-cell__number {
    font-size: 13px;
    color: #374151;
}

.rf-calendar-cell--has-shifts .rf-calendar-cell__number {
    font-weight: 700;
    color: #111;
}

.rf-calendar-cell--has-shifts {
    cursor: pointer;
}

.rf-calendar-cell--has-shifts:focus {
    outline: 2px solid #0055a5;
    outline-offset: 1px;
}

.rf-calendar-cell--selected {
    background: #0055a5;
}

.rf-calendar-cell--selected .rf-calendar-cell__number {
    color: #fff;
}

.rf-calendar-right {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
}

.rf-calendar-right__placeholder {
    color: #9ca3af;
    font-size: 14px;
    font-style: italic;
    text-align: center;
    margin-top: 40px;
}

.rf-calendar-right__shifts {
    display: flex;
    flex-direction: column;
}

.rf-calendar-cell__dots {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 3px;
}

.rf-calendar-cell__dots::before,
.rf-calendar-cell__dots::after {
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #2563EB;
}

.rf-calendar-cell--selected .rf-calendar-cell__dots::before,
.rf-calendar-cell--selected .rf-calendar-cell__dots::after {
    background: rgba(255, 255, 255, 0.85);
}

.rf-calendar-right__selection-header {
    padding: 8px 20px 4px;
    border-bottom: 1px solid #f3f4f6;
    flex-shrink: 0;
}

.rf-calendar-right__date-heading {
    font-size: 13px;
    font-weight: 600;
    color: #111;
    margin: 0 0 8px;
}

.rf-body-locked {
    overflow: hidden;
}

.rf-wsu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1300;
}

.rf-wsu-container {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    width: 400px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rf-wsu-header {
    position: relative;
    text-align: center;
    padding: 20px 40px 12px;
    border-bottom: 1px solid #e5e7eb;
}

.rf-wsu-close-x {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    line-height: 1;
    color: #6b7280;
}

.rf-wsu-title {
    font-size: 18px;
    font-weight: 700;
    color: #111;
    margin: 0;
}

.rf-wsu-subtitle {
    font-size: 13px;
    color: #6b7280;
    margin: 4px 0 0;
}

.rf-wsu-count {
    font-size: 15px;
    font-weight: 700;
    color: #111;
    margin: 8px 0 0;
}

.rf-wsu-search {
    padding: 12px 20px;
    border-bottom: 1px solid #f3f4f6;
}

.rf-wsu-search__input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    font-size: 14px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
}

.rf-wsu-body {
    flex: 1;
    overflow-y: auto;
    max-height: 400px;
    padding: 8px 20px 16px;
}

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

.rf-wsu-list__item {
    padding: 10px 4px;
    border-bottom: 1px solid #f3f4f6;
    font-size: 14px;
    color: #374151;
}

.rf-wsu-list__item:last-child {
    border-bottom: none;
}

.rf-wsu-list__item--anonymous {
    color: #6b7280;
    font-style: italic;
}

.rf-wsu-more {
    display: block;
    width: 100%;
    margin-top: 8px;
    padding: 8px 0;
    background: none;
    border: none;
    color: #5b5bd6;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.rf-wsu-more:disabled {
    color: #9ca3af;
    cursor: default;
}

.rf-wsu-footer {
    padding: 12px 20px 16px;
    border-top: 1px solid #e5e7eb;
}

.rf-wsu-close-btn {
    width: 100%;
    height: 40px;
    padding: 0 20px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    background: var(--rf-secondary, #DEC675);
    color: #333;
}

.rf-wsu-close-btn:hover {
    filter: brightness(0.88);
}

.rf-wsu-close-btn:focus {
    outline: 2px solid #0055a5;
    outline-offset: 2px;
}

.rf-questions-screen {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 0;
}

.rf-questions-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 4px;
}

.rf-questions-section__heading {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

.rf-question {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rf-question label,
.rf-question__group-label {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.rf-question__required {
    color: #b91c1c;
}

.rf-question__input,
.rf-question__textarea,
.rf-question__select {
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 13px;
    color: #111;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}

.rf-question__input:focus,
.rf-question__textarea:focus,
.rf-question__select:focus {
    outline: 2px solid #0055a5;
    outline-offset: 1px;
}

.rf-question__textarea {
    min-height: 72px;
    resize: vertical;
}

.rf-question--error .rf-question__input,
.rf-question--error .rf-question__textarea,
.rf-question--error .rf-question__select {
    border-color: #b91c1c;
}

.rf-question__error {
    font-size: 12px;
    color: #b91c1c;
}

.rf-question__radio-group,
.rf-question__checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
}

.rf-question__radio-label,
.rf-question__checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
}

.rf-question__radio-label input,
.rf-question__checkbox-label input {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #0055a5;
}

.rf-question--waiver {
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: #f9fafb;
}

.rf-question--waiver.rf-question--error {
    border-color: #b91c1c;
}

.rf-question__waiver-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    font-weight: 500;
}

.rf-question__waiver-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #0055a5;
}

.rf-question__waiver-label a {
    color: #6b3fa0;
}

.rf-container--wide {
    width: 760px;
}

.rf-ns-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

.rf-ns-section {
    border-bottom: 1px solid #e5e7eb;
    padding: 16px 24px;
}

.rf-ns-section:last-child {
    border-bottom: none;
}

.rf-ns-section__heading {
    font-size: 14px;
    font-weight: 700;
    color: #111;
    margin: 0 0 12px;
}

.rf-ns-info-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.rf-ns-info-row__item {
    font-size: 13px;
    color: #374151;
}

/* ── Success Screen ──────────────────────────────── */

.rf-container--success {
    width: 680px;
    overflow: visible;
}

.rf-success {
    display: flex;
    flex-direction: column;
}

.rf-success__closebar {
    display: flex;
    justify-content: flex-end;
    padding: 14px 16px 0;
}

.rf-success__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 36px 28px;
    text-align: center;
}

.rf-success__icon {
    font-size: 64px;
    line-height: 1;
    display: block;
    margin-bottom: 14px;
}

.rf-success__heading {
    font-size: 26px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 6px;
}

.rf-success__schedule-link {
    font-size: 14px;
    color: var(--rf-secondary, #DEC675);
    text-decoration: none;
    margin-bottom: 20px;
    display: block;
}

.rf-success__schedule-link:hover {
    text-decoration: underline;
}

.rf-success__addcal,
.rf-success__share {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    padding: 13px;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    margin-bottom: 10px;
    box-sizing: border-box;
    font-family: inherit;
}

.rf-success__addcal {
    background: var(--rf-secondary, #DEC675);
    color: #333;
    border: none;
}

.rf-success__addcal:hover {
    filter: brightness(0.88);
    color: #333;
}

.rf-success__share {
    background: #fff;
    color: #374151;
    border: 1px solid #d1d5db;
}

.rf-success__share:hover {
    background: #f9fafb;
}

/* ── Calendar section (success screen) ──────────── */

.rf-cal-section {
    width: 100%;
    margin-top: 4px;
    margin-bottom: 14px;
    text-align: left;
}

.rf-cal-section__heading {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

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

.rf-cal-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #e5e7eb;
}

.rf-cal-row:last-child {
    border-bottom: none;
}

.rf-cal-row__title {
    font-size: 13px;
    color: #374151;
    flex: 1;
    min-width: 0;
}

.rf-cal-dropdown {
    position: relative;
    flex-shrink: 0;
}

.rf-cal-dropdown__trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    background: #6c757d;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    letter-spacing: 0.03em;
}

.rf-cal-dropdown__trigger:hover {
    background: #5a6268;
}

.rf-cal-dropdown__trigger:focus {
    outline: 2px solid #0055a5;
    outline-offset: 2px;
}

.rf-cal-dropdown__menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    min-width: 130px;
    z-index: 10;
}

.rf-cal-dropdown__item {
    display: block;
    padding: 9px 14px;
    font-size: 13px;
    color: #374151;
    text-decoration: none;
    cursor: pointer;
}

.rf-cal-dropdown__item:hover {
    background: #f3f4f6;
    color: #111;
}

.rf-cal-dropdown__item:focus {
    outline: 2px solid #0055a5;
    outline-offset: -2px;
}

/* ── Footer error (no-shifts modal) ─────────────── */

.rf-footer__error {
    flex: 0 0 100%;
    order: -1;
    margin: 0 0 8px;
    font-size: 13px;
}

/* ── Double the Donation section ─────────────────── */

.rf-dtd {
    width: 100%;
    margin: 16px 0;
    padding: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fafafa;
}

.rf-dtd__search {
    position: relative;
}

.rf-dtd__label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 14px;
}

.rf-dtd__input-wrap {
    position: relative;
}

.rf-dtd__input {
    width: 100%;
    padding-right: 32px;
}

.rf-dtd__spinner {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border: 2px solid #ccc;
    border-top-color: #555;
    border-radius: 50%;
    animation: rf-spin 0.6s linear infinite;
}

@keyframes rf-spin {
    to { transform: translateY(-50%) rotate(360deg); }
}

.rf-dtd__results {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 10;
    background: #fff;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.rf-dtd__result {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
}

.rf-dtd__result:hover {
    background: #f0f0f0;
}

.rf-dtd__attribution {
    margin: 6px 0 0;
    font-size: 11px;
    color: #888;
}

.rf-dtd__attribution a {
    color: #888;
    text-decoration: underline;
}

.rf-dtd__result--no-match {
    border-top: 1px solid #e0e0e0;
    color: #555;
    font-style: italic;
}

.rf-dtd__match-confirm {
    font-size: 14px;
    margin-bottom: 12px;
}

.rf-dtd__program {
    margin-bottom: 12px;
}

.rf-dtd__program-heading {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #555;
}

.rf-dtd__program-detail {
    font-size: 14px;
    margin: 0;
}

.rf-dtd__program-list {
    margin: 0;
    padding-left: 18px;
    font-size: 14px;
}

.rf-dtd__program-list li {
    margin-bottom: 2px;
}

.rf-dtd__no-match-text {
    font-size: 14px;
    margin-bottom: 10px;
}

.rf-dtd__fallback-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rf-dtd__fallback-links li {
    margin-bottom: 6px;
    font-size: 13px;
}

.rf-dtd__change-employer {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    color: #888;
    text-decoration: underline;
    cursor: pointer;
    margin-top: 8px;
}

/* ── Select All checkbox (ShiftList header) ──────── */

.rf-shift-list__select-all {
    display: flex;
    align-items: center;
    margin-right: 8px;
}

.rf-shift-list__select-all input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #0055a5;
    flex-shrink: 0;
}

.rf-shift-list__select-all input[type="checkbox"]:focus {
    outline: 2px solid #0055a5;
    outline-offset: 2px;
}

/* ── Join Waitlist button (ShiftRow) ─────────────── */

.rf-shift-row__join-waitlist-btn {
    background: none;
    border: 1px solid #ea580c;
    color: #ea580c;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.4;
}

.rf-shift-row__join-waitlist-btn:hover {
    background: #fff7ed;
}

/* ── GC2-751: Name visibility preference step ─────────────── */

.rf-name-pref__heading {
    font-size: 18px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 10px;
    line-height: 1.3;
}

.rf-name-pref__sub {
    font-size: 14px;
    color: #374151;
    line-height: 1.6;
    margin: 0 0 20px;
}

.rf-name-pref__sub strong {
    color: #111827;
}

.rf-name-pref__options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.rf-name-pref__option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.rf-name-pref__option:hover {
    border-color: #0055a5;
    background: #f0f6ff;
}

.rf-name-pref__option--selected {
    border-color: #0055a5;
    background: #f0f6ff;
}

.rf-name-pref__option input[type="radio"] {
    width: 17px;
    height: 17px;
    accent-color: #0055a5;
    flex-shrink: 0;
    cursor: pointer;
    margin-top: 2px;
}

.rf-name-pref__option-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.rf-name-pref__option-desc {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

.rf-name-pref__footnote {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.5;
    margin: 0;
}

.rf-age-ineligible {
    text-align: center;
    padding: 24px 8px 8px;
}

.rf-age-ineligible__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #d95c1a;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.rf-age-ineligible__icon svg {
    width: 28px;
    height: 28px;
    fill: #fff;
}

.rf-age-ineligible__title {
    color: #111827;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
    margin: 8px 0 12px;
}

.rf-age-ineligible__message {
    font-size: 16px;
    color: #374151;
    margin: 0 0 20px;
}

/*!**************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./application/assets/js/app/components/LaunchedListShell/LaunchedListShell.css ***!
  \**************************************************************************************************************************************************************************/
.launched-list-shell {
    --lls-bg: #F4F3FA;
    background: var(--lls-bg);
    min-height: 100vh;
    padding: 0 24px 24px;
    border-top: 4px solid var(--lls-primary, #5C53FF);
    box-sizing: border-box;
}

.launched-list-shell__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 24px;
}

.launched-list-shell__clock-wrap {
    display: flex;
}

.launched-list-shell__logout-btn {
    padding: 8px 16px;
    border: 1px solid var(--lls-secondary, #E4E2F1);
    border-radius: 4px;
    background: #fff;
    color: rgb(78, 85, 95);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.launched-list-shell__logout-btn:hover,
.launched-list-shell__logout-btn:focus {
    background: var(--lls-bg, #F4F3FA);
    color: rgb(78, 85, 95);
    text-decoration: none;
}

/*
 * Mobile options menu -- hidden above 700px (same breakpoint
 * LaunchedListTable.css already uses for its own mobile layout), where
 * .launched-list-shell__logout-btn above is used instead. Below that width
 * a full "Log Out" button crowds the clock in the same header row, so it
 * collapses into an icon-only trigger + dropdown instead.
 */
.launched-list-shell__options {
    display: none;
}

@media (max-width: 700px) {
    .launched-list-shell__logout-btn {
        display: none;
    }

    .launched-list-shell__options {
        display: block;
        position: relative;
    }
}

.launched-list-shell__options-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--lls-secondary, #E4E2F1);
    border-radius: 4px;
    background: #fff;
    color: rgb(78, 85, 95);
    cursor: pointer;
}

.launched-list-shell__options-trigger:hover,
.launched-list-shell__options-trigger:focus {
    background: var(--lls-bg, #F4F3FA);
}

.launched-list-shell__options-trigger:focus-visible {
    outline: 2px solid var(--lls-primary, #5C53FF);
    outline-offset: 2px;
}

.launched-list-shell__options-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.launched-list-shell__options-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 140px;
    background: #fff;
    border: 1px solid var(--lls-secondary, #E4E2F1);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    padding: 4px;
    z-index: 10;
}

.launched-list-shell__options-item {
    display: block;
    padding: 8px 12px;
    border-radius: 4px;
    color: rgb(78, 85, 95);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.launched-list-shell__options-item:hover,
.launched-list-shell__options-item:focus {
    background: var(--lls-bg, #F4F3FA);
    color: rgb(78, 85, 95);
    text-decoration: none;
}

.launched-list-shell__options-item:focus-visible {
    outline: 2px solid var(--lls-primary, #5C53FF);
    outline-offset: 2px;
}

/*
 * Deliberately a distinct class from the legacy `.kiosk-clock`
 * (application/assets/less/layouts/views/_kiosk.less) even though the
 * visual rules below are copied from it verbatim. Reusing `.kiosk-clock`
 * here would make this element match the global jQuery selector in
 * application/assets/js/plugins/bindings.js, which polls
 * /home/ajaxGetClockTime/ and calls $(...).html() on any `.kiosk-clock`
 * node — colliding with React's ownership of this DOM node.
 */
/* Resized from 46px (centered-alone kiosk layout) down to fit naturally
   inline next to the Log Out button in a single header row. */
.launchedlist-clock {
    color: rgb(78, 85, 95);
    font-size: 28px;
    line-height: 1.2;
    margin: 0;
}

.launched-list-content-slot {
    max-width: 1100px;
    margin: 0 auto;
    padding-top: 16px;
}

/*!***************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./application/assets/js/app/components/LaunchedListContent/LaunchedListTabs.css ***!
  \***************************************************************************************************************************************************************************/
.launched-list-tabs {
    display: flex;
    gap: 4px;
    background: #F1F0FA;
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 16px;
}

.launched-list-tabs__button {
    flex: 1;
    text-align: center;
    padding: 9px 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgb(78, 85, 95);
    font-weight: 600;
    cursor: pointer;
}

/*
 * var(--lls-primary) as a direct TEXT color on a fixed white background
 * failed WCAG AA contrast for tenants with a light/bright primary_color
 * brand color (e.g. #02c26b measured at 2.35:1 here). Contrast ratio is
 * symmetric, so this is the same trap as the avatar fill in
 * LaunchedListTable.css (see that file's comment on
 * .launched-list-table__volunteer-cell): a tenant-controlled brand color
 * must never be used as a direct solid text/fill color paired with a
 * fixed counterpart color (white background OR white text) -- only as a
 * border/low-alpha tint. Per that same precedent, the literal #5C53FF
 * (not the CSS variable) is kept here as a fixed, pre-vetted color,
 * re-measured at ~5.08:1 on white, comfortably clearing the 4.5:1 AA
 * floor. No new colors introduced.
 */
.launched-list-tabs__button--active {
    background: #fff;
    color: #5C53FF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.launched-list-tabs__button:last-child.launched-list-tabs__button--active {
    color: #2E7D5B;
}

.launched-list-tabs__button:focus-visible {
    outline: 2px solid var(--lls-primary, #5C53FF);
    outline-offset: 2px;
}

/* Below 700px, bump tap-target padding for touch.
   Both buttons comfortably fit side-by-side at this width -- do not stack
   them vertically. */
@media (max-width: 700px) {
    .launched-list-tabs__button {
        padding: 12px 20px;
    }
}

/*!*****************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./application/assets/js/app/components/LaunchedListContent/LaunchedListSearch.css ***!
  \*****************************************************************************************************************************************************************************/
.launched-list-search {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
    max-width: 320px;
}

.launched-list-search__label {
    font-weight: 600;
    color: rgb(78, 85, 95);
}

.launched-list-search__input {
    padding: 8px 16px;
    border: 1px solid var(--lls-secondary, #E4E2F1);
    border-radius: 4px;
    background: #FFFFFF;
    color: rgb(78, 85, 95);
}

.launched-list-search__input:focus-visible {
    outline: 2px solid var(--lls-primary, #5C53FF);
    outline-offset: 2px;
}

/* Below 700px, a fixed 320px cap wastes space on a
   narrow touch screen -- go full-width and bump input padding for touch. */
@media (max-width: 700px) {
    .launched-list-search {
        max-width: none;
    }

    .launched-list-search__input {
        padding: 12px 16px;
    }
}

/*!************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./application/assets/js/app/components/CheckInTimeModal/CheckInTimeModal.css ***!
  \************************************************************************************************************************************************************************/
.check-in-time-modal__label {
    font-weight: 600;
    color: rgb(78, 85, 95);
    margin-bottom: 8px;
}

.check-in-time-modal__options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.check-in-time-modal__option {
    display: flex;
    align-items: center;
    gap: 8px;
}

/*
 * Modal.css's blanket ".modal-container input" rule (sized/positioned for a
 * different, search-style input) would otherwise stretch these radios to
 * 100% width/height. This selector's higher specificity (two classes + an
 * attribute selector vs. one class) overrides it without !important.
 */
.check-in-time-modal__option input[type="radio"] {
    width: 16px;
    height: 16px;
    min-height: 0;
    padding: 0;
    background: none;
    border: none;
}

.check-in-time-modal__option label {
    margin-bottom: 0;
}

.check-in-time-modal__custom-time {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
    max-width: 200px;
}

/* Same specificity reasoning as the radio override above. */
.check-in-time-modal__custom-time input[type="time"] {
    width: 100%;
    height: auto;
    min-height: 35px;
    padding: 8px 16px;
}

.check-in-time-modal__error {
    color: #B3261E;
    font-size: 13px;
    margin-bottom: 12px;
}

.check-in-time-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

/*!********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./application/assets/js/app/components/AddVolunteerModal/ExistingVolunteerSearch.css ***!
  \********************************************************************************************************************************************************************************/
.existing-volunteer-search__type-label {
    font-weight: 600;
    color: rgb(78, 85, 95);
    margin-bottom: 8px;
}

.existing-volunteer-search__type-options {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.existing-volunteer-search__type-option {
    display: flex;
    align-items: center;
    gap: 6px;
}

/*
 * QA fix: Modal.css excludes radio/checkbox from width/height, but its
 * padding (padding-left: .875rem, padding-top/bottom: 5px) and
 * border/background still applied to the radio's box, shifting it a couple
 * pixels off from the label's vertical center -- these radios only looked
 * passable, not actually correctly aligned. Same explicit neutralization
 * CheckInTimeModal.css already uses correctly for its own radios.
 */
.existing-volunteer-search__type-option input[type="radio"] {
    width: 16px;
    height: 16px;
    min-height: 0;
    padding: 0;
    background: none;
    border: none;
    margin: 0;
}

.existing-volunteer-search__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

/*
 * Same higher-specificity override as AddVolunteerModal.css -- Modal.css's
 * blanket ".modal-container input" rule is sized/positioned for a
 * different, search-style input.
 */
.existing-volunteer-search__field input[type="text"],
.existing-volunteer-search__field input[type="tel"],
.existing-volunteer-search__field input[type="email"] {
    width: 100%;
    height: auto;
    min-height: 35px;
    padding: 8px 16px;
}

.existing-volunteer-search__term-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.existing-volunteer-search__term-row input {
    flex: 1;
}

.existing-volunteer-search__error {
    color: #B3261E;
    font-size: 13px;
    margin-top: 4px;
    margin-bottom: 12px;
}

.existing-volunteer-search__no-results {
    color: rgb(78, 85, 95);
    margin-bottom: 12px;
}

.existing-volunteer-search__results {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.existing-volunteer-search__results li + li {
    border-top: 1px solid #e0e0e0;
}

.existing-volunteer-search__result {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 8px 16px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
}

.existing-volunteer-search__result:hover,
.existing-volunteer-search__result:focus {
    background-color: #f5f5f5;
}

/*
 * "already on this need's roster" badges. Shape/sizing mirrors this
 * codebase's existing badge convention (e.g. LaunchedListTable.css's
 * Full/Overbooked badges) -- inline pill, uppercase, bold, border + light
 * tint background.
 *
 * Amber (not-checked-in) reuses the exact background/text/border trio
 * already independently contrast-checked for LaunchedListTable.css's "Full"
 * badge (#8A5A00 on #FFF3E0, border #F0C48A) rather than picking an
 * unvetted new amber -- #8A5A00 measures ~5.93:1 against plain white and
 * ~5.41:1 against its own #FFF3E0 background, both comfortably clearing the
 * 4.5:1 AA floor for normal-size text.
 */
.existing-volunteer-search__roster-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
    border-radius: 10px;
    padding: 2px 9px;
    margin-top: 4px;
}

.existing-volunteer-search__roster-badge--not-checked-in {
    background: #FFF3E0;
    color: #8A5A00;
    border: 1px solid #F0C48A;
}

/*
 * "Checked In" badge sits on a visibly greyed-out, disabled row -- text is
 * the accessible signal (not color alone). #5A5A5A measures ~6.9:1 against
 * plain white and ~5.89:1 against its own #EDEDED background, both
 * comfortably clearing 4.5:1. These numbers are only trustworthy, though, if
 * nothing upstream re-composites this badge at reduced opacity -- see the
 * QA-fix note below, which is why opacity is no longer applied to the whole
 * disabled <button>.
 */
.existing-volunteer-search__roster-badge--checked-in {
    background: #EDEDED;
    color: #5A5A5A;
    border: 1px solid #D6D6D6;
}

/*
 * A disabled <button>'s own `opacity` composites its
 * ENTIRE subtree (button + all descendants, including this "Checked In"
 * badge) as one group onto the page background -- a descendant setting its
 * own `opacity: 1` cannot undo that, opacity multiplies down the tree. The
 * original `opacity: 0.55` on `.existing-volunteer-search__result:disabled`
 * washed the badge out to ~2.28:1 (text vs its own bg) / ~2.49:1 (text vs
 * page white), both failing the 4.5:1 AA floor.
 *
 * Fix: opacity is applied to the specific text elements that should read as
 * dimmed (name, secondary label) instead of the button itself. The badge is
 * never a descendant of anything opacity-reduced, so its own #5A5A5A on
 * #EDEDED renders at full, unmodified contrast (~6.9:1 / ~5.89:1, see
 * above) while the row still visually reads as inactive via the dimmed
 * name/secondary text plus `cursor: not-allowed` and the disabled/unhoverable
 * state below.
 */
.existing-volunteer-search__result:disabled .existing-volunteer-search__result-name,
.existing-volunteer-search__result:disabled .existing-volunteer-search__result-secondary {
    opacity: 0.55;
}

/*
 * A genuinely-disabled native <button> -- not a CSS look-alike --
 * so it correctly blocks both mouse and keyboard activation and is
 * unfocusable via Tab. `cursor: not-allowed` plus the dimmed name/secondary
 * text above (rather than opacity on the button itself) are the visual
 * secondary cue; the "Checked In" badge text is the actual accessible/
 * semantic signal and must stay at full, unreduced contrast.
 */
.existing-volunteer-search__result:disabled {
    cursor: not-allowed;
}

.existing-volunteer-search__result:disabled:hover,
.existing-volunteer-search__result:disabled:focus {
    background-color: transparent;
}

.existing-volunteer-search__result--selected {
    background-color: #e8f0fe;
    border-left: 3px solid #1a73e8;
}

.existing-volunteer-search__result-name {
    font-weight: 600;
}

.existing-volunteer-search__result-secondary {
    font-size: 13px;
    color: rgb(78, 85, 95);
}

.existing-volunteer-search__result-selected-flag {
    font-size: 12px;
    font-weight: 600;
    color: #1a73e8;
    margin-top: 2px;
}

/*
 * "Selected Volunteer" lock-in card, shown once a search result has
 * been chosen -- replaces the search-type selector/input/results list
 * entirely (not layered over it).
 */
.existing-volunteer-search__selected-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #f5f5f5;
}

.existing-volunteer-search__selected-avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #5C53FF;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
}

.existing-volunteer-search__selected-info {
    display: flex;
    flex-direction: column;
    /* Without this, a long unbroken email forces this flex item past the
       container's width instead of shrinking to fit -- the classic flexbox
       min-width:auto overflow trap. Matches the prototype's own fix
       (avSelectedSummaryContent's info div: `flex:1;min-width:0;`). */
    flex: 1 1 auto;
    min-width: 0;
}

.existing-volunteer-search__selected-label {
    font-weight: 600;
    color: rgb(78, 85, 95);
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.existing-volunteer-search__selected-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.existing-volunteer-search__selected-name {
    font-weight: 600;
    overflow-wrap: break-word;
}

.existing-volunteer-search__selected-email,
.existing-volunteer-search__selected-phone {
    font-size: 13px;
    color: rgb(78, 85, 95);
    overflow-wrap: break-word;
}

.existing-volunteer-search__selected-card .btn {
    flex-shrink: 0;
}

/*
 * Real per-user requirements warning -- amber, distinct from the
 * red error style above (informational only, never blocks Submit). Same
 * #8A5A00 on #FFF3E0 already contrast-vetted for the Full/roster-status
 * badges above (~5.41:1).
 */
.existing-volunteer-search__requirements-warning {
    background: #FFF3E0;
    color: #8A5A00;
    font-size: 13px;
    border: 1px solid #F0C48A;
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 16px;
}

.existing-volunteer-search__requirements-lead {
    margin: 0 0 6px;
}

.existing-volunteer-search__requirements-list {
    margin: 0;
    padding-left: 16px;
}

.existing-volunteer-search__requirements-list li {
    margin-bottom: 3px;
}

.existing-volunteer-search__requirements-list li:last-child {
    margin-bottom: 0;
}

/* GC2-866: Close (left) + Submit (right) in one row -- space-between,
   not flex-end, now that Close lives in this same row instead of a
   separate full-width row below it. */
.existing-volunteer-search__actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 16px;
}

/*!**************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./application/assets/js/app/components/AddVolunteerModal/AddVolunteerModal.css ***!
  \**************************************************************************************************************************************************************************/
.add-volunteer-modal__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

/* role="group" + aria-pressed on plain buttons, not role="tablist"/role="tab" --
 * no roving-tabindex need for just two toggles. */
.add-volunteer-modal__tabs {
    display: flex;
    gap: 4px;
    background: #F1F0FA;
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 16px;
}

.add-volunteer-modal__tab {
    flex: 1;
    text-align: center;
    padding: 9px 0;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    background: transparent;
    color: rgb(78, 85, 95);
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.add-volunteer-modal__tab--active {
    background: #fff;
    color: var(--lls-primary, #5C53FF);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.add-volunteer-modal__tab:focus-visible {
    outline: 2px solid var(--lls-primary, #5C53FF);
    outline-offset: 2px;
}

/*
 * tab-panel's min-height is set from JS to the tallest content seen so far
 * this time the modal is open (AddVolunteerModal.jsx) -- keeps the modal's
 * overall height, and therefore its centered position, from jumping when
 * switching between New Volunteer's longer form and Existing Volunteer's
 * shorter search. tab-panel-inner is remounted (React key={mode}) on every
 * switch so this animation reliably replays each time.
 */
.add-volunteer-modal__tab-panel {
    transition: min-height 0.2s ease;
}

.add-volunteer-modal__tab-panel-inner {
    animation: add-volunteer-modal-tab-fade-in 0.22s ease;
}

@keyframes add-volunteer-modal-tab-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .add-volunteer-modal__tab {
        transition: none;
    }

    .add-volunteer-modal__tab-panel {
        transition: none;
    }

    .add-volunteer-modal__tab-panel-inner {
        animation: none;
    }
}

/*
 * Modal.css's blanket ".modal-container input" rule (sized/positioned for a
 * different, search-style input) is overridden the same way
 * CheckInTimeModal.css does for its own inputs -- higher specificity (two
 * classes + an attribute selector vs. one class), no !important.
 */
.add-volunteer-modal__field input[type="text"],
.add-volunteer-modal__field input[type="tel"],
.add-volunteer-modal__field input[type="email"] {
    width: 100%;
    height: auto;
    min-height: 35px;
    padding: 8px 16px;
}

.add-volunteer-modal__error {
    color: #B3261E;
    font-size: 13px;
    margin-top: 4px;
    margin-bottom: 12px;
}

/*
 * Requirements warning -- amber, distinct from the red error style
 * above (this is informational, never blocks submission). Reuses the same
 * #8A5A00 on #FFF3E0 already contrast-vetted for the Full badge
 * (LaunchedListTable.css, ~5.41:1) rather than introducing a new color.
 */
.add-volunteer-modal__requirements-warning {
    background: #FFF3E0;
    color: #8A5A00;
    font-size: 13px;
    border: 1px solid #F0C48A;
    border-radius: 4px;
    padding: 10px 12px;
    margin-bottom: 16px;
}

.add-volunteer-modal__requirements-lead {
    margin: 0 0 6px;
}

.add-volunteer-modal__requirements-list {
    margin: 0;
    padding-left: 16px;
}

.add-volunteer-modal__requirements-list li {
    margin-bottom: 3px;
}

.add-volunteer-modal__requirements-list li:last-child {
    margin-bottom: 0;
}

.add-volunteer-modal__emergency-contact {
    border-top: 1px solid #e0e0e0;
    margin-top: 4px;
    margin-bottom: 16px;
    padding-top: 12px;
}

.add-volunteer-modal__group-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 700;
    color: rgb(78, 85, 95);
    margin-bottom: 8px;
}

.add-volunteer-modal__optional-tag {
    text-transform: none;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0;
}

.add-volunteer-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

/*!**********************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./application/assets/js/app/components/EmergencyContactModal/EmergencyContactModal.css ***!
  \**********************************************************************************************************************************************************************************/
.emergency-contact-modal__details {
    margin: 0 0 16px;
}

.emergency-contact-modal__details dt {
    font-weight: 600;
    color: rgb(78, 85, 95);
}

.emergency-contact-modal__details dd {
    margin: 0 0 12px;
}

.emergency-contact-modal__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

/*!**************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./application/assets/js/app/components/LaunchedListTable/LaunchedListTable.css ***!
  \**************************************************************************************************************************************************************************/
/*
 * Per-opportunity container. `border-collapse: separate` (scoped to this
 * table only) is required for a tbody's own border/border-radius to render
 * at all -- under the default `collapse` model, borders set on a row group
 * are merged away by the collapsing-border algorithm and never paint.
 * `border-spacing: 0` keeps cells flush (no unwanted gap appears inside a
 * group as a side effect of switching models); `overflow: hidden` clips the
 * title row's gray background (and any `data-late` row tint) to the
 * rounded corners instead of letting them square off.
 */
.launched-list-table {
    border-collapse: separate;
    border-spacing: 0;
}

.launched-list-table__group {
    border: 1px solid var(--lls-secondary, #E4E2F1);
    border-radius: 8px;
    overflow: hidden;
}

/*
 * QA fix (GC2-873 follow-up): `margin` does not apply to a `table-row-group`
 * box per the CSS spec (this is standards-compliant behavior, not an engine
 * quirk) -- so a `margin-top` here was silently ignored at desktop widths,
 * leaving adjacent groups' 1px borders flush against each other with no gap.
 * `border-top` DOES apply to a row-group box under the `border-collapse:
 * separate` model already in effect on this table (see the comment at the
 * top of this file), so a transparent spacer border is used instead. This
 * only overrides the top side of the group's own `border` shorthand above
 * (higher-specificity adjacent-sibling selector); left/right/bottom stay
 * the 1px solid color. Combined with that 1px border-bottom on the group
 * above it, the visible gap is ~17px, matching the ~16-20px gap the
 * margin-based rule was aiming for.
 */
.launched-list-table__group + .launched-list-table__group {
    border-top: 16px solid transparent;
}

/* "Checked in at [time]" line under the volunteer's name on the
   Checked In tab -- rgb(78, 85, 95) matches the muted secondary-text color
   already used elsewhere in this feature (e.g. LaunchedListSearch's label). */
.launched-list-table__checked-in-label {
    font-size: 12px;
    color: rgb(78, 85, 95);
}

/*
 * Minimal initials avatar + checked badge, added purely as a host
 * element for the prototype's checkmark badge (`.avatarCircle` +
 * `.checkedBadge`) -- RosterRow had no element to attach the badge to
 * before this. Both are decorative (aria-hidden in RosterRow.jsx); the
 * adjacent volunteer name text remains the accessible name for the cell.
 *
 * Fix: the avatar background must NOT be var(--lls-primary), the
 * tenant-controlled brand color, under fixed white text -- this exact
 * pattern already fails WCAG AA for light/bright tenant colors
 * (e.g. #02c26b at 2.35:1). Per that same fix pattern (see the
 * comment in LaunchedListTabs.css), tenant brand color is only ever used as
 * a border/low-alpha tint, never a solid fill under fixed-color text. So
 * the literal #5C53FF (not the CSS variable) is kept here as a fixed,
 * pre-vetted solid fill, re-measured with white text on top at ~5.08:1,
 * comfortably clearing the 4.5:1 AA floor; #2E7D5B is the same green
 * already used for the Checked-In tab accent above, also re-measured at
 * ~5.0:1+. No new colors introduced.
 */
.launched-list-table__volunteer-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.launched-list-table__name-block {
    min-width: 0;
}

/*
 * Volunteer name rendered as a clickable button opening the
 * Emergency Contact modal (only when PII is included, see RosterRow.jsx).
 * Reuses the same #4A47A3 already contrast-vetted for
 * .launched-list-table__add-volunteer-button above (~7.2:1 on white).
 */
.launched-list-table__volunteer-name-link {
    border: none;
    background: none;
    color: #4A47A3;
    font: inherit;
    font-weight: 600;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}

.launched-list-table__volunteer-name-link:focus-visible {
    outline: 2px solid #4A47A3;
    outline-offset: 2px;
}

/*
 * First-Time badge, next to the volunteer's name. #0B5FA5 on
 * #E3F1FC re-measured at ~5.3:1, clearing the 4.5:1 AA floor for normal
 * text -- a distinct blue from the Full/Overbooked (amber/red) and
 * bulk-action (brown/orange) accents already used elsewhere in this table,
 * so it doesn't read as any of those existing states.
 */
/*
 * Late badge + row highlight. Colors taken directly from the prototype
 * (GC-CheckInListForAdmins-Prototype-v45.html: --late-bg #FDEDEC,
 * --late-border #E8A3A3, --late-text #B23A3A, .lateFlag/.volRow.late) --
 * #B23A3A text is the same red already contrast-vetted for the Overbooked
 * badge above (~4.88:1 there; this badge uses it on white, ~5.5:1, clearing
 * the 4.5:1 AA floor with more room). Row highlight is a background tint
 * only -- never the sole indicator of lateness, the "Late" badge/text
 * carries that meaning too.
 */
.launched-list-table tbody tr[data-late="true"] {
    background: #FDEDEC;
}

.launched-list-table__late-badge {
    display: inline-block;
    background: #fff;
    color: #B23A3A;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
    border: 1px solid #E8A3A3;
    border-radius: 10px;
    padding: 1px 7px;
    margin-left: 6px;
    vertical-align: middle;
}

.launched-list-table__first-time-badge {
    display: inline-block;
    background: #E3F1FC;
    color: #0B5FA5;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
    border: 1px solid #A9D2F0;
    border-radius: 10px;
    padding: 1px 7px;
    margin-left: 6px;
    vertical-align: middle;
}

.launched-list-table__avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.launched-list-table__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #5C53FF;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
}

.launched-list-table__checked-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #2E7D5B;
    color: #fff;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
}

/*
 * Light gray title-row background (#F3F4F6). Every text color already
 * used on this row was originally vetted only against white -- re-checked
 * here against #F3F4F6 specifically: title (#212529 default body text)
 * stays well above 4.5:1, and .launched-list-table__source/__shift/__capacity
 * (rgb(78, 85, 95), same muted color used elsewhere in this feature) remain
 * comfortably above 4.5:1 against this background too (contrast only
 * improves versus white, since #F3F4F6 is darker). The Full/Overbooked
 * badges below carry their own background pill (#FFF3E0 / #FCE4E4), so their
 * already-vetted text/background contrast is unaffected by the row behind
 * them.
 */
.launched-list-table__title-row th {
    font-size: 18px;
    font-weight: 700;
    padding-top: 16px;
    padding-bottom: 16px;
    background: #F3F4F6;
}

.launched-list-table__title-row-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.launched-list-table__title-main {
    min-width: 0;
}

.launched-list-table__title {
    display: block;
}

.launched-list-table__title-subline {
    display: block;
    margin-top: 2px;
    font-weight: 400;
    font-size: 14px;
}

.launched-list-table__title-meta {
    flex-shrink: 0;
    text-align: right;
    white-space: nowrap;
}

.launched-list-table__source,
.launched-list-table__shift {
    font-weight: 400;
    font-size: 14px;
}

/*
 * Capacity text + Full/Overbooked badges. Colors come from the
 * prototype (GC-CheckInListForAdmins-Prototype-v45.html, .fullBadge /
 * .overbookedBadge) and have been independently contrast-checked: Full
 * (#8A5A00 on #FFF3E0) ~5.41:1, Overbooked (#B23A3A on #FCE4E4) ~4.88:1 --
 * both clear the 4.5:1 AA floor for normal text. Badges are mutually
 * exclusive (never both render together, see LaunchedListTable.jsx).
 */
.launched-list-table__capacity {
    font-weight: 400;
    font-size: 14px;
}

.launched-list-table__full-badge {
    display: inline-block;
    background: #FFF3E0;
    color: #8A5A00;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
    border: 1px solid #F0C48A;
    border-radius: 10px;
    padding: 2px 9px;
    margin-left: 6px;
}

.launched-list-table__overbooked-badge {
    display: inline-block;
    background: #FCE4E4;
    color: #B23A3A;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .3px;
    border: 1px solid #E8A3A3;
    border-radius: 10px;
    padding: 2px 9px;
    margin-left: 6px;
}

/* Check Out Selected failure -- same red already contrast-vetted
   for this feature's other inline errors (CheckInTimeModal.css,
   AddVolunteerModal.css). */
.launched-list-table__error {
    color: #B3261E;
    font-size: 13px;
}

.launched-list-table__header-row th {
    font-weight: 600;
    border-bottom: 2px solid var(--lls-secondary, #E4E2F1);
    border-top: 1px solid var(--lls-secondary, #E4E2F1);
}

.launched-list-table__header-row[data-active-tab="toCheckIn"] th {
    border-bottom-color: var(--lls-primary, #5C53FF);
    background: rgba(92, 83, 255, 0.06);
}

.launched-list-table__header-row[data-active-tab="checkedIn"] th {
    border-bottom-color: #2E7D5B;
    background: rgba(46, 125, 91, 0.08);
}

/*
 * Select-All + bulk-action accent, intentionally distinct from
 * the tab accents above (purple/green) since no other row action exists
 * yet in this table. #9E4808 (darkened from the originally-proposed
 * #B45309) was re-measured by QA against every real background it
 * actually renders over: white table rows (6.21:1), the tab-tinted
 * header background (5.60-5.72:1), and worst case, the bulk button's own
 * low-alpha fill layered on top of the header tint (4.99-5.10:1) -- all
 * comfortably clear the 4.5:1 AA floor. #B45309 was rejected during
 * implementation for measuring too close to that floor (~4.55:1).
 */
/*
 * QA fix: display:flex must NOT go on .launched-list-table__action-col
 * itself -- that class is the <th>, and setting display:flex there
 * overrides its native table-cell display type, breaking border-collapse's
 * border-merging for this one cell (confirmed live: a visible gap in the
 * header row's accent-colored divider line, only under this column). Flex
 * lives on the inner wrapper div instead; the <th> stays a genuine table
 * cell so its border-bottom collapses identically to its 3 siblings.
 */
.launched-list-table__action-col-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.launched-list-table input[type="checkbox"] {
    accent-color: #9E4808;
}

.launched-list-table__bulk-action {
    border: 1px solid #9E4808;
    background: rgba(158, 72, 8, 0.08);
    color: #9E4808;
    font-weight: 600;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.launched-list-table__bulk-action:focus-visible {
    outline: 2px solid #9E4808;
    outline-offset: 2px;
}

/*
 * "+ Add a volunteer" entry point (toCheckIn tab only). Styled as a
 * plain text-link-style button, distinct from the bulk-action button above,
 * since it's a standalone row action rather than tied to a selection.
 * #4A47A3 on white measures ~7.2:1, comfortably clearing the 4.5:1 AA floor.
 */
.launched-list-table__add-volunteer-row td {
    padding-top: 8px;
    padding-bottom: 8px;
    border-top: none;
}

.launched-list-table__add-volunteer-button {
    border: none;
    background: none;
    color: #4A47A3;
    font-weight: 600;
    font-size: 13px;
    padding: 4px 0;
    cursor: pointer;
    text-decoration: underline;
}

.launched-list-table__add-volunteer-button:focus-visible {
    outline: 2px solid #4A47A3;
    outline-offset: 2px;
}

/*
 * Below 700px, collapse the continuous table to a
 * stacked-card layout. No dual render paths -- the same <table>/<th>/<td>
 * markup stays mounted at every viewport width, this is CSS-only. Each
 * data <td> shows its own visible label via `data-label` (see RosterRow.jsx)
 * rendered through ::before, since the real column headers are hidden here
 * as redundant. Title rows and the three empty/no-match status rows
 * (`.launched-list-table__status-row`, added in LaunchedListTable.jsx) are
 * excluded from the card-border treatment -- they're full-width status
 * text, not data rows.
 */
@media (max-width: 700px) {
    .launched-list-table,
    .launched-list-table tbody,
    .launched-list-table tr,
    .launched-list-table td,
    .launched-list-table th {
        display: block;
        width: 100%;
    }

    /*
     * Mobile bug: this table is wrapped in Bootstrap's own
     * `.table-responsive` container, whose own mobile stylesheet rule
     * (`.table-responsive > .table > tbody > tr > th`, `max-width: 767px`)
     * has HIGHER specificity (2 classes + 3 tag selectors) than a plain
     * `.launched-list-table th` (1 class + 1 tag) -- so Bootstrap's
     * `white-space: nowrap` always won regardless of this rule's own
     * `max-width: 700px` matching, forcing every title-row cell (opportunity
     * name/source/shift/capacity text) to overflow off-screen uncut instead
     * of wrapping. Confirmed live via computed-style + matched-rules
     * inspection, not guessed. Fixed by out-specificity-ing Bootstrap's
     * selector with the actual wrapper classes (`table-responsive table-data`,
     * confirmed via the rendered DOM) rather than reaching for `!important`.
     */
    .table-responsive.table-data .launched-list-table td,
    .table-responsive.table-data .launched-list-table th {
        white-space: normal;
    }

    /* Column headers become redundant once each <td> carries its own
       data-label -- hide them, but keep the Select-All/bulk-action header
       cell visible as a small toolbar. Targeted by class, not column
       position, so this still holds after the leftmost-column reorder. */
    .launched-list-table__header-row th:not(.launched-list-table__action-col) {
        display: none;
    }

    .launched-list-table tr.launched-list-table__header-row {
        display: flex;
    }

    /* Mobile abandons table semantics for this row entirely (the <tr>
       itself is flex, above), so border-collapse concerns don't apply here
       -- width:100% on the <th> makes it fill the row; the inner div (its
       sole child) handles the actual checkbox/button layout. */
    .launched-list-table__header-row .launched-list-table__action-col {
        width: 100%;
    }

    .launched-list-table__header-row .launched-list-table__action-col-inner {
        justify-content: flex-start;
    }

    /* Roster rows only -- not the title row, not the header/toolbar row,
       not the empty/no-matches status rows. */
    .launched-list-table tbody tr:not(.launched-list-table__title-row):not(.launched-list-table__header-row):not(.launched-list-table__status-row):not(.launched-list-table__add-volunteer-row) {
        border: 1px solid var(--lls-secondary, #E4E2F1);
        border-radius: 4px;
        padding: 12px;
        margin-bottom: 8px;
    }

    .launched-list-table tbody tr:not(.launched-list-table__title-row):not(.launched-list-table__header-row):not(.launched-list-table__status-row):not(.launched-list-table__add-volunteer-row) td[data-label] {
        padding: 4px 0;
    }

    .launched-list-table tbody tr:not(.launched-list-table__title-row):not(.launched-list-table__header-row):not(.launched-list-table__status-row):not(.launched-list-table__add-volunteer-row) td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        display: block;
        font-size: 12px;
    }

    /* Touch sizing: bump checkbox size and bulk-action button padding
       closer to a 44px effective tap target (cell padding makes up the
       rest -- an oversized native checkbox looks broken at desktop-adjacent
       tablet widths, so this stays modest). */
    .launched-list-table input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }

    .launched-list-table__bulk-action {
        padding: 10px 16px;
    }
}

/*
 * Check-in/check-out success confirmation icon. Circle and checkmark are
 * each drawn via a stroke-dasharray/stroke-dashoffset reveal -- dasharray is
 * set to (approximately) each path's own total length so the offset
 * animation travels its full length exactly once. #2E7D5B matches this
 * file's existing checked-in/success green (see the checkedIn tab accent
 * above), already vetted for contrast against this modal's white background.
 */
.launched-list-table__confirmation {
    text-align: center;
}

.launched-list-table__confirmation-check {
    width: 72px;
    height: 72px;
    margin: 0 auto 12px;
    display: block;
}

.launched-list-table__confirmation-check-circle {
    stroke: #2E7D5B;
    stroke-width: 2;
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
    animation: launched-list-table__draw-check 0.5s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.launched-list-table__confirmation-check-mark {
    stroke: #2E7D5B;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 36;
    stroke-dashoffset: 36;
    animation: launched-list-table__draw-check 0.25s cubic-bezier(0.65, 0, 0.45, 1) 0.5s forwards;
}

@keyframes launched-list-table__draw-check {
    to {
        stroke-dashoffset: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .launched-list-table__confirmation-check-circle,
    .launched-list-table__confirmation-check-mark {
        animation: none;
        stroke-dashoffset: 0;
    }
}