/* ==========================================================================
   Modal dialogs (CPT edit, bulk upload) - reusable across the app
   ========================================================================== */

.hsm-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 30, 40, 0.4);
}

.hsm-modal {
    width: 560px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid #8fa8bd;
    border-radius: 5px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.hsm-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--brand-blue);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px 4px 0 0;
}

.hsm-modal-close { background: none; border: none; color: #fff; font-size: 18px; line-height: 1; }
.hsm-modal-body { padding: 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.hsm-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid #e2e8ee; }
.hsm-modal-note { font-size: 12px; color: var(--ink-muted); line-height: 1.6; margin: 0; }

.hsm-upload { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px dashed #a9c9e0; border-radius: 4px; background: var(--surface-alt); }
.hsm-upload-status { font-size: 12px; color: var(--status-text); }

.hsm-import-summary { display: flex; gap: 8px; margin-top: 4px; }
.hsm-chip { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 10px; }
.hsm-chip-add { background: #eaf7e9; color: #24632a; border: 1px solid #9ed49a; }
.hsm-chip-upd { background: #e8f2fa; color: #14507f; border: 1px solid #a9c9e0; }
.hsm-chip-err { background: #fdecea; color: #96271b; border: 1px solid #e5a29b; }

.hsm-import-errors { max-height: 160px; overflow-y: auto; border: 1px solid #e5a29b; border-radius: 4px; }
.hsm-import-error { padding: 3px 8px; font-size: 12px; color: #96271b; border-bottom: 1px solid #f5d6d1; }

/* -- placeholder screens ------------------------------------------------- */

.not-implemented {
    margin: 40px auto;
    max-width: 460px;
    text-align: center;
    color: var(--ink-muted);
}

.not-implemented-title { margin-top: 10px; font-size: 17px; font-weight: 600; color: var(--ink); }
.not-implemented-text { font-size: 13px; line-height: 1.6; }

/* -- access denied -------------------------------------------------------- */

.access-denied {
    margin: 40px auto;
    max-width: 460px;
    text-align: center;
    color: var(--ink-muted);
}

.access-denied-title { margin-top: 10px; font-size: 17px; font-weight: 600; color: #96271b; }
.access-denied-text { font-size: 13px; line-height: 1.6; }

/* -- status bar ---------------------------------------------------------- */

.status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 22px;
    padding: 0 10px;
    background: #dceaf6;
    border-top: 1px solid #b9c6d2;
    font-size: 11px;
    color: var(--status-text);
}

/* -- blazor error toast -------------------------------------------------- */

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    padding: 10px 14px;
    background: #ffeeb8;
    border-top: 1px solid #e0c77a;
    font-size: 12px;
}

#blazor-error-ui .dismiss { float: right; cursor: pointer; }