/* DofE Events: shared grid + modal styles (used by both
 * admin-stripped frontend rendering and any future admin uses). */

/* ---------- Section headings ---------- */
.dofe-events-section { margin-top: 28px; }
.dofe-events-section-title {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #50575e;
    margin: 0 0 12px;
    font-weight: 600;
    cursor: default;
}
.dofe-events-section-count {
    background: #e5e5e5;
    color: #1d2327;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 4px;
}
details > summary.dofe-events-section-title {
    cursor: pointer;
    list-style: revert;
}
details[open] > summary.dofe-events-section-title { margin-bottom: 12px; }

/* ---------- Card grid ---------- */
.dofe-events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.dofe-event-card {
    display: block;
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 6px;
    padding: 16px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.dofe-event-card:hover,
.dofe-event-card:focus {
    border-color: #2271b1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    transform: translateY(-1px);
    outline: none;
}
.dofe-event-card h3 { margin: 0 0 8px; font-size: 16px; line-height: 1.3; }
.dofe-event-when { font-size: 13px; color: #2271b1; margin-bottom: 4px; }
.dofe-event-where { font-size: 13px; color: #50575e; margin-bottom: 12px; }
.dofe-event-cta { font-size: 12px; color: #2271b1; font-weight: 600; }

.dofe-event-card-past { opacity: .72; }
.dofe-event-card-past .dofe-event-when { color: #50575e; }

/* ---------- Modal ---------- */
.dofe-event-modal { position: fixed; inset: 0; z-index: 100000; display: none; }
.dofe-event-modal.is-open { display: block; }
.dofe-event-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }

.dofe-event-modal-dialog {
    position: relative;
    background: #fff;
    max-width: 760px;
    width: calc(100% - 40px);
    max-height: calc(100vh - 80px);
    margin: 40px auto;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
}
.dofe-event-modal-scroll {
    max-height: calc(100vh - 80px);
    overflow: auto;
    padding: 24px 28px;
}
.dofe-event-modal-close {
    position: absolute;
    top: 8px; right: 8px;
    background: transparent; border: 0;
    font-size: 28px; line-height: 1;
    cursor: pointer; padding: 4px 10px;
    color: #50575e;
}
.dofe-event-modal-close:hover { color: #1d2327; }

.dofe-event-modal h2 { margin: 0 0 6px; padding-right: 36px; font-size: 22px; }
.dofe-event-modal h3 {
    margin: 24px 0 10px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #50575e;
    border-bottom: 1px solid #dcdcde;
    padding-bottom: 6px;
}
.dofe-evt-count {
    background: #e5e5e5;
    color: #1d2327;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 4px;
    text-transform: none;
    letter-spacing: 0;
}

/* ---------- Event meta (key/value) ---------- */
.dofe-evt-meta {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 6px 14px;
    margin: 10px 0 0;
}
.dofe-evt-meta dt {
    color: #50575e;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    padding-top: 2px;
}
.dofe-evt-meta dd {
    margin: 0;
    font-size: 14px;
    color: #1d2327;
}

/* ---------- Status tally pills ---------- */
.dofe-status-tally {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.dofe-pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: #eef0f2;
    color: #1d2327;
    border: 1px solid transparent;
    white-space: nowrap;
}
.dofe-pill-yes      { background: #e6f4ea; color: #1e6b3a; border-color: #c7e2d1; }
.dofe-pill-maybe    { background: #fff4d6; color: #8a5a00; border-color: #f1d98a; }
.dofe-pill-invited  { background: #eef0f2; color: #50575e; border-color: #d0d4d8; }
.dofe-pill-no       { background: #fcebea; color: #b32d2e; border-color: #f3c2c0; }
.dofe-pill-unknown  { background: #f0f0f1; color: #50575e; border-color: #d8d8d8; }
.dofe-pill-other    { background: #ebf3fb; color: #1f4d80; border-color: #c4daf2; }

/* ---------- Attendance table ---------- */
table.dofe-attendance {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
table.dofe-attendance th,
table.dofe-attendance td {
    padding: 7px 10px;
    border-bottom: 1px solid #f0f0f1;
    text-align: left;
    vertical-align: middle;
}
table.dofe-attendance thead th {
    background: #f6f7f7;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #50575e;
}

.dofe-err { color: #b32d2e; }
.dim      { color: #8c8f94; }

body.dofe-modal-open { overflow: hidden; }

/* Collapsible raw-JSON fallback (only shown when the parser
 * can't recognise a section's shape). */
.dofe-raw { margin-top: 8px; }
.dofe-raw > summary {
    cursor: pointer;
    font-size: 12px;
    color: #50575e;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.dofe-raw-box {
    margin: 8px 0 0;
    background: #f6f7f7;
    border: 1px solid #e0e0e1;
    border-radius: 4px;
    overflow: hidden;
    max-height: 320px;
}
.dofe-raw-box pre {
    margin: 0;
    padding: 10px 12px;
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 320px;
    overflow: auto;
}

/* ---------- Filter tabs above events list ---------- */
.dofe-events-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}
.dofe-events-filter-btn {
    background: #fff;
    border: 1px solid #c3c4c7;
    color: #1d2327;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    line-height: 1.2;
}
.dofe-events-filter-btn:hover { border-color: #2271b1; }
.dofe-events-filter-btn.is-active {
    background: #2271b1;
    border-color: #2271b1;
    color: #fff;
}
.dofe-events-filter-count {
    background: rgba(0, 0, 0, .08);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 11px;
    margin-left: 4px;
}
.dofe-events-filter-btn.is-active .dofe-events-filter-count {
    background: rgba(255, 255, 255, .25);
}

/* ---------- Wider modal for structure columns ---------- */
.dofe-event-modal-dialog {
    max-width: 1100px;
}

/* ---------- Leader tagging on attendance rows ---------- */
.dofe-att-row-leader {
    background: #fbf7e6;
}
.dofe-att-row-leader td:first-child {
    border-left: 3px solid #d4a83e;
    padding-left: 8px;
}
.dofe-leader-tag {
    display: inline-block;
    background: #d4a83e;
    color: #1d2327;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: 6px;
    vertical-align: middle;
}

/* ---------- Structure (custom field) columns ---------- */
.dofe-th-struct,
.dofe-td-struct {
    font-size: 12px;
    color: #50575e;
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dofe-att-table-wrap {
    overflow-x: auto;
}

/* ---------- Inline editable status (pill-styled select) ---------- */
.dofe-att-edit {
    appearance: none;
    -webkit-appearance: none;
    background: #eef0f2;
    color: #1d2327;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 2px 22px 2px 9px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'><path d='M0 0l4 5 4-5z' fill='%2350575e'/></svg>");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 8px 5px;
    line-height: 1.4;
}
.dofe-att-edit:focus { outline: 2px solid #2271b1; outline-offset: 1px; }
.dofe-att-edit-yes      { background-color: #e6f4ea; color: #1e6b3a; border-color: #c7e2d1; }
.dofe-att-edit-no       { background-color: #fcebea; color: #b32d2e; border-color: #f3c2c0; }
.dofe-att-edit-maybe    { background-color: #fff4d6; color: #8a5a00; border-color: #f1d98a; }
.dofe-att-edit-invited  { background-color: #eef0f2; color: #50575e; border-color: #d0d4d8; }
.dofe-att-edit.is-saving  { opacity: .6; cursor: progress; }
.dofe-att-edit.is-saved   { box-shadow: 0 0 0 2px rgba(30, 107, 58, .35); }

/* Show-in-parent-portal pill + edit colour */
.dofe-pill-show_in_parent_portal,
.dofe-att-edit-show_in_parent_portal {
    background: #e7eefc;
    color: #1c4e9e;
    border-color: #c4d5f3;
}

/* Inline editable structure cell */
.dofe-td-struct-edit { padding: 2px 4px; }
.dofe-field-edit {
    width: 100%;
    min-width: 90px;
    border: 1px solid transparent;
    background: transparent;
    padding: 4px 6px;
    font-size: 12px;
    color: #1d2327;
    border-radius: 3px;
    box-sizing: border-box;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.dofe-field-edit:hover {
    border-color: #d0d4d8;
    background: #fff;
}
.dofe-field-edit:focus {
    border-color: #2271b1;
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 1px rgba(34, 113, 177, .25);
}
.dofe-field-edit.is-saving { opacity: .6; cursor: progress; }
.dofe-field-edit.is-saved {
    border-color: #1e6b3a;
    box-shadow: 0 0 0 1px rgba(30, 107, 58, .35);
}

/* Attendance section header row (heading + Add column button) */
.dofe-att-headrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.dofe-att-headrow h3 {
    margin: 0;
    border-bottom: 0;
    padding-bottom: 0;
}
.dofe-add-column-btn {
    background: #fff;
    border: 1px solid #c3c4c7;
    color: #1d2327;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.4;
}
.dofe-add-column-btn:hover  { border-color: #2271b1; color: #2271b1; }
.dofe-add-column-btn.is-saving { opacity: .65; cursor: progress; }

/* Turned up to session — dropdown styled like a pill */
.dofe-td-register {
    white-space: nowrap;
    padding: 2px 6px;
}
.dofe-register-select {
    appearance: none;
    -webkit-appearance: none;
    background: #eef0f2;
    color: #50575e;
    border: 1px solid #d0d4d8;
    border-radius: 999px;
    padding: 2px 22px 2px 9px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'><path d='M0 0l4 5 4-5z' fill='%2350575e'/></svg>");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 8px 5px;
    line-height: 1.4;
}
.dofe-register-select:focus { outline: 2px solid #2271b1; outline-offset: 1px; }
.dofe-register-Yes   { background-color: #e6f4ea; color: #1e6b3a; border-color: #c7e2d1; }
.dofe-register-No    { background-color: #fcebea; color: #b32d2e; border-color: #f3c2c0; }
.dofe-register-unset { background-color: #eef0f2; color: #50575e; border-color: #d0d4d8; }

/* Register save bar — appears when any register checkbox is dirty */
.dofe-changes-savebar {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    margin: 0 0 12px;
    background: #fbf4d6;
    border: 1px solid #f1d98a;
    border-radius: 6px;
    flex-wrap: wrap;
}
.dofe-changes-savebar.is-active { display: flex; }
.dofe-changes-savebar-summary {
    font-size: 13px;
    color: #6b4d00;
    font-weight: 600;
}
.dofe-changes-savebar-actions {
    display: flex;
    gap: 8px;
}
.dofe-changes-savebar-cancel,
.dofe-changes-savebar-save {
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    line-height: 1.2;
}
.dofe-changes-savebar-cancel {
    background: #fff;
    color: #50575e;
    border-color: #d0d4d8;
}
.dofe-changes-savebar-cancel:hover { border-color: #8c8f94; }
.dofe-changes-savebar-save {
    background: #1e6b3a;
    color: #fff;
    border-color: #1e6b3a;
}
.dofe-changes-savebar-save:hover { background: #18582f; border-color: #18582f; }
.dofe-changes-savebar-save.is-saving { opacity: .65; cursor: progress; }

/* Dirty / in-flight indicators on register cells */
.dofe-td-register.is-dirty {
    background: #fff7df;
    box-shadow: inset 3px 0 0 #d4a83e;
}
.dofe-td-register.is-saving {
    opacity: .6;
}

/* Dirty indicators on staged status dropdowns + structure fields */
.dofe-att-edit.is-dirty,
.dofe-field-edit.is-dirty {
    box-shadow: inset 3px 0 0 #d4a83e, 0 0 0 1px #e7c66b;
}
.dofe-att-edit.is-dirty { font-weight: 600; }
.dofe-field-edit.is-dirty { background: #fff7df; }

/* Inactivity warning modal */
.dofe-idle-modal { position: fixed; inset: 0; z-index: 100001; display: none; }
.dofe-idle-modal.is-open { display: block; }
.dofe-idle-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, .6);
}
.dofe-idle-modal-dialog {
    position: relative;
    max-width: 420px;
    width: calc(100% - 40px);
    margin: 22vh auto;
    padding: 24px 28px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .4);
    text-align: center;
}
.dofe-idle-modal-dialog h3 { margin-top: 0; }
.dofe-idle-stay {
    background: #2271b1;
    color: #fff;
    border: 1px solid #2271b1;
    border-radius: 4px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
}
.dofe-idle-stay:hover { background: #135e96; }
.dofe-idle-countdown { font-weight: 700; }

/* ---- Tabs ---- */
.dofe-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid #dcdcde;
    margin-bottom: 20px;
}
.dofe-tab-btn {
    background: transparent;
    border: 0;
    color: #50575e;
    font-size: 15px;
    font-weight: 600;
    padding: 10px 18px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    line-height: 1.3;
    white-space: nowrap;
}
.dofe-tab-btn:hover { color: #1d2327; }
.dofe-tab-btn.is-active {
    color: #2271b1;
    border-bottom-color: #2271b1;
}
@media (max-width: 600px) {
    .dofe-tabs { gap: 2px; }
    .dofe-tab-btn { font-size: 14px; padding: 9px 13px; }
}
.dofe-tab-panel { display: none; }
.dofe-tab-panel.is-active { display: block; }

/* ---- Tab groups (dropdowns) — grouping related tabs together once the
   bar has enough of them that scanning a flat row stops being easy. ---- */
.dofe-tab-group { position: relative; display: inline-block; }
.dofe-tab-group-arrow { font-size: 10px; margin-left: 2px; }
.dofe-tab-group:has(.dofe-tab-btn.is-active) > .dofe-tab-group-btn {
    color: #2271b1;
    border-bottom-color: #2271b1;
}
.dofe-tab-group-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 60;
    flex-direction: column;
    min-width: 190px;
    background: #fff;
    border: 1px solid #dcdcde;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    padding: 4px;
    margin-top: 4px;
}
.dofe-tab-group-menu.is-open { display: flex; }
.dofe-tab-group-menu .dofe-tab-btn {
    padding: 8px 12px;
    border-bottom: 0;
    border-radius: 4px;
    text-align: left;
    width: 100%;
}
.dofe-tab-group-menu .dofe-tab-btn:hover { background: #f0f0f1; }
.dofe-tab-group-menu .dofe-tab-btn.is-active { background: #e7f1f8; }

/* ---- Members tab ---- */
.dofe-members-heading {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #50575e;
    margin: 0 0 12px;
    font-weight: 600;
}
.dofe-patrols {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    align-items: start;
}
.dofe-patrol {
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 6px;
    padding: 0;
}
.dofe-patrol > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    user-select: none;
}
.dofe-patrol > summary::-webkit-details-marker { display: none; }
.dofe-patrol[open] > summary {
    border-bottom: 1px solid #f0f0f1;
}
.dofe-patrol-name { font-size: 14px; color: #1d2327; }
.dofe-patrol-count {
    background: #eef0f2;
    color: #50575e;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 12px;
    font-weight: 700;
}
.dofe-patrol-leaders {
    border-color: #d4a83e;
    background: #fbf7e6;
}
.dofe-patrol-leaders .dofe-patrol-count {
    background: #d4a83e;
    color: #1d2327;
}

.dofe-patrol-members {
    list-style: none;
    margin: 0;
    padding: 8px 12px 12px;
    min-height: 40px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 8px;
    align-content: start;
}

/* Empty-patrol placeholder (still a drop target); spans the full grid width */
.dofe-patrol-empty {
    grid-column: 1 / -1;
    color: #8c8f94;
    font-style: italic;
    font-size: 12px;
    padding: 8px 4px;
    text-align: center;
    border: 1px dashed #dcdcde;
    border-radius: 4px;
}

/* Member as draggable card */
.dofe-member-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 6px;
    font-size: 13px;
    color: #1d2327;
    background: #fff;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    cursor: grab;
    transition: box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.dofe-member-card:hover {
    border-color: #2271b1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}
.dofe-member-card:active { cursor: grabbing; }
.dofe-member-card-leader .dofe-member-name { font-weight: 700; }
.dofe-member-card-grip {
    color: #8c8f94;
    font-size: 14px;
    line-height: 1;
    letter-spacing: -2px;
    user-select: none;
    flex: 0 0 auto;
}
.dofe-member-name { flex: 1; min-width: 0; }

/* Sortable visual states */
.dofe-card-ghost {
    opacity: 0.4;
    background: #e7eefc;
    border-color: #2271b1;
}
.dofe-card-chosen { box-shadow: 0 4px 12px rgba(0, 0, 0, .15); }
.dofe-card-drag {
    transform: rotate(1deg);
    background: #fff;
}

/* Moved-but-unsaved indicator */
.dofe-member-card.is-moved {
    border-color: #d4a83e;
    box-shadow: inset 3px 0 0 #d4a83e;
    background: #fffaeb;
}
.dofe-member-card.is-saving { opacity: 0.55; cursor: progress; }
.dofe-member-card.is-saved {
    border-color: #1e6b3a;
    box-shadow: inset 3px 0 0 #1e6b3a;
}

/* Finish / Save bar (sticky to bottom of viewport) */
.dofe-moves-savebar {
    display: none;
    position: sticky;
    bottom: 16px;
    z-index: 50;
    margin-top: 20px;
    padding: 12px 18px;
    background: #fbf4d6;
    border: 1px solid #f1d98a;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.dofe-moves-savebar.is-active { display: flex; }
.dofe-moves-savebar-summary {
    font-size: 14px;
    font-weight: 600;
    color: #6b4d00;
}
.dofe-moves-savebar-actions { display: flex; gap: 8px; }
.dofe-moves-savebar-cancel,
.dofe-moves-savebar-save {
    border-radius: 4px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    line-height: 1.2;
}
.dofe-moves-savebar-cancel {
    background: #fff;
    color: #50575e;
    border-color: #d0d4d8;
}
.dofe-moves-savebar-cancel:hover { border-color: #8c8f94; }
.dofe-moves-savebar-save {
    background: #1e6b3a;
    color: #fff;
    border-color: #1e6b3a;
}
.dofe-moves-savebar-save:hover { background: #18582f; border-color: #18582f; }
.dofe-moves-savebar-save.is-saving { opacity: .65; cursor: progress; }

/* Old move-dropdown styling removed — now drag-and-drop only. */

/* Members tab: unallocated patrol gets visual emphasis */
.dofe-patrol-unallocated {
    border-color: #d4a83e;
    background: #fbf7e6;
}
.dofe-patrol-unallocated .dofe-patrol-count {
    background: #d4a83e;
    color: #1d2327;
}

/* Patrols-tab filter bar uses the same pill style as events */
.dofe-patrols-filter { margin: 0 0 14px; }

/* ---- Toast notifications ---- */
.dofe-toast-wrap {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100002;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(560px, calc(100vw - 32px));
    pointer-events: none;
}
.dofe-toast {
    position: relative;
    pointer-events: auto;
    background: #1d2327;
    color: #fff;
    padding: 18px 48px 18px 22px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
    opacity: 0;
    transform: translateY(-16px) scale(.98);
    transition: opacity .25s ease, transform .25s ease;
    border-left: 6px solid #50575e;
}
.dofe-toast.is-in { opacity: 1; transform: translateY(0) scale(1); }
.dofe-toast-success {
    border-left-color: #1e6b3a;
    background: #14411f;
}
.dofe-toast-error {
    border-left-color: #f86368;
    background: #5e1416;
}
.dofe-toast-info {
    border-left-color: #4f9fdb;
    background: #103a5c;
}
.dofe-toast::before {
    font-weight: 700;
    margin-right: 10px;
    font-size: 18px;
}
.dofe-toast-success::before { content: "\2713"; }  /* ✓ */
.dofe-toast-error::before   { content: "\26A0"; }  /* ⚠ */
.dofe-toast-info::before    { content: "\2139"; }  /* ℹ */
.dofe-toast-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, .75);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
}
.dofe-toast-close:hover { color: #fff; }

@media (max-width: 600px) {
    .dofe-toast { font-size: 15px; padding: 15px 42px 15px 18px; }
}

/* ---- Confirm modal ---- */
.dofe-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 100003;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity .2s ease;
}
.dofe-confirm-overlay.is-in { opacity: 1; }
.dofe-confirm-box {
    background: #fff;
    border-radius: 10px;
    max-width: 420px;
    width: 100%;
    padding: 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
    transform: translateY(12px);
    transition: transform .2s ease;
}
.dofe-confirm-overlay.is-in .dofe-confirm-box { transform: translateY(0); }
.dofe-confirm-msg {
    font-size: 15px;
    line-height: 1.5;
    color: #1d2327;
    margin-bottom: 20px;
}
.dofe-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.dofe-confirm-cancel,
.dofe-confirm-ok {
    border-radius: 6px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    line-height: 1.2;
}
.dofe-confirm-cancel {
    background: #fff;
    color: #50575e;
    border-color: #d0d4d8;
}
.dofe-confirm-cancel:hover { border-color: #8c8f94; }
.dofe-confirm-ok {
    background: #2271b1;
    color: #fff;
    border-color: #2271b1;
}
.dofe-confirm-ok:hover { background: #135e96; }
.dofe-confirm-ok.is-danger { background: #d63638; border-color: #d63638; }
.dofe-confirm-ok.is-danger:hover { background: #b32d2e; }

/* ============================================================
   Route Cards review tab
============================================================ */
.rcr-head h3 { margin: 0 0 4px; font-size: 18px; }
.rcr-head p { margin: 0 0 16px; color: #50575e; font-size: 13px; }
.rcr-empty { color: #50575e; font-style: italic; }
.rcr-empty-sm { color: #8c8f94; font-size: 13px; padding: 6px 12px; margin: 0; }

.rcr-years {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}
.rcr-year-btn {
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: #1d2327;
}
.rcr-year-btn:hover { border-color: #2271b1; color: #2271b1; }
.rcr-year-btn.is-active { background: #2271b1; border-color: #2271b1; color: #fff; }

.rcr-teams {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rcr-team {
    background: #fff;
    border: 1px solid #c3c4c7;
    border-radius: 8px;
}
.rcr-team > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
}
.rcr-team > summary::-webkit-details-marker { display: none; }
.rcr-team[open] > summary { border-bottom: 1px solid #f0f0f1; }
.rcr-team-name { font-size: 14px; color: #1d2327; }
.rcr-team-award {
    font-size: 11px;
    font-weight: 700;
    color: #6b4d00;
    background: #fbf4d6;
    border-radius: 999px;
    padding: 1px 8px;
}
.rcr-team-count {
    margin-left: auto;
    background: #eef0f2;
    color: #50575e;
    border-radius: 999px;
    padding: 1px 9px;
    font-size: 12px;
    font-weight: 700;
}
.rcr-team-leader { font-size: 12px; color: #50575e; }
.rcr-card-list { list-style: none; margin: 0; padding: 8px 12px 12px; }
.rcr-card-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 5px 0;
}
.rcr-open-card {
    flex: 1 1 auto;
    min-width: 160px;
    text-align: left;
    background: transparent;
    border: 0;
    color: #2271b1;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 0;
}
.rcr-open-card:hover { text-decoration: underline; }

.rcr-badge {
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    padding: 2px 10px;
    white-space: nowrap;
}
.rcr-badge-approved   { background: #e6f4ea; color: #1e6b3a; }
.rcr-badge-final      { background: #e7eefc; color: #1d4ed8; }
.rcr-badge-changes    { background: #fcebea; color: #b32d2e; }
.rcr-badge-progress   { background: #fff7df; color: #6b4d00; }
.rcr-badge-notstarted { background: #eef0f2; color: #50575e; }

/* Review modal */
.rcr-modal { position: fixed; inset: 0; z-index: 100001; display: none; }
.rcr-modal.is-open { display: block; }
.rcr-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.rcr-modal-dialog {
    position: relative;
    max-width: 880px;
    width: calc(100% - 32px);
    max-height: 88vh;
    margin: 5vh auto;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(0,0,0,.35);
}
.rcr-modal-scroll {
    max-height: 88vh;
    overflow: auto;
    padding: 24px 26px;
}
.rcr-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: transparent;
    border: 0;
    font-size: 26px;
    line-height: 1;
    color: #50575e;
    cursor: pointer;
}
.rcr-detail h3 { margin: 0 0 2px; font-size: 19px; }
.rcr-detail-meta { margin: 0 0 16px; color: #50575e; font-size: 13px; }
.rcr-detail-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f1;
}
.rcr-status-label { font-size: 13px; font-weight: 600; color: #1d2327; }
.rcr-status-select {
    margin-left: 6px;
    padding: 5px 8px;
    border: 1px solid #c3c4c7;
    border-radius: 5px;
    font-size: 13px;
}
.rcr-btn {
    border-radius: 6px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid #c3c4c7;
    background: #fff;
    color: #1d2327;
    text-decoration: none;
    display: inline-block;
    line-height: 1.3;
}
.rcr-btn-primary { background: #2271b1; border-color: #2271b1; color: #fff; }
.rcr-btn-primary:hover { background: #135e96; }
.rcr-btn-ghost:hover { border-color: #2271b1; color: #2271b1; }
.rcr-unlock { border-color: #d4a83e; color: #6b4d00; }
.rcr-unlock:hover { background: #fbf4d6; }

.rcr-legs-wrap { overflow-x: auto; }
.rcr-legs { width: 100%; border-collapse: collapse; font-size: 13px; }
.rcr-legs th, .rcr-legs td {
    text-align: left;
    padding: 7px 9px;
    border-bottom: 1px solid #f0f0f1;
}
.rcr-legs th { background: #f6f7f7; font-weight: 600; }
.rcr-legs-notes td { background: #fafafa; color: #50575e; font-size: 12px; }
.rcr-legs-notes div { margin: 2px 0; }
.rcr-feedback { color: #b32d2e; }
.rcr-error { color: #b32d2e; }

/* Route card review — editable form fields */
.rcr-review-field { margin: 0 0 14px; }
.rcr-review-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1d2327;
    margin-bottom: 4px;
}
.rcr-hint { font-weight: 400; color: #8c8f94; font-size: 12px; }
.rcr-review-field input[type="text"],
.rcr-review-field textarea {
    width: 100%;
    border: 1px solid #c3c4c7;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    box-sizing: border-box;
}
.rcr-review-field textarea { resize: vertical; }
.rcr-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #1d2327;
    margin: 0 0 14px;
    cursor: pointer;
}
.rcr-leg-fb-field { margin-top: 8px; }
.rcr-leg-fb-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #6b4d00;
    margin-bottom: 3px;
}
.rcr-leg-feedback {
    width: 100%;
    border: 1px solid #e7c66b;
    background: #fffdf6;
    border-radius: 5px;
    padding: 6px 8px;
    font-size: 12px;
    font-family: inherit;
    box-sizing: border-box;
    resize: vertical;
}
.rcr-detail-save {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #f0f0f1;
    display: flex;
    justify-content: flex-end;
}

/* Route card review — interactive GPX map */
.rcr-map-section { margin: 18px 0; }
.rcr-map-section h4 { margin: 0 0 8px; font-size: 14px; }
.rcr-map {
    width: 100%;
    height: 380px;
    border: 1px solid #c3c4c7;
    border-radius: 8px;
    overflow: hidden;
}
.osm-dofe-leg-marker span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #005ea5;
    color: #fff;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* ---- Dark mode --------------------------------------------------------
   A filter-based dark mode rather than a hand-tuned palette — this
   plugin's CSS uses hardcoded colours throughout (no custom properties),
   so rewriting every rule for a proper dark theme isn't realistic. This
   is the same "invert + hue-rotate" trick browser force-dark extensions
   use: cheap, and correct for the mostly text/table/form content here,
   at the cost of not being pixel-tuned. Real photos/icons are excluded
   via .dofe-no-invert so they don't come out looking wrong. ------------ */
.dofe-events-fe[data-dofe-theme="dark"] {
    filter: invert(1) hue-rotate(180deg);
    background: #fff;
}
.dofe-events-fe[data-dofe-theme="dark"] img,
.dofe-events-fe[data-dofe-theme="dark"] svg,
.dofe-events-fe[data-dofe-theme="dark"] .dofe-no-invert {
    filter: invert(1) hue-rotate(180deg);
}

/* One consistent black throughout, rather than cards sitting on a
   visibly different shade from the page around them (which is what the
   previous version of this rule did, and which read as inconsistent/
   clashing) — keep only borders to show where one section ends and the
   next begins, not a background-colour change. */
.dofe-events-fe[data-dofe-theme="dark"] .postbox,
.dofe-events-fe[data-dofe-theme="dark"] .dd-card,
.dofe-events-fe[data-dofe-theme="dark"] .dd-team,
.dofe-events-fe[data-dofe-theme="dark"] .acct-card,
.dofe-events-fe[data-dofe-theme="dark"] .qmm-card,
.dofe-events-fe[data-dofe-theme="dark"] .qmm-inv-card,
.dofe-events-fe[data-dofe-theme="dark"] .dqk-card,
.dofe-events-fe[data-dofe-theme="dark"] .rcr-modal-dialog,
.dofe-events-fe[data-dofe-theme="dark"] details {
    background: #fff !important;
    border-color: #9aa1ab !important;
}
/* Borders in general are too low-contrast against pure black once
   inverted — nudge them darker (pre-invert) so they read clearly. */
.dofe-events-fe[data-dofe-theme="dark"] input,
.dofe-events-fe[data-dofe-theme="dark"] select,
.dofe-events-fe[data-dofe-theme="dark"] textarea,
.dofe-events-fe[data-dofe-theme="dark"] table,
.dofe-events-fe[data-dofe-theme="dark"] td,
.dofe-events-fe[data-dofe-theme="dark"] th {
    border-color: #8a919c !important;
}
/* Success/error/info notices — inverting a pale green or red background
   with dark text on it produces poor contrast (this is what the "Your
   account has been updated" box looked like). Set them explicitly
   instead of relying on the maths working out. */
.dofe-events-fe[data-dofe-theme="dark"] .notice-success,
.dofe-events-fe[data-dofe-theme="dark"] .qmm-alert-ok {
    background: #eafaf0 !important;
    color: #0b3d20 !important;
    border-color: #4caf7d !important;
}
.dofe-events-fe[data-dofe-theme="dark"] .notice-error,
.dofe-events-fe[data-dofe-theme="dark"] .qmm-alert-err {
    background: #fdecec !important;
    color: #5c1414 !important;
    border-color: #d9736f !important;
}
.dofe-events-fe[data-dofe-theme="dark"] .notice-info,
.dofe-events-fe[data-dofe-theme="dark"] .qmm-alert-info {
    background: #e8f1fc !important;
    color: #123a63 !important;
    border-color: #6fa3d9 !important;
}
.dofe-events-fe[data-dofe-theme="dark"] .dd-attn {
    background: #fdf4de !important;
    color: #4a3400 !important;
    border-color: #d9b95f !important;
}