/* AI Cloud component plugin: Modals & Overlays */
/* ===== Modals ===== */
.mp-modal{
    position:fixed!important;
    inset:0!important;
    z-index:10000!important;
    display:none!important;
    align-items:center!important;
    justify-content:center!important;
    padding:28px!important;
    background:var(--mp-scrim)!important;
    backdrop-filter:blur(25px)!important;
}

.mp-modal.is-open{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
}

.mp-modal-dialog{
    width:min(1180px,96vw)!important;
    max-height:90vh!important;
    overflow:auto!important;
    border-radius:10px!important;
    border:1px solid var(--mp-fill-12)!important;
    box-shadow:0 30px 90px var(--mp-sh-45)!important;
    padding:28px!important;
    visibility:visible!important;
    opacity:1!important;
    transform:none!important;
}

/* Dialog size modifier. The default dialog is sized for a wide entity editor; a
   single-purpose dialog (installer, one-field form, short confirm) declares --sm so
   it doesn't stretch a small form across 1180px. Doubled selector so it beats the
   base width rule regardless of source order (both carry !important). */
.mp-modal-dialog.mp-modal-dialog--sm{
    width:min(560px,96vw)!important;
}

.mp-modal-header{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:20px!important;
    margin-bottom:24px!important;
}

.mp-modal-header h2{margin:0!important}

.mp-modal-body{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
}

.mp-modal-close{
    width:40px!important;
    height:40px!important;
    border-radius:5px!important;
    border:1px solid var(--mp-fill-10)!important;
    background:var(--mp-fill-045)!important;
    color:var(--mp-ink)!important;
    font-size:24px!important;
    line-height:1!important;
    font-weight:700!important;
    cursor:pointer!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    transition:.16s ease!important;
}

.mp-modal-close:hover{
    border-color:var(--mp-danger-30)!important;
    background:var(--mp-danger-10)!important;
    color:var(--mp-ink-invert)!important;
}

body.modal-open{overflow:hidden!important}
.mp-modal form.form-grid{margin:0!important}

/* Modal actions toolbar */
.mp-modal-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:10px!important;
    padding:0!important;
}

.mp-modal-actions.wide{grid-column:1 / -1!important}

/* Save button — latest compact/glassy style (shared-save-template v1.4.0) */
.mp-modal .mp-save-btn,
#calendar-task-modal .mp-save-btn,
button.mp-save-btn,
.mp-save-btn{
    appearance:none!important;
    -webkit-appearance:none!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    width:auto!important;
    min-width:auto!important;
    max-width:none!important;
    height:auto!important;
    min-height:32px!important;
    max-height:36px!important;
    padding:8px 13px!important;
    border-radius:5px!important;
    border:1px solid var(--mp-hl-28)!important;
    background:var(--mp-hl-12)!important;
    color:var(--mp-ink-hl-soft)!important;
    font-size:12px!important;
    line-height:1!important;
    font-weight:800!important;
    letter-spacing:0!important;
    text-transform:none!important;
    cursor:pointer!important;
    box-shadow:none!important;
    transition:background .16s ease,border-color .16s ease,transform .16s ease!important;
}

.mp-modal .mp-save-btn:hover,
#calendar-task-modal .mp-save-btn:hover,
button.mp-save-btn:hover,
.mp-save-btn:hover{
    transform:translateY(-1px)!important;
    border-color:var(--mp-hl-42)!important;
    background:var(--mp-hl-18)!important;
    box-shadow:none!important;
}

.mp-modal .mp-save-btn:active,
#calendar-task-modal .mp-save-btn:active,
button.mp-save-btn:active,
.mp-save-btn:active{
    transform:translateY(0)!important;
}

/* Legacy theme .btn overrides inside modal */
.mp-modal button.btn.mp-save-btn,
.mp-modal button.btn-primary.mp-save-btn{
    width:auto!important;
    min-width:auto!important;
    height:auto!important;
    min-height:32px!important;
    padding:8px 13px!important;
    border-radius:5px!important;
    font-size:12px!important;
    box-shadow:none!important;
}

.mp-save-icon{
    display:inline-block;
    line-height:1;
}

