/*
   Shared non-blocking Page Info window, based on the DynamicSolution runtime Page Info pattern.
   It deliberately has no backdrop and does not lock body scrolling, so users can keep it open
   while they use AG Grid, filters, uploads and other page controls behind it.
*/
.she-page-info-launcher-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 34px;
    margin: 0 0 10px;
}

.she-page-info-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 11px;
    border: 1px solid #0891b2;
    border-radius: 5px;
    background: #06b6d4;
    color: #082f49;
    box-shadow: 0 4px 12px rgb(8 145 178 / 18%);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.she-page-info-button:hover,
.she-page-info-button:focus {
    background: #22d3ee;
    border-color: #0e7490;
    color: #082f49;
    outline: none;
}

.she-page-info-modal[hidden] {
    display: none !important;
}

.she-page-info-modal {
    position: fixed;
    top: 132px;
    right: 24px;
    width: min(470px, calc(100vw - 32px));
    height: min(620px, calc(100vh - 110px));
    min-width: 310px;
    min-height: 230px;
    z-index: 1700;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    resize: both;
    border: 1px solid rgb(15 23 42 / 18%);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 26px 80px rgb(15 23 42 / 30%);
    color: #0f172a;
}

.she-page-info-modal.she-page-info-minimized {
    height: auto !important;
    min-height: 0;
    resize: none;
}

.she-page-info-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #075985 0%, #2563eb 100%);
    color: #fff;
    cursor: move;
    user-select: none;
    touch-action: none;
}

.she-page-info-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: .93rem;
    font-weight: 800;
}

.she-page-info-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.she-page-info-window-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.she-page-info-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 35%);
    border-radius: 999px;
    background: rgb(255 255 255 / 14%);
    color: #fff;
    line-height: 1;
    cursor: pointer;
}

.she-page-info-icon-button:hover,
.she-page-info-icon-button:focus {
    background: rgb(255 255 255 / 25%);
    outline: none;
}

.she-page-info-body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 13px 14px 14px;
    font-size: .89rem;
    line-height: 1.55;
}

.she-page-info-minimized .she-page-info-body,
.she-page-info-minimized .she-page-info-footer {
    display: none;
}

.she-page-info-summary {
    padding: 11px 12px;
    margin-bottom: 12px;
    border: 1px solid rgb(37 99 235 / 20%);
    border-radius: 12px;
    background: #eaf2ff;
    color: #334155;
    font-weight: 700;
}

.she-page-info-section {
    padding: 0 0 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.she-page-info-section:last-child {
    margin-bottom: 0;
    border-bottom: 0;
}

.she-page-info-section h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 7px;
    font-size: .94rem;
    font-weight: 850;
    color: #0f172a;
}

.she-page-info-section h3 i {
    color: #2563eb;
}

.she-page-info-section p {
    margin: 0 0 8px;
    color: #475569;
}

.she-page-info-section ol {
    margin: 0;
    padding-left: 1.25rem;
    color: #334155;
}

.she-page-info-section li {
    margin-bottom: 7px;
}

.she-page-info-footer {
    flex: 0 0 auto;
    padding: 9px 12px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #64748b;
    font-size: .78rem;
}

body.she-page-info-dragging {
    cursor: move !important;
    user-select: none;
}

@media (max-width: 640px) {
    .she-page-info-launcher-row {
        margin-bottom: 8px;
    }

    .she-page-info-modal {
        top: 76px;
        left: 8px;
        right: 8px;
        width: calc(100vw - 16px);
        max-height: calc(100vh - 90px);
        min-width: 0;
    }
}