@import url("theme.css.php");

:root {
    --ui-font: Arial, Helvetica, sans-serif;
    --ui-text: #222;
    --ui-muted: #667085;
    --ui-surface: #fff;
    --ui-surface-soft: #f8fafc;
    --ui-border: #d8dfe5;
    --ui-border-strong: #d4dbe1;
    --ui-primary: var(--site-theme, #856690);
    --ui-primary-hover: var(--site-theme-hover, #6c5276);
    --ui-secondary: var(--site-theme, #856690);
    --ui-secondary-hover: var(--site-theme-hover, #6c5276);
    --ui-success: #287a58;
    --ui-success-hover: #206447;
    --ui-danger: #b3261e;
    --ui-danger-hover: #8f1f19;
    --ui-warning: #a96724;
    --ui-warning-hover: #89531d;
    --ui-purple: var(--site-theme, #856690);
    --ui-purple-hover: var(--site-theme-hover, #6c5276);
    --ui-radius: 6px;
    --ui-panel-radius: 8px;
    --ui-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    --ui-focus: 0 0 0 3px var(--site-theme-focus, rgba(133, 102, 144, .25));
}

html { color-scheme: light; }
body { font-family: var(--ui-font); color: var(--ui-text); }

button,
.button,
.btn,
.actionButton,
input[type="submit"],
input[type="button"] {
    border-radius: var(--ui-radius) !important;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, opacity .16s ease;
}

button:not(.hamburger):not(.icon-button):not(.btn-add-main):not(.btn-delete),
.button:not(.icon-button),
.btn:not(.icon-button),
.actionButton,
input[type="submit"],
input[type="button"] {
    min-height: 38px;
}

button:not([class]),
input[type="submit"]:not([class]),
input[type="button"]:not([class]) {
    padding: 9px 13px;
    border: 0;
    background: var(--ui-primary);
    color: var(--site-theme-contrast, #fff);
    cursor: pointer;
}
button:not([class]):hover,
input[type="submit"]:not([class]):hover,
input[type="button"]:not([class]):hover { background: var(--ui-primary-hover); }

button:focus-visible,.button:not([class]),
input[type="submit"]:not([class]),
input[type="button"]:not([class]) {
    padding: 9px 13px;
    border: 0;
    background: var(--ui-primary);
    color: var(--site-theme-contrast, #fff);
    cursor: pointer;
}
button:not([class]):hover,
input[type="submit"]:not([class]):hover,
input[type="button"]:not([class]):hover { background: var(--ui-primary-hover); }

button:focus-visible,.btn:focus-visible,
.actionButton:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[contenteditable="true"]:focus-visible {
    outline: none;
    box-shadow: var(--ui-focus) !important;
}

button:disabled,
button[disabled],
.button.disabled,
.btn.disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled {
    background: #c8cdd3 !important;
    border-color: #c8cdd3 !important;
    color: #59636e !important;
    cursor: not-allowed !important;
    opacity: .82;
    box-shadow: none !important;
}

.button-secondary,
.btn.secondary { background-color: var(--ui-secondary) !important; color: var(--site-theme-contrast, #fff) !important; }
.button-secondary:hover,
.btn.secondary:hover { background-color: var(--ui-secondary-hover) !important; }

.button-danger,
.btn.danger,
.btn-delete { background-color: var(--ui-danger) !important; color: #fff !important; }
.button-danger:hover,
.btn.danger:hover,
.btn-delete:hover { background-color: var(--ui-danger-hover) !important; }

.btn-save { background-color: var(--ui-secondary) !important; color: var(--site-theme-contrast, #fff) !important; }
.btn-save:hover { background-color: var(--ui-secondary-hover) !important; }
.btn-add { background-color: var(--ui-success) !important; color: #fff !important; }
.btn-add:hover { background-color: var(--ui-success-hover) !important; }
.btn-upload { background-color: var(--ui-warning) !important; color: #fff !important; }
.btn-upload:hover { background-color: var(--ui-warning-hover) !important; }
.btn-download { background-color: var(--ui-primary) !important; color: var(--site-theme-contrast, #fff) !important; }
.btn-download:hover { background-color: var(--ui-primary-hover) !important; }

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
select,
textarea {
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius);
    background-color: #fbfcfd;
    color: #374151;
    font-family: inherit;
    box-shadow: inset 0 1px 2px rgba(15,23,42,.025);
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):hover:not(:disabled):not([readonly]),
select:hover:not(:disabled),
textarea:hover:not(:disabled):not([readonly]) {
    border-color: #c4cdd5;
    background-color: #fff;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
select:focus,
textarea:focus {
    border-color: #6d9ca8;
    background-color: #fff;
}

.panel,
.card,
.modal-content {
    border-radius: var(--ui-panel-radius) !important;
}
.panel,
.card { box-shadow: var(--ui-shadow); }

.message,
.alert,
.notice,
.error,
.ok,
.warn { border-radius: var(--ui-radius); }

.badge,
.tag { font-weight: 600; }

.table-wrapper,
.table-wrap { scrollbar-color: #aeb8c2 #eef1f4; }
table { border-color: var(--ui-border); }
th { font-weight: 600; }

.inline-actions,
.toolbar-actions,
.button-group,
.actions { gap: 8px; }

@media (max-width: 640px) {
    button:not(.hamburger):not(.icon-button):not(.btn-add-main):not(.btn-delete),
    .button:not(.icon-button),
    .btn:not(.icon-button) { min-height: 42px; }
}
/* Shared Select2 component */
.select2-container {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-family: var(--ui-font);
    font-size: 14px;
    box-sizing: border-box;
}
.select2-container .select2-selection--single {
    height: 38px !important;
    display: flex !important;
    align-items: center;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: var(--ui-radius) !important;
    background: var(--ui-surface) !important;
    box-shadow: none;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    width: 100%;
    padding: 0 38px 0 11px !important;
    line-height: 36px !important;
    color: var(--ui-text) !important;
    font-weight: 400;
}
.select2-container .select2-selection--single .select2-selection__placeholder { color: #77818c; }
.select2-container .select2-selection--single .select2-selection__arrow {
    width: 34px !important;
    height: 36px !important;
    top: 1px !important;
    right: 1px !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--ui-secondary) !important;
    box-shadow: var(--ui-focus) !important;
}
.select2-container--open .select2-selection--single { border-radius: var(--ui-radius) !important; }
.select2-container .select2-selection--multiple {
    min-height: 38px !important;
    padding: 3px 6px !important;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: var(--ui-radius) !important;
    background: var(--ui-surface) !important;
}
.select2-container .select2-selection--multiple .select2-selection__choice {
    margin: 2px 5px 2px 0 !important;
    padding: 4px 8px !important;
    border: 1px solid #b8d9e1 !important;
    border-radius: 999px !important;
    background: #eef7f9 !important;
    color: #174f5e;
}
.select2-dropdown {
    z-index: 3000;
    overflow: hidden;
    margin-top: 4px;
    border: 1px solid var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    background: var(--ui-surface);
    box-shadow: 0 12px 30px rgba(0,0,0,.16);
}
.select2-search--dropdown { padding: 8px !important; background: var(--ui-surface-soft); }
.select2-search--dropdown .select2-search__field {
    min-height: 36px;
    padding: 7px 9px !important;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: 5px !important;
    background: #fff;
    font: inherit;
}
.select2-search--dropdown .select2-search__field:focus {
    outline: none;
    border-color: var(--ui-secondary) !important;
    box-shadow: 0 0 0 3px var(--site-theme-focus, rgba(133,102,144,.18)) !important;
}
.select2-results { padding: 4px; }
.select2-results__option {
    margin: 1px 0;
    padding: 9px 10px !important;
    border-radius: 4px;
    line-height: 1.25;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--ui-secondary) !important;
    color: var(--site-theme-contrast, #fff) !important;
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected {
    background: #eef2f5;
    color: var(--ui-text);
}
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    border-color: #c8cdd3 !important;
    background: #eef1f4 !important;
    color: #59636e !important;
    cursor: not-allowed;
}
/* Reduced site-wide action palette */
.button:not(.button-secondary):not(.button-danger):not(.button-refund):not(.tab),
.btn:not(.secondary):not(.danger):not(.btn-secondary):not(.btn-danger):not(.btn-warning) {
    background-color: var(--ui-primary);
    color: var(--site-theme-contrast, #fff);
}
.button:not(.button-secondary):not(.button-danger):not(.button-refund):not(.tab):hover,
.btn:not(.secondary):not(.danger):not(.btn-secondary):not(.btn-danger):not(.btn-warning):hover {
    background-color: var(--ui-primary-hover);
}
.btn-secondary { background-color: var(--ui-secondary) !important; color: var(--site-theme-contrast, #fff) !important; }
.btn-secondary:hover { background-color: var(--ui-secondary-hover) !important; }
.btn-danger { background-color: var(--ui-danger) !important; color: #fff !important; }
.btn-danger:hover { background-color: var(--ui-danger-hover) !important; }
.btn-warning { background-color: var(--ui-warning) !important; color: #fff !important; }
.btn-warning:hover { background-color: var(--ui-warning-hover) !important; }

/* Schedule actions: neutral + teal, with red/amber reserved for meaning */
#scheduleSearchBtn,
#planBtn,
#recalcBtn,
#autoBtn,
#sortBtn { background: var(--ui-secondary) !important; color: var(--site-theme-contrast, #fff) !important; }
#planBtn { padding: 9px 13px; border: 0 !important; border-radius: var(--ui-radius) !important; cursor: pointer; }
#scheduleSearchBtn:hover,
#planBtn:hover,
#recalcBtn:hover:not(:disabled),
#autoBtn:hover:not(:disabled),
#sortBtn:hover { background: var(--ui-secondary-hover) !important; opacity: 1; }
#cutBtn,
.removeBreakBtn { background: var(--ui-danger) !important; color: #fff !important; }
#cutBtn:hover:not(:disabled),
.removeBreakBtn:hover { background: var(--ui-danger-hover) !important; }
.pasteBtn,
#downloadCSVBtn,
#openProgramBtn { background: var(--ui-primary) !important; color: var(--site-theme-contrast, #fff) !important; }
.pasteBtn:hover,
#downloadCSVBtn:hover,
#openProgramBtn:hover { background: var(--ui-primary-hover) !important; }
.addBreakBtn { background: var(--ui-warning) !important; color: #fff !important; }
.addBreakBtn:hover { background: var(--ui-warning-hover) !important; }

/* Volunteer and adjudicator toolbars */
#openPaymentsModalBtn,
.paymentBtn,
.actionButton:nth-child(2) { background: var(--ui-secondary) !important; color: var(--site-theme-contrast, #fff) !important; }
#openVolunteersModalBtn,
#downloadButton,
.actionButton:nth-child(1) { background: var(--ui-primary) !important; color: var(--site-theme-contrast, #fff) !important; }
#shareLinkButton,
.paymentBtn.secondary { background: #66717d !important; color: #fff !important; }
#volunteerPagesToggleBtn[data-enabled="0"] { background: var(--ui-success) !important; }
#volunteerPagesToggleBtn[data-enabled="1"] { background: var(--ui-danger) !important; }

/* Common single-purpose controls */
#prize-button { background: var(--ui-secondary) !important; border-color: var(--ui-secondary-hover) !important; }
.icon-btn:not(.danger),
.icon-btn.new { background: var(--ui-secondary) !important; color: var(--site-theme-contrast, #fff) !important; }

/* Legacy page controls mapped onto the same palette */
.formbold-btn,
.archive-banner button,
#copyBtn,
#copyAvailBtn,
#schedule th button,
.v-btn-edit { background: var(--ui-secondary) !important; color: var(--site-theme-contrast, #fff) !important; }
.formbold-btn:hover,
.archive-banner button:hover,
#copyBtn:hover,
#copyAvailBtn:hover,
#schedule th button:hover,
.v-btn-edit:hover { background: var(--ui-secondary-hover) !important; }
.add-btn,
.v-btn-add,
.v-btn-save { background: var(--ui-success) !important; color: #fff !important; }
.add-btn:hover,
.v-btn-add:hover,
.v-btn-save:hover { background: var(--ui-success-hover) !important; }
.remove-btn,
.v-btn-danger,
.v-btn-delete { background: var(--ui-danger) !important; color: #fff !important; }
.remove-btn:hover,
.v-btn-danger:hover,
.v-btn-delete:hover { background: var(--ui-danger-hover) !important; }
.v-btn-archive { background: var(--ui-primary) !important; color: var(--site-theme-contrast, #fff) !important; }
.v-btn-muted,
.v-btn-cancel { background: #66717d !important; color: #fff !important; }

/* Save actions intentionally keep a consistent success colour instead of
   inheriting the configurable site action palette. */
.save-action:not(:disabled):not([disabled]),
.v-btn-save:not(:disabled):not([disabled]) {
    background-color: #287a58 !important;
    border-color: #287a58 !important;
    color: #fff !important;
}
.save-action:hover:not(:disabled):not([disabled]),
.v-btn-save:hover:not(:disabled):not([disabled]) {
    background-color: #206447 !important;
    border-color: #206447 !important;
    color: #fff !important;
}
.save-action:active:not(:disabled):not([disabled]),
.v-btn-save:active:not(:disabled):not([disabled]) {
    background-color: #194f38 !important;
    border-color: #194f38 !important;
}

/* Shared People area navigation and toolbars. */
.people-page-tabs,
.results-page-tabs {
    display: flex;
    gap: 8px;
    margin: 0 18px 10px;
}
.people-page-tab,
.results-page-tab {
    width: 142px;
    height: 38px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 6px;
    background: #e9ecef;
    color: #222;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    text-decoration: none;
}
.people-page-tab:hover,
.people-page-tab.active,
.results-page-tab:hover,
.results-page-tab.active {
    background: var(--site-theme-hover, #6c5276);
    color: var(--site-theme-contrast, #fff);
}
.people-page-tab.active,
.results-page-tab.active { background: var(--site-theme, #856690); }
.people-toolbar {
    min-height: 62px;
    margin: 0 18px 10px;
    padding: 11px 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    box-sizing: border-box;
    border: 1px solid #d8dfe5;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.people-toolbar-button {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid #cbd3da !important;
    border-radius: 6px;
    background: #eef1f4 !important;
    color: #3d4852 !important;
    box-shadow: none !important;
    cursor: pointer;
    font-size: 15px;
    text-decoration: none;
}
.people-toolbar-button:hover:not(:disabled) {
    border-color: #b8c2cb !important;
    background: #dde3e8 !important;
    color: #202a33 !important;
}
.people-toolbar .people-toolbar-button:not(.people-save-action),
.people-toolbar .people-toolbar-button:not(.people-save-action):visited {
    border-color: #cbd3da !important;
    background: #eef1f4 !important;
    color: #3d4852 !important;
}
.people-toolbar .people-toolbar-button:not(.people-save-action):hover {
    border-color: #b8c2cb !important;
    background: #dde3e8 !important;
    color: #202a33 !important;
}
.people-toolbar-button:disabled { cursor: wait; opacity: .65; }
.people-toolbar-button.people-save-action { margin-left: 0; }
.people-toolbar-button.people-save-action:not(:disabled) {
    border-color: #287a58 !important;
    background: #287a58 !important;
    color: #fff !important;
}
.people-toolbar-button.people-save-action:hover:not(:disabled) {
    border-color: #206447 !important;
    background: #206447 !important;
}
.people-toolbar-button.is-loading i::before { content: "\f110"; }
.people-toolbar-button.is-loading i { animation: fa-spin 1s infinite linear; }
.people-mini-action {
    width: 28px;
    height: 28px;
    min-height: 28px;
    margin-left: 6px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd3da;
    border-radius: 6px;
    background: #eef1f4;
    color: #3d4852;
    box-shadow: none;
    cursor: pointer;
}
.people-mini-action:hover { background: #dde3e8; color: #202a33; }
@media (max-width: 768px) {
    .people-page-tabs,
    .results-page-tabs { margin: 0 10px 8px; gap: 6px; }
    .people-page-tab,
    .results-page-tab { flex: 1 1 0; width: auto; min-width: 0; height: 44px; }
    .people-toolbar { min-height: 60px; margin: 0 10px 10px; padding: 10px; }
    .people-toolbar-button { width: 40px; min-width: 40px; height: 40px; min-height: 40px; }
}

/* Reusable confirmation shown after successful save actions. */
.save-confirmation {
    position: fixed;
    z-index: 5000;
    top: 24px;
    left: 50%;
    max-width: calc(100vw - 32px);
    padding: 11px 16px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid #287a58;
    border-radius: 8px;
    background: #287a58;
    color: #fff;
    box-shadow: 0 8px 24px rgba(31, 42, 55, .2);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -12px);
    transition: opacity .2s ease, transform .26s cubic-bezier(.22,1,.36,1), visibility 0s linear .26s;
}
.save-confirmation.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity .2s ease, transform .26s cubic-bezier(.22,1,.36,1);
}
.save-confirmation-icon {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    font-size: 14px;
    line-height: 1;
}
.save-confirmation.is-error {
    border-color: #b42318;
    background: #b42318;
}
@media (prefers-reduced-motion: reduce) {
    .save-confirmation { transition: none; transform: translate(-50%, 0); }
}

.planner-sync-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: 5200;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(16, 24, 40, .55);
}
.planner-sync-dialog {
    width: min(560px, 100%);
    max-height: min(680px, 88vh);
    overflow: auto;
    padding: 18px;
    border: 1px solid #d8dfe5;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 20px 55px rgba(0, 0, 0, .24);
}
.planner-sync-dialog h3 { margin: 0 0 7px; font-size: 18px; }
.planner-sync-dialog p { margin: 0 0 14px; color: #667085; line-height: 1.4; }
.planner-sync-dialog ul { margin: 0 0 16px; padding-left: 21px; color: #344054; }
.planner-sync-dialog li { margin-bottom: 8px; }
.planner-sync-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.planner-sync-dialog-actions button { border: 1px solid #cbd3da !important; background: #eef1f4 !important; color: #3d4852 !important; }
.planner-sync-dialog-actions .planner-sync-dialog-go { border-color: var(--site-theme, #856690) !important; background: var(--site-theme, #856690) !important; color: var(--site-theme-contrast, #fff) !important; }