/* Finished module — Build & Deploy Dashboard */

/* ── Status banner ────────────────────────────────────────────────── */
.status-banner {
    border-radius: 0.5rem;
    transition: background 0.3s;
}
.status-banner.healthy {
    background: #d1e7dd;
    border-left: 4px solid #198754;
}
.status-banner.warning {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
}
.status-banner.failed {
    background: #f8d7da;
    border-left: 4px solid #dc3545;
}
.status-banner.never {
    background: #e2e3e5;
    border-left: 4px solid #6c757d;
}

/* ── Action cards ─────────────────────────────────────────────────── */
.action-card {
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    user-select: none;
}
.action-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.action-card:active {
    transform: translateY(0);
}
.action-card .card-icon {
    font-size: 1.6rem;
    width: 2.4rem;
    text-align: center;
}
.action-card .card-body {
    padding: 0.75rem 1rem;
}
.action-card .card-title {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.15rem;
}
.action-card .card-text {
    font-size: 0.72rem;
    color: #6c757d;
    margin-bottom: 0;
}
.action-card.running {
    opacity: 0.7;
    pointer-events: none;
}
.action-card.running .card-icon {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ── History table ────────────────────────────────────────────────── */
#historyTable td, #historyTable th {
    font-size: 0.78rem;
    vertical-align: middle;
}
#historyTable .badge {
    font-size: 0.7rem;
}

/* ── Health check list ────────────────────────────────────────────── */
.health-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.8rem;
}
.health-item:last-child {
    border-bottom: none;
}
.health-item .health-icon {
    font-size: 0.9rem;
    width: 1.2rem;
    text-align: center;
}
.health-item .health-name {
    flex: 1;
}
.health-item .health-value {
    color: #6c757d;
    font-family: monospace;
    font-size: 0.75rem;
}

/* ── Build info cards ─────────────────────────────────────────────── */
.stat-card {
    border-radius: 0.5rem;
    padding: 0.75rem;
    text-align: center;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
}
.stat-card .stat-value {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
}
.stat-card .stat-label {
    font-size: 0.7rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* ── Action feedback / toast area ─────────────────────────────────── */
#actionFeedback {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 9999;
    max-width: 420px;
}

/* ── Loader overlay ───────────────────────────────────────────────── */
.action-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.6);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
}
.action-overlay .spinner-border {
    width: 3rem;
    height: 3rem;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .right-workspace {
        width: 100% !important;
    }
    .action-card .card-icon {
        font-size: 1.2rem;
        width: 1.8rem;
    }
    .stat-card .stat-value {
        font-size: 1rem;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Build lock — a full-screen, click-blocking overlay shown while an app builds.
   Prevents double-clicks and navigation, and narrates the pipeline in plain
   words until the finished app lands in the client's output directory.
   ───────────────────────────────────────────────────────────────────────── */
.fx-buildlock {
    position: fixed; inset: 0; z-index: 20000; display: none;
    align-items: center; justify-content: center; padding: 1.2rem;
    background: color-mix(in srgb, var(--pp-app-bg, #0b1020) 74%, transparent);
    -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
    animation: fxbl-fade .22s ease both;
}
.fx-buildlock.on { display: flex; }
@keyframes fxbl-fade { from { opacity: 0; } to { opacity: 1; } }
.fx-bl-card {
    width: min(94vw, 470px); background: var(--pp-surface, #fff);
    border: 1px solid var(--pp-border, #e6e9f0); border-radius: 20px;
    padding: 2rem 1.9rem 1.7rem; text-align: center;
    box-shadow: 0 34px 90px color-mix(in srgb, var(--pp-shadow-color, #0b1020) 45%, transparent);
    animation: fxbl-rise .3s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes fxbl-rise { from { transform: translateY(14px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
/* Animated orb: a rotating conic ring around a steady glyph */
.fx-bl-orb { position: relative; width: 76px; height: 76px; margin: 0 auto .95rem; }
.fx-bl-orb::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, var(--pp-accent, #4f46e5), color-mix(in srgb, var(--pp-accent,#4f46e5) 12%, transparent) 55%, var(--pp-accent, #4f46e5));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
    animation: fxbl-spin 1.1s linear infinite;
}
.fx-bl-orb > i {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 1.7rem; color: var(--pp-accent, #4f46e5);
    animation: fxbl-pulse 1.6s ease-in-out infinite;
}
@keyframes fxbl-spin { to { transform: rotate(360deg); } }
@keyframes fxbl-pulse { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.12); opacity: 1; } }
.fx-bl-title { font-weight: 800; font-size: 1.18rem; margin: 0 0 .15rem; color: var(--pp-text, #172033); letter-spacing: -.01em; }
.fx-bl-msg { color: var(--pp-text-muted, #64748b); font-size: .9rem; min-height: 1.25em; margin: 0 0 1.15rem;
    transition: opacity .18s; }
.fx-bl-msg.swap { opacity: 0; }
/* Step tracker */
.fx-bl-steps { list-style: none; margin: 0 0 1.2rem; padding: 0; text-align: left; display: grid; gap: .5rem; }
.fx-bl-step { display: flex; align-items: center; gap: .6rem; font-size: .86rem; color: var(--pp-text-muted, #64748b); transition: color .2s; }
.fx-bl-step .dot { width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center;
    border: 2px solid var(--pp-border-strong, var(--pp-border, #cbd5e1)); font-size: .66rem; color: transparent; transition: all .25s; }
.fx-bl-step.active { color: var(--pp-text, #172033); font-weight: 650; }
.fx-bl-step.active .dot { border-color: var(--pp-accent, #4f46e5);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--pp-accent,#4f46e5) 16%, transparent); }
.fx-bl-step.active .dot::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pp-accent, #4f46e5); animation: fxbl-pulse 1s ease-in-out infinite; }
.fx-bl-step.done { color: var(--pp-text, #172033); }
.fx-bl-step.done .dot { border-color: #16a34a; background: #16a34a; color: #fff; }
.fx-bl-step.done .dot::after { content: "\2713"; font-size: .72rem; font-weight: 700; }
.fx-bl-step.fail .dot { border-color: #dc2626; background: #dc2626; color: #fff; }
.fx-bl-step.fail .dot::after { content: "\00d7"; font-weight: 800; }
/* Indeterminate progress bar */
.fx-bl-bar { height: 6px; border-radius: 99px; background: var(--pp-surface-muted, #eef1f6); overflow: hidden; position: relative; }
.fx-bl-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: 99px;
    background: var(--pp-accent, #4f46e5); animation: fxbl-slide 1.25s ease-in-out infinite; }
.fx-bl-bar.done::before { animation: none; width: 100%; background: #16a34a; }
.fx-bl-bar.fail::before { animation: none; width: 100%; background: #dc2626; }
@keyframes fxbl-slide { 0% { left: -42%; } 100% { left: 102%; } }
.fx-bl-foot { margin: .95rem 0 0; font-size: .76rem; color: var(--pp-text-muted, #94a3b8); }
.fx-bl-close { margin-top: 1rem; display: none; }
.fx-buildlock.finished .fx-bl-close { display: inline-block; }
@media (prefers-reduced-motion: reduce) {
    .fx-buildlock, .fx-bl-card { animation: none; }
    .fx-bl-orb::before, .fx-bl-orb > i, .fx-bl-bar::before, .fx-bl-step.active .dot::after { animation: none; }
}
