/* Shared project remarks, announcement, and handover styles. */
:root {
    --project-remarks-background: #f3f8ff;
    --project-remarks-border: #dbe8fb;
    --project-remarks-ink: #466084;
    --announcement-background: #fff8d6;
    --announcement-border: #efd27a;
    --announcement-ink: #6f5a1e;
    --handover-background: #fff1e3;
    --handover-border: #efbf8e;
    --handover-ink: #855025;
}

/* The editor mirrors the remarks panel shown before login. */
body.app-readable :is(.user-login-page .remarks_box, .registration-box .remarks-textarea) {
    padding: 18px 22px !important;
    overflow-wrap: anywhere;
    border-width: 1px;
    border-style: solid;
    border-radius: 8px;
    background-color: var(--project-remarks-background) !important;
    color: var(--project-remarks-ink) !important;
    font-size: var(--app-body-font-size);
    line-height: 1.75 !important;
}
body.app-readable .user-login-page .remarks_box {
    border-color: var(--project-remarks-border);
}
body.app-readable .registration-box .remarks-textarea:not(.is-invalid):not(.is-valid) {
    border-color: var(--project-remarks-border) !important;
    border-radius: 8px;
}
body.app-readable .registration-box .remarks-textarea:focus {
    box-shadow: 0 0 0 3px #dbe8fb80 !important;
}
body.app-readable .registration-box .remarks-textarea::placeholder {
    color: #8a9bb2;
    opacity: 1;
}

/* Keep the same colors when page and editor themes style these controls. */
body.app-readable :is(.app-announcement, .app-announcement > td, .announce-textarea) {
    background-color: var(--announcement-background) !important;
    color: var(--announcement-ink) !important;
}
body.app-readable :is(.app-handover, .handover-note-textarea) {
    background-color: var(--handover-background) !important;
    color: var(--handover-ink) !important;
}
body.app-readable :is(.app-announcement, .app-announcement > td, .announce-textarea:not(.is-invalid):not(.is-valid)) {
    border-color: var(--announcement-border) !important;
}
body.app-readable :is(.app-handover, .handover-note-textarea:not(.is-invalid):not(.is-valid)) {
    border-color: var(--handover-border) !important;
}
body.app-readable .app-announcement .user-notice-heading {
    color: var(--announcement-ink);
}
body.app-readable .app-handover {
    padding: 10px 12px;
    border: 1px solid var(--handover-border);
    border-radius: 6px;
}
body.app-readable .management-list-page--project .management-project-note.app-handover,
body.app-readable .management-form-project-info-note.app-handover {
    border: 0;
}
body.app-readable .app-handover:has(.customer-project-handover-label) {
    border: 0;
}
body.app-readable .app-handover dt { color: var(--handover-ink); }
body.app-readable .announce-textarea:focus {
    box-shadow: 0 0 0 3px #efd27a40 !important;
}
body.app-readable .handover-note-textarea:focus {
    box-shadow: 0 0 0 3px #efbf8e40 !important;
}
body.app-readable .registration-box .announce-textarea::placeholder { color: #9a8649; opacity: 1; }
body.app-readable .registration-box .handover-note-textarea::placeholder { color: #a37751; opacity: 1; }

/* Administrator memo fields share a neutral gray palette. */
body.app-readable:has(#administrator-sidebar) {
    --handover-background: #f5f5f5;
    --handover-border: #dedede;
    --handover-ink: #555;
}
body.app-readable:has(#administrator-sidebar) :is(textarea[name="remarks"]:not(.remarks-textarea), .remarks-box, .remarks_box, .admin-memo) {
    background-color: var(--handover-background) !important;
    color: var(--handover-ink) !important;
}
body.app-readable:has(#administrator-sidebar) :is(textarea[name="remarks"]:not(.remarks-textarea), .remarks-box, .remarks_box, .admin-memo):not(.is-invalid):not(.is-valid) {
    border-color: var(--handover-border) !important;
}
body.app-readable:has(#administrator-sidebar) :is(.handover-note-textarea, textarea[name="remarks"]:not(.remarks-textarea)):focus {
    box-shadow: 0 0 0 3px #dedede40 !important;
}
body.app-readable:has(#administrator-sidebar) :is(.handover-note-textarea, textarea[name="remarks"]:not(.remarks-textarea))::placeholder {
    color: #888;
    opacity: 1;
}
body.app-readable:has(#administrator-sidebar) .admin-memo {
    padding: 10px 12px;
    border: 1px solid var(--handover-border);
    border-radius: 6px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Project identity in the user settings editor. */
body.app-readable .registration-box .project-settings-project-name {
    color: #183451;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Shared payment prerequisite cards in administrator and user settings. */
.participation-registration-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

#save-form .participation-registration-cards .form-check {
    --participation-accent: #0866f9;
    --participation-hover-border: #86b4fb;
    --participation-hover-background: #f3f8ff;
    --participation-selected-background: #edf5ff;
    --participation-shadow: #0866f914;
    flex: 1 1 280px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
    min-height: 180px;
    margin: 0;
    padding: 24px;
    border: 1px solid #dce5f0;
    border-radius: 12px;
    background: #f8fafd;
    cursor: pointer;
}

#save-form .participation-registration-cards .form-check[for="entry_registration_required_flg_1"],
#save-form .participation-registration-cards .participation-card--required {
    --participation-accent: #dc3545;
    --participation-hover-border: #efa2aa;
    --participation-hover-background: #fff5f5;
    --participation-selected-background: #fff0f1;
    --participation-shadow: #dc354514;
}

#save-form .participation-registration-cards .form-check:not(.participation-card--readonly):hover {
    border-color: var(--participation-hover-border);
    background: var(--participation-hover-background);
}

#save-form .participation-registration-cards .form-check:has(input:checked),
#save-form .participation-registration-cards .form-check.is-selected {
    border-color: var(--participation-accent);
    background: var(--participation-selected-background);
}