/* Calendar modal compatibility */
.calendar-task-modal,
.task-detail-modal,
.calendar-modal,
#calendar-task-modal,
#task-detail-modal{
    position:fixed!important;
    inset:0!important;
    z-index:10000!important;
}

.calendar-task-modal.is-open,
.task-detail-modal.is-open,
.calendar-modal.is-open,
#calendar-task-modal.is-open,
#task-detail-modal.is-open{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
}

.calendar-task-modal.is-open > *,
.task-detail-modal.is-open > *,
.calendar-modal.is-open > *,
#calendar-task-modal.is-open > *,
#task-detail-modal.is-open > *{
    visibility:visible!important;
    opacity:1!important;
    transform:none!important;
    pointer-events:auto!important;
}

/* Hide legacy reset buttons in modal footers */
.mp-modal .task-form-actions .action-neutral,
.mp-modal .task-form-actions #project-reset,
.mp-modal .task-form-actions #task-reset,
.mp-modal .task-form-actions #user-reset{
    display:none!important;
}


/* Admin-only dirty-state diagnostic inside the save/close confirm alert. Read-only,
   shown only when window.MP_SESSION.isAdmin is true and the engine reports a field
   diff on an already-saved entity. Scheme-neutral: uses shared tokens only. */
.mp-save-close-alert .mp-dirty-diag{
    margin-top:12px;
    border-top:1px solid var(--mp-border, rgba(148,163,184,.25));
    padding-top:10px;
    font-size:12px;
    text-align:left;
}
.mp-save-close-alert .mp-dirty-diag>summary{
    cursor:pointer;
    color:var(--mp-text-muted, #94a3b8);
    font-weight:600;
    letter-spacing:.01em;
    list-style:revert;
}
.mp-save-close-alert .mp-dirty-diag-body{
    margin-top:8px;
    display:flex;
    flex-direction:column;
    gap:6px;
    max-height:220px;
    overflow:auto;
}
.mp-save-close-alert .mp-dirty-diag-row{
    display:flex;
    flex-wrap:wrap;
    gap:4px 10px;
    align-items:baseline;
    line-height:1.4;
    word-break:break-word;
}
.mp-save-close-alert .mp-dirty-diag-name{
    font-family:var(--mp-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    color:var(--mp-brand-2, #38bdf8);
    font-size:11px;
}
.mp-save-close-alert .mp-dirty-diag-val{
    font-family:var(--mp-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    color:var(--mp-text, #e2e8f0);
    font-size:11px;
    opacity:.9;
}

/* ===== Presence =====
   Somebody else is editing this. The modal opens read-only behind a card, and the card closes to
   let you read — it never grants editing, which is what "Open it anyway" did wrong: both people
   pressed it and both ended up in the same task.

   OVER THE DIALOG, not at the top of the screen. An earlier cut anchored this to .mp-modal, which
   is the full-viewport overlay, so the bar floated far above the thing it was talking about. inset
   plus centring puts it where the dialog is, because the dialog is centred too.

   Built from the components that exist: --panel-solid and --text flip with the scheme, the person
   is .mp-avatar and the action is a .btn. A cut that hand-rolled all three rendered as a dark slab
   with unreadable text on the light scheme. */
.mp-modal.is-occupied > .mp-modal-dialog,
.mp-modal.is-occupied > .mp-modal-panel{filter:blur(2px);opacity:.55;transition:opacity .18s ease, filter .18s ease;}
.mp-presence{
  position:absolute;inset:0;z-index:20;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.mp-presence-card{
  display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;
  max-width:min(460px, 100%);
  padding:8px 10px;
  border-radius:999px;
  background:var(--panel-solid);
  color:var(--text);
  border:1px solid var(--border);
  box-shadow:0 14px 40px rgba(2,6,23,.28);
  font-size:var(--mp-fs-sm,13px);line-height:1.5;
  animation:mp-presence-in .18s ease both;
}
@keyframes mp-presence-in{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
.mp-presence-text{min-width:0;}

@media (prefers-reduced-motion:reduce){
  .mp-modal.is-occupied > .mp-modal-dialog,
  .mp-modal.is-occupied > .mp-modal-panel{transition:none;}
  .mp-presence-card{animation:none;}
}