/* ──────────────────────────────────────────────────────────
   Namespace: pedm-  (PE mass action — Extend Deadline modal)
   Source:    HR101BL/Pages/PE/_Components/PeExtendDeadlineModal.razor
              HR101BL/Pages/PE/_Components/PeExtendDeadlineModalBase.cs

   PBI 6151. Port of design §4 (`.pemx-*` modal classes) from
   design/PerformanceEvaluationMassActions.html, re-namespaced to
   `pedm-`. Tokens (--is-*) are globally loaded (colors_and_type.css
   / insync-tokens.css) — this file NEVER redefines :root.

   The backdrop is a FIXED full-screen overlay (position:fixed;
   inset:0) — NOT position:relative like the artboard scrim.
   ────────────────────────────────────────────────────────── */

/* ── Scrim + modal shell ─────────────────────────────────── */
.pedm-scrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    display: grid;
    place-items: center;
    padding: 26px;
    z-index: 1050;
}

.pedm-modal {
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 52px);
    background: #fff;
    border-radius: var(--is-radius-lg, 14px);
    box-shadow: var(--is-shadow-3, 0 8px 24px rgba(20, 28, 50, .10), 0 2px 6px rgba(20, 28, 50, .06));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1051;
    font-family: var(--is-font-sans, 'Plus Jakarta Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif);
    color: var(--is-fg-1, #1a1f2e);
}

/* ── Header ──────────────────────────────────────────────── */
.pedm-mhead {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--is-border-1, #e6e9ef);
}

.pedm-micon {
    width: 38px;
    height: 38px;
    border-radius: var(--is-radius-sm, 6px);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 15px;
    flex: 0 0 auto;
}

.pedm-micon--orange { background: var(--is-brand-orange, #f08c00); }
.pedm-micon--success { background: var(--is-success, #1f9d4d); }
.pedm-micon--danger { background: var(--is-danger, #d64550); }

.pedm-mtitles { flex: 1 1 auto; min-width: 0; }

.pedm-mtitles h3 {
    margin: 0;
    font: 700 17px var(--is-font-sans);
    letter-spacing: -.005em;
}

.pedm-mtitles p {
    margin: 2px 0 0;
    font: 500 12.5px var(--is-font-sans);
    color: var(--is-fg-3, #6b7280);
}

.pedm-mx {
    width: 28px;
    height: 28px;
    border-radius: var(--is-radius-xs, 4px);
    border: none;
    background: transparent;
    color: var(--is-fg-3, #6b7280);
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 13px;
    flex: 0 0 auto;
}

.pedm-mx:hover { background: var(--is-bg-surface-3, #f3f5f8); color: var(--is-fg-1, #1a1f2e); }
.pedm-mx:disabled { opacity: .4; cursor: not-allowed; }

/* ── Context bar ─────────────────────────────────────────── */
.pedm-ctx {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 18px;
    background: var(--is-brand-blue-100, #e8f4fd);
    border-bottom: 1px solid #d5ebf8;
}

.pedm-ctxlead {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: 600 12.5px var(--is-font-sans);
    color: var(--is-brand-blue-700, #0a5c8c);
}

.pedm-ctxcount {
    font: 700 11px var(--is-font-mono);
    background: var(--is-brand-blue, #007bff);
    color: #fff;
    padding: 2px 8px;
    border-radius: var(--is-radius-pill, 999px);
}

.pedm-chip {
    font: 600 11px var(--is-font-sans);
    background: #fff;
    border: 1px solid #cfe7f6;
    color: var(--is-fg-2, #374151);
    padding: 3px 9px;
    border-radius: var(--is-radius-pill, 999px);
}

.pedm-chip--more {
    background: transparent;
    border-style: dashed;
    color: var(--is-brand-blue-700, #0a5c8c);
}

/* ── Body ────────────────────────────────────────────────── */
.pedm-mbody {
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
}

.pedm-warn {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--is-radius-sm, 6px);
    border: 1px solid;
}

.pedm-warn i { font-size: 13px; margin-top: 1px; flex: 0 0 auto; }
.pedm-warn b { display: block; font: 700 12.5px var(--is-font-sans); margin-bottom: 1px; }
.pedm-warn p { font: 500 12.5px var(--is-font-sans); line-height: 1.5; margin-bottom: 0px !important; }

.pedm-warn--info { background: var(--is-info-bg, #eaf6fd); border-color: #c5e4f6; color: #0a5c8c; }
.pedm-warn--warning { background: var(--is-warning-bg, #fdf6e3); border-color: #f0dda0; color: #7a5a00; }
.pedm-warn--danger { background: var(--is-danger-bg, #fdecee); border-color: #f3c2c7; color: #a02832; }

/* ── Field (date picker) ─────────────────────────────────── */
.pedm-field label {
    display: flex;
    align-items: center;
    gap: 6px;
    font: 600 12px var(--is-font-sans);
    color: var(--is-fg-2, #374151);
    margin-bottom: 5px;
}

.pedm-req { color: var(--is-danger, #d64550); font-weight: 800; }

.pedm-i {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    background: transparent;
    color: var(--is-fg-muted, #9aa3b2);
    font-size: 12px;
    cursor: help;
}

.pedm-i:hover { color: var(--is-brand-blue, #007bff); }

.pedm-hint {
    font: 500 11.5px var(--is-font-sans);
    color: var(--is-fg-3, #6b7280);
    margin-top: 5px;
    display: block;
}

.pedm-hint b { font-weight: 700; color: var(--is-fg-2, #374151); }

/* ── Preview block "Šta se mijenja" ──────────────────────── */
.pedm-prev {
    border: 1px solid var(--is-border-1, #e6e9ef);
    border-radius: var(--is-radius-sm, 6px);
    background: var(--is-bg-surface-3, #f7f9fb);
    padding: 11px 12px;
}

.pedm-prev h6 {
    margin: 0 0 8px;
    font: 700 11px var(--is-font-sans);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--is-fg-3, #6b7280);
    display: flex;
    align-items: center;
    gap: 6px;
}

.pedm-prevrow {
    display: flex;
    align-items: center;
    gap: 9px;
    font: 500 12.5px var(--is-font-sans);
    padding: 4px 0;
    color: var(--is-fg-2, #374151);
}

.pedm-prevrow > i { color: var(--is-fg-muted, #9aa3b2); font-size: 10px; }
.pedm-prevrow .to { font-weight: 700; color: var(--is-brand-blue-700, #0a5c8c); }

/* ── Footer ──────────────────────────────────────────────── */
.pedm-mfoot {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 18px;
    border-top: 1px solid var(--is-border-1, #e6e9ef);
    background: var(--is-bg-surface-3, #f7f9fb);
}

.pedm-footmeta {
    font: 500 11.5px var(--is-font-sans);
    color: var(--is-fg-3, #6b7280);
    flex: 1 1 auto;
    min-width: 0;
}

.pedm-footmeta b { font: 700 11.5px var(--is-font-mono); color: var(--is-fg-2, #374151); }

/* ── Buttons ─────────────────────────────────────────────── */
.pedm-btn {
    height: 31px;
    padding: 0 12px;
    border-radius: var(--is-radius-xs, 4px);
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    font: 600 12.5px var(--is-font-sans);
}

.pedm-btn i { flex: 0 0 auto; font-size: 11.5px; }
.pedm-btn .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.pedm-btn--pri { background: var(--is-brand-blue, #007bff); color: #fff; }
.pedm-btn--pri:hover:not(:disabled) { background: var(--is-brand-blue-600, #0069d9); }
.pedm-btn--sec { background: #fff; border-color: var(--is-border-2, #ced4da); color: var(--is-fg-1, #1a1f2e); }
.pedm-btn--sec:hover:not(:disabled) { background: var(--is-bg-surface-3, #f3f5f8); }
.pedm-btn:disabled { opacity: .32; cursor: not-allowed; }