#save-form .participation-registration-cards .form-check:has(input:focus-visible) {
    outline: 3px solid var(--participation-hover-border);
    outline-offset: 3px;
}

#save-form .participation-registration-cards .form-check-input {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin: 0;
    float: none;
    cursor: pointer;
}

#save-form .participation-registration-cards .form-check-input:checked {
    border-color: var(--participation-accent);
    background-color: var(--participation-accent);
}

#save-form .participation-registration-cards .form-check-input:focus {
    border-color: var(--participation-accent);
    box-shadow: 0 0 0 3px var(--participation-shadow);
}

.participation-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    gap: 12px;
}

.participation-card-title {
    color: #183451;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.55;
}

.participation-card-description {
    color: #607693;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
}

.participation-card-status {
    visibility: hidden;
    padding: 3px 10px;
    border-radius: 20px;
    background: var(--participation-accent);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.participation-registration-cards .form-check:has(input:checked) .participation-card-status,
.participation-registration-cards .form-check.is-selected .participation-card-status {
    visibility: visible;
}

#save-form .participation-registration-cards .form-check.participation-card--readonly {
    border-width: 1px;
    box-shadow: none;
    cursor: default;
}
#save-form .participation-registration-cards .participation-card--readonly.is-inactive {
    --participation-accent: #8a939f;
    background: #f2f3f5;
    border-color: #d9dde3;
    box-shadow: none;
}
#save-form .participation-registration-cards .participation-card--readonly.is-inactive .participation-card-title {
    color: #727c89;
}
#save-form .participation-registration-cards .participation-card--readonly.is-inactive .participation-card-description {
    color: #727c89;
}
#save-form .participation-registration-cards .participation-card--readonly.is-inactive .participation-card-status {
    visibility: visible;
    background: #e1e5ea;
    color: #65717f;
}
#save-form .participation-registration-cards .participation-card-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--participation-accent);
    font-size: 28px;
    line-height: 1;
    cursor: default;
}