/* =====================================================================
   FERSA — shared progress bar  (web equivalent of ProgressDialogForm)
   Place in: wwwroot/css/fersa-progress.css
   Written once. Any screen can show it via fersa-progress.js.
   Uses the corporate palette from _Layout (navy #143655, etc.).
   ===================================================================== */

.fp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 28, 49, .45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.fp-overlay.fp-show { display: flex; }

.fp-card {
    width: 460px;
    max-width: calc(100vw - 40px);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(11, 28, 49, .35);
    overflow: hidden;
}

.fp-head {
    background: #143655;            /* navy */
    color: #fff;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}
.fp-head .fp-ico { color: #55B2CF; font-size: 18px; }   /* cyan */

.fp-body { padding: 20px; }

.fp-percent {
    font-size: 26px;
    font-weight: 700;
    color: #143655;
    text-align: center;
    margin-bottom: 10px;
}

.fp-track {
    height: 14px;
    background: #e9eef3;
    border-radius: 8px;
    overflow: hidden;
}
.fp-fill {
    height: 100%;
    width: 0%;
    border-radius: 8px;
    background: linear-gradient(90deg, #2C6D91, #55B2CF);  /* blue → cyan */
    transition: width .25s ease;
}

/* indeterminate mode: animated sliding bar when we don't know the % */
.fp-fill.fp-indet {
    width: 35% !important;
    transition: none;
    animation: fpSlide 1.1s ease-in-out infinite;
}
@keyframes fpSlide {
    0%   { margin-left: -35%; }
    100% { margin-left: 100%; }
}

.fp-status {
    margin-top: 12px;
    font-size: 13px;
    color: #5a7184;
    text-align: center;
    min-height: 18px;
}