/* MeProgram UX Refresh — scoped visual layer inspired by Tailwind-style product UI. */

.meprogram-page,
.modal[data-modal-context],
#deleteProgramModal,
#meprogramConfirmModal,
.mp-toast-stack {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.meprogram-page {
    --mpx-bg: #f7f9fc;
    --mpx-card: rgba(255,255,255,.96);
    --mpx-card-soft: #f8faff;
    --mpx-border: #e7ebf2;
    --mpx-border-strong: #d8e0ec;
    --mpx-text: #172033;
    --mpx-muted: #6f7d91;
    --mpx-blue: #2f61e9;
    --mpx-blue-2: #4f7af0;
    --mpx-blue-soft: #eef4ff;
    --mpx-green: #16825d;
    --mpx-red: #c43a4b;
    --mpx-shadow: 0 18px 48px rgba(31,51,92,.08);
    --mpx-shadow-hover: 0 22px 54px rgba(47,97,233,.13);
    background:
        radial-gradient(circle at 10% 0%, rgba(47,97,233,.055), transparent 26rem),
        linear-gradient(180deg, #f9fbff 0%, var(--mpx-bg) 42%, #f6f8fc 100%);
}

.meprogram-page .modern-container { max-width: 1240px; }
.meprogram-page .meprogram-workspace-hero,
.meprogram-page .meprogram-workspace-shell,
.meprogram-page .meprogram-panel,
.meprogram-page .meprogram-metric-card,
.meprogram-page .meprogram-program-card {
    border-color: var(--mpx-border);
    box-shadow: var(--mpx-shadow);
}

.meprogram-page .meprogram-workspace-hero {
    background: linear-gradient(135deg, rgba(255,255,255,.99), rgba(248,251,255,.98));
    border-radius: 24px;
}

.meprogram-page .meprogram-panel,
.meprogram-page .meprogram-metric-card {
    background: var(--mpx-card);
}

.meprogram-page .meprogram-panel { border-radius: 18px; }
.meprogram-page .meprogram-workspace-shell { border-radius: 22px; }

.meprogram-page .meprogram-panel,
.meprogram-page .meprogram-metric-card,
.meprogram-page .meprogram-program-card,
.meprogram-page .meprogram-agenda-row,
.meprogram-page .meprogram-person-row,
.meprogram-page .meprogram-task-row,
.meprogram-page .meprogram-timeline-item {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

.meprogram-page .meprogram-program-card:hover,
.meprogram-page .meprogram-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--mpx-shadow-hover);
    border-color: #cfdbf7;
}

.meprogram-page .meprogram-agenda-row:hover,
.meprogram-page .meprogram-person-row:hover,
.meprogram-page .meprogram-task-row:hover,
.meprogram-page .meprogram-timeline-item:hover {
    background: #fafcff;
}

.meprogram-page .btn {
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease, opacity .16s ease;
}
.meprogram-page .btn:not(:disabled):hover { transform: translateY(-1px); }
.meprogram-page .btn-primary {
    border-color: var(--mpx-blue);
    background: linear-gradient(135deg, var(--mpx-blue), var(--mpx-blue-2));
    box-shadow: 0 9px 20px rgba(47,97,233,.18);
}
.meprogram-page .btn-primary:hover { box-shadow: 0 12px 26px rgba(47,97,233,.23); }

.meprogram-page .meprogram-tabs {
    padding: 11px 14px;
    gap: 6px;
    background: linear-gradient(180deg, #fcfdff, #f8faff);
}
.meprogram-page .meprogram-tab {
    position: relative;
    border-radius: 11px;
    padding: .7rem .88rem;
}
.meprogram-page .meprogram-tab.active {
    background: #fff;
    color: var(--mpx-blue);
    box-shadow: 0 5px 16px rgba(31,51,92,.08);
}
.meprogram-page .meprogram-tab.active::after {
    content: "";
    position: absolute;
    left: 18%; right: 18%; bottom: -11px;
    height: 2px;
    border-radius: 999px;
    background: var(--mpx-blue);
    animation: mp-tab-in .18s ease both;
}

@keyframes mp-tab-in { from { transform: scaleX(.25); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

.meprogram-page .meprogram-control {
    min-height: 44px;
    border-radius: 12px;
    border-color: var(--mpx-border-strong);
    background: #fff;
    color: var(--mpx-text);
    box-shadow: 0 1px 2px rgba(31,51,92,.02);
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.meprogram-page .meprogram-control:focus,
.modal[data-modal-context] .meprogram-control:focus {
    border-color: #8eabf7;
    box-shadow: 0 0 0 4px rgba(47,97,233,.11);
}

.meprogram-page .meprogram-panel-empty {
    background: linear-gradient(180deg, #fbfcff, #f8faff);
    border: 1px dashed #d9e2f2;
    border-radius: 16px;
    padding: 28px 20px;
}
.meprogram-panel-empty .mp-empty-action { margin-top: 12px; }

/* Modal layering, visibility, structure, and motion. */
.modal-backdrop.show {
    opacity: .48;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.modal[data-modal-context], #deleteProgramModal, #meprogramConfirmModal { z-index: 1085; }
.modal[data-modal-context] .modal-dialog,
#deleteProgramModal .modal-dialog,
#meprogramConfirmModal .modal-dialog {
    transform: translateY(10px) scale(.985);
    transition: transform .2s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
}
.modal[data-modal-context].show .modal-dialog,
#deleteProgramModal.show .modal-dialog,
#meprogramConfirmModal.show .modal-dialog { transform: translateY(0) scale(1); }

.modal[data-modal-context] .modal-content,
#deleteProgramModal .modal-content,
#meprogramConfirmModal .modal-content {
    overflow: hidden;
    border: 1px solid rgba(222,228,238,.95) !important;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 30px 90px rgba(20,31,55,.24) !important;
}
.modal[data-modal-context] .modal-header,
#deleteProgramModal .modal-header,
#meprogramConfirmModal .modal-header {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 20px 22px 16px;
    background: linear-gradient(180deg, #fbfdff 0%, rgba(255,255,255,.98) 100%);
    border-bottom: 1px solid #edf1f6 !important;
}
.modal[data-modal-context] .modal-body,
#deleteProgramModal .modal-body,
#meprogramConfirmModal .modal-body { padding: 20px 22px 24px; }
.modal[data-modal-context] .modal-footer,
#deleteProgramModal .modal-footer,
#meprogramConfirmModal .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 14px 22px 18px;
    background: rgba(255,255,255,.97);
    border-top: 1px solid #edf1f6 !important;
    box-shadow: 0 -10px 30px rgba(31,51,92,.045);
    backdrop-filter: blur(8px);
}

#agendaCreateModal .modal-dialog { max-width: 900px; }
.modal[data-modal-context] .modal-title-copy h2,
.modal[data-modal-context] .modal-header h2 { letter-spacing: -.02em; font-weight: 750; color: #172033; }
.modal[data-modal-context] .meprogram-side-description { margin-top: 0; }

.mp-form-section {
    padding: 18px;
    margin-bottom: 16px;
    border: 1px solid #e7edf6;
    border-radius: 16px;
    background: linear-gradient(180deg, #fff, #fbfcff);
}
.mp-form-section:last-child { margin-bottom: 0; }
.mp-form-section-head {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 15px;
}
.mp-section-index {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: var(--mpx-blue-soft);
    color: var(--mpx-blue);
    font-size: .72rem;
    font-weight: 800;
}
.mp-form-section-head strong { display: block; color: #263348; font-size: .84rem; }
.mp-form-section-head small { display: block; margin-top: 2px; color: #8591a4; font-size: .67rem; line-height: 1.5; }

/* Search / combobox treatment. */
.meprogram-user-search { position: relative; }
.meprogram-user-search .bi-search { z-index: 2; }
.meprogram-attendee-picker,
.js-person-results {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #dde5f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(31,51,92,.12);
    padding: 6px;
}
.meprogram-attendee-picker[hidden], .js-person-results[hidden] { display: none !important; }
.meprogram-attendee-option {
    width: 100%;
    border-radius: 11px;
    border: 0;
    background: transparent;
    padding: 10px 11px;
    transition: background-color .14s ease, transform .14s ease;
}
.meprogram-attendee-option:hover,
.meprogram-attendee-option.is-keyboard-active { background: #f2f6ff; }
.meprogram-attendee-option:active { transform: scale(.995); }
.meprogram-attendee-option.is-selected { background: #edf4ff; }

.meprogram-selected-users {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.meprogram-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 6px 9px 6px 10px;
    border: 1px solid #dce5f4;
    border-radius: 11px;
    background: #fff;
    color: #35445b;
    box-shadow: 0 4px 12px rgba(31,51,92,.045);
    animation: mp-chip-in .17s ease both;
}
.meprogram-user-chip .mp-chip-name { font-size: .68rem; font-weight: 750; }
.meprogram-user-chip .mp-chip-badge {
    padding: 2px 6px;
    border-radius: 999px;
    background: #edf4ff;
    color: #315bc8;
    font-size: .54rem;
    font-weight: 800;
}
.meprogram-user-chip .mp-chip-badge.is-extra { background: #f1f3f6; color: #758195; }
.meprogram-user-chip .bi-x { color: #8996a9; transition: color .14s ease, transform .14s ease; }
.meprogram-user-chip:hover .bi-x { color: #c43a4b; transform: scale(1.12); }
@keyframes mp-chip-in { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } }

.mp-participant-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f6f9ff;
    color: #6e7d91;
    font-size: .67rem;
}
.mp-participant-summary strong { color: #31415a; }

.meprogram-preview-disclosure {
    border: 1px solid #e2e8f1;
    border-radius: 14px;
    background: #fbfcfe;
    overflow: hidden;
}
.meprogram-preview-disclosure > summary {
    cursor: pointer;
    list-style: none;
    padding: 12px 14px;
    color: #3a4a62;
    font-size: .72rem;
    font-weight: 750;
}
.meprogram-preview-disclosure > summary::-webkit-details-marker { display: none; }
.meprogram-preview-disclosure > summary::after { content: "⌄"; float: right; color: #7b899d; transition: transform .16s ease; }
.meprogram-preview-disclosure[open] > summary::after { transform: rotate(180deg); }
.meprogram-preview-disclosure .mp-preview-body { padding: 0 12px 12px; }

/* Toasts */
.mp-toast-stack {
    position: fixed;
    right: 18px;
    top: 18px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(390px, calc(100vw - 36px));
    pointer-events: none;
}
.mp-toast {
    pointer-events: auto;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    gap: 10px;
    align-items: start;
    padding: 12px 13px;
    border: 1px solid #e1e7ef;
    border-radius: 14px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 18px 45px rgba(20,31,55,.16);
    backdrop-filter: blur(10px);
    animation: mp-toast-in .22s ease both;
}
.mp-toast.is-success .mp-toast-icon { color: #16825d; background: #eaf8f2; }
.mp-toast.is-error .mp-toast-icon { color: #c43a4b; background: #fff0f2; }
.mp-toast.is-warning .mp-toast-icon { color: #9b6615; background: #fff6e6; }
.mp-toast-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; }
.mp-toast-copy strong { display: block; color: #233149; font-size: .72rem; }
.mp-toast-copy span { display: block; margin-top: 2px; color: #758297; font-size: .66rem; line-height: 1.5; }
.mp-toast-close { border: 0; background: transparent; color: #9aa5b4; padding: 2px; }
.mp-toast.is-leaving { animation: mp-toast-out .18s ease both; }
@keyframes mp-toast-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes mp-toast-out { to { opacity: 0; transform: translateY(-5px) scale(.985); } }

/* Loading / skeleton feedback */
.mp-btn-loading { pointer-events: none; opacity: .82; }
.mp-btn-loading .spinner-border { width: .9rem; height: .9rem; border-width: .12em; }
.mp-processing-surface { position: relative; overflow: hidden; }
.mp-processing-layer {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 9px;
    justify-content: center;
    padding: 20px;
    background: rgba(250,252,255,.86);
    backdrop-filter: blur(2px);
}
.mp-skeleton { height: 9px; border-radius: 999px; background: linear-gradient(90deg,#edf1f7 25%,#f8faff 45%,#edf1f7 65%); background-size: 220% 100%; animation: mp-shimmer 1.05s linear infinite; }
.mp-skeleton:nth-child(1) { width: 42%; }
.mp-skeleton:nth-child(2) { width: 74%; }
.mp-skeleton:nth-child(3) { width: 58%; }
@keyframes mp-shimmer { to { background-position: -220% 0; } }

/* Custom confirmation modal */
#meprogramConfirmModal .mp-confirm-icon {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: 13px;
    background: #eef4ff;
    color: #2f61e9;
    font-size: 1.05rem;
}
#meprogramConfirmModal.is-danger .mp-confirm-icon { background: #fff0f2; color: #c43a4b; }
#meprogramConfirmModal .mp-confirm-message { color: #68768b; font-size: .78rem; line-height: 1.7; }

/* Input motion / focus polish */
.meprogram-page input,
.meprogram-page textarea,
.meprogram-page select,
.modal[data-modal-context] input,
.modal[data-modal-context] textarea,
.modal[data-modal-context] select { transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease; }

@media (max-width: 767.98px) {
    .meprogram-page .meprogram-tab-content { padding: 12px; }
    .meprogram-page .meprogram-panel { padding: 16px; }
    .meprogram-page .meprogram-panel-head { align-items: center; }
    .modal[data-modal-context] .modal-dialog,
    #deleteProgramModal .modal-dialog { margin: 0; min-height: 100%; max-width: none; }
    .modal[data-modal-context] .modal-content,
    #deleteProgramModal .modal-content { min-height: 100vh; border-radius: 0; }
    .modal[data-modal-context] .modal-header,
    .modal[data-modal-context] .modal-body,
    .modal[data-modal-context] .modal-footer,
    #deleteProgramModal .modal-header,
    #deleteProgramModal .modal-body,
    #deleteProgramModal .modal-footer { padding-left: 16px; padding-right: 16px; }
    .mp-form-section { padding: 14px; }
    .mp-toast-stack { right: 10px; left: 10px; top: 10px; width: auto; }
    .meprogram-selected-users { flex-direction: column; }
    .meprogram-user-chip { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
    .meprogram-page *,
    .modal[data-modal-context] *,
    #meprogramConfirmModal *,
    .mp-toast { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}