/* /Components/Estimates/CloseModeModal.razor.rz.scp.css */
/* ============================================================
   CloseModeModal.razor.css
   Close Mode — full-screen approval modal
   Clean · Trustworthy · Sales-focused
   ============================================================ */

/* ── Trigger button ──────────────────────────────────────────── */
.cm-trigger-btn[b-lont66t2r7] {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #fff;
    border: none;
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(22, 163, 74, 0.30);
    transition: opacity 0.15s, box-shadow 0.15s, transform 0.1s;
    letter-spacing: 0.01em;
}

.cm-trigger-btn:hover[b-lont66t2r7] {
    opacity: 0.92;
    box-shadow: 0 4px 20px rgba(22, 163, 74, 0.45);
    transform: translateY(-1px);
    color: #fff;
}

.cm-trigger-btn:active[b-lont66t2r7] {
    transform: translateY(0);
}

.cm-trigger-spark[b-lont66t2r7] {
    font-size: 0.85em;
    opacity: 0.9;
}

.cm-already-closed-badge[b-lont66t2r7] {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
    font-size: 0.85rem;
    padding: 0.4em 0.9em;
    border-radius: 6px;
    font-weight: 600;
}

/* ── Overlay ─────────────────────────────────────────────────── */
.cm-overlay[b-lont66t2r7] {
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: cm-fade-in-b-lont66t2r7 0.18s ease;
}

@keyframes cm-fade-in-b-lont66t2r7 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Modal card ──────────────────────────────────────────────── */
.cm-modal[b-lont66t2r7] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25), 0 4px 20px rgba(0, 0, 0, 0.10);
    width: 100%;
    max-width: 900px;
    max-height: 95vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    animation: cm-slide-up-b-lont66t2r7 0.22s ease;
    overscroll-behavior: contain;
}

@keyframes cm-slide-up-b-lont66t2r7 {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Header ──────────────────────────────────────────────────── */
.cm-header[b-lont66t2r7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #166534 0%, #15803d 60%, #16a34a 100%);
    border-radius: 16px 16px 0 0;
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 1;
    flex-shrink: 0;
}

.cm-header-title[b-lont66t2r7] {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.cm-header-close[b-lont66t2r7] {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    border-radius: 8px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
    flex-shrink: 0;
}

.cm-header-close:hover[b-lont66t2r7] {
    background: rgba(255, 255, 255, 0.28);
}

/* ── Two-column body ─────────────────────────────────────────── */
.cm-body[b-lont66t2r7] {
    display: grid;
    grid-template-columns: 58% 42%;
    gap: 0;
    flex: 1;
}

.cm-left[b-lont66t2r7] {
    padding: 1.75rem 1.5rem 1.75rem 1.75rem;
    border-right: 1px solid #e5e7eb;
}

.cm-right[b-lont66t2r7] {
    padding: 1.75rem 1.75rem 1.75rem 1.5rem;
    background: #fafafa;
    border-radius: 0 0 16px 0;
}

/* ── Section eyebrow ─────────────────────────────────────────── */
.cm-section-eyebrow[b-lont66t2r7] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #16a34a;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.cm-estimate-number[b-lont66t2r7] {
    font-weight: 600;
    color: #6b7280;
    font-size: 0.85rem;
    letter-spacing: 0;
    text-transform: none;
}

.cm-estimate-title[b-lont66t2r7] {
    font-size: 1.35rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.4rem;
    line-height: 1.3;
}

.cm-estimate-desc[b-lont66t2r7] {
    color: #6b7280;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

/* ── Line items table ────────────────────────────────────────── */
.cm-items-table-wrap[b-lont66t2r7] {
    margin-bottom: 1rem;
}

.cm-items-table[b-lont66t2r7] {
    font-size: 0.875rem;
    margin: 0;
}

.cm-items-table thead th[b-lont66t2r7] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9ca3af;
    border-bottom: 2px solid #e5e7eb;
    padding: 0.5rem 0.5rem;
    background: transparent;
}

.cm-items-table tbody td[b-lont66t2r7] {
    padding: 0.55rem 0.5rem;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
    vertical-align: middle;
}

.cm-items-table tbody tr:last-child td[b-lont66t2r7] {
    border-bottom: none;
}

/* ── Pricing breakdown box ───────────────────────────────────── */
.cm-price-box[b-lont66t2r7] {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
}

.cm-price-row[b-lont66t2r7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0;
    font-size: 0.9rem;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
}

.cm-price-row:last-child[b-lont66t2r7] {
    border-bottom: none;
}

.cm-deposit-highlight[b-lont66t2r7] {
    background: #f0fdf4;
    border-radius: 6px;
    padding: 0.55rem 0.5rem;
    margin: 0.25rem -0.5rem;
    color: #166534;
    font-size: 0.95rem;
}

.cm-balance-row[b-lont66t2r7] {
    font-size: 0.85rem;
}

.cm-pct-badge[b-lont66t2r7] {
    display: inline-block;
    background: #dcfce7;
    color: #15803d;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1em 0.45em;
    border-radius: 4px;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

/* ── Deposit percentage inline input ─────────────────────────── */
.cm-deposit-input-wrap[b-lont66t2r7] {
    display: inline-flex;
    align-items: center;
    background: #fff;
    border: 1.5px solid #86efac;
    border-radius: 6px;
    padding: 0.1rem 0.4rem;
    gap: 0.15rem;
}

.cm-deposit-input[b-lont66t2r7] {
    width: 3.5rem;
    border: none;
    outline: none;
    font-size: 0.88rem;
    font-weight: 600;
    color: #15803d;
    text-align: right;
    background: transparent;
}

.cm-deposit-input[b-lont66t2r7]::-webkit-inner-spin-button,
.cm-deposit-input[b-lont66t2r7]::-webkit-outer-spin-button {
    opacity: 1;
}

.cm-deposit-pct-sym[b-lont66t2r7] {
    font-size: 0.82rem;
    font-weight: 700;
    color: #15803d;
}

/* ── Trust badges ────────────────────────────────────────────── */
.cm-trust-row[b-lont66t2r7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.cm-trust-badge[b-lont66t2r7] {
    display: inline-flex;
    align-items: center;
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    padding: 0.25em 0.65em;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Form fields ─────────────────────────────────────────────── */
.cm-field-label[b-lont66t2r7] {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.35rem;
}

.cm-optional[b-lont66t2r7] {
    font-weight: 400;
    color: #9ca3af;
    font-size: 0.78rem;
}

.cm-input[b-lont66t2r7] {
    font-size: 0.9rem;
    border-color: #d1d5db;
    border-radius: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
    background: #fff;
}

.cm-input:focus[b-lont66t2r7] {
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

/* ── Signature box ───────────────────────────────────────────── */
.cm-sig-box[b-lont66t2r7] {
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.cm-sig-box:focus-within[b-lont66t2r7] {
    border-color: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

.cm-sig-invalid[b-lont66t2r7] {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10);
}

.cm-sig-textarea[b-lont66t2r7] {
    display: block;
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    padding: 0.65rem 0.85rem;
    font-size: 0.9rem;
    font-family: inherit;
    color: #374151;
    background: transparent;
}

.cm-sig-preview-row[b-lont66t2r7] {
    border-top: 1px dashed #e5e7eb;
    padding: 0.45rem 0.85rem;
    background: #fafafa;
    display: flex;
    align-items: center;
}

.cm-sig-preview[b-lont66t2r7] {
    font-family: 'Georgia', 'Palatino Linotype', serif;
    font-style: italic;
    font-size: 1.15rem;
    color: #1d4ed8;
    letter-spacing: 0.02em;
    min-height: 1.6em;
    display: inline-block;
}

.cm-field-error[b-lont66t2r7] {
    font-size: 0.8rem;
    color: #dc2626;
    margin-top: 0.3rem;
}

/* ── Legal text ──────────────────────────────────────────────── */
.cm-legal-text[b-lont66t2r7] {
    font-size: 0.77rem;
    color: #9ca3af;
    line-height: 1.5;
    border-top: 1px solid #e5e7eb;
    padding-top: 0.85rem;
}

/* ── Approve CTA button ──────────────────────────────────────── */
.cm-approve-btn[b-lont66t2r7] {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #fff;
    border: none;
    padding: 0.85rem 1.5rem;
    font-weight: 700;
    font-size: 1.05rem;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(22, 163, 74, 0.35);
    transition: opacity 0.15s, box-shadow 0.15s, transform 0.1s;
    letter-spacing: 0.01em;
    line-height: 1.3;
}

.cm-approve-btn:hover[b-lont66t2r7] {
    opacity: 0.93;
    box-shadow: 0 6px 24px rgba(22, 163, 74, 0.50);
    transform: translateY(-1px);
    color: #fff;
}

.cm-approve-btn:active[b-lont66t2r7] {
    transform: translateY(0);
}

.cm-approve-sub[b-lont66t2r7] {
    font-size: 0.82rem;
    font-weight: 500;
    opacity: 0.85;
}

.cm-signed-date[b-lont66t2r7] {
    font-size: 0.78rem;
    color: #9ca3af;
}

/* ── Center states (Loading / Processing / Success) ──────────── */
.cm-center-body[b-lont66t2r7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    min-height: 320px;
}

.cm-spinner[b-lont66t2r7] {
    width: 3rem;
    height: 3rem;
}

/* Processing rings */
.cm-processing-rings[b-lont66t2r7] {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cm-ring[b-lont66t2r7] {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(22, 163, 74, 0.25);
    animation: cm-ring-pulse-b-lont66t2r7 2s ease-out infinite;
}

.cm-ring-1[b-lont66t2r7] { width: 80px; height: 80px; animation-delay: 0s; }
.cm-ring-2[b-lont66t2r7] { width: 60px; height: 60px; animation-delay: 0.5s; }

@keyframes cm-ring-pulse-b-lont66t2r7 {
    0%   { transform: scale(0.85); opacity: 0.7; }
    70%  { transform: scale(1.1);  opacity: 0;   }
    100% { transform: scale(1.1);  opacity: 0;   }
}

.cm-processing-title[b-lont66t2r7] {
    font-size: 1.3rem;
    font-weight: 700;
    color: #111827;
}

.cm-processing-subtitle[b-lont66t2r7] {
    color: #6b7280;
    font-size: 0.9rem;
    max-width: 340px;
}

/* ── Success state ───────────────────────────────────────────── */
.cm-success-body[b-lont66t2r7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 2rem 2.5rem;
    text-align: center;
}

.cm-success-icon-wrap[b-lont66t2r7] {
    width: 80px;
    height: 80px;
    background: #dcfce7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: cm-pop-b-lont66t2r7 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes cm-pop-b-lont66t2r7 {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

.cm-success-icon[b-lont66t2r7] {
    font-size: 2.75rem;
    color: #16a34a;
}

.cm-success-title[b-lont66t2r7] {
    font-size: 2rem;
    font-weight: 800;
    color: #111827;
    margin-top: 1rem;
}

.cm-success-subtitle[b-lont66t2r7] {
    color: #6b7280;
    font-size: 1rem;
    max-width: 420px;
    margin-top: 0.5rem;
    line-height: 1.6;
}

.cm-deposit-confirm[b-lont66t2r7] {
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 8px;
    padding: 0.65rem 1.25rem;
    font-size: 0.9rem;
    color: #15803d;
    font-weight: 500;
    margin-top: 1.25rem;
}

.cm-success-checklist[b-lont66t2r7] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.5rem;
    text-align: left;
    min-width: 260px;
}

.cm-success-check[b-lont66t2r7] {
    font-size: 0.9rem;
    color: #374151;
    display: flex;
    align-items: center;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 700px) {
    .cm-modal[b-lont66t2r7] {
        max-height: 100dvh;
        border-radius: 12px 12px 0 0;
        align-self: flex-end;
        margin: 0;
        max-width: 100%;
    }

    .cm-overlay[b-lont66t2r7] {
        align-items: flex-end;
        padding: 0;
    }

    .cm-body[b-lont66t2r7] {
        grid-template-columns: 1fr;
    }

    .cm-left[b-lont66t2r7] {
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
        padding: 1.25rem;
    }

    .cm-right[b-lont66t2r7] {
        padding: 1.25rem;
        border-radius: 0;
    }

    .cm-estimate-title[b-lont66t2r7] {
        font-size: 1.15rem;
    }
}
/* /Components/FieldMode/FmBtn.razor.rz.scp.css */
/* ───────────────────────────────────────────────────────────────────────────
   FmBtn — Field Mode reusable button
   All field-mode screens use this component for consistent tap targets.
─────────────────────────────────────────────────────────────────────────── */

.fm-btn[b-ch08qbd4x1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 56px;
    width: 100%;
    padding: 0 1.25rem;
    border: none;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: transform 0.1s ease, opacity 0.1s ease;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
    letter-spacing: 0.01em;
    text-decoration: none;
    user-select: none;
}

    .fm-btn:active[b-ch08qbd4x1] {
        transform: scale(0.96);
    }

    .fm-btn:disabled[b-ch08qbd4x1] {
        opacity: 0.45;
        cursor: not-allowed;
        pointer-events: none;
    }

    .fm-btn i[b-ch08qbd4x1] {
        font-size: 1.2rem;
        flex-shrink: 0;
    }

/* ── Colour variants ─────────────────────────────────────────────────────── */

.fm-btn-primary[b-ch08qbd4x1]  { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.fm-btn-success[b-ch08qbd4x1]  { background: linear-gradient(135deg, #10b981, #059669); }
.fm-btn-complete[b-ch08qbd4x1] { background: linear-gradient(135deg, #22c55e, #16a34a); }
.fm-btn-danger[b-ch08qbd4x1]   { background: linear-gradient(135deg, #ef4444, #dc2626); }
.fm-btn-warning[b-ch08qbd4x1]  { background: linear-gradient(135deg, #f59e0b, #d97706); }
.fm-btn-maps[b-ch08qbd4x1]     { background: linear-gradient(135deg, #0ea5e9, #0284c7); }

.fm-btn-ghost[b-ch08qbd4x1] {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #94a3b8;
    box-shadow: none;
}

/* ── Size modifiers ──────────────────────────────────────────────────────── */

/* Square icon-only button */
.fm-btn-icon[b-ch08qbd4x1] {
    flex: 0 0 56px;
    min-height: 56px;
    width: 56px;
    border-radius: 14px;
    padding: 0;
    box-shadow: none;
}

/* Smaller variant for secondary rows */
.fm-btn-sm[b-ch08qbd4x1] {
    min-height: 44px;
    font-size: 0.9rem;
    border-radius: 10px;
    box-shadow: none;
}

/* Oversized CTA for start/clock-out screens */
.fm-btn-xl[b-ch08qbd4x1] {
    min-height: 68px;
    font-size: 1.15rem;
    border-radius: 18px;
}
/* /Components/FieldMode/FmPageShell.razor.rz.scp.css */
/* ───────────────────────────────────────────────────────────────────────────
   FmPageShell — standard page wrapper for field-mode screens
─────────────────────────────────────────────────────────────────────────── */

.fmps-shell[b-v41optzhuw] {
    padding: 1rem 0.9rem 2rem;
}

.fmps-toprow[b-v41optzhuw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.1rem;
}

.fmps-back[b-v41optzhuw] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    min-height: 38px;
    cursor: pointer;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

    .fmps-back:hover[b-v41optzhuw]  { background: rgba(255, 255, 255, .12); }
    .fmps-back:active[b-v41optzhuw] { background: rgba(255, 255, 255, .16); }

    .fmps-back i[b-v41optzhuw] { font-size: 0.8rem; }

.fmps-topright[b-v41optzhuw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.fmps-title[b-v41optzhuw] {
    font-size: 1.4rem;
    font-weight: 800;
    color: #f1f5f9;
    margin: 0 0 0.3rem;
    line-height: 1.2;
}

.fmps-subtitle[b-v41optzhuw] {
    font-size: 0.82rem;
    color: #6b7280;
    margin: 0 0 1.4rem;
}
/* /Components/Layout/LandingLayout.razor.rz.scp.css */
/* ── LandingLayout — clean full-viewport shell ───────────────────────────── */
/* html/body background is set via <HeadContent> in LandingLayout.razor      */
/* because Blazor scoped CSS cannot target root elements.                     */

.landing[b-0igtswjkh2] {
    min-height: 100vh;
    background: #0b0b0b;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    /* Prevent horizontal scroll on all viewports */
    overflow-x: hidden;
    width: 100%;
}

.landing-inner[b-0igtswjkh2] {
    width: 100%;
    max-width: 700px;
    padding: 40px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .landing[b-0igtswjkh2] {
        display: block !important;
        min-height: auto !important;
        height: auto !important;
        padding-top: 10px !important;
        align-items: unset !important;
        justify-content: unset !important;
    }

    .landing-inner[b-0igtswjkh2] {
        margin-top: 0 !important;
        padding: 10px 12px !important;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-gk53iq6lor] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-gk53iq6lor] {
    flex: 1;
}

.sidebar[b-gk53iq6lor] {
    background: var(--fo-card);
    border-right: 1px solid var(--fo-border);
}

.top-row[b-gk53iq6lor] {
    background: var(--fo-card);
    border-bottom: 1px solid var(--fo-border);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-gk53iq6lor]  a, .top-row[b-gk53iq6lor]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-gk53iq6lor]  a:hover, .top-row[b-gk53iq6lor]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-gk53iq6lor]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-gk53iq6lor] {
        justify-content: space-between;
    }

    .top-row[b-gk53iq6lor]  a, .top-row[b-gk53iq6lor]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-gk53iq6lor] {
        flex-direction: row;
    }

    .sidebar[b-gk53iq6lor] {
        width: 200px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-gk53iq6lor] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-gk53iq6lor]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-gk53iq6lor], article[b-gk53iq6lor] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-gk53iq6lor] {
    background: var(--fo-warning-bg, lightyellow); /* suggest: --fo-warning-bg */
    bottom: 0;
    box-shadow: 0 -1px 2px var(--fo-shadow, rgba(0,0,0,0.2));
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-gk53iq6lor] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* --- Sidebar Dark Theme --- */
.main-sidebar[b-gk53iq6lor] {
    background: var(--fo-card);
    color: var(--fo-text-primary);
    border-right: 1px solid var(--fo-border);
    width: 200px;
    min-height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    z-index: 200;
    overflow-y: auto;
    box-shadow: 0 0 0 0 rgba(0,0,0,0);
}

.main-sidebar .nav-link[b-gk53iq6lor],
.main-sidebar .nav-group-header[b-gk53iq6lor] {
    color: #cbd5e1;
    background: none;
    border: none;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}

.main-sidebar .nav-link:hover[b-gk53iq6lor],
.main-sidebar .nav-group-header:hover[b-gk53iq6lor] {
    background: #60a5fa;
    color: #000;
}

.main-sidebar .nav-link.active[b-gk53iq6lor],
.main-sidebar a.active[b-gk53iq6lor],
.main-sidebar .active[b-gk53iq6lor] {
    background-color: #60a5fa !important;
    color: #000 !important;
    transition: background 0.15s ease, color 0.15s ease;
}

.main-sidebar .nav-link:hover[b-gk53iq6lor] {
    background-color: #60a5fa;
    color: #000;
    transition: background 0.15s ease, color 0.15s ease;
}

.main-sidebar .bi[b-gk53iq6lor] {
    color: var(--fo-blue);
}

.main-sidebar .nav-section-header[b-gk53iq6lor] {
    color: var(--fo-text-secondary);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 1rem 0 0.3rem 1rem;
    background: none;
}

.main-sidebar .nav-lock-badge[b-gk53iq6lor] {
    background: var(--fo-yellow-light, #fef3c7);
    color: var(--fo-yellow-dark, #92400e);
    border-radius: 999px;
    font-size: 0.7rem;
    padding: 0.1rem 0.5rem;
    margin-left: 0.5rem;
}

.main-sidebar .sidebar-close-btn[b-gk53iq6lor] {
    background: none;
    border: none;
    color: var(--fo-text-secondary);
    font-size: 1.2rem;
    margin: 0.5rem 0.5rem 0.5rem auto;
    cursor: pointer;
    align-self: flex-end;
    display: none;
}

/* --- Mobile drawer (driven by .mobile-mode class from DeviceService) --- */
.mobile-mode .main-sidebar[b-gk53iq6lor] {
    position: fixed;
    left: 0;
    top: 0;
    width: 280px;
    height: 100vh;
    min-height: unset;
    z-index: 500;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
}

.mobile-mode .main-sidebar.sidebar-open[b-gk53iq6lor] {
    transform: translateX(0);
}

.mobile-mode .main-sidebar .sidebar-close-btn[b-gk53iq6lor] {
    display: flex;
}

.sidebar-overlay[b-gk53iq6lor] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 499;
    cursor: pointer;
}
/* --- Topbar Dropdown Dark Theme --- */
.topbar-user-dropdown[b-gk53iq6lor] {
    position: relative;
}

.topbar-user[b-gk53iq6lor] {
    background: transparent !important;
    color: #f1f5f9 !important;
    border: 1px solid #334155;
    border-radius: 10px;
    padding: 0.45rem 1.1rem 0.45rem 0.7rem;
    font-weight: 500;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.topbar-user:hover[b-gk53iq6lor] {
    background: #1e293b;
    color: #f1f5f9;
}

.topbar-dropdown-menu[b-gk53iq6lor] {
    position: absolute;
    right: 0;
    top: 110%;
    min-width: 220px;
    background: #1e293b !important;
    color: #f1f5f9 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    padding: 0.5rem 0;
    z-index: 1001;
    pointer-events: auto;
    animation: fadeIn 0.18s ease;
}

.topbar-dropdown-header[b-gk53iq6lor] {
    padding: 1rem 1.5rem 0.5rem 1.5rem;
    border-bottom: 1px solid #334155;
    background: #1e293b !important;
    color: #f1f5f9 !important;
}

.topbar-dropdown-name[b-gk53iq6lor] {
    font-weight: 700;
    font-size: 1.08rem;
    color: #f1f5f9;
}

.topbar-dropdown-company[b-gk53iq6lor] {
    font-size: 0.95rem;
    color: #94a3b8;
}

.topbar-dropdown-divider[b-gk53iq6lor] {
    height: 1px;
    background: #334155;
    margin: 0.5rem 0;
    border: none;
}

.topbar-dropdown-item[b-gk53iq6lor] {
    width: 100%;
    background: none;
    border: none;
    color: #cbd5e1;
    text-align: left;
    font-size: 1rem;
    padding: 0.7rem 1.5rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    border-radius: 6px;
}

.topbar-dropdown-item:hover[b-gk53iq6lor] {
    background: #60a5fa !important;
    color: #000 !important;
}

.topbar-dropdown-item:active[b-gk53iq6lor],
.topbar-dropdown-item.selected[b-gk53iq6lor] {
    background: #60a5fa !important;
    color: #000 !important;
}

.topbar-dropdown-item--danger[b-gk53iq6lor] {
    color: #f87171;
}

.topbar-dropdown-item--danger:hover[b-gk53iq6lor] {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

/* ── Mobile: breakpoint-driven sidebar drawer (CSS-only, no JS device detection required) ──
   Mirrors .mobile-mode rules but fires unconditionally on narrow viewports.
   This ensures phones always get the drawer/offscreen behaviour even if
   DeviceService has not yet initialised or misses the user-agent. */
@media (max-width: 768px) {
    /* Collapse sidebar off-screen by default */
    .main-sidebar[b-gk53iq6lor] {
        position: fixed !important;
        left: 0;
        top: 0;
        width: 280px;
        height: 100vh;
        min-height: unset;
        z-index: 500;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
    }

    /* Slide in when .sidebar-open is toggled by ToggleSidebar() */
    .main-sidebar.sidebar-open[b-gk53iq6lor] {
        transform: translateX(0);
    }

    /* Show the X close button inside the drawer */
    .main-sidebar .sidebar-close-btn[b-gk53iq6lor] {
        display: flex;
    }

    /* Content takes full width – sidebar is out of normal flow */
    .main-content[b-gk53iq6lor] {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* Ensure the hamburger in the topbar is always visible on mobile */
    .topbar-hamburger[b-gk53iq6lor] {
        display: flex !important;
    }

    /* Hide the desktop quick-nav links to save topbar space */
    .topbar-quicknav[b-gk53iq6lor] {
        display: none !important;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-w1eao0iyyb] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: var(--fo-text-primary);
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid var(--fo-border);
    background: var(--fo-card);
}

.navbar-toggler:checked[b-w1eao0iyyb] {
    background-color: var(--fo-bg);
}

.top-row[b-w1eao0iyyb] {
    height: 3.5rem;
    background: var(--fo-card);
    border-bottom: 1px solid var(--fo-border);
}

.navbar-brand[b-w1eao0iyyb] {
    font-size: 1.1rem;
}

.bi[b-w1eao0iyyb] {
    display: inline-block;
    position: relative;
    width: 1rem;
    height: 1rem;
    margin-right: 0.4rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-w1eao0iyyb] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-w1eao0iyyb] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-w1eao0iyyb] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-w1eao0iyyb] {
    font-size: 0.82rem;
    padding-bottom: 0.1rem;
}

    .nav-item:first-of-type[b-w1eao0iyyb] {
        padding-top: 0.5rem;
    }

    .nav-item:last-of-type[b-w1eao0iyyb] {
        padding-bottom: 0.5rem;
    }

    .nav-item[b-w1eao0iyyb]  .nav-link {
        color: #334155;
        background: none;
        border: none;
        border-radius: 6px;
        transition: background 0.15s ease, color 0.15s ease, padding 0.15s ease;
        padding: 0.3rem 0.75rem;
    }

.nav-item[b-w1eao0iyyb]  .nav-link,
.nav-item[b-w1eao0iyyb]  a.active,
.nav-item[b-w1eao0iyyb]  .nav-link:hover {
    transition: all 0.15s ease;
}

.nav-item[b-w1eao0iyyb]  .nav-link:hover {
    background: #60a5fa;
    color: #000;
    padding-left: 1rem;
}

/* Active/selected sidebar nav item: baby-blue highlight */
.nav-item[b-w1eao0iyyb]  a.active,
.nav-item[b-w1eao0iyyb]  .nav-link.active,
.nav-item[b-w1eao0iyyb]  .nav-link.selected,
.nav-item[b-w1eao0iyyb]  .nav-link[aria-current="page"] {
    background: #60a5fa !important;
    color: #000 !important;
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease;
}

/* Optional: primary highlight for important selections */
.nav-item[b-w1eao0iyyb]  .nav-link.primary-highlight {
    background: #dcfce7;
    color: #166534;
}

.nav-scrollable[b-w1eao0iyyb] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-w1eao0iyyb] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-w1eao0iyyb] {
        display: none;
    }

    .nav-scrollable[b-w1eao0iyyb] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}

/* ── Collapsible Finance nav group ────────────────── */
.nav-group-header[b-w1eao0iyyb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 12px 14px 3px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--fo-text-secondary);
    text-transform: uppercase;
    background: none;
    border: none;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease;
}

.nav-group-header:hover[b-w1eao0iyyb] {
    color: var(--fo-text-primary);
}

.nav-group-header .nav-chevron[b-w1eao0iyyb] {
    font-size: 0.7rem;
    width: auto;
    height: auto;
    margin: 0;
    background: none;
}

.nav-sub-link[b-w1eao0iyyb] {
    padding-left: 28px !important;
}

/* ── Finance inner section labels ────────────────── */
.nav-sub-group[b-w1eao0iyyb] {
    padding: 6px 14px 1px 28px;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fo-text-secondary);
    opacity: 0.65;
}

/* ── Plan tier badge ─────────────────────────────── */
.nav-plan-badge-wrapper[b-w1eao0iyyb] {
    padding: 0.75rem 0.75rem 0.4rem;
    margin-top: auto;
}

.nav-plan-badge[b-w1eao0iyyb] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 999px;
    text-decoration: none;
    transition: opacity 0.15s ease;
}

.nav-plan-badge:hover[b-w1eao0iyyb] {
    opacity: 0.85;
    text-decoration: none;
}

.nav-plan-badge--starter[b-w1eao0iyyb] {
    background: var(--fo-bg);
    color: var(--fo-text-secondary);
    border: 1px solid var(--fo-border);
}

.nav-plan-badge--growth[b-w1eao0iyyb] {
    background: var(--fo-bg);
    color: var(--fo-green);
    border: 1px solid var(--fo-border);
}

.nav-plan-badge--pro[b-w1eao0iyyb] {
    background: var(--fo-bg);
    color: var(--fo-yellow);
    border: 1px solid var(--fo-border);
}
/* /Components/Measurements/AISmartEstimatePanel.razor.rz.scp.css */
/* ============================================================
   AISmartEstimatePanel.razor.css
   AI-branded estimate panel — purple gradient aesthetic
   ============================================================ */

/* ── AI Generate button ───────────────────────────────────────── */
.ai-generate-btn[b-8brk59wiqf] {
    background: linear-gradient(135deg, #6d28d9 0%, #4f46e5 100%);
    color: #fff;
    border: none;
    padding: 0.5rem 1.1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(99, 102, 241, 0.35);
    transition: box-shadow 0.15s, opacity 0.15s;
}

.ai-generate-btn:hover:not(:disabled)[b-8brk59wiqf] {
    opacity: 0.92;
    box-shadow: 0 4px 18px rgba(99, 102, 241, 0.5);
    color: #fff;
}

.ai-generate-btn:disabled[b-8brk59wiqf] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── AI badge chip ────────────────────────────────────────────── */
.ai-badge[b-8brk59wiqf] {
    display: inline-block;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #e9d5ff;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.2em 0.55em;
    border-radius: 4px;
    vertical-align: middle;
    text-transform: uppercase;
}

/* ── Panel ─────────────────────────────────────────────────────── */
.ai-panel[b-8brk59wiqf] {
    border-top: 2px solid rgba(99, 102, 241, 0.45);
}

/* ── Panel header ──────────────────────────────────────────────── */
.ai-panel-header[b-8brk59wiqf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(99, 102, 241, 0.2);
    background: linear-gradient(90deg, rgba(109, 40, 217, 0.08) 0%, transparent 70%);
    border-radius: 6px 6px 0 0;
    padding: 0.7rem 0.9rem;
    margin: -0.9rem -0.9rem 1rem -0.9rem; /* bleed to card edge */
    color: #c4b5fd;
    font-weight: 600;
    font-size: 0.95rem;
}

/* ── Analyzing pulse ───────────────────────────────────────────── */
.ai-analyzing-body[b-8brk59wiqf] {
    padding: 0.5rem 0;
}

.ai-pulse-ring[b-8brk59wiqf] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ai-pulse-ring[b-8brk59wiqf]::before {
    content: '';
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(109, 40, 217, 0.12);
    animation: aiPulse-b-8brk59wiqf 1.6s ease-in-out infinite;
}

@keyframes aiPulse-b-8brk59wiqf {
    0%, 100% { transform: scale(1);   opacity: 0.6; }
    50%       { transform: scale(1.5); opacity: 0.1; }
}

.text-purple[b-8brk59wiqf] { color: #a78bfa !important; }

/* ── Regenerate button ─────────────────────────────────────────── */
.ai-regen-btn[b-8brk59wiqf] {
    border: 1px solid rgba(99, 102, 241, 0.35);
    color: #a78bfa;
    background: transparent;
    font-size: 0.8rem;
}

.ai-regen-btn:hover[b-8brk59wiqf] {
    background: rgba(99, 102, 241, 0.1);
    color: #c4b5fd;
    border-color: rgba(99, 102, 241, 0.6);
}

/* ── Section labels ────────────────────────────────────────────── */
.section-label[b-8brk59wiqf] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
}

/* ── AI table ──────────────────────────────────────────────────── */
.ai-table thead th[b-8brk59wiqf] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.6;
    border-bottom-width: 1px;
    white-space: nowrap;
}

.ai-table tbody tr[b-8brk59wiqf] {
    transition: background 0.1s;
}

.ai-table tbody tr:hover[b-8brk59wiqf] {
    background: rgba(99, 102, 241, 0.04);
}

.ai-upsell-row[b-8brk59wiqf] {
    background: rgba(34, 197, 94, 0.04);
}

.ai-total-row td[b-8brk59wiqf] {
    border-top: 2px solid rgba(99, 102, 241, 0.25);
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.ai-total-amount[b-8brk59wiqf] {
    color: #a78bfa;
}

/* ── Edit inputs ───────────────────────────────────────────────── */
.edit-name-input[b-8brk59wiqf]  { min-width: 130px; max-width: 220px; }
.edit-qty-input[b-8brk59wiqf]   { min-width: 80px;  max-width: 100px; }
.edit-price-input[b-8brk59wiqf] { min-width: 90px;  max-width: 110px; }

/* ── Scope note card ───────────────────────────────────────────── */
.scope-note-card[b-8brk59wiqf] {
    background: rgba(99, 102, 241, 0.07);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-left: 3px solid rgba(99, 102, 241, 0.6);
    border-radius: 6px;
    padding: 0.7rem 1rem;
    color: #cbd5e1;
}

.scope-note-label[b-8brk59wiqf] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #818cf8;
    margin-bottom: 0.35rem;
}

/* ── Upsell grid ───────────────────────────────────────────────── */
.upsell-grid[b-8brk59wiqf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.65rem;
}

.upsell-card[b-8brk59wiqf] {
    background: rgba(234, 179, 8, 0.05);
    border: 1px solid rgba(234, 179, 8, 0.18);
    border-radius: 8px;
    padding: 0.75rem 0.85rem;
    transition: border-color 0.15s, background 0.15s;
}

.upsell-card:hover[b-8brk59wiqf] {
    background: rgba(234, 179, 8, 0.09);
    border-color: rgba(234, 179, 8, 0.35);
}

/* ── Add upsell button ─────────────────────────────────────────── */
.btn-xs[b-8brk59wiqf] {
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 4px;
}

.add-upsell-btn[b-8brk59wiqf] {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
    white-space: nowrap;
}

.add-upsell-btn:hover[b-8brk59wiqf] {
    background: rgba(34, 197, 94, 0.22);
    border-color: rgba(34, 197, 94, 0.5);
    color: #86efac;
}

/* ── Service label chips ───────────────────────────────────────── */
.service-chip[b-8brk59wiqf] {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.25em 0.6em;
    border-radius: 4px;
    white-space: nowrap;
    text-transform: uppercase;
}

.service-chip.small[b-8brk59wiqf] { font-size: 0.62rem; }

.chip-lawn[b-8brk59wiqf]      { background: rgba(34,  197, 94,  0.15); color: #4ade80; }
.chip-mulch[b-8brk59wiqf]     { background: rgba(180, 83,  9,   0.20); color: #fb923c; }
.chip-wash[b-8brk59wiqf]      { background: rgba(14,  165, 233, 0.15); color: #38bdf8; }
.chip-roof[b-8brk59wiqf]      { background: rgba(139, 92,  246, 0.18); color: #a78bfa; }
.chip-gutter[b-8brk59wiqf]    { background: rgba(100, 116, 139, 0.20); color: #94a3b8; }
.chip-fertil[b-8brk59wiqf]    { background: rgba(34,  197, 94,  0.10); color: #86efac; }
.chip-trim[b-8brk59wiqf]      { background: rgba(16,  185, 129, 0.15); color: #34d399; }
.chip-tree[b-8brk59wiqf]      { background: rgba(21,  128, 61,  0.20); color: #4ade80; }
.chip-snow[b-8brk59wiqf]      { background: rgba(186, 230, 253, 0.10); color: #bae6fd; }
.chip-deck[b-8brk59wiqf]      { background: rgba(217, 119, 6,   0.18); color: #fbbf24; }
.chip-fence[b-8brk59wiqf]     { background: rgba(161, 98,  7,   0.20); color: #f59e0b; }
.chip-irrigation[b-8brk59wiqf]{ background: rgba(56,  189, 248, 0.15); color: #7dd3fc; }
.chip-default[b-8brk59wiqf]   { background: rgba(71,  85,  105, 0.20); color: #94a3b8; }
/* /Components/Measurements/GenerateEstimatePanel.razor.rz.scp.css */
.generate-estimate-panel[b-o45k4ftypw] {
    border-top: 2px solid rgba(25, 135, 84, 0.35);
}

.table-header-row th[b-o45k4ftypw] {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
    border-bottom-width: 1px;
}

.estimate-total-row td[b-o45k4ftypw] {
    border-top: 2px solid rgba(255, 255, 255, 0.15);
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}
/* /Components/Pages/Admin/SuperAdminDashboard.razor.rz.scp.css */
/* ── Platform Dashboard ─────────────────────────────────────────────────── */

/* KPI Cards */
.kpi-card[b-lbiqxl941g] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    height: 100%;
    transition: border-color 0.2s ease;
}

.kpi-card:hover[b-lbiqxl941g] {
    border-color: rgba(255, 255, 255, 0.2);
}

.kpi-card--green[b-lbiqxl941g]  { border-left: 3px solid #4caf82; }
.kpi-card--blue[b-lbiqxl941g]   { border-left: 3px solid #4c8cff; }
.kpi-card--amber[b-lbiqxl941g]  { border-left: 3px solid #ffc107; background: rgba(255, 193, 7, 0.06); }
.kpi-card--red[b-lbiqxl941g]    { border-left: 3px solid #f44336; background: rgba(244, 67, 54, 0.06); }

.kpi-card__label[b-lbiqxl941g] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.25rem;
}

.kpi-card__value[b-lbiqxl941g] {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 0.2rem;
}

.kpi-card__sub[b-lbiqxl941g] {
    font-size: 0.72rem;
}

/* Plan badges */
.plan-badge--starter[b-lbiqxl941g] { background: #6c757d; }
.plan-badge--growth[b-lbiqxl941g]  { background: #0d6efd; }
.plan-badge--pro[b-lbiqxl941g]     { background: #6f42c1; }

/* MRR bar (inline mini bar chart) */
.mrr-bar[b-lbiqxl941g] {
    height: 6px;
    border-radius: 3px;
    background: #0d6efd;
    min-width: 2px;
    max-width: 80px;
}

/* Status distribution grid */
.status-grid[b-lbiqxl941g] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.status-pill[b-lbiqxl941g] {
    display: flex;
    align-items: center;
    min-width: 9rem;
}

/* Table tweaks */
.platform-dashboard .table[b-lbiqxl941g] {
    font-size: 0.875rem;
}

.platform-dashboard .table thead th[b-lbiqxl941g] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.45);
    border-bottom-color: rgba(255, 255, 255, 0.1);
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.platform-dashboard .table tbody tr:last-child td[b-lbiqxl941g] {
    border-bottom: none;
}
/* /Components/Pages/AlertSettingsPage.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────────────────────
   AlertSettingsPage.razor.css  — Premium dark-theme alert configuration UI
   All selectors are scoped automatically by Blazor CSS isolation.
───────────────────────────────────────────────────────────────────────────── */

/* ── Design tokens ───────────────────────────────────────────────────────── */
:root[b-vpx0bto4jo] {
    --als-bg:           #0f1117;
    --als-surface:      #1a1d27;
    --als-surface-2:    #22263a;
    --als-border:       #2e3348;
    --als-border-focus: #4f6ef7;
    --als-text:         #e4e6f0;
    --als-text-muted:   #7a7f9a;
    --als-accent:       #4f6ef7;
    --als-success:      #22c55e;
    --als-warning:      #f59e0b;
    --als-danger:       #ef4444;
    --als-disabled-bg:  #13151e;
    --als-radius:       10px;
    --als-radius-sm:    6px;
    --als-shadow:       0 2px 12px rgba(0, 0, 0, .45);
    --als-transition:   150ms ease;
}

/* ── Page shell ──────────────────────────────────────────────────────────── */
.als-page[b-vpx0bto4jo] {
    min-height: 100vh;
    background: var(--als-bg);
    color: var(--als-text);
    padding: 1.75rem 1.5rem 3rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.als-header[b-vpx0bto4jo] {
    margin-bottom: 2rem;
}

.als-title[b-vpx0bto4jo] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--als-text);
    margin: 0 0 .35rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.als-title-icon[b-vpx0bto4jo] {
    font-size: 1.4rem;
}

.als-subtitle[b-vpx0bto4jo] {
    color: var(--als-text-muted);
    font-size: .93rem;
    margin: 0;
}

/* ── Loading ──────────────────────────────────────────────────────────────── */
.als-loading[b-vpx0bto4jo] {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--als-text-muted);
    font-size: .95rem;
    padding: 3rem 0;
}

.als-spinner[b-vpx0bto4jo] {
    width: 22px;
    height: 22px;
    border: 2.5px solid var(--als-border);
    border-top-color: var(--als-accent);
    border-radius: 50%;
    animation: als-spin .7s linear infinite;
    flex-shrink: 0;
}

@@keyframes als-spin {
    to[b-vpx0bto4jo] { transform: rotate(360deg); }
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.als-empty[b-vpx0bto4jo] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--als-text-muted);
}

.als-empty-icon[b-vpx0bto4jo] {
    font-size: 2.5rem;
    display: block;
    margin-bottom: .75rem;
}

/* ── Two-column layout ───────────────────────────────────────────────────── */
.als-layout[b-vpx0bto4jo] {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.5rem;
    align-items: start;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.als-sidebar[b-vpx0bto4jo] {
    background: var(--als-surface);
    border: 1px solid var(--als-border);
    border-radius: var(--als-radius);
    padding: 1rem .75rem;
    position: sticky;
    top: 1.5rem;
}

.als-sidebar-label[b-vpx0bto4jo] {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--als-text-muted);
    padding: 0 .5rem;
    margin: 0 0 .6rem;
}

.als-cat-btn[b-vpx0bto4jo] {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .55rem .65rem;
    border: none;
    border-radius: var(--als-radius-sm);
    background: transparent;
    color: var(--als-text-muted);
    font-size: .88rem;
    text-align: left;
    cursor: pointer;
    transition: background var(--als-transition), color var(--als-transition);
    margin-bottom: .15rem;
}

.als-cat-btn:hover[b-vpx0bto4jo] {
    background: var(--als-surface-2);
    color: var(--als-text);
}

.als-cat-btn--active[b-vpx0bto4jo] {
    background: rgba(79, 110, 247, .18);
    color: var(--als-accent);
    font-weight: 600;
}

.als-cat-icon[b-vpx0bto4jo] {
    font-size: 1rem;
    flex-shrink: 0;
}

.als-cat-count[b-vpx0bto4jo] {
    margin-left: auto;
    background: var(--als-surface-2);
    border-radius: 20px;
    font-size: .7rem;
    padding: .1em .5em;
    color: var(--als-text-muted);
}

.als-cat-btn--active .als-cat-count[b-vpx0bto4jo] {
    background: rgba(79, 110, 247, .25);
    color: var(--als-accent);
}

/* ── Alert cards panel ───────────────────────────────────────────────────── */
.als-panel[b-vpx0bto4jo] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Individual card ─────────────────────────────────────────────────────── */
.als-card[b-vpx0bto4jo] {
    background: var(--als-surface);
    border: 1px solid var(--als-border);
    border-radius: var(--als-radius);
    overflow: hidden;
    box-shadow: var(--als-shadow);
    transition: border-color var(--als-transition);
}

.als-card:hover[b-vpx0bto4jo] {
    border-color: #3a4060;
}

.als-card--off[b-vpx0bto4jo] {
    border-color: #1e2030;
    opacity: .75;
}

/* ── Card header ─────────────────────────────────────────────────────────── */
.als-card-header[b-vpx0bto4jo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--als-border);
    background: var(--als-surface-2);
}

.als-card-title-group[b-vpx0bto4jo] {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    min-width: 0;
}

.als-card-name[b-vpx0bto4jo] {
    font-weight: 600;
    font-size: .97rem;
    color: var(--als-text);
}

.als-card-desc[b-vpx0bto4jo] {
    font-size: .8rem;
    color: var(--als-text-muted);
    margin-top: .15rem;
    line-height: 1.4;
}

.als-card-header-right[b-vpx0bto4jo] {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}

/* ── Severity dot ────────────────────────────────────────────────────────── */
.als-severity-dot[b-vpx0bto4jo] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: .35rem;
}

.als-severity-dot--info[b-vpx0bto4jo]     { background: #3b82f6; box-shadow: 0 0 5px #3b82f640; }
.als-severity-dot--warning[b-vpx0bto4jo]  { background: var(--als-warning); box-shadow: 0 0 5px #f59e0b40; }
.als-severity-dot--critical[b-vpx0bto4jo] { background: var(--als-danger);  box-shadow: 0 0 5px #ef444440; }

/* ── Saved badge ─────────────────────────────────────────────────────────── */
.als-saved-badge[b-vpx0bto4jo] {
    font-size: .75rem;
    font-weight: 600;
    color: var(--als-success);
    background: rgba(34, 197, 94, .12);
    border: 1px solid rgba(34, 197, 94, .3);
    border-radius: 20px;
    padding: .15em .7em;
    animation: als-fade-in .2s ease;
}

@@keyframes als-fade-in {
    from[b-vpx0bto4jo] { opacity: 0; transform: scale(.9); }
    to[b-vpx0bto4jo]   { opacity: 1; transform: scale(1); }
}

/* ── Always-on badge ─────────────────────────────────────────────────────── */
.als-badge-required[b-vpx0bto4jo] {
    font-size: .72rem;
    font-weight: 600;
    color: var(--als-text-muted);
    background: var(--als-surface);
    border: 1px solid var(--als-border);
    border-radius: 20px;
    padding: .15em .7em;
}

/* ── Admin-only audience badge ───────────────────────────────────────────── */
.als-badge-admin-only[b-vpx0bto4jo] {
    font-size: .72rem;
    font-weight: 600;
    color: #a78bfa;
    background: rgba(167, 139, 250, .12);
    border: 1px solid rgba(167, 139, 250, .3);
    border-radius: 20px;
    padding: .15em .65em;
    white-space: nowrap;
}

/* ── Supervisors+ audience badge ─────────────────────────────────────────── */
.als-badge-supervisors[b-vpx0bto4jo] {
    font-size: .72rem;
    font-weight: 600;
    color: #60a5fa;
    background: rgba(96, 165, 250, .12);
    border: 1px solid rgba(96, 165, 250, .3);
    border-radius: 20px;
    padding: .15em .65em;
    white-space: nowrap;
}

/* ── Toggle switch ───────────────────────────────────────────────────────── */
.als-toggle[b-vpx0bto4jo] {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.als-toggle input[b-vpx0bto4jo] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.als-toggle-track[b-vpx0bto4jo] {
    display: inline-block;
    width: 42px;
    height: 24px;
    background: #2e3348;
    border-radius: 24px;
    position: relative;
    transition: background var(--als-transition);
}

.als-toggle input:checked + .als-toggle-track[b-vpx0bto4jo] {
    background: var(--als-accent);
}

.als-toggle-thumb[b-vpx0bto4jo] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform var(--als-transition);
}

.als-toggle input:checked + .als-toggle-track .als-toggle-thumb[b-vpx0bto4jo] {
    transform: translateX(18px);
}

/* ── Card body ───────────────────────────────────────────────────────────── */
.als-card-body[b-vpx0bto4jo] {
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.als-card-body--disabled[b-vpx0bto4jo] {
    pointer-events: none;
    opacity: .45;
}

/* ── Fields row ──────────────────────────────────────────────────────────── */
.als-fields-row[b-vpx0bto4jo] {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.als-field[b-vpx0bto4jo] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    min-width: 100px;
}

.als-field-label[b-vpx0bto4jo] {
    font-size: .75rem;
    font-weight: 600;
    color: var(--als-text-muted);
    letter-spacing: .04em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: .3rem;
}

.als-field-unit[b-vpx0bto4jo] {
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    opacity: .75;
}

.als-select[b-vpx0bto4jo],
.als-input[b-vpx0bto4jo] {
    background: var(--als-surface-2);
    border: 1px solid var(--als-border);
    border-radius: var(--als-radius-sm);
    color: var(--als-text);
    font-size: .88rem;
    padding: .4rem .6rem;
    outline: none;
    transition: border-color var(--als-transition);
    width: 100%;
}

.als-select:focus[b-vpx0bto4jo],
.als-input:focus[b-vpx0bto4jo] {
    border-color: var(--als-border-focus);
}

.als-select:disabled[b-vpx0bto4jo],
.als-input:disabled[b-vpx0bto4jo] {
    background: var(--als-disabled-bg);
    color: var(--als-text-muted);
    cursor: not-allowed;
}

.als-select option[b-vpx0bto4jo] {
    background: var(--als-surface-2);
}

.als-input[b-vpx0bto4jo] {
    max-width: 110px;
}

/* ── Delivery channels row ───────────────────────────────────────────────── */
.als-delivery-row[b-vpx0bto4jo] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
}

.als-channels[b-vpx0bto4jo] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.als-channel[b-vpx0bto4jo] {
    cursor: pointer;
}

.als-channel input[b-vpx0bto4jo] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.als-channel-box[b-vpx0bto4jo] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .7rem;
    border: 1px solid var(--als-border);
    border-radius: 20px;
    font-size: .8rem;
    color: var(--als-text-muted);
    background: var(--als-surface-2);
    transition: border-color var(--als-transition), color var(--als-transition),
                background var(--als-transition);
    user-select: none;
}

.als-channel input:checked + .als-channel-box[b-vpx0bto4jo] {
    border-color: var(--als-accent);
    color: var(--als-accent);
    background: rgba(79, 110, 247, .12);
}

.als-channel:hover .als-channel-box[b-vpx0bto4jo] {
    border-color: #3a4060;
    color: var(--als-text);
}

.als-channel--always-on[b-vpx0bto4jo] {
    cursor: default;
}

.als-channel--always-on .als-channel-box[b-vpx0bto4jo] {
    border-color: rgba(34, 197, 94, .4);
    color: var(--als-success);
    background: rgba(34, 197, 94, .08);
}

.als-channel--disabled[b-vpx0bto4jo] {
    cursor: not-allowed;
}

.als-channel--disabled .als-channel-box[b-vpx0bto4jo] {
    opacity: .4;
}

.als-channel-icon[b-vpx0bto4jo] {
    font-size: .9rem;
}

/* ── Mobile responsive ───────────────────────────────────────────────────── */
@@media (max-width: 768px) {
    .als-page[b-vpx0bto4jo] {
        padding: 1rem .75rem 2rem;
    }

    .als-layout[b-vpx0bto4jo] {
        grid-template-columns: 1fr;
    }

    .als-sidebar[b-vpx0bto4jo] {
        display: flex;
        flex-wrap: wrap;
        gap: .35rem;
        position: static;
        padding: .75rem;
    }

    .als-sidebar-label[b-vpx0bto4jo] {
        width: 100%;
        margin-bottom: .25rem;
    }

    .als-cat-btn[b-vpx0bto4jo] {
        width: auto;
        flex: 0 0 auto;
        padding: .4rem .75rem;
    }

    .als-cat-count[b-vpx0bto4jo] {
        display: none;
    }

    .als-fields-row[b-vpx0bto4jo] {
        flex-direction: column;
    }

    .als-input[b-vpx0bto4jo] {
        max-width: 100%;
    }

    .als-delivery-row[b-vpx0bto4jo] {
        flex-direction: column;
        align-items: flex-start;
    }
}

@@media (max-width: 480px) {
    .als-card-header[b-vpx0bto4jo] {
        flex-direction: column;
        align-items: flex-start;
        gap: .6rem;
    }

    .als-card-header-right[b-vpx0bto4jo] {
        width: 100%;
        justify-content: flex-end;
    }
}
/* /Components/Pages/BillingLockedPage.razor.rz.scp.css */
.locked-shell[b-ezdlafw6jc] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f1117;
    padding: 2rem;
}

.locked-card[b-ezdlafw6jc] {
    background: #1a1d27;
    border: 1px solid #ef444440;
    border-radius: 16px;
    padding: 3rem 2.5rem;
    max-width: 520px;
    width: 100%;
    text-align: center;
    box-shadow: 0 8px 40px rgba(239,68,68,.12);
}

.locked-icon[b-ezdlafw6jc] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(239,68,68,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.75rem;
}

.locked-icon .bi[b-ezdlafw6jc] {
    font-size: 2rem;
    color: #ef4444;
}

.locked-headline[b-ezdlafw6jc] {
    font-size: 1.6rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.locked-body[b-ezdlafw6jc] {
    color: #94a3b8;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.locked-actions[b-ezdlafw6jc] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.btn-locked-primary[b-ezdlafw6jc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.5rem;
    background: #ef4444;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}

.btn-locked-primary:hover:not(:disabled)[b-ezdlafw6jc] {
    background: #dc2626;
}

.btn-locked-primary:disabled[b-ezdlafw6jc] {
    opacity: .65;
    cursor: not-allowed;
}

.btn-locked-secondary[b-ezdlafw6jc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.5rem;
    background: transparent;
    color: #94a3b8;
    border: 1px solid #334155;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s, color .15s;
}

.btn-locked-secondary:hover[b-ezdlafw6jc] {
    border-color: #64748b;
    color: #f1f5f9;
}

.locked-error[b-ezdlafw6jc] {
    color: #fca5a5;
    font-size: .875rem;
    margin-bottom: 1rem;
}

.locked-support[b-ezdlafw6jc] {
    color: #64748b;
    font-size: .8rem;
    margin: 0;
}

.locked-support a[b-ezdlafw6jc] {
    color: #94a3b8;
    text-decoration: underline;
}
/* /Components/Pages/BillingPage.razor.rz.scp.css */
.billing-page[b-6vbwlyowvx] {
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
    color: #f1f5f9;
}

/* ── Header ────────────────────────────────────────────────── */
.billing-header[b-6vbwlyowvx] {
    margin-bottom: 2rem;
}

.billing-title[b-6vbwlyowvx] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 0.25rem;
}

.billing-subtitle[b-6vbwlyowvx] {
    font-size: 0.95rem;
    color: #94a3b8;
    margin: 0;
}

/* ── Loading / notice ──────────────────────────────────────── */
.billing-loading[b-6vbwlyowvx] {
    color: #94a3b8;
    padding: 2rem 0;
    font-size: 0.95rem;
}

.billing-notice[b-6vbwlyowvx] {
    padding: 1rem 1.25rem;
    border-radius: 10px;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.billing-notice--info[b-6vbwlyowvx] {
    background: #1e3a5f;
    border: 1px solid #1d4ed8;
    color: #93c5fd;
}

.billing-notice--info a[b-6vbwlyowvx] {
    color: #60a5fa;
    text-decoration: none;
    font-weight: 600;
}

/* ── Alert strip ───────────────────────────────────────────── */
.billing-alert[b-6vbwlyowvx] {
    padding: 0.875rem 1.25rem;
    border-radius: 10px;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    border-left: 4px solid transparent;
}

.billing-alert--warning[b-6vbwlyowvx] {
    background: #451a03;
    border-color: #f59e0b;
    color: #fef3c7;
}

.billing-alert--danger[b-6vbwlyowvx] {
    background: #450a0a;
    border-color: #ef4444;
    color: #fee2e2;
}

/* ── Grid ──────────────────────────────────────────────────── */
.billing-grid[b-6vbwlyowvx] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

@@media (max-width: 768px) {
    .billing-grid[b-6vbwlyowvx] {
        grid-template-columns: 1fr;
    }
}

/* ── Cards ─────────────────────────────────────────────────── */
.billing-card[b-6vbwlyowvx] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.billing-card--action[b-6vbwlyowvx] {
    border-color: #1d4ed8;
}

.billing-card-header[b-6vbwlyowvx] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid #334155;
}

.billing-card-icon[b-6vbwlyowvx] {
    font-size: 1.1rem;
}

.billing-card-title[b-6vbwlyowvx] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0;
}

.billing-card-body[b-6vbwlyowvx] {
    padding: 1rem 1.25rem 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ── Plan display ──────────────────────────────────────────── */
.plan-name[b-6vbwlyowvx] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #93c5fd;
    line-height: 1.2;
}

.plan-cycle[b-6vbwlyowvx] {
    font-size: 0.8rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
}

.billing-meta-row[b-6vbwlyowvx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    padding: 0.35rem 0;
    border-top: 1px solid #1e293b;
}

.billing-meta-row--warn .meta-value[b-6vbwlyowvx] {
    color: #fbbf24;
}

.meta-label[b-6vbwlyowvx] {
    color: #64748b;
}

.meta-value[b-6vbwlyowvx] {
    color: #cbd5e1;
    font-weight: 500;
}

/* ── Status badges ─────────────────────────────────────────── */
.status-badge[b-6vbwlyowvx] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.status-badge--active[b-6vbwlyowvx] {
    background: #14532d;
    color: #86efac;
}

.status-badge--warning[b-6vbwlyowvx] {
    background: #451a03;
    color: #fcd34d;
}

.status-badge--danger[b-6vbwlyowvx] {
    background: #450a0a;
    color: #fca5a5;
}

.status-badge--secondary[b-6vbwlyowvx] {
    background: #1e293b;
    color: #94a3b8;
}

/* ── Add-on list ───────────────────────────────────────────── */
.addon-list[b-6vbwlyowvx] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.addon-item[b-6vbwlyowvx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #cbd5e1;
}

.addon-check[b-6vbwlyowvx] {
    color: #22c55e;
    font-weight: 700;
    flex-shrink: 0;
}

.empty-text[b-6vbwlyowvx] {
    font-size: 0.875rem;
    color: #475569;
    margin: 0;
}

.trial-badge[b-6vbwlyowvx] {
    margin-top: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: #1e3a5f;
    border-radius: 8px;
    font-size: 0.8rem;
    color: #93c5fd;
}

.trial-expiry[b-6vbwlyowvx] {
    color: #64748b;
}

/* ── Manage billing card ───────────────────────────────────── */
.action-description[b-6vbwlyowvx] {
    font-size: 0.875rem;
    color: #94a3b8;
    line-height: 1.6;
    margin: 0 0 1rem;
}

.btn-manage-billing[b-6vbwlyowvx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.7rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    width: 100%;
    margin-bottom: 0.75rem;
}

.btn-manage-billing:hover:not(:disabled)[b-6vbwlyowvx] {
    background: #2563eb;
}

.btn-manage-billing:disabled[b-6vbwlyowvx] {
    opacity: 0.6;
    cursor: not-allowed;
}

.portal-error[b-6vbwlyowvx] {
    font-size: 0.8rem;
    color: #f87171;
    margin: 0 0 0.5rem;
}

.portal-note[b-6vbwlyowvx] {
    font-size: 0.75rem;
    color: #475569;
    margin: 0;
    text-align: center;
}

/* ── Promo ribbon ──────────────────────────────────────────── */
.billing-promo[b-6vbwlyowvx] {
    background: #14532d;
    border: 1px solid #16a34a;
    color: #86efac;
    border-radius: 10px;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════
   PHASE F — UPGRADE CENTER STYLES
══════════════════════════════════════════════════════════════ */

/* ── Feedback toasts ───────────────────────────────────────── */
.billing-feedback[b-6vbwlyowvx] {
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
    font-weight: 500;
}

.billing-feedback--success[b-6vbwlyowvx] {
    background: #14532d;
    border: 1px solid #16a34a;
    color: #86efac;
}

.billing-feedback--error[b-6vbwlyowvx] {
    background: #450a0a;
    border: 1px solid #ef4444;
    color: #fecaca;
}

/* ── Section wrapper ───────────────────────────────────────── */
.billing-section[b-6vbwlyowvx] {
    margin-bottom: 2rem;
}

.billing-section-title[b-6vbwlyowvx] {
    font-size: 1rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 0 0 0.875rem;
}

/* ── Current plan summary bar ──────────────────────────────── */
.plan-summary-bar[b-6vbwlyowvx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.plan-summary-left[b-6vbwlyowvx] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.plan-summary-name[b-6vbwlyowvx] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #93c5fd;
}

.plan-summary-cycle[b-6vbwlyowvx] {
    font-size: 0.8rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.plan-summary-right[b-6vbwlyowvx] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.plan-summary-next[b-6vbwlyowvx],
.plan-summary-grace[b-6vbwlyowvx] {
    font-size: 0.85rem;
    color: #94a3b8;
}

.plan-summary-grace[b-6vbwlyowvx] {
    color: #fbbf24;
}

/* ── Plan picker ───────────────────────────────────────────── */
.plan-picker[b-6vbwlyowvx] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@@media (max-width: 768px) {
    .plan-picker[b-6vbwlyowvx] {
        grid-template-columns: 1fr;
    }
}

.plan-card[b-6vbwlyowvx] {
    position: relative;
    background: #1e293b;
    border: 2px solid #334155;
    border-radius: 14px;
    padding: 1.25rem;
    cursor: pointer;
    text-align: left;
    color: #f1f5f9;
    transition: border-color 0.18s, background 0.18s, transform 0.12s;
}

.plan-card:hover[b-6vbwlyowvx] {
    border-color: #60a5fa;
    transform: translateY(-2px);
}

.plan-card--selected[b-6vbwlyowvx] {
    border-color: #3b82f6;
    background: #172554;
}

.plan-card--current.plan-card--selected[b-6vbwlyowvx] {
    border-color: #22c55e;
    background: #052e16;
}

.plan-current-badge[b-6vbwlyowvx] {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: #166534;
    color: #86efac;
    margin-bottom: 0.6rem;
}

.plan-card-name[b-6vbwlyowvx] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 0.25rem;
}

.plan-card-price[b-6vbwlyowvx] {
    font-size: 1.6rem;
    font-weight: 800;
    color: #93c5fd;
    line-height: 1.1;
    margin-bottom: 0.4rem;
}

.plan-card-per[b-6vbwlyowvx] {
    font-size: 0.8rem;
    font-weight: 500;
    color: #64748b;
}

.plan-card-tagline[b-6vbwlyowvx] {
    font-size: 0.8rem;
    color: #64748b;
    line-height: 1.4;
}

/* ── Add-on manager ────────────────────────────────────────── */
.addon-manager[b-6vbwlyowvx] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.addon-manager-row[b-6vbwlyowvx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    gap: 1rem;
    transition: border-color 0.15s;
}

.addon-manager-row--included[b-6vbwlyowvx] {
    border-color: #1d4ed8;
    background: #1e3a5f;
}

.addon-manager-info[b-6vbwlyowvx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.addon-manager-name[b-6vbwlyowvx] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #f1f5f9;
}

.addon-manager-price[b-6vbwlyowvx] {
    font-size: 0.85rem;
    color: #94a3b8;
}

.addon-manager-badge[b-6vbwlyowvx] {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

.addon-manager-badge--included[b-6vbwlyowvx] {
    background: #1e3a5f;
    color: #93c5fd;
    border: 1px solid #3b82f6;
}

/* ── Toggle switch ─────────────────────────────────────────── */
.addon-toggle-btn[b-6vbwlyowvx] {
    position: relative;
    width: 46px;
    height: 26px;
    border-radius: 13px;
    border: none;
    cursor: pointer;
    background: #475569;
    transition: background 0.2s;
    flex-shrink: 0;
    padding: 0;
}

.addon-toggle-btn--on[b-6vbwlyowvx] {
    background: #22c55e;
}

.addon-toggle-btn--included[b-6vbwlyowvx] {
    background: #3b82f6;
}

.addon-toggle-btn:disabled[b-6vbwlyowvx] {
    cursor: default;
    opacity: 0.85;
}

.addon-toggle-knob[b-6vbwlyowvx] {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s;
    pointer-events: none;
}

.addon-toggle-btn--on .addon-toggle-knob[b-6vbwlyowvx],
.addon-toggle-btn--included .addon-toggle-knob[b-6vbwlyowvx] {
    transform: translateX(20px);
}

/* ── Order summary ─────────────────────────────────────────── */
.pricing-summary[b-6vbwlyowvx] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    overflow: hidden;
    max-width: 480px;
}

.pricing-row[b-6vbwlyowvx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 1.1rem;
    font-size: 0.9rem;
    color: #cbd5e1;
    border-bottom: 1px solid #1e293b;
}

.pricing-row--included[b-6vbwlyowvx] {
    color: #64748b;
    font-style: italic;
}

.pricing-row--total[b-6vbwlyowvx] {
    border-bottom: none;
    border-top: 1px solid #334155;
    font-weight: 700;
    font-size: 1rem;
    color: #f1f5f9;
    padding: 0.8rem 1.1rem;
    background: #0f172a;
}

.included-tag[b-6vbwlyowvx] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #1e3a5f;
    color: #93c5fd;
    border-radius: 999px;
    padding: 0.1rem 0.4rem;
    margin-left: 0.35rem;
}

.included-price[b-6vbwlyowvx] {
    color: #475569;
}

/* ── Actions row ───────────────────────────────────────────── */
.billing-actions[b-6vbwlyowvx] {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.btn-update-sub[b-6vbwlyowvx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #22c55e;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 2rem;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    min-width: 180px;
}

.btn-update-sub:hover:not(:disabled)[b-6vbwlyowvx] {
    background: #16a34a;
}

.btn-update-sub:disabled[b-6vbwlyowvx] {
    background: #334155;
    color: #64748b;
    cursor: not-allowed;
}

/* ── User Usage Panel ──────────────────────────────────────── */
.user-usage-panel[b-6vbwlyowvx] {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-top: 1.25rem;
}

.user-usage-row[b-6vbwlyowvx] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.25rem 0;
}

.user-usage-label[b-6vbwlyowvx] {
    color: #94a3b8;
    font-size: 0.88rem;
}

.user-usage-value[b-6vbwlyowvx] {
    color: #f1f5f9;
    font-weight: 600;
}

.user-usage-of[b-6vbwlyowvx] {
    color: #475569;
    margin: 0 0.25rem;
    font-size: 0.85rem;
    font-weight: 400;
}

.user-usage-included[b-6vbwlyowvx] {
    color: #64748b;
    font-size: 0.78rem;
    margin-left: 0.4rem;
    font-weight: 400;
}

.user-usage-overage[b-6vbwlyowvx] {
    color: #f59e0b;
}

.user-usage-alert[b-6vbwlyowvx] {
    padding: 0.6rem 0.9rem;
    border-radius: 6px;
    font-size: 0.84rem;
    margin-top: 0.75rem;
    line-height: 1.45;
}

.user-usage-alert--danger[b-6vbwlyowvx] {
    background: rgba(239, 68, 68, 0.1);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.user-usage-alert--warn[b-6vbwlyowvx] {
    background: rgba(245, 158, 11, 0.1);
    color: #fcd34d;
    border: 1px solid rgba(245, 158, 11, 0.2);
}
/* /Components/Pages/CheckoutCancelPage.razor.rz.scp.css */
.checkout-cancel-page[b-a7hb9ith3x] {
    min-height: 100vh;
    background: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.cancel-card[b-a7hb9ith3x] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 16px;
    padding: 3rem 2.5rem;
    max-width: 520px;
    width: 100%;
    text-align: center;
    color: #f1f5f9;
}

/* Cancel icon */
.cancel-icon-wrap[b-a7hb9ith3x] {
    margin-bottom: 1.5rem;
}

.cancel-icon[b-a7hb9ith3x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 2px solid #ef4444;
    color: #ef4444;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.cancel-title[b-a7hb9ith3x] {
    font-size: 2rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 0.5rem;
}

.cancel-subtitle[b-a7hb9ith3x] {
    font-size: 1.05rem;
    color: #94a3b8;
    margin-bottom: 1.5rem;
}

.cancel-message[b-a7hb9ith3x] {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: #94a3b8;
    line-height: 1.6;
}

.cancel-message p[b-a7hb9ith3x] {
    margin: 0;
}

/* Saved selection */
.saved-selection[b-a7hb9ith3x] {
    background: #0f172a;
    border: 1px solid #1d4ed8;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.75rem;
    text-align: left;
}

.saved-label[b-a7hb9ith3x] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    margin-bottom: 0.4rem;
}

.saved-plan[b-a7hb9ith3x] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #93c5fd;
}

.saved-addons[b-a7hb9ith3x] {
    font-size: 0.85rem;
    color: #64748b;
    margin-top: 0.25rem;
}

/* Actions */
.cancel-actions[b-a7hb9ith3x] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.btn-primary-action[b-a7hb9ith3x] {
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-primary-action:hover[b-a7hb9ith3x] {
    background: #2563eb;
    color: #fff;
    text-decoration: none;
}

.btn-secondary-action[b-a7hb9ith3x] {
    background: transparent;
    color: #94a3b8;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 0.75rem 1.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.btn-secondary-action:hover[b-a7hb9ith3x] {
    border-color: #64748b;
    color: #f1f5f9;
    text-decoration: none;
}

/* Support link */
.cancel-support[b-a7hb9ith3x] {
    font-size: 0.85rem;
    color: #475569;
}

.cancel-support a[b-a7hb9ith3x] {
    color: #64748b;
    text-decoration: none;
}

.cancel-support a:hover[b-a7hb9ith3x] {
    color: #94a3b8;
}

@@media (max-width: 480px) {
    .cancel-card[b-a7hb9ith3x] {
        padding: 2rem 1.25rem;
    }

    .cancel-title[b-a7hb9ith3x] {
        font-size: 1.6rem;
    }

    .cancel-actions[b-a7hb9ith3x] {
        flex-direction: column;
    }

    .btn-primary-action[b-a7hb9ith3x],
    .btn-secondary-action[b-a7hb9ith3x] {
        width: 100%;
        text-align: center;
    }
}
/* /Components/Pages/CheckoutSuccessPage.razor.rz.scp.css */
.checkout-success-page[b-3qr1rd3i2k] {
    min-height: 100vh;
    background: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.success-card[b-3qr1rd3i2k] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 16px;
    padding: 3rem 2.5rem;
    max-width: 560px;
    width: 100%;
    text-align: center;
    color: #f1f5f9;
}

/* Animated checkmark */
.success-icon-wrap[b-3qr1rd3i2k] {
    margin-bottom: 1.5rem;
}

.success-checkmark[b-3qr1rd3i2k] {
    width: 80px;
    height: 80px;
}

.checkmark-circle[b-3qr1rd3i2k] {
    stroke: #22c55e;
    stroke-width: 2;
    stroke-dasharray: 157;
    stroke-dashoffset: 157;
    animation: draw-circle-b-3qr1rd3i2k 0.6s ease forwards;
}

.checkmark-check[b-3qr1rd3i2k] {
    stroke: #22c55e;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: draw-check-b-3qr1rd3i2k 0.4s ease 0.5s forwards;
}

@keyframes draw-circle-b-3qr1rd3i2k {
    to { stroke-dashoffset: 0; }
}

@keyframes draw-check-b-3qr1rd3i2k {
    to { stroke-dashoffset: 0; }
}

.success-title[b-3qr1rd3i2k] {
    font-size: 2rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 0.5rem;
}

.success-subtitle[b-3qr1rd3i2k] {
    font-size: 1.1rem;
    color: #94a3b8;
    margin-bottom: 2rem;
}

/* Activation spinner row */
.activation-notice[b-3qr1rd3i2k] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
    text-align: left;
}

.activation-icon[b-3qr1rd3i2k] {
    color: #3b82f6;
    flex-shrink: 0;
    font-size: 1.1rem;
}

.activation-text[b-3qr1rd3i2k] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.9rem;
}

.activation-text strong[b-3qr1rd3i2k] {
    color: #f1f5f9;
}

.activation-text span[b-3qr1rd3i2k] {
    color: #94a3b8;
}

/* Next steps */
.next-steps[b-3qr1rd3i2k] {
    text-align: left;
    margin-bottom: 2rem;
}

.next-steps-title[b-3qr1rd3i2k] {
    font-size: 1rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
}

.steps-list[b-3qr1rd3i2k] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.steps-list li[b-3qr1rd3i2k] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: #cbd5e1;
}

.step-number[b-3qr1rd3i2k] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #3b82f6;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.step-text[b-3qr1rd3i2k] {
    line-height: 1.4;
}

/* Session reference */
.session-ref[b-3qr1rd3i2k] {
    font-size: 0.75rem;
    color: #475569;
    margin-bottom: 1.5rem;
}

.session-ref code[b-3qr1rd3i2k] {
    font-family: monospace;
    color: #64748b;
}

/* Actions */
.success-actions[b-3qr1rd3i2k] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.btn-primary-action[b-3qr1rd3i2k] {
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-primary-action:hover[b-3qr1rd3i2k] {
    background: #2563eb;
    color: #fff;
    text-decoration: none;
}

.btn-secondary-action[b-3qr1rd3i2k] {
    background: transparent;
    color: #94a3b8;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 0.75rem 1.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.btn-secondary-action:hover[b-3qr1rd3i2k] {
    border-color: #64748b;
    color: #f1f5f9;
    text-decoration: none;
}

/* Trust strip */
.trust-strip[b-3qr1rd3i2k] {
    font-size: 0.8rem;
    color: #475569;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}

.trust-strip a[b-3qr1rd3i2k] {
    color: #64748b;
    text-decoration: none;
}

.trust-strip a:hover[b-3qr1rd3i2k] {
    color: #94a3b8;
}

@@media (max-width: 480px) {
    .success-card[b-3qr1rd3i2k] {
        padding: 2rem 1.25rem;
    }

    .success-title[b-3qr1rd3i2k] {
        font-size: 1.6rem;
    }

    .success-actions[b-3qr1rd3i2k] {
        flex-direction: column;
    }

    .btn-primary-action[b-3qr1rd3i2k],
    .btn-secondary-action[b-3qr1rd3i2k] {
        width: 100%;
        text-align: center;
    }
}
/* /Components/Pages/CrewLeaderboard.razor.rz.scp.css */
.leaderboard-page[b-tco3578c2f] {
    padding: 1.5rem;
}

/* ── Week navigation label ──────────────────────────────────────────────── */
.week-label[b-tco3578c2f] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #e5e7eb;
    white-space: nowrap;
    min-width: 180px;
    text-align: center;
}

/* ── KPI strip ──────────────────────────────────────────────────────────── */
.kpi-card[b-tco3578c2f] {
    background: var(--card-bg, #1e2433);
    border: 1px solid var(--border-color, rgba(255,255,255,.08));
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    text-align: center;
    height: 100%;
}

.kpi-value[b-tco3578c2f] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

.kpi-label[b-tco3578c2f] {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Section title ──────────────────────────────────────────────────────── */
.section-title[b-tco3578c2f] {
    color: #e5e7eb;
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════════
   OLYMPIC PODIUM
   ══════════════════════════════════════════════════════════════════════════ */

/* Flex row, items anchored to the bottom so platform heights create tiers */
.podium-stage[b-tco3578c2f] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 0.5rem;
}

/* Each stand: info zone stacked on top of a coloured platform block */
.podium-stand[b-tco3578c2f] {
    flex: 0 1 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── Info zone (above the platform) ─────────────────────────────────────── */
.podium-info[b-tco3578c2f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem 1rem 0.75rem;
    width: 100%;
    text-align: center;
    gap: 0.3rem;
    border-radius: 16px 16px 0 0;
}

.podium-gold .podium-info[b-tco3578c2f] {
    background: linear-gradient(175deg, rgba(245,158,11,.18) 0%, rgba(30,36,51,.97) 100%);
    border: 1px solid rgba(245,158,11,.4);
    border-bottom: none;
}

.podium-silver .podium-info[b-tco3578c2f] {
    background: linear-gradient(175deg, rgba(148,163,184,.14) 0%, rgba(30,36,51,.97) 100%);
    border: 1px solid rgba(148,163,184,.3);
    border-bottom: none;
}

.podium-bronze .podium-info[b-tco3578c2f] {
    background: linear-gradient(175deg, rgba(180,83,9,.14) 0%, rgba(30,36,51,.97) 100%);
    border: 1px solid rgba(180,83,9,.3);
    border-bottom: none;
}

.podium-empty .podium-info[b-tco3578c2f] {
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.06);
    border-bottom: none;
    padding: 1.5rem 1rem;
}

/* ── Pulsing gold glow on #1 ─────────────────────────────────────────────── */
@keyframes gold-glow-b-tco3578c2f {
    0%, 100% {
        box-shadow: 0 0 18px rgba(245,158,11,.25), 0 0 36px rgba(245,158,11,.10);
        border-color: rgba(245,158,11,.4);
    }
    50% {
        box-shadow: 0 0 38px rgba(245,158,11,.55), 0 0 72px rgba(245,158,11,.20);
        border-color: rgba(245,158,11,.75);
    }
}

.podium-first .podium-info[b-tco3578c2f] {
    animation: gold-glow-b-tco3578c2f 2.5s ease-in-out infinite;
}

/* ── Crown sparkle ───────────────────────────────────────────────────────── */
@keyframes sparkle-bounce-b-tco3578c2f {
    0%, 100% { transform: translateY(0)    scale(1);    opacity: .8; }
    50%       { transform: translateY(-5px) scale(1.18); opacity: 1;  }
}

.crown-sparkle[b-tco3578c2f] {
    font-size: 1.4rem;
    line-height: 1;
    animation: sparkle-bounce-b-tco3578c2f 2s ease-in-out infinite;
}

/* ── Medal emoji ─────────────────────────────────────────────────────────── */
.podium-medal-emoji[b-tco3578c2f] { font-size: 2.25rem; line-height: 1; }
.podium-first .podium-medal-emoji[b-tco3578c2f] { font-size: 2.75rem; }

/* ── Crew avatar circle ──────────────────────────────────────────────────── */
.crew-avatar[b-tco3578c2f] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.2);
    flex-shrink: 0;
}

.crew-avatar-lg[b-tco3578c2f] {
    width: 58px;
    height: 58px;
    border: 3px solid rgba(245,158,11,.6);
    box-shadow: 0 0 16px rgba(245,158,11,.45);
}

/* ── Crew name ───────────────────────────────────────────────────────────── */
.podium-crew-name[b-tco3578c2f] {
    font-weight: 700;
    color: #e5e7eb;
    font-size: .9rem;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.podium-crew-name-lg[b-tco3578c2f] {
    font-size: 1.05rem;
    color: #fff;
    max-width: 190px;
}

/* ── The big score number ────────────────────────────────────────────────── */
.podium-score-big[b-tco3578c2f] {
    font-size: 2.75rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.03em;
}

.podium-first .podium-score-big[b-tco3578c2f] { font-size: 3.5rem; }

.gold-text[b-tco3578c2f]   { color: #fbbf24; text-shadow: 0 0 14px rgba(251,191,36,.5);  }
.silver-text[b-tco3578c2f] { color: #94a3b8; text-shadow: 0 0 10px rgba(148,163,184,.3); }
.bronze-text[b-tco3578c2f] { color: #f97316; text-shadow: 0 0 10px rgba(249,115,22,.3);  }
.neutral-text[b-tco3578c2f] { color: #6b7280; }

/* ── Stats row (trips + bonus under the score) ───────────────────────────── */
.podium-stat-row[b-tco3578c2f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
    font-size: .78rem;
    padding-bottom: .5rem;
}

.pstat-jobs[b-tco3578c2f]  { color: #9ca3af; }
.pstat-bonus[b-tco3578c2f] { font-weight: 600; font-size: .82rem; }

/* ── Platform coloured blocks (staggered heights = tier effect) ──────────── */
.platform[b-tco3578c2f] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 900;
    color: rgba(0,0,0,.35);
    letter-spacing: -.02em;
}

.gold-platform[b-tco3578c2f] {
    height: 100px;
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 -4px 20px rgba(245,158,11,.45), 0 6px 20px rgba(0,0,0,.4);
}

.silver-platform[b-tco3578c2f] {
    height: 72px;
    background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
    box-shadow: 0 -3px 12px rgba(148,163,184,.25), 0 4px 12px rgba(0,0,0,.3);
}

.bronze-platform[b-tco3578c2f] {
    height: 52px;
    background: linear-gradient(180deg, #d97706 0%, #92400e 100%);
    box-shadow: 0 -3px 12px rgba(180,83,9,.25), 0 4px 12px rgba(0,0,0,.3);
}

/* ══════════════════════════════════════════════════════════════════════════
   RANKS 4 & 5
   ══════════════════════════════════════════════════════════════════════════ */
.rank-cards[b-tco3578c2f] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.rank-card[b-tco3578c2f] {
    display: flex;
    align-items: center;
    background: var(--card-bg, #1e2433);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px;
    padding: .85rem 1.25rem;
    gap: .5rem;
    transition: background .15s;
}

.rank-card:hover[b-tco3578c2f] { background: rgba(255,255,255,.03); }

.rank-number[b-tco3578c2f] {
    font-size: 1.4rem;
    font-weight: 900;
    min-width: 52px;
}

.rank-name[b-tco3578c2f] {
    font-weight: 600;
    color: #e5e7eb;
    font-size: .95rem;
}

.rank-score[b-tco3578c2f] {
    font-size: 1.6rem;
    font-weight: 800;
    min-width: 60px;
    text-align: right;
}

.rank-jobs[b-tco3578c2f] {
    font-size: .8rem;
    min-width: 55px;
    text-align: right;
}

.rank-bonus[b-tco3578c2f] {
    font-size: .85rem;
    min-width: 70px;
    text-align: right;
}

.crew-dot-sm[b-tco3578c2f] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   FULL RANKINGS TABLE
   ══════════════════════════════════════════════════════════════════════════ */
.leaderboard-table[b-tco3578c2f] {
    background: var(--card-bg, #1e2433);
    border-radius: 12px;
    overflow: hidden;
}

.leaderboard-table thead th[b-tco3578c2f] {
    background: rgba(255,255,255,.04);
    color: #9ca3af;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: .75rem 1rem;
}

.leaderboard-table tbody tr[b-tco3578c2f] {
    border-bottom: 1px solid rgba(255,255,255,.05);
    transition: background .15s;
}

.leaderboard-table tbody tr:hover[b-tco3578c2f] { background: rgba(255,255,255,.04); }

.leaderboard-table tbody td[b-tco3578c2f] {
    color: #e5e7eb;
    padding: .75rem 1rem;
    vertical-align: middle;
}

/* Podium row tints */
.row-gold   td[b-tco3578c2f] { background: rgba(245,158, 11,.07); }
.row-silver td[b-tco3578c2f] { background: rgba(148,163,184,.05); }
.row-bronze td[b-tco3578c2f] { background: rgba(180, 83,  9,.05); }

.rank-cell[b-tco3578c2f] { font-size: 1.1rem; }

/* ── Crew colour dot ─────────────────────────────────────────────────────── */
.crew-dot[b-tco3578c2f] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    vertical-align: middle;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty-card[b-tco3578c2f] {
    background: var(--card-bg, #1e2433);
    border: 1px solid var(--border-color, rgba(255,255,255,.08));
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    color: #9ca3af;
}

.empty-card h4[b-tco3578c2f] {
    color: #e5e7eb;
}
/* /Components/Pages/FieldMode/FieldModeClockIn.razor.rz.scp.css */
.fmci-loading[b-r8y1791i2r] {
    display: flex;
    justify-content: center;
    padding: 4rem 0;
}

.fmci-spinner[b-r8y1791i2r] {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, .08);
    border-top-color: #60a5fa;
    border-radius: 50%;
    animation: fmci-spin-b-r8y1791i2r 0.75s linear infinite;
}

@keyframes fmci-spin-b-r8y1791i2r {
    to { transform: rotate(360deg); }
}

.fmci-error-state[b-r8y1791i2r] {
    text-align: center;
    padding: 3rem 1rem;
    color: #6b7280;
}

    .fmci-error-state i[b-r8y1791i2r] {
        font-size: 3rem;
        display: block;
        margin-bottom: 0.75rem;
        color: #ef4444;
    }

    .fmci-error-state p[b-r8y1791i2r]     { font-size: 1rem; margin: 0 0 0.3rem; color: #9ca3af; }
    .fmci-error-state small[b-r8y1791i2r] { font-size: 0.8rem; }

/* ── Status card ─────────────────────────────────────────────────────────── */

.fmci-status-card[b-r8y1791i2r] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: #1a1d27;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    padding: 1.1rem 1.2rem;
    margin-bottom: 1rem;
}

.fmci-in[b-r8y1791i2r]  { border-color: rgba(34, 197, 94, .3); }
.fmci-out[b-r8y1791i2r] { border-color: rgba(107, 114, 128, .25); }

.fmci-dot[b-r8y1791i2r] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.fmci-dot-green[b-r8y1791i2r] { background: #4ade80; box-shadow: 0 0 8px rgba(74, 222, 128, .55); }
.fmci-dot-gray[b-r8y1791i2r]  { background: #4b5563; }

.fmci-status-text[b-r8y1791i2r] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.fmci-status-label[b-r8y1791i2r] {
    font-size: 1rem;
    font-weight: 700;
    color: #f1f5f9;
}

.fmci-status-since[b-r8y1791i2r] {
    font-size: 0.82rem;
    color: #6b7280;
}

.fmci-check-icon[b-r8y1791i2r] {
    font-size: 1.45rem;
    color: #4ade80;
}

/* ── Job pill ────────────────────────────────────────────────────────────── */

.fmci-job-pill[b-r8y1791i2r] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(99, 102, 241, .1);
    border: 1px solid rgba(99, 102, 241, .2);
    border-radius: 20px;
    padding: 0.35rem 0.9rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #a5b4fc;
    margin-bottom: 1.5rem;
}

/* ── Error message ───────────────────────────────────────────────────────── */

.fmci-err[b-r8y1791i2r] {
    background: rgba(239, 68, 68, .12);
    border: 1px solid rgba(239, 68, 68, .25);
    border-radius: 10px;
    color: #fca5a5;
    font-size: 0.88rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

/* ── Actions stack ───────────────────────────────────────────────────────── */

.fmci-actions[b-r8y1791i2r] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 0.25rem;
}
/* /Components/Pages/FieldMode/FieldModeClockOut.razor.rz.scp.css */
.fmco-loading[b-unsi5pxedh] {
    display: flex;
    justify-content: center;
    padding: 4rem 0;
}

.fmco-spinner[b-unsi5pxedh] {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, .08);
    border-top-color: #60a5fa;
    border-radius: 50%;
    animation: fmco-spin-b-unsi5pxedh 0.75s linear infinite;
}

@keyframes fmco-spin-b-unsi5pxedh {
    to { transform: rotate(360deg); }
}

/* ── Notice state (not clocked in / no profile) ──────────────────────────── */

.fmco-notice[b-unsi5pxedh] {
    text-align: center;
    padding: 2.5rem 1rem 1rem;
    color: #6b7280;
}

    .fmco-notice p[b-unsi5pxedh] { font-size: 1rem; margin: 0; }

.fmco-notice-icon[b-unsi5pxedh] {
    font-size: 3rem;
    display: block;
    margin-bottom: 0.75rem;
}

.fmco-icon-ok[b-unsi5pxedh]  { color: #4ade80; }
.fmco-icon-err[b-unsi5pxedh] { color: #ef4444; }

/* ── Summary card ────────────────────────────────────────────────────────── */

.fmco-summary-card[b-unsi5pxedh] {
    background: #1a1d27;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    padding: 0.4rem 1.2rem;
    margin-bottom: 1.5rem;
}

.fmco-row[b-unsi5pxedh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
}

.fmco-divider[b-unsi5pxedh] {
    height: 1px;
    background: rgba(255, 255, 255, .06);
}

.fmco-label[b-unsi5pxedh] {
    font-size: 0.88rem;
    color: #6b7280;
    font-weight: 500;
}

.fmco-value[b-unsi5pxedh] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #f1f5f9;
}

.fmco-hours[b-unsi5pxedh] {
    font-size: 1.15rem;
    color: #60a5fa;
}

/* ── Error ───────────────────────────────────────────────────────────────── */

.fmco-err[b-unsi5pxedh] {
    background: rgba(239, 68, 68, .12);
    border: 1px solid rgba(239, 68, 68, .25);
    border-radius: 10px;
    color: #fca5a5;
    font-size: 0.88rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

/* ── Actions stack ───────────────────────────────────────────────────────── */

.fmco-actions[b-unsi5pxedh] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
/* /Components/Pages/FieldMode/FieldModeDashboard.razor.rz.scp.css */
/* ───────────────────────────────────────────────────────────────────────────
   FieldModeDashboard — Today's job list
   Extracted from inline <style> block + new banner / address-link styles
─────────────────────────────────────────────────────────────────────────── */

.fmd-shell[b-bxl5r93kxj] {
    padding: 1rem 0.9rem 1.5rem;
}

/* ── Clock-in banner ─────────────────────────────────────────────────────── */

.fmd-clock-banner[b-bxl5r93kxj] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(251, 146, 60, .12);
    border: 1px solid rgba(251, 146, 60, .3);
    border-radius: 12px;
    color: #fb923c;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.8rem 1rem;
    margin-bottom: 1.1rem;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}

    .fmd-clock-banner:hover[b-bxl5r93kxj] {
        background: rgba(251, 146, 60, .18);
        text-decoration: none;
        color: #fb923c;
    }

    .fmd-clock-banner i:first-child[b-bxl5r93kxj] {
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .fmd-clock-banner span[b-bxl5r93kxj] {
        flex: 1;
    }

.fmd-banner-arrow[b-bxl5r93kxj] {
    font-size: 0.85rem;
    flex-shrink: 0;
    opacity: 0.7;
}

/* ── Day header ──────────────────────────────────────────────────────────── */

.fmd-day-header[b-bxl5r93kxj] {
    margin-bottom: 1.25rem;
}

.fmd-day-name[b-bxl5r93kxj] {
    font-size: 1.2rem;
    font-weight: 800;
    color: #f1f5f9;
}

.fmd-day-sub[b-bxl5r93kxj] {
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 0.15rem;
}

/* ── Loading ─────────────────────────────────────────────────────────────── */

.fmd-loading[b-bxl5r93kxj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 4rem 0;
    color: #6b7280;
    font-size: 0.88rem;
}

.fmd-spinner[b-bxl5r93kxj] {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, .08);
    border-top-color: #60a5fa;
    border-radius: 50%;
    animation: fmd-spin-b-bxl5r93kxj 0.75s linear infinite;
}

@keyframes fmd-spin-b-bxl5r93kxj { to { transform: rotate(360deg); } }

/* ── Empty state ─────────────────────────────────────────────────────────── */

.fmd-empty[b-bxl5r93kxj] {
    text-align: center;
    padding: 3.5rem 1rem;
    color: #6b7280;
}

.fmd-empty-icon[b-bxl5r93kxj] {
    font-size: 3rem;
    margin-bottom: 0.75rem;
}

.fmd-empty p[b-bxl5r93kxj] {
    font-size: 1rem;
    margin: 0 0 0.35rem;
    color: #9ca3af;
}

.fmd-empty small[b-bxl5r93kxj] {
    font-size: 0.8rem;
}

/* ── Job list ────────────────────────────────────────────────────────────── */

.fmd-job-list[b-bxl5r93kxj] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.fmd-job-card[b-bxl5r93kxj] {
    background: #1a1d27;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 16px;
    padding: 1rem 1.1rem;
}

.fmd-active[b-bxl5r93kxj] {
    border-color: rgba(99, 102, 241, .6);
    box-shadow: 0 0 0 1px rgba(99, 102, 241, .2);
}

.fmd-done-card[b-bxl5r93kxj] {
    opacity: 0.6;
}

.fmd-job-head[b-bxl5r93kxj] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.45rem;
}

.fmd-time[b-bxl5r93kxj] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #a5b4fc;
}

/* ── Status badges ───────────────────────────────────────────────────────── */

.fmd-badge[b-bxl5r93kxj] {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fmd-badge-scheduled[b-bxl5r93kxj]  { background: rgba(99, 102, 241, .15); color: #a5b4fc; }
.fmd-badge-inprogress[b-bxl5r93kxj] { background: rgba(251, 191, 36, .15);  color: #fcd34d; }
.fmd-badge-completed[b-bxl5r93kxj]  { background: rgba(34, 197, 94, .15);   color: #4ade80; }
.fmd-badge-canceled[b-bxl5r93kxj]   { background: rgba(107, 114, 128, .15); color: #6b7280; }

/* ── Job card content ────────────────────────────────────────────────────── */

.fmd-job-title[b-bxl5r93kxj] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 0.35rem;
    cursor: pointer;
}

.fmd-meta[b-bxl5r93kxj] {
    font-size: 0.83rem;
    color: #94a3b8;
    margin-top: 0.18rem;
}

/* ── Address maps link ───────────────────────────────────────────────────── */

.fmd-address-link[b-bxl5r93kxj] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.83rem;
    color: #60a5fa;
    margin-top: 0.18rem;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

    .fmd-address-link:hover[b-bxl5r93kxj],
    .fmd-address-link:active[b-bxl5r93kxj] {
        color: #93c5fd;
        text-decoration: underline;
    }

/* ── Action buttons ──────────────────────────────────────────────────────── */

.fmd-btns[b-bxl5r93kxj] {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.9rem;
}

.fmd-btn[b-bxl5r93kxj] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 52px;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: transform 0.12s, opacity 0.12s;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
}

    .fmd-btn:active[b-bxl5r93kxj]   { transform: scale(0.96); }
    .fmd-btn:disabled[b-bxl5r93kxj] { opacity: 0.5; cursor: not-allowed; }

.fmd-btn-travel[b-bxl5r93kxj]   { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.fmd-btn-arrived[b-bxl5r93kxj]  { background: linear-gradient(135deg, #10b981, #059669); }
.fmd-btn-complete[b-bxl5r93kxj] { background: linear-gradient(135deg, #22c55e, #16a34a); }

.fmd-btn-notes[b-bxl5r93kxj] {
    flex: 0 0 52px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #94a3b8;
    font-size: 1.2rem;
    box-shadow: none;
}

.fmd-done-tag[b-bxl5r93kxj] {
    margin-top: 0.65rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #4ade80;
}
/* /Components/Pages/FieldMode/FieldModeIssue.razor.rz.scp.css */
/* ───────────────────────────────────────────────────────────────────────────
   FieldModeIssue — Flag Issue screen
─────────────────────────────────────────────────────────────────────────── */

.fmis-loading[b-d6m7tavct0] {
    display: flex;
    justify-content: center;
    padding: 4rem 0;
}

.fmis-spinner[b-d6m7tavct0] {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, .08);
    border-top-color: #60a5fa;
    border-radius: 50%;
    animation: fmis-spin-b-d6m7tavct0 0.75s linear infinite;
}

@keyframes fmis-spin-b-d6m7tavct0 { to { transform: rotate(360deg); } }

/* ── Intro hint ──────────────────────────────────────────────────────────── */

.fmis-hint[b-d6m7tavct0] {
    font-size: 0.88rem;
    color: #6b7280;
    margin: 0 0 1.1rem;
    line-height: 1.5;
}

/* ── Issue type chips ────────────────────────────────────────────────────── */

.fmis-chips[b-d6m7tavct0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.fmis-chip[b-d6m7tavct0] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 40px;
    padding: 0 0.9rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

    .fmis-chip:active[b-d6m7tavct0] {
        transform: scale(0.96);
    }

.fmis-chip-sel[b-d6m7tavct0] {
    background: rgba(251, 146, 60, .15);
    border-color: rgba(251, 146, 60, .45);
    color: #fb923c;
}

/* ── Description field ───────────────────────────────────────────────────── */

.fmis-field[b-d6m7tavct0] {
    margin-bottom: 1.25rem;
}

.fmis-label[b-d6m7tavct0] {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #6b7280;
    margin-bottom: 0.5rem;
}

.fmis-textarea[b-d6m7tavct0] {
    width: 100%;
    background: #1a1d27;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    color: #e5e7eb;
    font-size: 0.95rem;
    font-family: inherit;
    line-height: 1.55;
    padding: 0.85rem;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

    .fmis-textarea[b-d6m7tavct0]::placeholder {
        color: #4b5563;
    }

    .fmis-textarea:focus[b-d6m7tavct0] {
        outline: none;
        border-color: #f59e0b;
    }

/* ── Feedback states ─────────────────────────────────────────────────────── */

.fmis-err[b-d6m7tavct0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(239, 68, 68, .12);
    border: 1px solid rgba(239, 68, 68, .3);
    border-radius: 10px;
    color: #f87171;
    font-size: 0.87rem;
    font-weight: 600;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.fmis-success[b-d6m7tavct0] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(34, 197, 94, .12);
    border: 1px solid rgba(34, 197, 94, .3);
    border-radius: 10px;
    color: #4ade80;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}

    .fmis-success i[b-d6m7tavct0] {
        font-size: 1.1rem;
        flex-shrink: 0;
    }

/* ── Action stack ────────────────────────────────────────────────────────── */

.fmis-actions[b-d6m7tavct0] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 0.5rem;
}
/* /Components/Pages/FieldMode/FieldModeJobDetail.razor.rz.scp.css */
/* ───────────────────────────────────────────────────────────────────────────
   FieldModeJobDetail — job detail screen
   Extracted from inline <style> block + utility section styles
─────────────────────────────────────────────────────────────────────────── */

/* ── Loading ─────────────────────────────────────────────────────────────── */

.fmjd-loading[b-ot188rbv2o] {
    display: flex;
    justify-content: center;
    padding: 4rem 0;
}

.fmjd-spinner[b-ot188rbv2o] {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 255, 255, .08);
    border-top-color: #60a5fa;
    border-radius: 50%;
    animation: fmjd-spin-b-ot188rbv2o 0.75s linear infinite;
}

@keyframes fmjd-spin-b-ot188rbv2o { to { transform: rotate(360deg); } }

/* ── Shell ───────────────────────────────────────────────────────────────── */

.fmjd-shell[b-ot188rbv2o] {
    padding: 1rem 0.9rem 1.5rem;
}

.fmjd-top-row[b-ot188rbv2o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.fmjd-back[b-ot188rbv2o] {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    cursor: pointer;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

    .fmjd-back:hover[b-ot188rbv2o] { background: rgba(255, 255, 255, .12); }

/* ── Status badges ───────────────────────────────────────────────────────── */

.fmjd-badge[b-ot188rbv2o] {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.25rem 0.7rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fmjd-badge-scheduled[b-ot188rbv2o]  { background: rgba(99, 102, 241, .15); color: #a5b4fc; }
.fmjd-badge-inprogress[b-ot188rbv2o] { background: rgba(251, 191, 36, .15);  color: #fcd34d; }
.fmjd-badge-completed[b-ot188rbv2o]  { background: rgba(34, 197, 94, .15);   color: #4ade80; }
.fmjd-badge-canceled[b-ot188rbv2o]   { background: rgba(107, 114, 128, .15); color: #6b7280; }

/* ── Header ──────────────────────────────────────────────────────────────── */

.fmjd-title[b-ot188rbv2o] {
    font-size: 1.4rem;
    font-weight: 800;
    color: #f1f5f9;
    margin: 0 0 1rem;
    line-height: 1.2;
}

.fmjd-detail[b-ot188rbv2o] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #94a3b8;
    margin-bottom: 0.4rem;
}

.fmjd-icon[b-ot188rbv2o] { flex-shrink: 0; }

.fmjd-not-found[b-ot188rbv2o] {
    color: #6b7280;
    padding: 2rem 0;
    text-align: center;
}

/* ── Primary action buttons ──────────────────────────────────────────────── */

.fmjd-actions[b-ot188rbv2o] {
    margin: 1.25rem 0;
}

.fmjd-btn[b-ot188rbv2o] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 58px;
    border: none;
    border-radius: 14px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    transition: transform 0.12s, opacity 0.12s;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}

    .fmjd-btn:active[b-ot188rbv2o]   { transform: scale(0.97); }
    .fmjd-btn:disabled[b-ot188rbv2o] { opacity: 0.5; cursor: not-allowed; }

.fmjd-btn-travel[b-ot188rbv2o]   { background: linear-gradient(135deg, #6366f1, #4f46e5); }
.fmjd-btn-arrived[b-ot188rbv2o]  { background: linear-gradient(135deg, #10b981, #059669); }
.fmjd-btn-complete[b-ot188rbv2o] { background: linear-gradient(135deg, #22c55e, #16a34a); }

/* ── Utility section (Navigate / Photos / Flag Issue) ────────────────────── */

.fmjd-util-section[b-ot188rbv2o] {
    border-top: 1px solid rgba(255, 255, 255, .07);
    padding-top: 1rem;
    margin-bottom: 1.25rem;
}

.fmjd-nav-link[b-ot188rbv2o] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 52px;
    background: rgba(14, 165, 233, .1);
    border: 1px solid rgba(14, 165, 233, .25);
    border-radius: 12px;
    color: #38bdf8;
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0 1rem;
    text-decoration: none;
    box-sizing: border-box;
    margin-bottom: 0.6rem;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}

    .fmjd-nav-link:hover[b-ot188rbv2o],
    .fmjd-nav-link:active[b-ot188rbv2o] {
        background: rgba(14, 165, 233, .18);
        color: #38bdf8;
        text-decoration: none;
    }

    .fmjd-nav-link i:first-child[b-ot188rbv2o] {
        font-size: 1.1rem;
        flex-shrink: 0;
    }

.fmjd-ext-icon[b-ot188rbv2o] {
    margin-left: auto;
    font-size: 0.8rem;
    opacity: 0.6;
}

.fmjd-util-row[b-ot188rbv2o] {
    display: flex;
    gap: 0.6rem;
}

.fmjd-util-btn[b-ot188rbv2o] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 48px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.12s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
}

    .fmjd-util-btn:active[b-ot188rbv2o] { transform: scale(0.96); }

.fmjd-util-photos[b-ot188rbv2o] {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .12);
    color: #94a3b8;
}

    .fmjd-util-photos:hover[b-ot188rbv2o] { background: rgba(255, 255, 255, .1); }

.fmjd-util-issue[b-ot188rbv2o] {
    background: rgba(239, 68, 68, .1);
    border-color: rgba(239, 68, 68, .25);
    color: #f87171;
}

    .fmjd-util-issue:hover[b-ot188rbv2o] { background: rgba(239, 68, 68, .16); }

/* ── Notes section ───────────────────────────────────────────────────────── */

.fmjd-notes-section[b-ot188rbv2o] {
    margin-top: 1.5rem;
    background: #1a1d27;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 16px;
    padding: 1rem;
}

.fmjd-notes-label[b-ot188rbv2o] {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #6b7280;
    margin-bottom: 0.65rem;
}

.fmjd-notes-area[b-ot188rbv2o] {
    width: 100%;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    color: #e5e7eb;
    font-size: 0.95rem;
    line-height: 1.55;
    padding: 0.75rem;
    resize: vertical;
    font-family: inherit;
    box-sizing: border-box;
}

    .fmjd-notes-area:focus[b-ot188rbv2o] {
        outline: none;
        border-color: #60a5fa;
    }

.fmjd-notes-footer[b-ot188rbv2o] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.fmjd-save-btn[b-ot188rbv2o] {
    background: #3b82f6;
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.6rem 1.4rem;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}

    .fmjd-save-btn:hover[b-ot188rbv2o]   { background: #2563eb; }
    .fmjd-save-btn:active[b-ot188rbv2o]  { transform: scale(0.97); }
    .fmjd-save-btn:disabled[b-ot188rbv2o] { opacity: 0.55; cursor: not-allowed; }

.fmjd-saved[b-ot188rbv2o] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #4ade80;
}
/* /Components/Pages/FieldMode/FieldModeLayout.razor.rz.scp.css */
.fm-shell[b-mlgue0mw0r] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: #0f1117;
    color: #e5e7eb;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.fm-topbar[b-mlgue0mw0r] {
    position: sticky;
    top: 0;
    z-index: 50;
    height: 56px;
    background: #1e293b;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    flex-shrink: 0;
}

.fm-logo[b-mlgue0mw0r] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 1.1rem;
    font-weight: 800;
    color: #60a5fa;
    letter-spacing: -0.01em;
}

    .fm-logo i[b-mlgue0mw0r] {
        font-size: 1.15rem;
    }

.fm-avatar[b-mlgue0mw0r] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #334155;
    border: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    color: #e5e7eb;
    text-decoration: none;
    flex-shrink: 0;
}

    .fm-avatar:hover[b-mlgue0mw0r] {
        text-decoration: none;
        background: #475569;
    }

.fm-content[b-mlgue0mw0r] {
    flex: 1;
    overflow-y: auto;
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

.fm-bottom-nav[b-mlgue0mw0r] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(64px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: #1e293b;
    border-top: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    align-items: stretch;
    z-index: 100;
}

.fm-nav-item[b-mlgue0mw0r] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    color: #6b7280;
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

    .fm-nav-item i[b-mlgue0mw0r] {
        font-size: 1.3rem;
    }

    .fm-nav-item:hover[b-mlgue0mw0r] {
        color: #94a3b8;
        text-decoration: none;
    }

    .fm-nav-item.active[b-mlgue0mw0r] {
        color: #60a5fa;
    }
/* /Components/Pages/Finance/FinancialHub.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   FINANCIAL HUB  —  fh
   Grouped navigation hub for the Finance module.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page wrapper ────────────────────────────────────────────────────────── */

.fh-page[b-6oefq6y6iv] {
    max-width: 960px;
    padding: 0 0 3rem;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.fh-header[b-6oefq6y6iv] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 2.25rem;
}

.fh-header__icon[b-6oefq6y6iv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.25);
    font-size: 1.5rem;
    color: #22c55e;
    flex-shrink: 0;
}

.fh-header__title[b-6oefq6y6iv] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--fo-text-primary);
    margin: 0;
    line-height: 1.2;
}

.fh-header__sub[b-6oefq6y6iv] {
    font-size: 0.82rem;
    color: var(--fo-text-secondary);
    margin: 2px 0 0;
}

/* ── Section ─────────────────────────────────────────────────────────────── */

.fh-section[b-6oefq6y6iv] {
    margin-bottom: 2rem;
}

.fh-section__label[b-6oefq6y6iv] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fo-text-secondary);
    margin-bottom: 10px;
    padding-left: 2px;
}

/* ── Card grid ───────────────────────────────────────────────────────────── */

.fh-grid[b-6oefq6y6iv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.fh-grid--wide[b-6oefq6y6iv] {
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .fh-grid--wide[b-6oefq6y6iv] {
        grid-template-columns: minmax(260px, 480px);
    }
}

/* ── Card ────────────────────────────────────────────────────────────────── */

.fh-card[b-6oefq6y6iv] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--fo-card);
    border: 1px solid var(--fo-border);
    border-radius: 12px;
    text-decoration: none;
    color: var(--fo-text-primary);
    transition: background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
    cursor: pointer;
}

.fh-card:hover[b-6oefq6y6iv] {
    background: var(--fo-card-hover, #273449);
    border-color: var(--fo-border-hover, #475569);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    color: var(--fo-text-primary);
    text-decoration: none;
}

.fh-card:active[b-6oefq6y6iv] {
    transform: translateY(0);
}

.fh-card--locked[b-6oefq6y6iv] {
    opacity: 0.55;
}

/* ── Card icon wrap ──────────────────────────────────────────────────────── */

.fh-card__icon-wrap[b-6oefq6y6iv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
}

.fh-card__icon[b-6oefq6y6iv] {
    font-size: 1.1rem;
}

/* ── Icon accent colours ─────────────────────────────────────────────────── */

.fh-card__icon-wrap--success[b-6oefq6y6iv] {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.2);
    color: #22c55e;
}
.fh-card--success:hover .fh-card__icon-wrap--success[b-6oefq6y6iv] {
    background: rgba(34, 197, 94, 0.2);
}

.fh-card__icon-wrap--blue[b-6oefq6y6iv] {
    background: rgba(96, 165, 250, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.2);
    color: #60a5fa;
}
.fh-card--blue:hover .fh-card__icon-wrap--blue[b-6oefq6y6iv] {
    background: rgba(96, 165, 250, 0.2);
}

.fh-card__icon-wrap--amber[b-6oefq6y6iv] {
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}
.fh-card--amber:hover .fh-card__icon-wrap--amber[b-6oefq6y6iv] {
    background: rgba(245, 158, 11, 0.2);
}

.fh-card__icon-wrap--purple[b-6oefq6y6iv] {
    background: rgba(167, 139, 250, 0.12);
    border: 1px solid rgba(167, 139, 250, 0.2);
    color: #a78bfa;
}
.fh-card--purple:hover .fh-card__icon-wrap--purple[b-6oefq6y6iv] {
    background: rgba(167, 139, 250, 0.2);
}

.fh-card__icon-wrap--red[b-6oefq6y6iv] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #ef4444;
}
.fh-card--red:hover .fh-card__icon-wrap--red[b-6oefq6y6iv] {
    background: rgba(239, 68, 68, 0.2);
}

.fh-card__icon-wrap--muted[b-6oefq6y6iv] {
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.15);
    color: #94a3b8;
}
.fh-card--muted:hover .fh-card__icon-wrap--muted[b-6oefq6y6iv] {
    background: rgba(148, 163, 184, 0.15);
}

/* ── Card body ───────────────────────────────────────────────────────────── */

.fh-card__body[b-6oefq6y6iv] {
    flex: 1;
    min-width: 0;
}

.fh-card__title[b-6oefq6y6iv] {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--fo-text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.3;
}

.fh-card__desc[b-6oefq6y6iv] {
    font-size: 0.75rem;
    color: var(--fo-text-secondary);
    margin-top: 2px;
    line-height: 1.4;
}

/* ── Plan lock badge ─────────────────────────────────────────────────────── */

.fh-card__badge[b-6oefq6y6iv] {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* ── Chevron arrow ───────────────────────────────────────────────────────── */

.fh-card__arrow[b-6oefq6y6iv] {
    font-size: 0.8rem;
    color: var(--fo-text-tertiary, #64748b);
    flex-shrink: 0;
    transition: transform 0.15s, color 0.15s;
}

.fh-card:hover .fh-card__arrow[b-6oefq6y6iv] {
    transform: translateX(3px);
    color: var(--fo-text-secondary);
}
/* /Components/Pages/NotificationsPage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   NOTIFICATIONS PAGE
   Full-page notification center with filtering and management
   ═══════════════════════════════════════════════════════════════════════════ */

.notifications-page[b-k9iloxqfw8] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.notifications-page__header[b-k9iloxqfw8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 32px;
    gap: 24px;
}

.notifications-page__title-section[b-k9iloxqfw8] {
    flex: 1;
}

.notifications-page__title[b-k9iloxqfw8] {
    margin: 0 0 8px 0;
    color: #f1f5f9;
    font-size: 2rem;
    font-weight: 700;
}

.notifications-page__subtitle[b-k9iloxqfw8] {
    margin: 0;
    color: #94a3b8;
    font-size: 1rem;
}

.notifications-page__actions[b-k9iloxqfw8] {
    display: flex;
    gap: 12px;
}

/* ── Filters ──────────────────────────────────────────────────────────────── */

.notifications-page__filters[b-k9iloxqfw8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    padding: 16px;
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
}

.notifications-page__filter-group[b-k9iloxqfw8] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.notifications-page__filter[b-k9iloxqfw8] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    color: #cbd5e1;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.notifications-page__filter:hover[b-k9iloxqfw8] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(148, 163, 184, 0.3);
    color: #f1f5f9;
}

.notifications-page__filter--active[b-k9iloxqfw8] {
    background: rgba(96, 165, 250, 0.15);
    border-color: #60a5fa;
    color: #60a5fa;
}

.notifications-page__filter-badge[b-k9iloxqfw8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: rgba(96, 165, 250, 0.2);
    border-radius: 10px;
    color: #93c5fd;
    font-size: 0.75rem;
    font-weight: 600;
}

.notifications-page__filter--active .notifications-page__filter-badge[b-k9iloxqfw8] {
    background: #60a5fa;
    color: #0f172a;
}

.notifications-page__filter-toggles[b-k9iloxqfw8] {
    display: flex;
    gap: 16px;
}

.notifications-page__toggle[b-k9iloxqfw8] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #cbd5e1;
    font-size: 0.9rem;
    cursor: pointer;
    user-select: none;
}

.notifications-page__toggle input[type="checkbox"][b-k9iloxqfw8] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* ── Content ──────────────────────────────────────────────────────────────── */

.notifications-page__content[b-k9iloxqfw8] {
    min-height: 400px;
}

.notifications-page__loading[b-k9iloxqfw8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    gap: 16px;
}

.notifications-page__loading p[b-k9iloxqfw8] {
    margin: 0;
    color: #94a3b8;
    font-size: 1rem;
}

.notifications-page__empty[b-k9iloxqfw8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 20px;
    text-align: center;
}

.notifications-page__empty i[b-k9iloxqfw8] {
    font-size: 4rem;
    color: #475569;
    margin-bottom: 20px;
}

.notifications-page__empty h3[b-k9iloxqfw8] {
    margin: 0 0 8px 0;
    color: #f1f5f9;
    font-size: 1.5rem;
    font-weight: 600;
}

.notifications-page__empty p[b-k9iloxqfw8] {
    margin: 0;
    color: #94a3b8;
    font-size: 1rem;
}

/* ── Notification List ────────────────────────────────────────────────────── */

.notifications-page__list[b-k9iloxqfw8] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.notifications-page__item[b-k9iloxqfw8] {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.notifications-page__item:hover[b-k9iloxqfw8] {
    border-color: rgba(148, 163, 184, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.notifications-page__item--unread[b-k9iloxqfw8] {
    background: linear-gradient(145deg, rgba(96, 165, 250, 0.08) 0%, rgba(30, 41, 59, 1) 100%);
    border-color: rgba(96, 165, 250, 0.3);
}

.notifications-page__item--unread:hover[b-k9iloxqfw8] {
    border-color: rgba(96, 165, 250, 0.5);
}

.notifications-page__item-icon[b-k9iloxqfw8] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(96, 165, 250, 0.15);
    border-radius: 10px;
    color: #60a5fa;
    font-size: 1.3rem;
}

.notifications-page__item--success .notifications-page__item-icon[b-k9iloxqfw8] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.notifications-page__item--warning .notifications-page__item-icon[b-k9iloxqfw8] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.notifications-page__item--critical .notifications-page__item-icon[b-k9iloxqfw8] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.notifications-page__item-content[b-k9iloxqfw8] {
    flex: 1;
    min-width: 0;
}

.notifications-page__item-header[b-k9iloxqfw8] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.notifications-page__item-title[b-k9iloxqfw8] {
    flex: 1;
    margin: 0;
    color: #f1f5f9;
    font-size: 1.05rem;
    font-weight: 600;
}

.notifications-page__item-dot[b-k9iloxqfw8] {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    background: #60a5fa;
    border-radius: 50%;
}

.notifications-page__item-message[b-k9iloxqfw8] {
    margin: 0 0 12px 0;
    color: #cbd5e1;
    font-size: 0.95rem;
    line-height: 1.5;
}

.notifications-page__item-meta[b-k9iloxqfw8] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.85rem;
}

.notifications-page__item-category[b-k9iloxqfw8] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: rgba(96, 165, 250, 0.15);
    border-radius: 6px;
    color: #93c5fd;
    font-weight: 500;
}

.notifications-page__item-category--dispatch[b-k9iloxqfw8] { background: rgba(168, 85, 247, 0.15); color: #c084fc; }
.notifications-page__item-category--payroll[b-k9iloxqfw8] { background: rgba(16, 185, 129, 0.15); color: #6ee7b7; }
.notifications-page__item-category--estimates[b-k9iloxqfw8] { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.notifications-page__item-category--approvals[b-k9iloxqfw8] { background: rgba(59, 130, 246, 0.15); color: #93c5fd; }
.notifications-page__item-category--supervisor[b-k9iloxqfw8] { background: rgba(239, 68, 68, 0.15); color: #fca5a5; }
.notifications-page__item-category--subscription[b-k9iloxqfw8] { background: rgba(99, 102, 241, 0.15); color: #c7d2fe; }
.notifications-page__item-category--customercommunication[b-k9iloxqfw8] { background: rgba(14, 165, 233, 0.15); color: #7dd3fc; }
.notifications-page__item-category--scheduling[b-k9iloxqfw8] { background: rgba(34, 197, 94, 0.15); color: #86efac; }
.notifications-page__item-category--inventory[b-k9iloxqfw8] { background: rgba(202, 138, 4, 0.15); color: #fde047; }
.notifications-page__item-category--compliance[b-k9iloxqfw8] { background: rgba(234, 88, 12, 0.15); color: #fdba74; }
.notifications-page__item-category--finance[b-k9iloxqfw8] { background: rgba(20, 184, 166, 0.15); color: #5eead4; }

.notifications-page__item-time[b-k9iloxqfw8] {
    color: #94a3b8;
}

.notifications-page__item-priority[b-k9iloxqfw8] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
}

.notifications-page__item-priority--urgent[b-k9iloxqfw8] {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.notifications-page__item-priority--high[b-k9iloxqfw8] {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.notifications-page__item-actions[b-k9iloxqfw8] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.notifications-page__item-action[b-k9iloxqfw8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 8px;
    color: #cbd5e1;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.notifications-page__item-action:hover[b-k9iloxqfw8] {
    background: rgba(255, 255, 255, 0.1);
    border-color: #60a5fa;
    color: #60a5fa;
}

/* ── Load More ────────────────────────────────────────────────────────────── */

.notifications-page__load-more[b-k9iloxqfw8] {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

/* ── Mobile Responsive ────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .notifications-page[b-k9iloxqfw8] {
        padding: 16px;
    }

    .notifications-page__header[b-k9iloxqfw8] {
        flex-direction: column;
        gap: 16px;
    }

    .notifications-page__filters[b-k9iloxqfw8] {
        flex-direction: column;
        align-items: flex-start;
    }

    .notifications-page__filter-group[b-k9iloxqfw8] {
        width: 100%;
    }

    .notifications-page__item[b-k9iloxqfw8] {
        padding: 16px;
    }

    .notifications-page__item-icon[b-k9iloxqfw8] {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    .notifications-page__item-meta[b-k9iloxqfw8] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}
/* /Components/Pages/OnboardingPage.razor.rz.scp.css */
/* ── Layout ─────────────────────────────────────────────────────────── */
.onboarding-wrap[b-ogvh0uog32] {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2.5rem 1rem 4rem;
    background: var(--fo-bg);
}

.onboarding-container[b-ogvh0uog32] {
    width: 100%;
    max-width: 560px;
}

/* ── Header ─────────────────────────────────────────────────────────── */
.onboarding-header[b-ogvh0uog32] {
    text-align: center;
    margin-bottom: 2rem;
}

.onboarding-logo[b-ogvh0uog32] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--fo-blue, #0d6efd) 0%, var(--fo-blue-dark, #6610f2) 100%);
    color: var(--fo-text-primary, #fff);
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.onboarding-title[b-ogvh0uog32] {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.onboarding-subtitle[b-ogvh0uog32] {
    color: var(--fo-text-secondary, #6c757d);
    font-size: 1rem;
    margin-bottom: 0;
}

/* ── Progress ───────────────────────────────────────────────────────── */
.onboarding-progress[b-ogvh0uog32] {
    background: var(--fo-card);
    border: 1px solid var(--fo-border);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--fo-shadow);
}

.step-indicators[b-ogvh0uog32] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.step-dot[b-ogvh0uog32] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--fo-bg-alt, #e9ecef); /* suggest: --fo-bg-alt */
    color: var(--fo-text-secondary, #6c757d);
    font-size: 0.875rem;
    font-weight: 600;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

.step-dot.active[b-ogvh0uog32] {
    background: var(--fo-blue, #0d6efd);
    color: var(--fo-text-primary, #fff);
    box-shadow: 0 0 0 4px rgba(var(--fo-blue-rgb,13,110,253), 0.2); /* suggest: --fo-blue-rgb */
}

.step-dot.done[b-ogvh0uog32] {
    background: var(--fo-green, #16a34a);
    color: var(--fo-text-on-green, #fff); /* suggest: --fo-text-on-green */
}

.step-connector[b-ogvh0uog32] {
    flex: 1;
    height: 3px;
    max-width: 80px;
    background: var(--fo-bg-alt, #e9ecef); /* suggest: --fo-bg-alt */
    transition: background 0.3s;
}

.step-connector.done[b-ogvh0uog32] {
    background: var(--fo-green, #16a34a);
}

.progress-track[b-ogvh0uog32] {
    height: 6px;
    background: var(--fo-bg-alt, #e9ecef); /* suggest: --fo-bg-alt */
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill[b-ogvh0uog32] {
    height: 100%;
    background: linear-gradient(90deg, var(--fo-blue, #0d6efd), var(--fo-blue-dark, #6610f2));
    border-radius: 3px;
    transition: width 0.4s ease;
}

.progress-label[b-ogvh0uog32] {
    text-align: center;
    font-size: 0.8125rem;
    color: var(--fo-text-secondary, #6c757d);
    margin-top: 0.5rem;
    margin-bottom: 0;
    font-weight: 500;
}

/* ── Step card ──────────────────────────────────────────────────────── */
.onboarding-step[b-ogvh0uog32] {
    background: var(--fo-card);
    border: 1px solid var(--fo-border);
    border-radius: 14px;
    padding: 2rem 1.75rem;
    box-shadow: var(--fo-shadow);
}

.step-icon-wrap[b-ogvh0uog32] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(var(--fo-blue-rgb,13,110,253), 0.1); /* suggest: --fo-blue-rgb */
    color: var(--fo-blue, #0d6efd);
    font-size: 1.4rem;
    margin-bottom: 0.875rem;
}

.step-title[b-ogvh0uog32] {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.step-desc[b-ogvh0uog32] {
    color: var(--fo-text-secondary, #6c757d);
    font-size: 0.9375rem;
    margin-bottom: 1.5rem;
}

/* ── Error ──────────────────────────────────────────────────────────── */
.onboarding-error[b-ogvh0uog32] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: rgba(var(--fo-red-rgb,220,53,69), 0.08); /* suggest: --fo-red-rgb */
    border: 1px solid rgba(var(--fo-red-rgb,220,53,69), 0.25);
    color: var(--fo-red, #dc3545);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}
/* /Components/Pages/PlatformOverview.razor.rz.scp.css */
/* ── Platform Overview — High-Converting Landing ────────────────────────── */

/* ── Admin panel (visible to Admin role only) ────────────────────────────── */

.po-admin-panel[b-9alldaqnpu] {
    margin-top: 40px;
    padding: 20px;
    background: #1a1a1a;
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    box-sizing: border-box;
}

.po-admin-panel h3[b-9alldaqnpu] {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 4px;
}

.po-admin-meta[b-9alldaqnpu] {
    color: #555;
    font-size: 0.8rem;
    margin: 0 0 14px;
}

.po-admin-table[b-9alldaqnpu] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
}

.po-admin-table th[b-9alldaqnpu] {
    text-align: left;
    color: #555;
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-bottom: 8px;
    border-bottom: 1px solid #333;
}

.po-admin-table td[b-9alldaqnpu] {
    color: #aaa;
    padding: 8px 0;
    border-bottom: 1px solid #222;
}

.po-admin-table td:last-child[b-9alldaqnpu] {
    color: #555;
    font-size: 0.78rem;
    white-space: nowrap;
    text-align: right;
}

/* ── Founding Member Banner ──────────────────────────────────────────────── */

.po-founder-banner[b-9alldaqnpu] {
    background: #111;
    border: 1px solid #222;
    border-radius: 16px;
    padding: 32px 24px 28px;
    text-align: center;
}

.po-founder-banner h1[b-9alldaqnpu] {
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.po-founder-highlight[b-9alldaqnpu] {
    display: inline-block;
    background: rgba(255, 140, 0, 0.1);
    border: 1px solid rgba(255, 140, 0, 0.25);
    border-radius: 8px;
    padding: 8px 20px;
}

.po-founder-fire[b-9alldaqnpu] {
    font-size: 1.15rem;
    font-weight: 700;
    color: #ff8c00;
}

.po-founder-discount[b-9alldaqnpu] {
    font-size: 0.95rem;
    font-weight: 600;
    color: #27ae60;
    letter-spacing: 0.02em;
}

.po-count[b-9alldaqnpu] {
    font-size: 0.85rem;
    color: #888;
    letter-spacing: 0.01em;
}

/* ── Section headings ────────────────────────────────────────────────────── */

.po-section-heading[b-9alldaqnpu] {
    color: #fff;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* ── Pricing Cards ───────────────────────────────────────────────────────── */

.po-card[b-9alldaqnpu] {
    background: #111 !important;
    border-color: #222 !important;
    border-radius: 14px !important;
    transition: border-color 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: visible;
}

.po-card:hover[b-9alldaqnpu] {
    border-color: #333 !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
}

.po-card-popular[b-9alldaqnpu] {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 1px #0d6efd, 0 8px 32px rgba(13, 110, 253, 0.12) !important;
}

.po-card-popular:hover[b-9alldaqnpu] {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 1px #0d6efd, 0 12px 40px rgba(13, 110, 253, 0.18) !important;
}

.po-popular-badge[b-9alldaqnpu] {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #0d6efd, #3d8bfd);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 16px;
    border-radius: 20px;
    white-space: nowrap;
    z-index: 2;
}

.po-card-name[b-9alldaqnpu] {
    color: #fff !important;
    font-size: 1.2rem;
    font-weight: 700;
}

.po-card-price[b-9alldaqnpu] {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.po-card-amount[b-9alldaqnpu] {
    font-size: 2.4rem;
    font-weight: 800;
    color: #ff8c00;
    line-height: 1;
}

.po-card-period[b-9alldaqnpu] {
    font-size: 0.9rem;
    font-weight: 500;
    color: #666;
}

.po-card-founder-line[b-9alldaqnpu] {
    font-size: 0.78rem;
    color: #27ae60;
    font-weight: 600;
    margin-bottom: 8px;
}

/* ── Feature lists (cards + deep sections) ───────────────────────────────── */

.po-feature-list li[b-9alldaqnpu] {
    color: #bbb;
    font-size: 0.84rem;
    padding: 5px 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.po-check[b-9alldaqnpu] {
    color: #27ae60;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* ── CTA buttons inside cards ────────────────────────────────────────────── */

.po-cta-btn[b-9alldaqnpu] {
    padding: 12px 0;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.po-cta-btn:hover[b-9alldaqnpu] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.po-cta-btn-primary[b-9alldaqnpu] {
    background: linear-gradient(135deg, #0d6efd, #3d8bfd) !important;
    border: none !important;
    color: #fff !important;
    padding: 12px 0;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}

.po-cta-btn-primary:hover[b-9alldaqnpu] {
    background: linear-gradient(135deg, #0b5ed7, #2f7cf8) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(13, 110, 253, 0.3);
}

/* ── Deep Feature Sections ───────────────────────────────────────────────── */

.po-deep-section[b-9alldaqnpu] {
    background: #111;
    border: 1px solid #222;
    border-radius: 14px;
    padding: 32px 28px;
}

.po-deep-heading[b-9alldaqnpu] {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 12px;
}

.po-deep-list li[b-9alldaqnpu] {
    color: #bbb;
    font-size: 0.88rem;
    padding: 6px 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

/* ── Email capture ───────────────────────────────────────────────────────── */

.po-count[b-9alldaqnpu] {
    font-size: 0.85rem;
    color: #888;
    margin: -10px 0 20px;
    letter-spacing: 0.01em;
}

.cta[b-9alldaqnpu] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 480px;
    margin-top: 30px;
    gap: 10px;
    position: relative;
    z-index: 10;
}

.cta input[b-9alldaqnpu] {
    width: 100%;
    padding: 16px;
    border-radius: 10px;
    border: 1.5px solid #1c2035;
    background: #0e1120;
    color: #e8eaf0;
    font-size: 16px;
    margin-bottom: 10px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.18s;
}

.cta input[b-9alldaqnpu]::placeholder {
    color: #3d4560;
}

.cta input:focus[b-9alldaqnpu] {
    border-color: #ff6a00;
}

.cta-input-error[b-9alldaqnpu] {
    border-color: #e84c3d !important;
}

.cta button[b-9alldaqnpu] {
    display: block;
    visibility: visible;
    opacity: 1;
    width: 100%;
    padding: 18px;
    background: linear-gradient(90deg, #ff6a00, #ff8c00);
    border: none;
    border-radius: 10px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    cursor: pointer;
    box-sizing: border-box;
    letter-spacing: 0.02em;
    transition: transform 0.15s, opacity 0.15s;
}

.cta button:hover:not(:disabled)[b-9alldaqnpu] {
    transform: scale(1.02);
}

.cta button:disabled[b-9alldaqnpu] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── Error / Success ─────────────────────────────────────────────────────── */

.po-error[b-9alldaqnpu] {
    font-size: 0.85rem;
    color: #e84c3d;
    margin: 4px 0 0;
}

.po-success[b-9alldaqnpu] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(39, 174, 96, 0.1);
    border: 1px solid rgba(39, 174, 96, 0.3);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    color: #27ae60;
    font-size: 1.05rem;
    font-weight: 600;
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
}

.po-success-icon[b-9alldaqnpu] {
    font-size: 1.3rem;
    flex-shrink: 0;
}

/* ── Admin panel ─────────────────────────────────────────────────────────── */

.po-admin[b-9alldaqnpu] {
    margin-top: 48px;
    padding-top: 20px;
    border-top: 1px solid #1a1f30;
    width: 100%;
    max-width: 480px;
}

.po-admin-label[b-9alldaqnpu] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #444;
    margin: 0 0 10px;
}

.po-admin-table[b-9alldaqnpu] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
}

.po-admin-table th[b-9alldaqnpu] {
    text-align: left;
    color: #444;
    font-weight: 500;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-bottom: 6px;
    border-bottom: 1px solid #1a1f30;
}

.po-admin-table td[b-9alldaqnpu] {
    color: #888;
    padding: 7px 0;
    border-bottom: 1px solid #111;
}

.po-admin-table td:last-child[b-9alldaqnpu] {
    color: #444;
    font-size: 0.78rem;
    white-space: nowrap;
    text-align: right;
}

.po-admin-empty[b-9alldaqnpu] {
    font-size: 0.83rem;
    color: #444;
    margin: 0;
}

/* ── Temporary debug panel ───────────────────────────────────────────────── */

.po-debug[b-9alldaqnpu] {
    margin-top: 40px;
    padding: 16px;
    border: 1px dashed #ff6a00;
    border-radius: 8px;
    font-size: 0.8rem;
    color: #aaa;
    width: 100%;
    max-width: 480px;
    box-sizing: border-box;
    word-break: break-all;
}

.po-debug strong[b-9alldaqnpu] {
    color: #ff8c00;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.po-debug ul[b-9alldaqnpu] {
    margin: 8px 0 0;
    padding-left: 16px;
}

.po-debug li[b-9alldaqnpu] {
    margin-bottom: 4px;
    color: #888;
}

/* ── Success modal ───────────────────────────────────────────────────────── */

.fo-modal-backdrop[b-9alldaqnpu] {
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 10, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
    box-sizing: border-box;
    animation: fadeIn-b-9alldaqnpu 0.25s ease-out;
}

.fo-modal[b-9alldaqnpu] {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 18px;
    padding: 2.2rem;
    width: 90%;
    max-width: 420px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    text-align: center;
    box-sizing: border-box;
    animation: popIn-b-9alldaqnpu 0.35s cubic-bezier(.2, .9, .3, 1.2);
    color: #f9fafb;
}

.fo-modal-icon[b-9alldaqnpu] {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    color: #16a34a;
    text-shadow: 0 0 15px rgba(22, 163, 74, 0.4);
    animation: pulseGlow-b-9alldaqnpu 1.5s infinite ease-in-out;
}

.fo-modal h2[b-9alldaqnpu] {
    font-size: 1.55rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 12px;
}

.fo-modal p[b-9alldaqnpu] {
    color: #e5e7eb;
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0 0 10px;
}

.fo-modal ul[b-9alldaqnpu] {
    list-style: none;
    padding: 0;
    margin: 12px 0;
    text-align: left;
}

.fo-modal ul li[b-9alldaqnpu] {
    color: #f9fafb;
    font-size: 0.92rem;
    font-weight: 500;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.fo-modal ul li:last-child[b-9alldaqnpu] {
    border-bottom: none;
}

.fo-modal strong[b-9alldaqnpu] {
    color: #ffffff;
}

.fo-modal-note[b-9alldaqnpu] {
    font-size: 0.82rem !important;
    color: #888 !important;
    margin-top: 16px !important;
}

.fo-modal-btn[b-9alldaqnpu] {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    color: white;
    border: none;
    padding: 0.7rem 1.4rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 1rem;
    width: 100%;
    letter-spacing: 0.02em;
    transition: all 0.2s ease;
}

.fo-modal-btn:hover[b-9alldaqnpu] {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(34, 197, 94, 0.35);
}

@keyframes fadeIn-b-9alldaqnpu {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes popIn-b-9alldaqnpu {
    0%   { transform: scale(0.9) translateY(10px); opacity: 0; }
    100% { transform: scale(1)   translateY(0);    opacity: 1; }
}

@keyframes pulseGlow-b-9alldaqnpu {
    0%   { text-shadow: 0 0 10px rgba(22, 163, 74, 0.3); }
    50%  { text-shadow: 0 0 25px rgba(34, 197, 94, 0.6); }
    100% { text-shadow: 0 0 10px rgba(22, 163, 74, 0.3); }
}

/* ── Early access terms checkbox ─────────────────────────────────────────── */

.fo-terms[b-9alldaqnpu] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.78rem;
    color: #555;
    line-height: 1.55;
    width: 100%;
    max-width: 480px;
    margin: 4px 0 2px;
    cursor: pointer;
}

.fo-terms input[type="checkbox"][b-9alldaqnpu] {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    accent-color: #ff6a00;
    cursor: pointer;
}

.fo-terms a[b-9alldaqnpu] {
    color: #ff8c00;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 140, 0, 0.35);
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.fo-terms a:hover[b-9alldaqnpu] {
    color: #ffaa33;
    border-bottom-color: rgba(255, 170, 51, 0.6);
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .po-founder-banner[b-9alldaqnpu] {
        padding: 20px 16px;
    }

    .po-founder-banner h1[b-9alldaqnpu] {
        font-size: 1.5rem;
    }

    .po-founder-fire[b-9alldaqnpu] {
        font-size: 1rem;
    }

    .po-section-heading[b-9alldaqnpu] {
        font-size: 1.3rem;
    }

    .po-deep-section[b-9alldaqnpu] {
        padding: 24px 20px;
    }

    .po-deep-heading[b-9alldaqnpu] {
        font-size: 1.2rem;
    }

    /* Stack input + button vertically; pull it up on mobile */
    .cta[b-9alldaqnpu] {
        flex-direction: column;
        width: 100%;
        gap: 10px;
        margin-top: 10px !important;
    }

    .cta input[b-9alldaqnpu],
    .cta button[b-9alldaqnpu] {
        width: 100%;
    }

    .cta input[b-9alldaqnpu] {
        font-size: 16px; /* Prevent iOS auto-zoom on focus */
    }

    .cta button[b-9alldaqnpu] {
        padding: 16px; /* Comfortable tap target ≥ 48px height */
    }

    .po-success[b-9alldaqnpu] {
        padding: 0.85rem 1rem;
        font-size: 0.95rem;
    }

    .po-admin[b-9alldaqnpu] {
        max-width: 100%;
    }

    .po-debug[b-9alldaqnpu] {
        max-width: 100%;
    }
}
/* /Components/Pages/PricingPage.razor.rz.scp.css */
/* ============================================================
   PricingPage.razor.css — Premium SaaS Pricing Page
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────────────── */
.pricing-hero[b-acrwg56irp] {
    background: linear-gradient(180deg, #09111f 0%, #0f172a 100%);
    border-bottom: 1px solid #1e293b;
    padding: 88px 16px 72px;
}

.hero-badge .badge[b-acrwg56irp] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 0.45em 1.1em;
    border-radius: 99px;
    background: rgba(14, 165, 233, 0.12) !important;
    color: #0ea5e9 !important;
    border: 1px solid rgba(14, 165, 233, 0.3);
    text-transform: uppercase;
}

.hero-headline[b-acrwg56irp] {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: #f8fafc;
}

.hero-subheadline[b-acrwg56irp] {
    font-size: 1.15rem;
    color: #94a3b8;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.65;
}

.hero-trust[b-acrwg56irp] {
    font-size: 0.875rem;
    color: #64748b;
}

/* ── Value Strip ──────────────────────────────────────────────── */
.value-strip[b-acrwg56irp] {
    background: #1e293b;
    border-top: 1px solid #334155;
    border-bottom: 1px solid #334155;
    padding: 18px 16px;
}

.value-items[b-acrwg56irp] {
    gap: 0;
}

.value-item[b-acrwg56irp] {
    padding: 6px 20px;
    font-weight: 600;
    font-size: 0.925rem;
    color: #cbd5e1;
    letter-spacing: 0.01em;
}

.value-sep[b-acrwg56irp] {
    align-items: center;
    color: #334155;
    font-size: 1.1rem;
    padding: 0 4px;
}

/* ── Section Headings ─────────────────────────────────────────── */
.section-title[b-acrwg56irp] {
    font-size: clamp(1.6rem, 3.5vw, 2.1rem);
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: -0.02em;
}

.section-subtitle[b-acrwg56irp] {
    font-size: 1rem;
    color: #94a3b8 !important;
}

/* ── Plan Cards ───────────────────────────────────────────────── */
.pricing-plans[b-acrwg56irp] {
    background: #0f172a;
}

.plan-card[b-acrwg56irp] {
    position: relative;
    background: #1e293b;
    border: 1.5px solid #334155;
    border-radius: 18px;
    padding: 2rem;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    display: flex;
    flex-direction: column;
}

.plan-card:hover[b-acrwg56irp] {
    border-color: #475569;
    transform: translateY(-3px);
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.35);
}

.plan-card-selected[b-acrwg56irp] {
    border-color: #0ea5e9 !important;
    background: #102030 !important;
    box-shadow: 0 0 0 1px #0ea5e9,
                0 10px 44px rgba(14, 165, 233, 0.18) !important;
}

.plan-card-popular[b-acrwg56irp] {
    border-color: #6366f1;
    transform: scale(1.035);
    box-shadow: 0 12px 48px rgba(99, 102, 241, 0.22);
    z-index: 1;
}

.plan-card-popular.plan-card-selected[b-acrwg56irp] {
    border-color: #0ea5e9 !important;
    box-shadow: 0 0 0 1px #0ea5e9,
                0 12px 48px rgba(14, 165, 233, 0.2) !important;
}

.popular-badge[b-acrwg56irp] {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    padding: 0.3em 1.2em;
    border-radius: 99px;
    white-space: nowrap;
    box-shadow: 0 3px 14px rgba(99, 102, 241, 0.5);
}

.plan-header[b-acrwg56irp] {
    margin-bottom: 1.5rem;
}

.plan-name[b-acrwg56irp] {
    font-size: 1.45rem;
    font-weight: 800;
    color: #f8fafc;
    margin-bottom: 0.4rem;
}

.plan-price[b-acrwg56irp] {
    margin-bottom: 0.65rem;
    line-height: 1;
}

.price-amount[b-acrwg56irp] {
    font-size: 2.75rem;
    font-weight: 900;
    color: #f8fafc;
    letter-spacing: -0.04em;
}

.price-period[b-acrwg56irp] {
    font-size: 1rem;
    color: #94a3b8;
    margin-left: 2px;
}

.plan-tagline[b-acrwg56irp] {
    font-size: 0.925rem;
    font-weight: 700;
    color: #0ea5e9;
    margin-bottom: 0.4rem;
}

.plan-for[b-acrwg56irp] {
    font-size: 0.83rem;
    color: #64748b;
    line-height: 1.5;
}

.plan-features[b-acrwg56irp] {
    margin-bottom: 1.5rem;
}

.feature-row[b-acrwg56irp] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 0.28rem 0;
    font-size: 0.875rem;
    color: #cbd5e1;
    line-height: 1.45;
}

.feature-row i[b-acrwg56irp] {
    flex-shrink: 0;
    margin-top: 2px;
}

.feature-row.feature-excluded[b-acrwg56irp] {
    opacity: 0.45;
}

.feature-divider[b-acrwg56irp] {
    border-top: 1px solid #334155;
}

.plan-btn[b-acrwg56irp] {
    border-radius: 10px;
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
    transition: all 0.15s ease;
}

/* ── Add-on Cards ─────────────────────────────────────────────── */
.addons-section[b-acrwg56irp] {
    background: #0a1628;
    border-top: 1px solid #1e293b;
}

.addon-card[b-acrwg56irp] {
    position: relative;
    background: #1e293b;
    border: 1.5px solid #334155;
    border-radius: 18px;
    padding: 1.75rem;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
    display: flex;
    flex-direction: column;
    user-select: none;
}

.addon-card:hover:not(.addon-card-included)[b-acrwg56irp] {
    border-color: #475569;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
}

.addon-card-active:not(.addon-card-included)[b-acrwg56irp] {
    border-color: #10b981 !important;
    background: #0a1f15 !important;
    box-shadow: 0 0 0 1px #10b981,
                0 8px 28px rgba(16, 185, 129, 0.15) !important;
}

.addon-card-included[b-acrwg56irp] {
    border-color: #10b981 !important;
    background: #0a1f15 !important;
    cursor: default;
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.35) !important;
}

.included-badge[b-acrwg56irp] {
    position: absolute;
    top: -12px;
    left: 1.5rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.28em 0.9em;
    border-radius: 99px;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.4);
    white-space: nowrap;
}

.addon-name[b-acrwg56irp] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 0.25rem;
}

.addon-price[b-acrwg56irp] {
    margin-bottom: 0.4rem;
    line-height: 1;
}

.price-amount-sm[b-acrwg56irp] {
    font-size: 1.75rem;
    font-weight: 900;
    color: #f8fafc;
    letter-spacing: -0.03em;
}

.price-included[b-acrwg56irp] {
    font-size: 1.1rem;
}

.addon-tagline[b-acrwg56irp] {
    font-size: 0.83rem;
    font-weight: 700;
    color: #0ea5e9;
}

.addon-toggle[b-acrwg56irp] {
    font-size: 2rem;
    color: #475569;
    transition: color 0.18s ease;
    line-height: 1;
    flex-shrink: 0;
}

.addon-toggle-on[b-acrwg56irp] {
    color: #10b981;
}

.addon-support-text[b-acrwg56irp] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
    font-style: italic;
    line-height: 1.4;
}

/* ── Summary Card ─────────────────────────────────────────────── */
.summary-section[b-acrwg56irp] {
    background: #0f172a;
    border-top: 1px solid #1e293b;
}

.summary-card[b-acrwg56irp] {
    background: linear-gradient(135deg, #1a2942 0%, #111e30 100%);
    border: 1.5px solid #0ea5e9;
    border-radius: 22px;
    padding: 2.5rem;
    box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.15),
                0 20px 60px rgba(14, 165, 233, 0.08);
}

.summary-title[b-acrwg56irp] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #f8fafc;
}

.summary-line[b-acrwg56irp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(51, 65, 85, 0.6);
    font-size: 0.925rem;
    gap: 8px;
}

.summary-label[b-acrwg56irp] {
    color: #cbd5e1;
    display: flex;
    align-items: center;
    gap: 2px;
}

.summary-amount[b-acrwg56irp] {
    color: #f8fafc;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.summary-total-row[b-acrwg56irp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #334155;
    padding-top: 0.75rem;
}

.summary-total-label[b-acrwg56irp] {
    font-weight: 700;
    color: #f8fafc;
    font-size: 1rem;
}

.summary-total-amount[b-acrwg56irp] {
    font-weight: 900;
    color: #0ea5e9;
    font-size: 1.2rem;
    letter-spacing: -0.01em;
}

.total-display[b-acrwg56irp] {
    background: rgba(14, 165, 233, 0.07);
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-radius: 14px;
    padding: 1.5rem 1rem;
}

.total-label[b-acrwg56irp] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #94a3b8;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
}

.total-amount[b-acrwg56irp] {
    font-size: 3rem;
    font-weight: 900;
    color: #f8fafc;
    letter-spacing: -0.045em;
    line-height: 1;
}

.total-period[b-acrwg56irp] {
    font-size: 0.85rem;
    margin-top: 0.2rem;
}

/* ── ROI Section ──────────────────────────────────────────────── */
.roi-section[b-acrwg56irp] {
    background: #0a1628;
    border-top: 1px solid #1e293b;
    border-bottom: 1px solid #1e293b;
}

.roi-card[b-acrwg56irp] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 22px;
    padding: 3rem 2.5rem;
}

.roi-icon[b-acrwg56irp] {
    font-size: 3rem;
    color: #10b981;
}

.roi-headline[b-acrwg56irp] {
    font-size: clamp(1.75rem, 3.5vw, 2.25rem);
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: -0.025em;
}

.roi-body[b-acrwg56irp] {
    color: #94a3b8;
    font-size: 1.05rem;
    line-height: 1.75;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.roi-stat[b-acrwg56irp] {
    padding: 1rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #334155;
    border-radius: 12px;
}

.roi-stat-value[b-acrwg56irp] {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 0.3rem;
    letter-spacing: -0.02em;
}

.roi-stat-label[b-acrwg56irp] {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 600;
    line-height: 1.3;
}

/* ── Final CTA ────────────────────────────────────────────────── */
.final-cta[b-acrwg56irp] {
    background: linear-gradient(180deg, #0a1628 0%, #050e1a 100%);
    padding: 88px 16px;
    border-top: 1px solid #1e293b;
}

.cta-headline[b-acrwg56irp] {
    font-size: clamp(1.75rem, 4vw, 2.6rem);
    font-weight: 900;
    color: #f8fafc;
    letter-spacing: -0.025em;
}

.cta-subheadline[b-acrwg56irp] {
    font-size: 1.1rem;
    color: #94a3b8 !important;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 991px) {
    .plan-card-popular[b-acrwg56irp] {
        transform: none;
    }

    .plan-card-popular.plan-card-selected[b-acrwg56irp] {
        transform: none;
    }
}

@media (max-width: 768px) {
    .pricing-hero[b-acrwg56irp] {
        padding: 64px 16px 52px;
    }

    .final-cta[b-acrwg56irp] {
        padding: 64px 16px;
    }

    .plan-card[b-acrwg56irp] {
        padding: 1.5rem;
    }

    .summary-card[b-acrwg56irp] {
        padding: 1.5rem;
    }

    .roi-card[b-acrwg56irp] {
        padding: 2rem 1.25rem;
    }

    .total-amount[b-acrwg56irp] {
        font-size: 2.25rem;
    }

    .value-item[b-acrwg56irp] {
        padding: 6px 12px;
        font-size: 0.84rem;
    }
}
/* /Components/Pages/Pricing/PricingRulesPage.razor.rz.scp.css */
/* ============================================================
   PricingRulesPage.razor.css — Settings › Pricing Rules
   ============================================================ */

/* ── Form Panel ───────────────────────────────────────────────── */
.form-panel[b-sj376oimkx] {
    border: 1px solid rgba(99, 102, 241, 0.3);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.06);
    animation: slideDown-b-sj376oimkx 0.15s ease-out;
}

@keyframes slideDown-b-sj376oimkx {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Live preview strip ───────────────────────────────────────── */
.preview-row[b-sj376oimkx] {
    background: rgba(14, 165, 233, 0.06);
    border: 1px solid rgba(14, 165, 233, 0.18);
    border-radius: 6px;
    padding: 0.55rem 0.9rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Table ────────────────────────────────────────────────────── */
.pricing-table thead th[b-sj376oimkx] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    white-space: nowrap;
}

.pricing-table tbody tr[b-sj376oimkx] {
    vertical-align: middle;
}

.row-confirm-delete[b-sj376oimkx] {
    background: rgba(220, 38, 38, 0.07) !important;
}

/* ── Measurement type badges ──────────────────────────────────── */
.measurement-badge[b-sj376oimkx] {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.3em 0.65em;
    border-radius: 4px;
}

.badge-roof[b-sj376oimkx]     { background: rgba(139, 92,  246, 0.18); color: #a78bfa; }
.badge-lawn[b-sj376oimkx]     { background: rgba(34,  197, 94,  0.15); color: #4ade80; }
.badge-driveway[b-sj376oimkx] { background: rgba(100, 116, 139, 0.20); color: #94a3b8; }
.badge-sidewalk[b-sj376oimkx] { background: rgba(234, 179, 8,   0.15); color: #facc15; }
.badge-mulch[b-sj376oimkx]    { background: rgba(180, 83,  9,   0.20); color: #fb923c; }
.badge-other[b-sj376oimkx]    { background: rgba(71,  85,  105, 0.20); color: #94a3b8; }

/* ── Pricing type chips ───────────────────────────────────────── */
.pricing-chip[b-sj376oimkx] {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.25em 0.65em;
    border-radius: 99px;
    white-space: nowrap;
}

.chip-sqft[b-sj376oimkx]   { background: rgba(14,  165, 233, 0.12); color: #38bdf8; border: 1px solid rgba(14,  165, 233, 0.2); }
.chip-linear[b-sj376oimkx] { background: rgba(52,  211, 153, 0.12); color: #34d399; border: 1px solid rgba(52,  211, 153, 0.2); }
.chip-flat[b-sj376oimkx]   { background: rgba(251, 191, 36,  0.12); color: #fbbf24; border: 1px solid rgba(251, 191, 36,  0.2); }
/* /Components/Pages/PrivacyPolicy.razor.rz.scp.css */
/* ── Privacy Policy Page ─────────────────────────────────────────────────── */

/* ── Page wrapper ────────────────────────────────────────────────────────── */

.tc-wrapper[b-l80ecke7s0] {
    min-height: 100vh;
    background: linear-gradient(160deg, #0b0b0b 0%, #0f1a0f 50%, #0b0b0b 100%);
    padding: 60px 20px 80px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

/* ── Content container ───────────────────────────────────────────────────── */

.tc-container[b-l80ecke7s0] {
    width: 100%;
    max-width: 900px;
    color: #e5e7eb;
    font-size: 0.9rem;
    line-height: 1.75;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Header block ────────────────────────────────────────────────────────── */

.tc-header[b-l80ecke7s0] {
    text-align: center;
    margin-bottom: 52px;
}

.tc-logo[b-l80ecke7s0] {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #22c55e;
    margin-bottom: 18px;
    opacity: 0.9;
}

.tc-title[b-l80ecke7s0] {
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.025em;
    margin: 0 0 10px;
    line-height: 1.15;
}

.tc-meta[b-l80ecke7s0] {
    font-size: 0.78rem;
    color: #4b5563;
    margin: 0 0 22px;
    letter-spacing: 0.03em;
}

.tc-intro[b-l80ecke7s0] {
    font-size: 0.88rem;
    color: #9ca3af;
    line-height: 1.75;
    max-width: 780px;
    margin: 0 auto 28px;
    text-align: left;
}

.tc-divider[b-l80ecke7s0] {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #16a34a, #22c55e);
    border-radius: 2px;
    margin: 0 auto;
}

/* ── Section blocks ──────────────────────────────────────────────────────── */

.tc-section[b-l80ecke7s0] {
    margin-bottom: 44px;
    padding-bottom: 36px;
    border-bottom: 1px solid #1f2937;
}

.tc-section:last-of-type[b-l80ecke7s0] {
    border-bottom: none;
}

/* ── Section headings ────────────────────────────────────────────────────── */

.tc-heading[b-l80ecke7s0] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #22c55e;
    margin: 0 0 14px;
    letter-spacing: 0.01em;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(34, 197, 94, 0.15);
}

.tc-subheading[b-l80ecke7s0] {
    font-size: 0.88rem;
    font-weight: 600;
    color: #d1d5db;
    margin: 18px 0 8px;
    letter-spacing: 0.01em;
}

/* ── Body paragraphs ─────────────────────────────────────────────────────── */

.tc-section p[b-l80ecke7s0] {
    color: #e5e7eb;
    font-size: 0.9rem;
    margin: 0 0 12px;
    line-height: 1.75;
}

.tc-section p strong[b-l80ecke7s0] {
    color: #f3f4f6;
    font-weight: 600;
}

/* ── Lists ───────────────────────────────────────────────────────────────── */

.tc-list[b-l80ecke7s0] {
    list-style: none;
    padding: 0;
    margin: 10px 0 14px;
}

.tc-list li[b-l80ecke7s0] {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #1f2937;
    color: #d1d5db;
    font-size: 0.89rem;
    line-height: 1.7;
    align-items: flex-start;
}

.tc-list li[b-l80ecke7s0]::before {
    content: "›";
    color: #22c55e;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 1px;
    line-height: 1.7;
}

.tc-list li:last-child[b-l80ecke7s0] {
    border-bottom: none;
}

.tc-list li strong[b-l80ecke7s0] {
    color: #f3f4f6;
    font-weight: 600;
}

/* ── Warning callout box ─────────────────────────────────────────────────── */

.tc-warning-box[b-l80ecke7s0] {
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.22);
    border-left: 3px solid #22c55e;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.84rem;
    color: #86efac;
    margin: 0 0 18px;
    line-height: 1.6;
}

.tc-warning-box strong[b-l80ecke7s0] {
    color: #4ade80;
    font-weight: 700;
}

/* ── Inline links ────────────────────────────────────────────────────────── */

.tc-link[b-l80ecke7s0] {
    color: #22c55e;
    text-decoration: none;
    border-bottom: 1px solid rgba(34, 197, 94, 0.3);
    transition: border-color 0.15s, color 0.15s;
}

.tc-link:hover[b-l80ecke7s0] {
    color: #4ade80;
    border-bottom-color: #4ade80;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.tc-footer[b-l80ecke7s0] {
    text-align: center;
    padding-top: 36px;
    margin-top: 12px;
    border-top: 1px solid #1f2937;
}

.tc-footer p[b-l80ecke7s0] {
    color: #374151;
    font-size: 0.78rem;
    margin: 0 0 6px;
}

.tc-footer-sub[b-l80ecke7s0] {
    color: #1f2937 !important;
    font-size: 0.72rem !important;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .tc-wrapper[b-l80ecke7s0] {
        padding: 36px 16px 60px;
    }

    .tc-title[b-l80ecke7s0] {
        font-size: 1.65rem;
    }

    .tc-intro[b-l80ecke7s0] {
        font-size: 0.84rem;
    }

    .tc-heading[b-l80ecke7s0] {
        font-size: 0.98rem;
    }

    .tc-section[b-l80ecke7s0] {
        margin-bottom: 32px;
        padding-bottom: 28px;
    }

    .tc-list li[b-l80ecke7s0] {
        font-size: 0.85rem;
    }

    .tc-warning-box[b-l80ecke7s0] {
        font-size: 0.82rem;
    }
}
/* /Components/Pages/ReferralDashboard.razor.rz.scp.css */
/* ── Hero banner ───────────────────────────────────────────────────────── */
.referral-hero[b-nbd4a69suz] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: linear-gradient(135deg, #1a56db 0%, #6c3eb5 100%);
    border-radius: .75rem;
    padding: 1.5rem 2rem;
    color: #fff;
    flex-wrap: wrap;
}

.referral-hero__icon[b-nbd4a69suz] {
    font-size: 2.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.referral-hero__body[b-nbd4a69suz] {
    flex: 1 1 260px;
}

.referral-hero__title[b-nbd4a69suz] {
    font-size: 1.45rem;
    font-weight: 700;
    margin-bottom: .35rem;
    color: #fff;
}

.referral-hero__sub[b-nbd4a69suz] {
    font-size: .93rem;
    opacity: .9;
    margin-bottom: 0;
}

.referral-hero__sub strong[b-nbd4a69suz] {
    color: #ffd966;
}

.referral-reward-pill[b-nbd4a69suz] {
    display: inline-block;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 2rem;
    padding: .45rem 1.1rem;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

/* ── Stat cards ────────────────────────────────────────────────────────── */
.stat-card[b-nbd4a69suz] {
    border-radius: .65rem;
    padding: 1.25rem 1rem;
    text-align: center;
    height: 100%;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.stat-card__value[b-nbd4a69suz] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
}

.stat-card__label[b-nbd4a69suz] {
    font-size: .8rem;
    font-weight: 600;
    margin-top: .3rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.stat-card__hint[b-nbd4a69suz] {
    font-size: .72rem;
    margin-top: .2rem;
    opacity: .7;
}

.stat-card--green[b-nbd4a69suz] {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.stat-card--green .stat-card__value[b-nbd4a69suz] {
    color: #16a34a;
}

.stat-card--green .stat-card__label[b-nbd4a69suz] {
    color: #15803d;
}

.stat-card--blue[b-nbd4a69suz] {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.stat-card--blue .stat-card__value[b-nbd4a69suz] {
    color: #1d4ed8;
}

.stat-card--blue .stat-card__label[b-nbd4a69suz] {
    color: #1e40af;
}

.stat-card--amber[b-nbd4a69suz] {
    background: #fffbeb;
    border: 1px solid #fde68a;
}

.stat-card--amber .stat-card__value[b-nbd4a69suz] {
    color: #d97706;
}

.stat-card--amber .stat-card__label[b-nbd4a69suz] {
    color: #b45309;
}

.stat-card--purple[b-nbd4a69suz] {
    background: #faf5ff;
    border: 1px solid #e9d5ff;
}

.stat-card--purple .stat-card__value[b-nbd4a69suz] {
    color: #7c3aed;
}

.stat-card--purple .stat-card__label[b-nbd4a69suz] {
    color: #6d28d9;
}

/* ── Step circles ──────────────────────────────────────────────────────── */
.step-circle[b-nbd4a69suz] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
}

.step-circle--blue[b-nbd4a69suz] {
    background: #dbeafe;
    color: #1d4ed8;
}

.step-circle--amber[b-nbd4a69suz] {
    background: #fef3c7;
    color: #d97706;
}

.step-circle--green[b-nbd4a69suz] {
    background: #dcfce7;
    color: #16a34a;
}
/* /Components/Pages/Settings.razor.rz.scp.css */
.admin-restart-section[b-3m5ndzwgxb] {
    padding: 20px;
    border: 1px solid #ff4d4d;
    border-radius: 8px;
}
/* /Components/Pages/SignupPage.razor.rz.scp.css */
/* ============================================================
   SignupPage.razor.css — Signup & Checkout Preparation
   ============================================================ */

/* ── Page shell ───────────────────────────────────────────────── */
.signup-page[b-xlnmm1jpqf] {
    background: #0f172a;
    min-height: 100vh;
}

/* ── Page header ──────────────────────────────────────────────── */
.signup-logo-mark[b-xlnmm1jpqf] {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 1.5rem;
    color: #fff;
}

.signup-page-title[b-xlnmm1jpqf] {
    font-size: clamp(1.6rem, 3.5vw, 2.1rem);
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: -0.02em;
    margin-bottom: 0.4rem;
}

.signup-page-subtitle[b-xlnmm1jpqf] {
    font-size: 1rem;
    color: #94a3b8 !important;
}

/* ── Signup form card ─────────────────────────────────────────── */
.signup-card[b-xlnmm1jpqf] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 18px;
    padding: 2.25rem;
}

/* ── Error alert ──────────────────────────────────────────────── */
.alert-signup-error[b-xlnmm1jpqf] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    color: #fca5a5;
    font-size: 0.9rem;
}

.alert-signup-error i[b-xlnmm1jpqf] {
    color: #ef4444;
    font-size: 1rem;
}

/* ── Form section labels ──────────────────────────────────────── */
.form-section-label[b-xlnmm1jpqf] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #94a3b8;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #334155;
}

/* ── Trust strip ──────────────────────────────────────────────── */
.trust-strip[b-xlnmm1jpqf] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    background: rgba(14, 165, 233, 0.05);
    border: 1px solid rgba(14, 165, 233, 0.15);
    border-radius: 10px;
    padding: 0.85rem 1rem;
}

.trust-item[b-xlnmm1jpqf] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: #94a3b8;
}

/* ── Submit button ────────────────────────────────────────────── */
.signup-submit-btn[b-xlnmm1jpqf] {
    border-radius: 12px;
    padding: 0.75rem 1.25rem;
    font-size: 1rem;
    transition: all 0.15s ease;
}

.signup-submit-btn:hover:not(:disabled)[b-xlnmm1jpqf] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.3);
}

.signup-submit-btn:disabled[b-xlnmm1jpqf] {
    opacity: 0.75;
    cursor: not-allowed;
}

/* ── Order summary card ───────────────────────────────────────── */
.order-card[b-xlnmm1jpqf] {
    background: #1e293b;
    border: 1.5px solid #0ea5e9;
    border-radius: 18px;
    padding: 1.75rem;
    box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.12),
                0 16px 48px rgba(14, 165, 233, 0.08);
    top: 80px; /* offset below fixed nav */
}

.order-card-header[b-xlnmm1jpqf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #334155;
}

.order-card-title[b-xlnmm1jpqf] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0;
}

.order-change-link[b-xlnmm1jpqf] {
    font-size: 0.8rem;
    color: #0ea5e9;
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.15s;
}

.order-change-link:hover[b-xlnmm1jpqf] {
    opacity: 0.8;
    color: #0ea5e9;
}

/* ── Order lines ──────────────────────────────────────────────── */
.order-lines[b-xlnmm1jpqf] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.order-line[b-xlnmm1jpqf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(51, 65, 85, 0.5);
    font-size: 0.9rem;
    gap: 8px;
}

.order-line-label[b-xlnmm1jpqf] {
    color: #cbd5e1;
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
}

.order-line-price[b-xlnmm1jpqf] {
    color: #f8fafc;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.order-included-badge[b-xlnmm1jpqf] {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.15em 0.6em;
    border-radius: 99px;
    background: #10b981;
    color: #fff;
    margin-left: 6px;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

/* ── Order total ──────────────────────────────────────────────── */
.order-total-row[b-xlnmm1jpqf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #334155;
}

.order-total-label[b-xlnmm1jpqf] {
    font-weight: 700;
    color: #f8fafc;
    font-size: 1rem;
}

.order-total-price[b-xlnmm1jpqf] {
    font-weight: 900;
    color: #0ea5e9;
    font-size: 1.3rem;
    letter-spacing: -0.02em;
}

/* ── Trust list ───────────────────────────────────────────────── */
.order-trust-list[b-xlnmm1jpqf] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.order-trust-item[b-xlnmm1jpqf] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.45;
}

.order-trust-item i[b-xlnmm1jpqf] {
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 0.9rem;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .signup-card[b-xlnmm1jpqf] {
        padding: 1.5rem;
    }

    .order-card[b-xlnmm1jpqf] {
        padding: 1.25rem;
        position: static; /* not sticky on mobile */
    }

    .trust-strip[b-xlnmm1jpqf] {
        flex-direction: column;
        gap: 0.5rem;
    }
}
/* /Components/Pages/SubscriptionSuccessPage.razor.rz.scp.css */
.success-page[b-lv10k77ieo] {
    min-height: 100vh;
    background: linear-gradient(145deg, #0b1120 0%, #0f172a 50%, #111d35 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.success-card[b-lv10k77ieo] {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 20px;
    padding: 3.5rem 3rem 2.5rem;
    max-width: 520px;
    width: 100%;
    text-align: center;
    color: #f1f5f9;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(59, 130, 246, 0.08);
}

/* Animated checkmark */
.success-icon-wrap[b-lv10k77ieo] {
    margin-bottom: 1.75rem;
}

.success-checkmark[b-lv10k77ieo] {
    width: 88px;
    height: 88px;
    filter: drop-shadow(0 0 20px rgba(34, 197, 94, 0.3));
}

.checkmark-circle[b-lv10k77ieo] {
    stroke: #22c55e;
    stroke-width: 2;
    stroke-dasharray: 157;
    stroke-dashoffset: 157;
    animation: draw-circle-b-lv10k77ieo 0.6s ease forwards;
}

.checkmark-check[b-lv10k77ieo] {
    stroke: #22c55e;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: draw-check-b-lv10k77ieo 0.4s ease 0.5s forwards;
}

@keyframes draw-circle-b-lv10k77ieo {
    to { stroke-dashoffset: 0; }
}

@keyframes draw-check-b-lv10k77ieo {
    to { stroke-dashoffset: 0; }
}

.success-title[b-lv10k77ieo] {
    font-size: 2.1rem;
    font-weight: 800;
    color: #f8fafc;
    margin-bottom: 0.4rem;
    letter-spacing: -0.01em;
}

.success-subtitle[b-lv10k77ieo] {
    font-size: 1.1rem;
    color: #94a3b8;
    font-weight: 500;
    margin-bottom: 2rem;
}

/* Activation notice */
.activation-notice[b-lv10k77ieo] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.75rem;
    text-align: left;
}

.activation-notice > i[b-lv10k77ieo],
.activation-notice > .spinner-border[b-lv10k77ieo] {
    flex-shrink: 0;
    font-size: 1.25rem;
}

.activation-success[b-lv10k77ieo] {
    border-color: #166534;
    background: linear-gradient(135deg, #052e16 0%, #0f172a 100%);
}

.activation-success > i[b-lv10k77ieo] {
    color: #22c55e;
}

.activation-warn[b-lv10k77ieo] {
    border-color: #854d0e;
    background: linear-gradient(135deg, #422006 0%, #0f172a 100%);
}

.activation-warn > i[b-lv10k77ieo] {
    color: #f59e0b;
}

.activation-text[b-lv10k77ieo] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.9rem;
}

.activation-text strong[b-lv10k77ieo] {
    color: #f1f5f9;
}

.activation-text span[b-lv10k77ieo] {
    color: #94a3b8;
}

/* Plan summary */
.plan-summary[b-lv10k77ieo] {
    margin-bottom: 2rem;
}

.plan-summary-label[b-lv10k77ieo] {
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}

.plan-summary-grid[b-lv10k77ieo] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.plan-summary-item[b-lv10k77ieo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #0f172a;
    border: 1px solid #1e3a5f;
    border-radius: 12px;
    padding: 0.85rem 1.25rem;
    flex: 1;
    max-width: 200px;
}

.plan-summary-item > i[b-lv10k77ieo] {
    font-size: 1.3rem;
    color: #3b82f6;
    flex-shrink: 0;
}

.plan-summary-item > div[b-lv10k77ieo] {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.plan-summary-key[b-lv10k77ieo] {
    font-size: 0.7rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.plan-summary-value[b-lv10k77ieo] {
    font-size: 1.05rem;
    color: #f1f5f9;
    font-weight: 700;
}

/* CTA buttons */
.success-actions[b-lv10k77ieo] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1.75rem;
}

.btn-primary-action[b-lv10k77ieo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 0.9rem 2.25rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    width: 100%;
    max-width: 320px;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
}

.btn-primary-action:hover[b-lv10k77ieo] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.45);
}

.btn-primary-action:active[b-lv10k77ieo] {
    transform: translateY(0);
}

.btn-secondary-action[b-lv10k77ieo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: transparent;
    color: #94a3b8;
    border: 1px solid #334155;
    border-radius: 10px;
    padding: 0.75rem 2rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    width: 100%;
    max-width: 320px;
}

.btn-secondary-action:hover[b-lv10k77ieo] {
    color: #f1f5f9;
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.08);
}

/* Session reference */
.session-ref[b-lv10k77ieo] {
    font-size: 0.72rem;
    color: #475569;
    margin-bottom: 1.25rem;
}

.session-ref code[b-lv10k77ieo] {
    font-family: monospace;
    color: #64748b;
}

/* Trust strip */
.trust-strip[b-lv10k77ieo] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: #475569;
}

.trust-strip a[b-lv10k77ieo] {
    color: #3b82f6;
    text-decoration: none;
}

.trust-strip a:hover[b-lv10k77ieo] {
    text-decoration: underline;
}

@media (max-width: 576px) {
    .success-card[b-lv10k77ieo] {
        padding: 2.25rem 1.5rem 2rem;
        border-radius: 16px;
    }

    .success-title[b-lv10k77ieo] {
        font-size: 1.6rem;
    }

    .plan-summary-grid[b-lv10k77ieo] {
        flex-direction: column;
        align-items: stretch;
    }

    .plan-summary-item[b-lv10k77ieo] {
        max-width: none;
    }

    .trust-strip[b-lv10k77ieo] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .trust-divider[b-lv10k77ieo] {
        display: none;
    }
}
/* /Components/Pages/TermsAndConditions.razor.rz.scp.css */
/* ── Terms & Conditions Page ─────────────────────────────────────────────── */

/* ── Page wrapper: full-height dark gradient ─────────────────────────────── */

.tc-wrapper[b-425f3src31] {
    min-height: 100vh;
    background: linear-gradient(160deg, #0b0b0b 0%, #0f1a0f 50%, #0b0b0b 100%);
    padding: 60px 20px 80px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

/* ── Content container: centered, capped width ───────────────────────────── */

.tc-container[b-425f3src31] {
    width: 100%;
    max-width: 900px;
    color: #e5e7eb;
    font-size: 0.9rem;
    line-height: 1.75;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Header block ────────────────────────────────────────────────────────── */

.tc-header[b-425f3src31] {
    text-align: center;
    margin-bottom: 52px;
}

.tc-logo[b-425f3src31] {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #22c55e;
    margin-bottom: 18px;
    opacity: 0.9;
}

.tc-title[b-425f3src31] {
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.025em;
    margin: 0 0 10px;
    line-height: 1.15;
}

.tc-meta[b-425f3src31] {
    font-size: 0.78rem;
    color: #4b5563;
    margin: 0 0 22px;
    letter-spacing: 0.03em;
}

.tc-intro[b-425f3src31] {
    font-size: 0.88rem;
    color: #9ca3af;
    line-height: 1.75;
    max-width: 780px;
    margin: 0 auto 28px;
    text-align: left;
}

.tc-divider[b-425f3src31] {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #16a34a, #22c55e);
    border-radius: 2px;
    margin: 0 auto;
}

/* ── Section blocks ──────────────────────────────────────────────────────── */

.tc-section[b-425f3src31] {
    margin-bottom: 44px;
    padding-bottom: 36px;
    border-bottom: 1px solid #1f2937;
}

.tc-section:last-of-type[b-425f3src31] {
    border-bottom: none;
}

/* ── Section headings (green) ────────────────────────────────────────────── */

.tc-heading[b-425f3src31] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #22c55e;
    margin: 0 0 14px;
    letter-spacing: 0.01em;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(34, 197, 94, 0.15);
}

.tc-subheading[b-425f3src31] {
    font-size: 0.88rem;
    font-weight: 600;
    color: #d1d5db;
    margin: 18px 0 8px;
    letter-spacing: 0.01em;
}

/* ── Body paragraphs ─────────────────────────────────────────────────────── */

.tc-section p[b-425f3src31] {
    color: #e5e7eb;
    font-size: 0.9rem;
    margin: 0 0 12px;
    line-height: 1.75;
}

.tc-section p strong[b-425f3src31] {
    color: #f3f4f6;
    font-weight: 600;
}

/* ── Lists ───────────────────────────────────────────────────────────────── */

.tc-list[b-425f3src31] {
    list-style: none;
    padding: 0;
    margin: 10px 0 14px;
}

.tc-list li[b-425f3src31] {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #1f2937;
    color: #d1d5db;
    font-size: 0.89rem;
    line-height: 1.7;
    align-items: flex-start;
}

.tc-list li[b-425f3src31]::before {
    content: "›";
    color: #22c55e;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 1px;
    line-height: 1.7;
}

.tc-list li:last-child[b-425f3src31] {
    border-bottom: none;
}

.tc-list li strong[b-425f3src31] {
    color: #f3f4f6;
    font-weight: 600;
}

/* ── Warning / important callout box ─────────────────────────────────────── */

.tc-warning-box[b-425f3src31] {
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.22);
    border-left: 3px solid #22c55e;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.84rem;
    color: #86efac;
    margin: 0 0 18px;
    line-height: 1.6;
}

.tc-warning-box strong[b-425f3src31] {
    color: #4ade80;
    font-weight: 700;
}

/* ── Acknowledgement list (checkmark style) ──────────────────────────────── */

.tc-ack-list li[b-425f3src31]::before {
    content: "✓";
    color: #22c55e;
    font-size: 0.8rem;
    margin-top: 3px;
}

.tc-ack-close[b-425f3src31] {
    color: #9ca3af !important;
    font-size: 0.84rem !important;
    font-style: italic;
    margin-top: 20px !important;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.tc-footer[b-425f3src31] {
    text-align: center;
    padding-top: 36px;
    margin-top: 12px;
    border-top: 1px solid #1f2937;
}

.tc-footer p[b-425f3src31] {
    color: #374151;
    font-size: 0.78rem;
    margin: 0 0 4px;
}

.tc-footer-sub[b-425f3src31] {
    color: #1f2937 !important;
    font-size: 0.72rem !important;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .tc-wrapper[b-425f3src31] {
        padding: 36px 16px 60px;
    }

    .tc-title[b-425f3src31] {
        font-size: 1.65rem;
    }

    .tc-intro[b-425f3src31] {
        font-size: 0.84rem;
    }

    .tc-heading[b-425f3src31] {
        font-size: 0.98rem;
    }

    .tc-section[b-425f3src31] {
        margin-bottom: 32px;
        padding-bottom: 28px;
    }

    .tc-list li[b-425f3src31] {
        font-size: 0.85rem;
    }

    .tc-warning-box[b-425f3src31] {
        font-size: 0.82rem;
    }
}
/* /Components/Pages/TermsOfService.razor.rz.scp.css */
/* ── Terms of Service Page ───────────────────────────────────────────────── */

/* ── Page wrapper ────────────────────────────────────────────────────────── */

.tc-wrapper[b-juz4jm0irn] {
    min-height: 100vh;
    background: linear-gradient(160deg, #0b0b0b 0%, #0f1a0f 50%, #0b0b0b 100%);
    padding: 60px 20px 80px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

/* ── Content container ───────────────────────────────────────────────────── */

.tc-container[b-juz4jm0irn] {
    width: 100%;
    max-width: 900px;
    color: #e5e7eb;
    font-size: 0.9rem;
    line-height: 1.75;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Header block ────────────────────────────────────────────────────────── */

.tc-header[b-juz4jm0irn] {
    text-align: center;
    margin-bottom: 52px;
}

.tc-logo[b-juz4jm0irn] {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #22c55e;
    margin-bottom: 18px;
    opacity: 0.9;
}

.tc-title[b-juz4jm0irn] {
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -0.025em;
    margin: 0 0 10px;
    line-height: 1.15;
}

.tc-meta[b-juz4jm0irn] {
    font-size: 0.78rem;
    color: #4b5563;
    margin: 0 0 22px;
    letter-spacing: 0.03em;
}

.tc-intro[b-juz4jm0irn] {
    font-size: 0.88rem;
    color: #9ca3af;
    line-height: 1.75;
    max-width: 780px;
    margin: 0 auto 28px;
    text-align: left;
}

.tc-divider[b-juz4jm0irn] {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #16a34a, #22c55e);
    border-radius: 2px;
    margin: 0 auto;
}

/* ── Section blocks ──────────────────────────────────────────────────────── */

.tc-section[b-juz4jm0irn] {
    margin-bottom: 44px;
    padding-bottom: 36px;
    border-bottom: 1px solid #1f2937;
}

.tc-section:last-of-type[b-juz4jm0irn] {
    border-bottom: none;
}

/* ── Section headings ────────────────────────────────────────────────────── */

.tc-heading[b-juz4jm0irn] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #22c55e;
    margin: 0 0 14px;
    letter-spacing: 0.01em;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(34, 197, 94, 0.15);
}

.tc-subheading[b-juz4jm0irn] {
    font-size: 0.88rem;
    font-weight: 600;
    color: #d1d5db;
    margin: 18px 0 8px;
    letter-spacing: 0.01em;
}

/* ── Body paragraphs ─────────────────────────────────────────────────────── */

.tc-section p[b-juz4jm0irn] {
    color: #e5e7eb;
    font-size: 0.9rem;
    margin: 0 0 12px;
    line-height: 1.75;
}

.tc-section p strong[b-juz4jm0irn] {
    color: #f3f4f6;
    font-weight: 600;
}

/* ── Lists ───────────────────────────────────────────────────────────────── */

.tc-list[b-juz4jm0irn] {
    list-style: none;
    padding: 0;
    margin: 10px 0 14px;
}

.tc-list li[b-juz4jm0irn] {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #1f2937;
    color: #d1d5db;
    font-size: 0.89rem;
    line-height: 1.7;
    align-items: flex-start;
}

.tc-list li[b-juz4jm0irn]::before {
    content: "›";
    color: #22c55e;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 1px;
    line-height: 1.7;
}

.tc-list li:last-child[b-juz4jm0irn] {
    border-bottom: none;
}

.tc-list li strong[b-juz4jm0irn] {
    color: #f3f4f6;
    font-weight: 600;
}

/* ── Warning callout box ─────────────────────────────────────────────────── */

.tc-warning-box[b-juz4jm0irn] {
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.22);
    border-left: 3px solid #22c55e;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.84rem;
    color: #86efac;
    margin: 0 0 18px;
    line-height: 1.6;
}

.tc-warning-box strong[b-juz4jm0irn] {
    color: #4ade80;
    font-weight: 700;
}

/* ── Inline links ────────────────────────────────────────────────────────── */

.tc-link[b-juz4jm0irn] {
    color: #22c55e;
    text-decoration: none;
    border-bottom: 1px solid rgba(34, 197, 94, 0.3);
    transition: border-color 0.15s, color 0.15s;
}

.tc-link:hover[b-juz4jm0irn] {
    color: #4ade80;
    border-bottom-color: #4ade80;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.tc-footer[b-juz4jm0irn] {
    text-align: center;
    padding-top: 36px;
    margin-top: 12px;
    border-top: 1px solid #1f2937;
}

.tc-footer p[b-juz4jm0irn] {
    color: #374151;
    font-size: 0.78rem;
    margin: 0 0 6px;
}

.tc-footer-sub[b-juz4jm0irn] {
    color: #1f2937 !important;
    font-size: 0.72rem !important;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .tc-wrapper[b-juz4jm0irn] {
        padding: 36px 16px 60px;
    }

    .tc-title[b-juz4jm0irn] {
        font-size: 1.65rem;
    }

    .tc-intro[b-juz4jm0irn] {
        font-size: 0.84rem;
    }

    .tc-heading[b-juz4jm0irn] {
        font-size: 0.98rem;
    }

    .tc-section[b-juz4jm0irn] {
        margin-bottom: 32px;
        padding-bottom: 28px;
    }

    .tc-list li[b-juz4jm0irn] {
        font-size: 0.85rem;
    }

    .tc-warning-box[b-juz4jm0irn] {
        font-size: 0.82rem;
    }
}
/* /Components/Pages/TravelPerformanceDashboard.razor.rz.scp.css */
.travel-dashboard[b-w1mli747g1] {
    padding: 1.5rem;
}

/* ── Date picker ────────────────────────────────────────────────────────── */
.date-picker[b-w1mli747g1] {
    width: auto;
    min-width: 160px;
}

/* ── KPI strip ──────────────────────────────────────────────────────────── */
.kpi-card[b-w1mli747g1] {
    background: var(--card-bg, #1e2433);
    border: 1px solid var(--border-color, rgba(255,255,255,.08));
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    text-align: center;
    height: 100%;
}

.kpi-value[b-w1mli747g1] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

.kpi-label[b-w1mli747g1] {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Section title ──────────────────────────────────────────────────────── */
.section-title[b-w1mli747g1] {
    color: #e5e7eb;
    font-weight: 600;
}

/* ── Crew summary cards ─────────────────────────────────────────────────── */
.crew-summary-card[b-w1mli747g1] {
    background: var(--card-bg, #1e2433);
    border: 1px solid var(--border-color, rgba(255,255,255,.08));
    border-radius: 12px;
    padding: 1rem 1.25rem;
}

.crew-summary-header[b-w1mli747g1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 0.75rem;
    margin-bottom: 0.6rem;
}

.crew-summary-name[b-w1mli747g1] {
    font-weight: 600;
    color: #e5e7eb;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.crew-summary-stats[b-w1mli747g1] {
    display: flex;
    gap: 1.25rem;
    font-size: 0.8rem;
    color: #9ca3af;
}

/* ── Score badge ────────────────────────────────────────────────────────── */
.score-badge[b-w1mli747g1] {
    min-width: 2.2rem;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.3em 0.6em;
    border-radius: 8px;
}

/* ── Crew colour dot ────────────────────────────────────────────────────── */
.crew-dot[b-w1mli747g1] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ── Trip table ─────────────────────────────────────────────────────────── */
.trip-table[b-w1mli747g1] {
    background: var(--card-bg, #1e2433);
    border-radius: 12px;
    overflow: hidden;
}

.trip-table thead th[b-w1mli747g1] {
    background: rgba(255,255,255,.04);
    color: #9ca3af;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: 0.75rem 1rem;
}

.trip-table tbody tr[b-w1mli747g1] {
    border-bottom: 1px solid rgba(255,255,255,.05);
    transition: background 0.15s;
}

.trip-table tbody tr:hover[b-w1mli747g1] {
    background: rgba(255,255,255,.04);
}

.trip-table tbody td[b-w1mli747g1] {
    color: #e5e7eb;
    padding: 0.75rem 1rem;
    vertical-align: middle;
}

.wo-title[b-w1mli747g1] {
    font-size: 0.875rem;
    color: #d1d5db;
    max-width: 200px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* ── Empty state ────────────────────────────────────────────────────────── */
.empty-card[b-w1mli747g1] {
    background: var(--card-bg, #1e2433);
    border: 1px solid var(--border-color, rgba(255,255,255,.08));
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    color: #9ca3af;
}

.empty-card h4[b-w1mli747g1] {
    color: #e5e7eb;
}
/* /Components/Pages/WaitlistPage.razor.rz.scp.css */
/* ── Waitlist — High-Conversion Landing Page ─────────────────────────────── */

/* ── Page shell ──────────────────────────────────────────────────────────── */

.wl-page[b-4cgsvxmrdg] {
    min-height: 100vh;
    background: #080b14;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 3.5rem 1.25rem 5rem;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    overflow-x: hidden;
    box-sizing: border-box;
    width: 100%;
}

/* ── Hero column ─────────────────────────────────────────────────────────── */

.wl-hero[b-4cgsvxmrdg] {
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.75rem;
}

/* ── Logo mark ───────────────────────────────────────────────────────────── */

.wl-logo[b-4cgsvxmrdg] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #ff6a00;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

    .wl-logo i[b-4cgsvxmrdg] {
        font-size: 1.1rem;
    }

/* ── Headline ────────────────────────────────────────────────────────────── */

.wl-headline[b-4cgsvxmrdg] {
    font-size: clamp(2.1rem, 7vw, 3.6rem);
    font-weight: 900;
    color: #ffffff;
    line-height: 1.1;
    letter-spacing: -0.035em;
    margin: 0;
}

/* ── Subheadline ─────────────────────────────────────────────────────────── */

.wl-sub[b-4cgsvxmrdg] {
    font-size: clamp(1rem, 2.8vw, 1.15rem);
    color: #6a7a9a;
    line-height: 1.7;
    margin: 0;
    max-width: 460px;
}

/* ── Countdown wrapper ───────────────────────────────────────────────────── */

.wl-countdown[b-4cgsvxmrdg] {
    width: 100%;
}

/* ── Offer badge ─────────────────────────────────────────────────────────── */

.wl-offer[b-4cgsvxmrdg] {
    font-size: 1rem;
    font-weight: 800;
    color: #ff6a00;
    background: rgba(255, 106, 0, 0.08);
    border: 1px solid rgba(255, 106, 0, 0.25);
    border-radius: 100px;
    padding: 0.6rem 1.6rem;
    letter-spacing: 0.01em;
}

/* ── Email capture ───────────────────────────────────────────────────────── */

.wl-capture[b-4cgsvxmrdg] {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.85rem;
}

.wl-email-input[b-4cgsvxmrdg] {
    width: 100%;
    background: #0e1120;
    border: 1.5px solid #1c2035;
    border-radius: 14px;
    color: #ffffff;
    font-size: 1.1rem;
    padding: 1.05rem 1.3rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    -webkit-appearance: none;
}

    .wl-email-input[b-4cgsvxmrdg]::placeholder {
        color: #323650;
    }

    .wl-email-input:focus[b-4cgsvxmrdg] {
        border-color: #ff6a00;
        box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.1);
    }

    .wl-email-input.wl-input-error[b-4cgsvxmrdg] {
        border-color: #ef4444;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
    }

/* ── CTA button ──────────────────────────────────────────────────────────── */

.wl-cta-btn[b-4cgsvxmrdg] {
    width: 100%;
    background: linear-gradient(135deg, #ff6a00 0%, #ee0979 100%);
    border: none;
    border-radius: 14px;
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 800;
    padding: 1.05rem 2rem;
    letter-spacing: 0.015em;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.18s ease, box-shadow 0.22s ease;
}

.wl-cta-sub[b-4cgsvxmrdg] {
    font-size: 0.78rem;
    color: #383d58;
    margin: 0;
    text-align: center;
    letter-spacing: 0.02em;
}

    .wl-cta-btn:hover:not(:disabled)[b-4cgsvxmrdg] {
        transform: translateY(-3px) scale(1.025);
        box-shadow: 0 12px 36px rgba(255, 106, 0, 0.52),
                    0 0 0 3px rgba(255, 106, 0, 0.18);
    }

    .wl-cta-btn:active:not(:disabled)[b-4cgsvxmrdg] {
        transform: translateY(0) scale(1);
        box-shadow: none;
    }

    .wl-cta-btn:disabled[b-4cgsvxmrdg] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ── Validation error ────────────────────────────────────────────────────── */

.wl-error[b-4cgsvxmrdg] {
    color: #f87171;
    font-size: 0.85rem;
    text-align: left;
}

/* ── Success state ───────────────────────────────────────────────────────── */

.wl-success[b-4cgsvxmrdg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    width: 100%;
    background: rgba(34, 197, 94, 0.07);
    border: 1px solid rgba(34, 197, 94, 0.22);
    border-radius: 14px;
    padding: 1.35rem 1.5rem;
    color: #86efac;
    font-size: 1.05rem;
    font-weight: 600;
}

    .wl-success i[b-4cgsvxmrdg] {
        font-size: 1.5rem;
        color: #22c55e;
        flex-shrink: 0;
    }

/* ── Trust line ──────────────────────────────────────────────────────────── */

.wl-trust[b-4cgsvxmrdg] {
    font-size: 0.82rem;
    color: #383d58;
    font-style: italic;
    margin: 0;
    letter-spacing: 0.01em;
}

/* ── Benefits grid ───────────────────────────────────────────────────────── */

.wl-benefits[b-4cgsvxmrdg] {
    width: 100%;
    max-width: 860px;
    margin-top: 3.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.wl-benefits-eyebrow[b-4cgsvxmrdg] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #383d58;
    margin: 0;
}

.wl-benefits-grid[b-4cgsvxmrdg] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    width: 100%;
}

.wl-benefit-card[b-4cgsvxmrdg] {
    background: #0d1022;
    border: 1px solid #171b30;
    border-radius: 16px;
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

    .wl-benefit-card:hover[b-4cgsvxmrdg] {
        border-color: rgba(255, 106, 0, 0.2);
        transform: translateY(-2px);
    }

.wl-benefit-icon[b-4cgsvxmrdg] {
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(255, 106, 0, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #ff6a00;
    flex-shrink: 0;
}

.wl-benefit-heading[b-4cgsvxmrdg] {
    font-size: 1rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0;
}

.wl-benefit-desc[b-4cgsvxmrdg] {
    font-size: 0.875rem;
    color: #4a5270;
    line-height: 1.6;
    margin: 0;
}

/* ── Social proof ────────────────────────────────────────────────────────── */

.wl-proof[b-4cgsvxmrdg] {
    width: 100%;
    max-width: 860px;
    margin-top: 3.5rem;
    background: #0c0f1c;
    border-radius: 20px;
    padding: 3.5rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.25rem;
}

.wl-proof-statement[b-4cgsvxmrdg] {
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0;
}

.wl-proof-body[b-4cgsvxmrdg] {
    font-size: clamp(0.95rem, 2.5vw, 1.1rem);
    color: #5a6380;
    line-height: 1.75;
    max-width: 560px;
    margin: 0;
}

.wl-proof-quotes[b-4cgsvxmrdg] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    width: 100%;
    margin-top: 1rem;
}

.wl-proof-card[b-4cgsvxmrdg] {
    background: #0e1120;
    border: 1px solid #171b30;
    border-radius: 16px;
    padding: 1.75rem 1.5rem 1.5rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    transition: border-color 0.2s ease;
}

    .wl-proof-card:hover[b-4cgsvxmrdg] {
        border-color: rgba(255, 106, 0, 0.18);
    }

.wl-proof-quote-icon[b-4cgsvxmrdg] {
    font-size: 1.75rem;
    color: #ff6a00;
    opacity: 0.65;
    line-height: 1;
}

.wl-proof-quote-text[b-4cgsvxmrdg] {
    font-size: 1rem;
    font-weight: 600;
    color: #c8d0e8;
    line-height: 1.6;
    font-style: italic;
    margin: 0;
    flex: 1;
}

.wl-proof-cite[b-4cgsvxmrdg] {
    font-size: 0.75rem;
    color: #383d58;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ── Early access disclaimer ─────────────────────────────────────────────── */

.wl-early-disclaimer[b-4cgsvxmrdg] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    width: 100%;
    padding: 1.1rem 1.25rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid #161929;
    border-radius: 12px;
}

.wl-early-disclaimer-item[b-4cgsvxmrdg] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.82rem;
    color: #4a5270;
    line-height: 1.55;
    text-align: left;
}

    .wl-early-disclaimer-item i[b-4cgsvxmrdg] {
        color: #2e3550;
        font-size: 0.8rem;
        flex-shrink: 0;
        margin-top: 0.15rem;
    }

    .wl-early-disclaimer-item strong[b-4cgsvxmrdg] {
        color: #6a7a9a;
        font-weight: 700;
    }

/* ── Urgency / scarcity block ────────────────────────────────────────────── */

.wl-urgency[b-4cgsvxmrdg] {
    width: 100%;
    background: rgba(255, 160, 0, 0.06);
    border: 1.5px solid rgba(255, 160, 0, 0.28);
    border-radius: 16px;
    padding: 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    text-align: center;
}

.wl-urgency-header[b-4cgsvxmrdg] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.wl-urgency-icon[b-4cgsvxmrdg] {
    font-size: 1rem;
    color: #fbbf24;
}

.wl-urgency-title[b-4cgsvxmrdg] {
    font-size: 0.95rem;
    font-weight: 800;
    color: #fbbf24;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.wl-urgency-sub[b-4cgsvxmrdg] {
    font-size: 0.88rem;
    color: #7a8090;
    margin: 0;
    line-height: 1.5;
}

    .wl-urgency-sub strong[b-4cgsvxmrdg] {
        color: #fcd34d;
        font-weight: 700;
    }

.wl-urgency-counter[b-4cgsvxmrdg] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.wl-urgency-number[b-4cgsvxmrdg] {
    font-size: 2.4rem;
    font-weight: 900;
    color: #ff6a00;
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.wl-urgency-label[b-4cgsvxmrdg] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #5a6380;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.wl-urgency-bar-track[b-4cgsvxmrdg] {
    width: 100%;
    height: 6px;
    background: #151828;
    border-radius: 100px;
    overflow: hidden;
    margin-top: 0.25rem;
}

.wl-urgency-bar-fill[b-4cgsvxmrdg] {
    height: 100%;
    background: linear-gradient(90deg, #ff6a00, #fbbf24);
    border-radius: 100px;
    transition: width 0.6s ease;
}

.wl-urgency-filled[b-4cgsvxmrdg] {
    font-size: 0.75rem;
    color: #383d58;
    margin: 0;
    letter-spacing: 0.03em;
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */

@@media (max-width: 600px) {
    /* ── Shell ─────────────────────────────────────────────────────────── */
    .wl-page[b-4cgsvxmrdg] {
        padding: 1.75rem 1rem 3rem;
    }

    /* ── Hero — tighter vertical rhythm ────────────────────────────────── */
    .wl-hero[b-4cgsvxmrdg] {
        gap: 1.1rem;
    }

    /* ── Headline — prevent overflow on narrow phones ───────────────────── */
    .wl-headline[b-4cgsvxmrdg] {
        letter-spacing: -0.02em;
        word-break: break-word;
        hyphens: auto;
    }

    /* ── Subheadline ────────────────────────────────────────────────────── */
    .wl-sub[b-4cgsvxmrdg] {
        max-width: 100%;
    }

    /* ── Offer badge ────────────────────────────────────────────────────── */
    .wl-offer[b-4cgsvxmrdg] {
        font-size: 0.88rem;
        padding: 0.5rem 1rem;
        text-align: center;
        white-space: normal;
    }

    /* ── Email input — full width, comfortable touch target ─────────────── */
    .wl-email-input[b-4cgsvxmrdg] {
        font-size: 1rem;
        padding: 1rem 1.1rem;
        border-radius: 12px;
    }

    /* ── CTA button — larger thumb target ──────────────────────────────── */
    .wl-cta-btn[b-4cgsvxmrdg] {
        font-size: 1.12rem;
        padding: 1.2rem 1.5rem;
        border-radius: 12px;
    }

    /* Remove sticky hover scale on touch devices ─────────────────────── */
    .wl-cta-btn:hover:not(:disabled)[b-4cgsvxmrdg] {
        transform: none;
        box-shadow: 0 8px 24px rgba(255, 106, 0, 0.4);
    }

    /* ── Urgency block ──────────────────────────────────────────────────── */
    .wl-urgency[b-4cgsvxmrdg] {
        padding: 1.1rem 1rem;
    }

    .wl-urgency-title[b-4cgsvxmrdg] {
        font-size: 0.8rem;
        letter-spacing: 0;
    }

    .wl-urgency-counter[b-4cgsvxmrdg] {
        flex-direction: column;
        align-items: center;
        gap: 0.2rem;
    }

    .wl-urgency-number[b-4cgsvxmrdg] {
        font-size: 2rem;
    }

    .wl-urgency-label[b-4cgsvxmrdg] {
        font-size: 0.72rem;
    }

    /* ── Early access disclaimer ────────────────────────────────────────── */
    .wl-early-disclaimer[b-4cgsvxmrdg] {
        padding: 0.9rem 1rem;
    }

    /* ── Benefits ───────────────────────────────────────────────────────── */
    .wl-benefits[b-4cgsvxmrdg] {
        margin-top: 2rem;
        gap: 1.25rem;
    }

    .wl-benefits-grid[b-4cgsvxmrdg] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .wl-benefit-card[b-4cgsvxmrdg] {
        padding: 1.25rem 1rem;
        gap: 0.5rem;
    }

    /* ── Social proof ───────────────────────────────────────────────────── */
    .wl-proof[b-4cgsvxmrdg] {
        margin-top: 2rem;
        padding: 2rem 1.1rem;
        border-radius: 14px;
        gap: 1rem;
    }

    .wl-proof-quotes[b-4cgsvxmrdg] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .wl-proof-card[b-4cgsvxmrdg] {
        padding: 1.1rem 1rem 1rem;
    }
}
/* /Components/Shared/AddSeatsModal.razor.rz.scp.css */
.add-seats-dialog[b-nb9wd14dmk] {
    max-width: 540px;
}

.add-seats-modal[b-nb9wd14dmk] {
    border-radius: 12px;
    border: none;
    overflow: hidden;
}

/* Option cards */
.option-card[b-nb9wd14dmk] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem;
    border: 1.5px solid var(--fo-border);
    border-radius: 12px;
    background: var(--fo-card);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-shadow: var(--fo-shadow);
}

.option-card:hover[b-nb9wd14dmk] {
    border-color: var(--fo-green);
    box-shadow: var(--fo-shadow);
}

.option-card-featured[b-nb9wd14dmk] {
    border-color: var(--fo-green);
    background: var(--fo-green-soft);
}

.option-icon[b-nb9wd14dmk] {
    font-size: 1.75rem;
    line-height: 1;
}

.upgrade-icon[b-nb9wd14dmk] { color: var(--fo-blue, #6366f1); }
.seats-icon[b-nb9wd14dmk]   { color: var(--fo-blue-dark, #4f46e5); }

.option-title[b-nb9wd14dmk] {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--fo-text-primary);
}

.option-desc[b-nb9wd14dmk] {
    font-size: 0.82rem;
    color: var(--fo-text-secondary);
    flex: 1;
}

/* Seat pack price display */
.seats-price[b-nb9wd14dmk] {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin: 0.25rem 0;
}

.price-amount[b-nb9wd14dmk] {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--fo-green);
    line-height: 1;
}

.price-period[b-nb9wd14dmk] {
    font-size: 0.8rem;
    color: var(--fo-text-secondary);
}

/* Success icon animation */
.success-icon[b-nb9wd14dmk] {
    animation: pop-in-b-nb9wd14dmk 0.3s ease-out;
}

@keyframes pop-in-b-nb9wd14dmk {
    0%   { transform: scale(0.5); opacity: 0; }
    80%  { transform: scale(1.1); }
    100% { transform: scale(1);   opacity: 1; }
}
/* /Components/Shared/AdminModeToggle.razor.rz.scp.css */
/* ── Admin Mode Toggle ──────────────────────────────────────────────────── */

.admin-mode-toggle[b-j2qze4up9k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    margin: 0.5rem 0.75rem 0.25rem;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid var(--fo-border);
    transition: background 0.2s ease, border-color 0.2s ease, filter 0.15s ease;
    background: var(--fo-card);
    width: calc(100% - 1.5rem);
    text-align: left;
    font-family: inherit;
    color: var(--fo-text-primary);
}

.admin-mode-toggle:hover[b-j2qze4up9k] {
    filter: brightness(1.15);
}

/* ON state — green tint */
.admin-mode-toggle--on[b-j2qze4up9k] {
    border-color: var(--fo-green);
    background: var(--fo-green-soft);
    color: var(--fo-green);
}

/* OFF state — amber tint */
.admin-mode-toggle--off[b-j2qze4up9k] {
    border-color: var(--fo-yellow);
    background: #fffbe6;
    color: var(--fo-yellow);
}

/* Shield icon */
.admin-mode-toggle__icon[b-j2qze4up9k] {
    font-size: 1rem;
    flex-shrink: 0;
}

/* Text block */
.admin-mode-toggle__body[b-j2qze4up9k] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

.admin-mode-toggle__label[b-j2qze4up9k] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
}

.admin-mode-toggle__status[b-j2qze4up9k] {
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Toggle pill track */
.admin-mode-toggle__track[b-j2qze4up9k] {
    width: 30px;
    height: 17px;
    border-radius: 9px;
    background: var(--fo-border);
    position: relative;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.admin-mode-toggle--on .admin-mode-toggle__track[b-j2qze4up9k] {
    background: var(--fo-green);
}

/* Sliding thumb */
.admin-mode-toggle__thumb[b-j2qze4up9k] {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--fo-card);
    position: absolute;
    top: 3px;
    left: 3px;
    transition: transform 0.2s ease;
}

.admin-mode-toggle--on .admin-mode-toggle__thumb[b-j2qze4up9k] {
    transform: translateX(13px);
}
/* /Components/Shared/CheckoutConfirmModal.razor.rz.scp.css */
/* ============================================================
   CheckoutConfirmModal.razor.css — Pre-checkout confirmation
   ============================================================ */

/* ── Backdrop ─────────────────────────────────────────────────── */
.checkout-modal-backdrop[b-c0m5pqw3wl] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(var(--fo-overlay-rgb,0,0,0), 0.7); /* suggest: --fo-overlay-rgb */
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    animation: fadeIn-b-c0m5pqw3wl 0.2s ease;
}

@keyframes fadeIn-b-c0m5pqw3wl {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Modal card ───────────────────────────────────────────────── */
.checkout-modal[b-c0m5pqw3wl] {
    background: var(--fo-card);
    border: 1px solid var(--fo-border);
    border-radius: 14px;
    padding: 2.5rem 2.25rem 2rem;
    max-width: 480px;
    width: 100%;
    color: var(--fo-text-primary);
    box-shadow: var(--fo-shadow);
    animation: slideUp-b-c0m5pqw3wl 0.25s ease;
}

@keyframes slideUp-b-c0m5pqw3wl {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Header ───────────────────────────────────────────────────── */
.checkout-modal-header[b-c0m5pqw3wl] {
    text-align: center;
    margin-bottom: 1.75rem;
}

.checkout-modal-icon[b-c0m5pqw3wl] {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--fo-blue, #0ea5e9), var(--fo-blue-dark, #6366f1));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.35rem;
    color: var(--fo-text-primary, #fff);
}

.checkout-modal-title[b-c0m5pqw3wl] {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--fo-text-primary);
    margin-bottom: 0.3rem;
}

.checkout-modal-subtitle[b-c0m5pqw3wl] {
    font-size: 0.88rem;
    color: var(--fo-text-secondary);
    margin: 0;
}

/* ── Line items ───────────────────────────────────────────────── */
.checkout-modal-body[b-c0m5pqw3wl] {
    margin-bottom: 1.75rem;
}

.checkout-line[b-c0m5pqw3wl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 0;
    border-bottom: 1px solid rgba(51, 65, 85, 0.5);
    gap: 0.75rem;
}

.checkout-line:last-of-type[b-c0m5pqw3wl] {
    border-bottom: none;
}

.checkout-line-left[b-c0m5pqw3wl] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    color: var(--fo-text-secondary, #cbd5e1);
}

.checkout-line-left i[b-c0m5pqw3wl] {
    font-size: 1rem;
    flex-shrink: 0;
}

.checkout-line-price[b-c0m5pqw3wl] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--fo-text-primary, #f8fafc);
    white-space: nowrap;
    flex-shrink: 0;
}

.checkout-included[b-c0m5pqw3wl] {
    color: var(--fo-green, #16a34a);
    font-weight: 600;
}

.checkout-included-badge[b-c0m5pqw3wl] {
    font-size: 0.58rem;
    font-weight: 700;
    padding: 0.15em 0.55em;
    border-radius: 99px;
    background: var(--fo-green, #10b981);
    color: var(--fo-text-on-green, #fff); /* suggest: --fo-text-on-green */
    margin-left: 5px;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

/* ── Total row ────────────────────────────────────────────────── */
.checkout-total-row[b-c0m5pqw3wl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid #334155;
}

.checkout-total-label[b-c0m5pqw3wl] {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--fo-text-primary, #f8fafc);
}

.checkout-total-price[b-c0m5pqw3wl] {
    font-weight: 900;
    font-size: 1.25rem;
    color: var(--fo-blue, #0ea5e9);
    letter-spacing: -0.02em;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.checkout-modal-actions[b-c0m5pqw3wl] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
}

.checkout-btn-primary[b-c0m5pqw3wl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--fo-green);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 0.85rem 1.5rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--fo-shadow);
}

.checkout-btn-primary:hover:not(:disabled)[b-c0m5pqw3wl] {
    background: #15803d;
    transform: translateY(-1px);
    box-shadow: var(--fo-shadow);
}

.checkout-btn-primary:disabled[b-c0m5pqw3wl] {
    opacity: 0.75;
    cursor: not-allowed;
}

.checkout-btn-cancel[b-c0m5pqw3wl] {
    background: transparent;
    color: var(--fo-text-tertiary, #94a3b8);
    border: 1px solid var(--fo-border, #334155);
    border-radius: 12px;
    padding: 0.65rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.checkout-btn-cancel:hover:not(:disabled)[b-c0m5pqw3wl] {
    color: var(--fo-text-primary, #f1f5f9);
    border-color: var(--fo-border-hover, #475569); /* suggest: --fo-border-hover */
}

.checkout-btn-cancel:disabled[b-c0m5pqw3wl] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Trust strip ──────────────────────────────────────────────── */
.checkout-trust[b-c0m5pqw3wl] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
    font-size: 0.72rem;
    color: var(--fo-text-secondary, #475569);
}

.checkout-trust-sep[b-c0m5pqw3wl] {
    color: var(--fo-border, #334155);
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 576px) {
    .checkout-modal[b-c0m5pqw3wl] {
        padding: 2rem 1.5rem 1.5rem;
        border-radius: 16px;
    }

    .checkout-modal-title[b-c0m5pqw3wl] {
        font-size: 1.2rem;
    }

    .checkout-trust[b-c0m5pqw3wl] {
        flex-direction: column;
        align-items: center;
    }

    .checkout-trust-sep[b-c0m5pqw3wl] {
        display: none;
    }
}
/* /Components/Shared/CountdownTimer.razor.rz.scp.css */
/* ── Countdown Timer ─────────────────────────────────────────────────────── */

.countdown-wrapper[b-wdf4tb4kv6] {
    text-align: center;
    padding: 0.25rem 0;
    margin: 40px 0;
}

.countdown-label[b-wdf4tb4kv6] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #50506a;
    margin-bottom: 0.5rem;
}

/* ── Time boxes ──────────────────────────────────────────────────────────── */

.countdown[b-wdf4tb4kv6] {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 36px;
    font-weight: 600;
    color: white;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.countdown span[b-wdf4tb4kv6] {
    font-size: 14px;
    color: #888;
    margin-left: 4px;
    font-weight: 400;
}

/* ── Live state ──────────────────────────────────────────────────────────── */

.countdown-live[b-wdf4tb4kv6] {
    font-size: clamp(1.75rem, 5.5vw, 2.75rem);
    font-weight: 800;
    color: #ff6a00;
    letter-spacing: -0.02em;
    text-shadow:
        0 0 24px rgba(255, 106, 0, 0.65),
        0 0 50px rgba(255, 106, 0, 0.3);
    animation: pulse-glow 2s ease-in-out infinite;
}

@@keyframes pulse-glow {
    0%[b-wdf4tb4kv6], 100%[b-wdf4tb4kv6] { text-shadow: 0 0 24px rgba(255, 106, 0, 0.65), 0 0 50px rgba(255, 106, 0, 0.3); }
    50%[b-wdf4tb4kv6]       { text-shadow: 0 0 36px rgba(255, 106, 0, 0.9), 0 0 70px rgba(255, 106, 0, 0.5); }
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */

@@media (max-width: 768px) {
    .countdown-wrapper[b-wdf4tb4kv6] {
        margin: 10px 0;
    }

    .countdown[b-wdf4tb4kv6] {
        font-size: 22px;
        gap: 10px;
    }

    .time-box[b-wdf4tb4kv6] {
        min-width: 60px;
        padding: 14px 10px;
        font-size: 22px;
    }
}
/* /Components/Shared/DispatchAlertActionBar.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   DISPATCH ALERT ACTION BAR  —  daa
   Compact mode only (notification bell dropdown).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Container ───────────────────────────────────────────────────────────── */

.daa[b-fvtl5d65ls] {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Compact (bell dropdown) ─────────────────────────────────────────────── */

.daa--compact[b-fvtl5d65ls] {
    gap: 3px;
    margin-top: 6px;
}

/* ── Base button ─────────────────────────────────────────────────────────── */

.daa-btn[b-fvtl5d65ls] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
    background: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
    line-height: 1;
}

.daa-btn:hover[b-fvtl5d65ls] {
    background: rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
    transform: translateY(-1px);
}

.daa-btn:active[b-fvtl5d65ls] {
    transform: translateY(0);
}

.daa-btn i[b-fvtl5d65ls] {
    font-size: 0.8rem;
    line-height: 1;
}

/* ── Colour variants ─────────────────────────────────────────────────────── */

/* Acknowledge — green */
.daa-btn--ack[b-fvtl5d65ls] {
    border-color: rgba(16, 185, 129, 0.3);
    color: #34d399;
}
.daa-btn--ack:hover[b-fvtl5d65ls] {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.5);
    color: #6ee7b7;
}

/* Notifications — purple */
.daa-btn--dispatch[b-fvtl5d65ls] {
    border-color: rgba(139, 92, 246, 0.3);
    color: #a78bfa;
}
.daa-btn--dispatch:hover[b-fvtl5d65ls] {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.5);
    color: #c4b5fd;
}
/* /Components/Shared/FounderBadge.razor.rz.scp.css */
.founder-badge[b-xiwqyt0s7f] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .65rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    background: var(--fo-yellow);
    color: var(--fo-text-primary);
    box-shadow: var(--fo-shadow);
    white-space: nowrap;
    cursor: default;
    user-select: none;
}

.founder-badge-number[b-xiwqyt0s7f] {
    opacity: .75;
    font-size: .65rem;
}
/* /Components/Shared/HubConnectionStatus.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   HUB CONNECTION STATUS PILL
   Fixed pill below the topbar. Zero layout impact — position:fixed with
   pointer-events:none on the outer wrapper so nothing is blocked when hidden.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Outer wrapper ────────────────────────────────────────────────────────── */

.hub-conn-status[b-9wu6hroi1f] {
    position: fixed;
    top: 4.5rem;          /* 64 px topbar + 8 px breathing room */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;        /* above page content, below toasts (9999) */
    pointer-events: none; /* pass-through when hiding / fading */
    animation: hubConnIn-b-9wu6hroi1f 0.28s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

@keyframes hubConnIn-b-9wu6hroi1f {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Inner pill ───────────────────────────────────────────────────────────── */

.hub-conn-status__inner[b-9wu6hroi1f] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.85rem;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: all;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.35),
        0 2px 4px -1px rgba(0, 0, 0, 0.25);
}

/* ── Reconnecting — amber ─────────────────────────────────────────────────── */

.hub-conn-status--reconnecting .hub-conn-status__inner[b-9wu6hroi1f] {
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(245, 158, 11, 0.45);
    color: #f59e0b;
    animation: reconnectBorderPulse-b-9wu6hroi1f 2s ease-in-out infinite;
}

@keyframes reconnectBorderPulse-b-9wu6hroi1f {
    0%, 100% { border-color: rgba(245, 158, 11, 0.45); }
    50%       { border-color: rgba(245, 158, 11, 0.85); }
}

/* ── Offline (Disconnected after prior session) — red ────────────────────── */

.hub-conn-status--offline .hub-conn-status__inner[b-9wu6hroi1f] {
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: #ef4444;
}

/* ── Recovered — green ────────────────────────────────────────────────────── */

.hub-conn-status--recovered .hub-conn-status__inner[b-9wu6hroi1f] {
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid rgba(16, 185, 129, 0.45);
    color: #10b981;
}

/* ── Shared sub-elements ──────────────────────────────────────────────────── */

.hub-conn-status__spinner[b-9wu6hroi1f] {
    width: 0.7rem;
    height: 0.7rem;
    border-width: 0.1em;
    flex-shrink: 0;
}

.hub-conn-status__icon[b-9wu6hroi1f] {
    font-size: 0.82rem;
    line-height: 1;
    flex-shrink: 0;
}

.hub-conn-status__since[b-9wu6hroi1f] {
    font-size: 0.72rem;
    opacity: 0.65;
}

/* ── Retry button ─────────────────────────────────────────────────────────── */

.hub-conn-status__retry[b-9wu6hroi1f] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0.1rem 0.55rem;
    margin-left: 0.2rem;
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.5);
    border-radius: 12px;
    color: #ef4444;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
    line-height: 1.5;
}

.hub-conn-status__retry:hover:not(:disabled)[b-9wu6hroi1f] {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.8);
}

.hub-conn-status__retry:disabled[b-9wu6hroi1f] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Accessibility: reduced motion ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .hub-conn-status[b-9wu6hroi1f] {
        animation: none;
    }

    .hub-conn-status--reconnecting .hub-conn-status__inner[b-9wu6hroi1f] {
        animation: none;
    }
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .hub-conn-status[b-9wu6hroi1f] {
        top: auto;
        bottom: 5.5rem;   /* clear the MobileNavBar (≈ 72 px) */
        left: 1rem;
        right: 1rem;
        transform: none;
    }

    @keyframes hubConnIn-b-9wu6hroi1f {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .hub-conn-status__since[b-9wu6hroi1f] {
        display: none;
    }
}
/* /Components/Shared/ImpersonationBanner.razor.rz.scp.css */
/* ── Impersonation Banner ───────────────────────────────────────────────── */

.impersonation-banner[b-bhc4y0084k] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 1.25rem;
    background: #f59e0b;                    /* amber-400 */
    color: #1c1400;                         /* near-black for max contrast on amber */
    font-size: 0.875rem;
    font-weight: 700;
    border-bottom: 2px solid #d97706;       /* amber-600 */
    position: sticky;
    top: 0;
    z-index: 1100;                          /* above topbar (z-index 1000) */
    flex-wrap: wrap;
}

.impersonation-banner__icon[b-bhc4y0084k] {
    font-size: 1rem;
    flex-shrink: 0;
    line-height: 1;
}

.impersonation-banner__message[b-bhc4y0084k] {
    flex: 1;
    min-width: 0;
}

.impersonation-banner__name[b-bhc4y0084k] {
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.impersonation-banner__exit[b-bhc4y0084k] {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.85rem;
    background: #1c1400;
    color: #f59e0b;
    border: 2px solid #1c1400;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
    font-family: inherit;
    flex-shrink: 0;
}

.impersonation-banner__exit:hover[b-bhc4y0084k] {
    background: #f59e0b;
    color: #1c1400;
    border-color: #1c1400;
}

.impersonation-banner__exit:focus-visible[b-bhc4y0084k] {
    outline: 3px solid #1c1400;
    outline-offset: 2px;
}
/* /Components/Shared/InlineAlert.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   FIELDOPS INLINE ALERT
   Static in-page feedback strip — use when context must stay visible.
   Palette matches ToastContainer.razor.css.
   ═══════════════════════════════════════════════════════════════════════════ */

.fo-inline-alert[b-r0agg8kjoj] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 8px;
    border: 1px solid transparent;
    background: #1e293b;
    animation: inlineAlertIn-b-r0agg8kjoj 0.2s ease both;
    margin-bottom: 1rem;
}

.fo-inline-alert--compact[b-r0agg8kjoj] {
    padding: 0.5rem 0.75rem;
}

/* ── Icon ─────────────────────────────────────────────────────────────────── */

.fo-inline-alert__icon[b-r0agg8kjoj] {
    flex-shrink: 0;
    font-size: 1.0625rem;
    line-height: 1.5rem;
    display: flex;
    align-items: center;
}

/* ── Text ─────────────────────────────────────────────────────────────────── */

.fo-inline-alert__content[b-r0agg8kjoj] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.fo-inline-alert__title[b-r0agg8kjoj] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #f1f5f9;
    line-height: 1.3;
}

.fo-inline-alert__message[b-r0agg8kjoj] {
    font-size: 0.8125rem;
    color: #94a3b8;
    line-height: 1.45;
}

.fo-inline-alert__extra[b-r0agg8kjoj] {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: #94a3b8;
}

/* ── Close button ─────────────────────────────────────────────────────────── */

.fo-inline-alert__close[b-r0agg8kjoj] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #64748b;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.fo-inline-alert__close:hover[b-r0agg8kjoj] {
    background: rgba(148, 163, 184, 0.12);
    color: #f1f5f9;
}

/* ── Severity variants ────────────────────────────────────────────────────── */

.fo-inline-alert--info[b-r0agg8kjoj] {
    border-color: rgba(96, 165, 250, 0.3);
    background: rgba(96, 165, 250, 0.06);
}

.fo-inline-alert--info .fo-inline-alert__icon[b-r0agg8kjoj] { color: #60a5fa; }
.fo-inline-alert--info .fo-inline-alert__title[b-r0agg8kjoj] { color: #93c5fd; }

.fo-inline-alert--success[b-r0agg8kjoj] {
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.06);
}

.fo-inline-alert--success .fo-inline-alert__icon[b-r0agg8kjoj] { color: #10b981; }
.fo-inline-alert--success .fo-inline-alert__title[b-r0agg8kjoj] { color: #6ee7b7; }

.fo-inline-alert--warning[b-r0agg8kjoj] {
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(245, 158, 11, 0.06);
}

.fo-inline-alert--warning .fo-inline-alert__icon[b-r0agg8kjoj] { color: #f59e0b; }
.fo-inline-alert--warning .fo-inline-alert__title[b-r0agg8kjoj] { color: #fcd34d; }

.fo-inline-alert--error[b-r0agg8kjoj] {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.06);
}

.fo-inline-alert--error .fo-inline-alert__icon[b-r0agg8kjoj] { color: #ef4444; }
.fo-inline-alert--error .fo-inline-alert__title[b-r0agg8kjoj] { color: #fca5a5; }

.fo-inline-alert--danger[b-r0agg8kjoj] {
    border-color: rgba(249, 115, 22, 0.35);
    background: rgba(249, 115, 22, 0.07);
}

.fo-inline-alert--danger .fo-inline-alert__icon[b-r0agg8kjoj] { color: #f97316; }
.fo-inline-alert--danger .fo-inline-alert__title[b-r0agg8kjoj] { color: #fdba74; }

/* ── Enter animation ──────────────────────────────────────────────────────── */

@keyframes inlineAlertIn-b-r0agg8kjoj {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fo-inline-alert[b-r0agg8kjoj] {
        animation: none;
    }
}
/* /Components/Shared/NotificationBell.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   NOTIFICATION BELL COMPONENT
   Dark-themed notification dropdown for the top-right toolbar
   ═══════════════════════════════════════════════════════════════════════════ */

.notification-bell[b-i0qvmewyru] {
    position: relative;
}

/* ── Button ───────────────────────────────────────────────────────────────── */

.notification-bell__btn[b-i0qvmewyru] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #e5e7eb;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.notification-bell__btn:hover[b-i0qvmewyru] {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.notification-bell__btn--has-unread[b-i0qvmewyru] {
    color: #60a5fa;
    animation: bellPulse-b-i0qvmewyru 2s ease-in-out infinite;
}

.notification-bell__btn--has-unread:hover[b-i0qvmewyru] {
    color: #93c5fd;
}

/* ── Badge ────────────────────────────────────────────────────────────────── */

.notification-bell__badge[b-i0qvmewyru] {
    position: absolute;
    top: 2px;
    right: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: 2px solid #1e293b;
    border-radius: 10px;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ── Dropdown Backdrop ────────────────────────────────────────────────────── */

.notification-bell__backdrop[b-i0qvmewyru] {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: transparent;
}

/* ── Dropdown Panel ───────────────────────────────────────────────────────── */

.notification-bell__dropdown[b-i0qvmewyru] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1000;
    width: 420px;
    max-height: 600px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5),
                0 10px 10px -5px rgba(0, 0, 0, 0.3);
    animation: dropdownSlideIn-b-i0qvmewyru 0.2s ease-out;
}

@keyframes dropdownSlideIn-b-i0qvmewyru {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.notification-bell__header[b-i0qvmewyru] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.notification-bell__title[b-i0qvmewyru] {
    font-size: 1rem;
    font-weight: 600;
    color: #f1f5f9;
}

.notification-bell__action[b-i0qvmewyru] {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid rgba(96, 165, 250, 0.3);
    border-radius: 6px;
    color: #60a5fa;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.notification-bell__action:hover[b-i0qvmewyru] {
    background: rgba(96, 165, 250, 0.1);
    border-color: #60a5fa;
}

/* ── Body ─────────────────────────────────────────────────────────────────── */

.notification-bell__body[b-i0qvmewyru] {
    flex: 1;
    overflow-y: auto;
    max-height: 450px;
}

.notification-bell__loading[b-i0qvmewyru] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #94a3b8;
    font-size: 0.9rem;
}

.notification-bell__empty[b-i0qvmewyru] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.notification-bell__empty i[b-i0qvmewyru] {
    font-size: 3rem;
    color: #10b981;
    margin-bottom: 12px;
}

.notification-bell__empty p[b-i0qvmewyru] {
    margin: 0 0 4px 0;
    color: #f1f5f9;
    font-size: 1rem;
    font-weight: 500;
}

.notification-bell__empty small[b-i0qvmewyru] {
    color: #94a3b8;
    font-size: 0.85rem;
}

/* ── Notification Items ───────────────────────────────────────────────────── */

.notification-bell__item[b-i0qvmewyru] {
    display: flex;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    cursor: pointer;
    transition: background 0.15s ease;
}

.notification-bell__item:hover[b-i0qvmewyru] {
    background: rgba(255, 255, 255, 0.05);
}

.notification-bell__item--unread[b-i0qvmewyru] {
    background: rgba(96, 165, 250, 0.08);
}

.notification-bell__item--unread:hover[b-i0qvmewyru] {
    background: rgba(96, 165, 250, 0.12);
}

.notification-bell__item-icon[b-i0qvmewyru] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(96, 165, 250, 0.15);
    border-radius: 8px;
    color: #60a5fa;
    font-size: 1.1rem;
}

.notification-bell__item--success .notification-bell__item-icon[b-i0qvmewyru] {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.notification-bell__item--warning .notification-bell__item-icon[b-i0qvmewyru] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.notification-bell__item--critical .notification-bell__item-icon[b-i0qvmewyru] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.notification-bell__item-content[b-i0qvmewyru] {
    flex: 1;
    min-width: 0;
}

.notification-bell__item-header[b-i0qvmewyru] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.notification-bell__item-title[b-i0qvmewyru] {
    flex: 1;
    color: #f1f5f9;
    font-size: 0.9rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notification-bell__item-dot[b-i0qvmewyru] {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    background: #60a5fa;
    border-radius: 50%;
}

.notification-bell__item-message[b-i0qvmewyru] {
    margin: 0 0 8px 0;
    color: #cbd5e1;
    font-size: 0.85rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-bell__item-footer[b-i0qvmewyru] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.75rem;
}

.notification-bell__item-category[b-i0qvmewyru] {
    padding: 2px 8px;
    background: rgba(96, 165, 250, 0.15);
    border-radius: 4px;
    color: #93c5fd;
    font-weight: 500;
}

.notification-bell__item-time[b-i0qvmewyru] {
    color: #94a3b8;
}

/* ── Overflow ─────────────────────────────────────────────────────────────── */

.notification-bell__overflow[b-i0qvmewyru] {
    padding: 12px 20px;
    background: rgba(148, 163, 184, 0.05);
    color: #94a3b8;
    font-size: 0.85rem;
    text-align: center;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.notification-bell__footer[b-i0qvmewyru] {
    padding: 12px 20px;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.notification-bell__footer-link[b-i0qvmewyru] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #60a5fa;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.notification-bell__footer-link:hover[b-i0qvmewyru] {
    background: rgba(96, 165, 250, 0.1);
}

/* ── New-item entrance animation ──────────────────────────────────────────── */

@keyframes notifSlideIn-b-i0qvmewyru {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.notification-bell__item--new[b-i0qvmewyru] {
    animation: notifSlideIn-b-i0qvmewyru 0.35s ease-out;
    border-left: 3px solid #60a5fa;
}

/* ── Reconnecting status indicator ───────────────────────────────────────── */

.notification-bell__header-actions[b-i0qvmewyru] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.notification-bell__conn[b-i0qvmewyru] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.notification-bell__conn--reconnecting[b-i0qvmewyru] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.notification-bell__conn--reconnecting .spinner-border[b-i0qvmewyru] {
    width: 0.7rem;
    height: 0.7rem;
    border-width: 0.12em;
}

.notification-bell__conn-label[b-i0qvmewyru] {
    display: none;
}

@media (min-width: 480px) {
    .notification-bell__conn-label[b-i0qvmewyru] {
        display: inline;
    }
}

/* ── Animations ───────────────────────────────────────────────────────────── */

@keyframes bellPulse-b-i0qvmewyru {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* ── Mobile Responsive ────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .notification-bell__dropdown[b-i0qvmewyru] {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-height: 80vh;
        border-radius: 16px 16px 0 0;
    }
}
/* /Components/Shared/PlanGate.razor.rz.scp.css */
/* ── Wrapper ────────────────────────────────────────────────────────────── */

.plan-gate-wrapper[b-rx696759md] {
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;     /* keeps overlay within rounded corners */
}

/* When there IS background content to blur we need a min-height so the
   overlay card has space to sit on top of even short content. */
.plan-gate-wrapper--has-content[b-rx696759md] {
    min-height: 220px;
}

/* ── Blurred background content ─────────────────────────────────────────── */

.plan-gate-content-blur[b-rx696759md] {
    filter: blur(5px) brightness(0.45);
    pointer-events: none;
    user-select: none;
    /* Prevent the blurred content from shrinking the flex column layout */
    flex: 1;
}

/* ── Overlay ────────────────────────────────────────────────────────────── */


.plan-gate-overlay[b-rx696759md] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--fo-overlay-rgb, 10,12,18), 0.6); /* suggest: --fo-overlay-rgb */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: 0.75rem;
    z-index: 10;
    padding: 1.5rem;
}

/* Standalone mode: no blurred content behind it — show as an inset card */
.plan-gate-overlay--standalone[b-rx696759md] {
    position: relative;
    min-height: 220px;
    background: rgba(var(--fo-card-rgb,255,255,255), 0.02);
    border: 1px dashed rgba(var(--fo-border-rgb,255,255,255), 0.1);
    border-radius: 0.75rem;
}

/* ── Lock card ──────────────────────────────────────────────────────────── */

.plan-gate-lock-card[b-rx696759md] {
    text-align: center;
    background: var(--fo-card);
    border: 1px solid var(--fo-border);
    border-radius: 14px;
    padding: 2.25rem 2rem;
    max-width: 360px;
    width: 100%;
    box-shadow: var(--fo-shadow);
}

/* ── Lock icon ring ─────────────────────────────────────────────────────── */

.plan-gate-lock-ring[b-rx696759md] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--fo-red-bg, #3b0f0f); /* suggest: --fo-red-bg */
    border: 2px solid var(--fo-red, #ef4444);
    color: var(--fo-red);
    font-size: 1.4rem;
}

/* ── Plan tier badge ────────────────────────────────────────────────────── */

.plan-gate-tier-badge[b-rx696759md] {
    display: inline-block;
    padding: 0.2em 0.75em;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    background: var(--fo-blue-dark, #1e3a5f); /* suggest: --fo-blue-dark */
    color: var(--fo-blue-light, #93c5fd); /* suggest: --fo-blue-light */
    border: 1px solid var(--fo-blue, #1d4ed8);
    letter-spacing: 0.03em;
    text-transform: capitalize;
}
/* /Components/Shared/PortalMarketingBanner.razor.rz.scp.css */
/* FieldOps "Powered by" marketing banner — shown on every customer-facing portal page */

.marketing-banner[b-3ndduwjfvs] {
    margin-top: 2.5rem;
    border-radius: 14px;
    background: var(--fo-card);
    box-shadow: var(--fo-shadow);
    overflow: hidden;
    position: relative;
}

/* Subtle pattern overlay */
.marketing-banner[b-3ndduwjfvs]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 80% 50%, rgba(255,255,255,.06) 0%, transparent 60%),
                      radial-gradient(circle at 20% 20%, rgba(255,255,255,.04) 0%, transparent 40%);
    pointer-events: none;
}

.marketing-inner[b-3ndduwjfvs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1.75rem 2rem;
    position: relative;
    z-index: 1;
}

/* ── Left copy ─────────────────────────── */
.marketing-copy[b-3ndduwjfvs] {
    flex: 1;
    min-width: 220px;
}

.powered-badge[b-3ndduwjfvs] {
    display: inline-flex;
    align-items: center;
    background: rgba(var(--fo-card-rgb,255,255,255), 0.15);
    border: 1px solid rgba(var(--fo-border-rgb,255,255,255), 0.25);
    color: var(--fo-blue-light, #bfdbfe);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 20px;
    padding: 0.2rem 0.65rem;
    margin-bottom: 0.6rem;
}

.marketing-headline[b-3ndduwjfvs] {
    color: var(--fo-text-primary);
    font-weight: 800;
    font-size: 1.4rem;
    margin-bottom: 0.4rem;
    line-height: 1.2;
}

.marketing-sub[b-3ndduwjfvs] {
    color: var(--fo-text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 0;
}

.marketing-sub strong[b-3ndduwjfvs] {
    color: var(--fo-blue-xlight, #dbeafe); /* suggest: --fo-blue-xlight */
}

/* ── Right CTA ─────────────────────────── */
.marketing-cta[b-3ndduwjfvs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
}

.btn-try-fieldops[b-3ndduwjfvs] {
    display: inline-flex;
    align-items: center;
    background: var(--fo-green);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.65rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    box-shadow: var(--fo-shadow);
}

.btn-try-fieldops:hover[b-3ndduwjfvs] {
    background: #15803d;
    transform: translateY(-1px);
    box-shadow: var(--fo-shadow);
    color: #fff;
    text-decoration: none;
}

.marketing-hint[b-3ndduwjfvs] {
    color: var(--fo-blue-light, #93c5fd);
    font-size: 0.72rem;
    text-align: center;
}

.create-account-link[b-3ndduwjfvs] {
    color: var(--fo-blue-light, #bfdbfe);
    font-size: 0.8rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(var(--fo-blue-light-rgb,191,219,254), 0.5); /* suggest: --fo-blue-light-rgb */
    transition: color 0.15s;
}

.create-account-link:hover[b-3ndduwjfvs] {
    color: var(--fo-text-primary, #fff);
    text-decoration-color: var(--fo-text-primary, #fff);
}

/* ── Responsive ────────────────────────── */
@media (max-width: 600px) {
    .marketing-inner[b-3ndduwjfvs] {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.5rem;
    }

    .marketing-cta[b-3ndduwjfvs] {
        width: 100%;
        align-items: flex-start;
    }

    .btn-try-fieldops[b-3ndduwjfvs] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Shared/ReferralNudgeModal.razor.rz.scp.css */
.referral-nudge[b-zcfugm86jl] {
    border-radius: 14px;
    border: 1px solid var(--fo-border);
    background: var(--fo-card);
    box-shadow: var(--fo-shadow);
}

.nudge-emoji[b-zcfugm86jl] {
    font-size: 2.75rem;
    line-height: 1;
}

.nudge-reward[b-zcfugm86jl] {
    display: inline-block;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #fbbf24;
    border-radius: .5rem;
    padding: .45rem 1rem;
    font-size: .85rem;
    color: #92400e;
    width: 100%;
    text-align: center;
}

.nudge-reward i[b-zcfugm86jl] {
    color: #d97706;
}
/* /Components/Shared/SocialProofBar.razor.rz.scp.css */
/* ── Full 3-column trust bar ─────────────────────────────────────────── */

.social-proof-bar[b-x5vi8evj96] {
    background: var(--fo-card);
    color: var(--fo-text-primary);
    border: 1px solid var(--fo-border);
    border-radius: 14px;
    box-shadow: var(--fo-shadow);
    padding: 1.5rem 2rem;
    margin: 1.5rem 0;
    transition: background 0.2s, box-shadow 0.2s;
}

.sp-bar-inner[b-x5vi8evj96] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.sp-stat[b-x5vi8evj96] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    text-align: center;
    min-width: 140px;
}

.sp-value[b-x5vi8evj96] {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--fo-blue, #1d4ed8);
    line-height: 1;
}

.sp-industries[b-x5vi8evj96] {
    font-size: 1.4rem;
    color: var(--fo-green, #16a34a);
}

.sp-label[b-x5vi8evj96] {
    font-size: 0.75rem;
    color: var(--fo-text-secondary);
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.sp-divider[b-x5vi8evj96] {
    width: 1px;
    height: 2.5rem;
    background: var(--fo-border, #cbd5e1);
    flex-shrink: 0;
}

@media (max-width: 576px) {
    .sp-divider[b-x5vi8evj96] { display: none; }
    .sp-bar-inner[b-x5vi8evj96] { gap: 1.5rem; }
    .sp-stat[b-x5vi8evj96] { min-width: 120px; }
}

/* ── Compact one-liner ───────────────────────────────────────────────── */

.sp-compact[b-x5vi8evj96] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.875rem;
    color: var(--fo-text-primary);
    padding: 0.35rem 0.75rem;
    background: var(--fo-card);
    border: 1px solid var(--fo-border);
    border-radius: 14px;
    margin-bottom: 0.75rem;
    box-shadow: var(--fo-shadow);
}

.sp-compact strong[b-x5vi8evj96] {
    color: var(--fo-blue, #1d4ed8);
}

.sp-compact-icon[b-x5vi8evj96] {
    color: var(--fo-blue, #1d4ed8);
    font-size: 0.95rem;
}

.sp-compact-sep[b-x5vi8evj96] {
    color: var(--fo-text-tertiary, #94a3b8); /* suggest: --fo-text-tertiary */
}

.sp-compact-users[b-x5vi8evj96] {
    color: var(--fo-text-secondary, #64748b);
    font-size: 0.8rem;
}
/* /Components/Shared/SubscriptionStatusBanner.razor.rz.scp.css */
.subscription-banner[b-mhaesu3lnk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    width: 100%;
    z-index: 1000;
}

.subscription-banner--info[b-mhaesu3lnk] {
    background: var(--fo-card);
    color: var(--fo-text-primary);
    border-bottom: 1px solid var(--fo-border);
}

.subscription-banner--warning[b-mhaesu3lnk] {
    background: var(--fo-yellow, #f59e0b);
    color: var(--fo-text-primary);
    border-bottom: 1px solid var(--fo-border);
}

.subscription-banner--danger[b-mhaesu3lnk] {
    background: var(--fo-red, #ef4444);
    color: var(--fo-text-primary);
    border-bottom: 1px solid var(--fo-border);
}

.sub-banner-icon[b-mhaesu3lnk] {
    font-size: 1rem;
    flex-shrink: 0;
}

.sub-banner-message[b-mhaesu3lnk] {
    flex: 1;
}

.sub-banner-btn[b-mhaesu3lnk] {
    /* Reset button defaults */
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    /* Link appearance */
    color: inherit;
    font-size: inherit;
    font-weight: 700;
    text-decoration: underline;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.sub-banner-btn:hover[b-mhaesu3lnk] {
    opacity: 0.85;
}

.sub-banner-btn:disabled[b-mhaesu3lnk] {
    opacity: 0.65;
    cursor: wait;
}
/* /Components/Shared/ToastContainer.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   FIELDOPS TOAST SYSTEM
   Dark-themed, severity-aware, animated toast notifications.
   Design tokens align with the established dark palette:
     bg surface  : #1e293b  (slate-800)
     bg deep     : #0f172a  (slate-900)
     border      : rgba(148,163,184,0.18)
     text primary: #f1f5f9
     text muted  : #94a3b8
     blue (info) : #60a5fa
     green (ok)  : #10b981
     amber (warn): #f59e0b
     red (error) : #ef4444
     orange-red  : #f97316
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Container ────────────────────────────────────────────────────────────── */

.toast-container[b-5dsl2p4qav] {
    position: fixed;
    top: 5rem;           /* clears the 64 px topbar + 16 px breathing room */
    right: 1.25rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    width: 22rem;
    max-width: calc(100vw - 2.5rem);
    pointer-events: none;   /* let clicks pass through the container gap */
}

/* ── Single Toast ─────────────────────────────────────────────────────────── */

.fo-toast[b-5dsl2p4qav] {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #1e293b;
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.4),
        0 10px 24px -4px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    pointer-events: all;

    /* Enter animation */
    animation: toastSlideIn-b-5dsl2p4qav 0.28s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

/* ── Body layout ──────────────────────────────────────────────────────────── */

.fo-toast__body[b-5dsl2p4qav] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
}

/* ── Icon ─────────────────────────────────────────────────────────────────── */

.fo-toast__icon[b-5dsl2p4qav] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 6px;
    font-size: 1rem;
    margin-top: 0.0625rem;
}

/* ── Text ─────────────────────────────────────────────────────────────────── */

.fo-toast__content[b-5dsl2p4qav] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.fo-toast__title[b-5dsl2p4qav] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #f1f5f9;
    line-height: 1.3;
    letter-spacing: 0.01em;
}

.fo-toast__message[b-5dsl2p4qav] {
    font-size: 0.8125rem;
    color: #94a3b8;
    line-height: 1.45;
}

/* When there is no title the message gets primary colour */
.fo-toast__content:not(:has(.fo-toast__title)) .fo-toast__message[b-5dsl2p4qav] {
    color: #cbd5e1;
}

/* ── Close button ─────────────────────────────────────────────────────────── */

.fo-toast__close[b-5dsl2p4qav] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #64748b;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    margin-top: 0.125rem;
}

.fo-toast__close:hover[b-5dsl2p4qav] {
    background: rgba(148, 163, 184, 0.12);
    color: #f1f5f9;
}

/* ── Progress bar (auto-dismiss) — decorative countdown ──────────────────── */

.fo-toast__progress[b-5dsl2p4qav] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    transform-origin: left;
    animation: toastProgress-b-5dsl2p4qav var(--toast-duration, 4000ms) linear forwards;
}

/* ── Severity variants ────────────────────────────────────────────────────── */

/* INFO — blue */
.fo-toast--info[b-5dsl2p4qav] {
    border-left: 3px solid #60a5fa;
}

.fo-toast--info .fo-toast__icon[b-5dsl2p4qav] {
    background: rgba(96, 165, 250, 0.12);
    color: #60a5fa;
}

.fo-toast--info .fo-toast__progress[b-5dsl2p4qav] {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

/* SUCCESS — green */
.fo-toast--success[b-5dsl2p4qav] {
    border-left: 3px solid #10b981;
}

.fo-toast--success .fo-toast__icon[b-5dsl2p4qav] {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.fo-toast--success .fo-toast__progress[b-5dsl2p4qav] {
    background: linear-gradient(90deg, #059669, #10b981);
}

/* WARNING — amber */
.fo-toast--warning[b-5dsl2p4qav] {
    border-left: 3px solid #f59e0b;
}

.fo-toast--warning .fo-toast__icon[b-5dsl2p4qav] {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.fo-toast--warning .fo-toast__progress[b-5dsl2p4qav] {
    background: linear-gradient(90deg, #d97706, #f59e0b);
}

/* ERROR — red */
.fo-toast--error[b-5dsl2p4qav] {
    border-left: 3px solid #ef4444;
}

.fo-toast--error .fo-toast__icon[b-5dsl2p4qav] {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.fo-toast--error .fo-toast__progress[b-5dsl2p4qav] {
    background: linear-gradient(90deg, #dc2626, #ef4444);
}

/* DANGER — orange-red (destructive actions) */
.fo-toast--danger[b-5dsl2p4qav] {
    border-left: 3px solid #f97316;
    background: #1f1510;
}

.fo-toast--danger .fo-toast__icon[b-5dsl2p4qav] {
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
}

.fo-toast--danger .fo-toast__progress[b-5dsl2p4qav] {
    background: linear-gradient(90deg, #ea580c, #f97316);
}

/* CRITICAL — urgent operational field alert (sticky, pulsing red) */
.fo-toast--critical[b-5dsl2p4qav] {
    border-left: 4px solid #ef4444;
    background: linear-gradient(135deg, #1e293b 0%, #1f1010 100%);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.45),
        0 10px 24px -4px rgba(239, 68, 68, 0.2),
        0 0 0 1px rgba(239, 68, 68, 0.08) inset;
    animation: toastSlideIn-b-5dsl2p4qav 0.28s cubic-bezier(0.34, 1.2, 0.64, 1) both,
               criticalPulse-b-5dsl2p4qav 2.2s ease-in-out 0.5s infinite;
}

.fo-toast--critical .fo-toast__icon[b-5dsl2p4qav] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.fo-toast--critical .fo-toast__title[b-5dsl2p4qav] {
    color: #fca5a5;
}

@keyframes criticalPulse-b-5dsl2p4qav {
    0%, 100% {
        box-shadow:
            0 4px 6px -1px rgba(0, 0, 0, 0.45),
            0 10px 24px -4px rgba(239, 68, 68, 0.2),
            0 0 0 1px rgba(239, 68, 68, 0.08) inset;
    }
    50% {
        box-shadow:
            0 4px 6px -1px rgba(0, 0, 0, 0.45),
            0 12px 28px -4px rgba(239, 68, 68, 0.38),
            0 0 0 1px rgba(239, 68, 68, 0.18) inset;
    }
}

/* ── Keyframe animations ──────────────────────────────────────────────────── */

@keyframes toastSlideIn-b-5dsl2p4qav {
    from {
        opacity: 0;
        transform: translateX(110%) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes toastSlideOut-b-5dsl2p4qav {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
        max-height: 8rem;
        margin-bottom: 0;
    }
    to {
        opacity: 0;
        transform: translateX(110%) scale(0.95);
        max-height: 0;
        margin-bottom: -0.625rem;
        padding: 0;
    }
}

@keyframes toastProgress-b-5dsl2p4qav {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* ── Accessibility: respect reduced-motion preference ─────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .fo-toast[b-5dsl2p4qav] {
        animation: toastFadeIn-b-5dsl2p4qav 0.15s ease both;
    }

    @keyframes toastFadeIn-b-5dsl2p4qav {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    .fo-toast__progress[b-5dsl2p4qav],
    .fo-toast__dismiss-shim[b-5dsl2p4qav] {
        animation-duration: inherit;  /* keep timing; remove motion */
    }
}

/* ── Mobile: full-width bottom stack ─────────────────────────────────────── */

@media (max-width: 640px) {
    .toast-container[b-5dsl2p4qav] {
        top: auto;
        bottom: 5rem;      /* clears the mobile nav bar */
        right: 0.75rem;
        left: 0.75rem;
        width: auto;
    }

    .fo-toast[b-5dsl2p4qav] {
        animation: toastSlideUp-b-5dsl2p4qav 0.28s cubic-bezier(0.34, 1.2, 0.64, 1) both;
    }

    @keyframes toastSlideUp-b-5dsl2p4qav {
        from {
            opacity: 0;
            transform: translateY(2rem) scale(0.97);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
}
/* /Components/Shared/UpgradePromptCard.razor.rz.scp.css */
.upgrade-overlay[b-rh9a5ttq6h] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    background: var(--fo-bg);
    border-radius: 14px;
    padding: 2rem;
}

.upgrade-card[b-rh9a5ttq6h] {
    background: var(--fo-card);
    border: 1px solid var(--fo-border);
    border-radius: 14px;
    padding: 3rem 2.5rem;
    max-width: 420px;
    width: 100%;
    box-shadow: var(--fo-shadow);
}

/* Lock icon ring — matches PlanGate style */
.upgrade-lock-ring[b-rh9a5ttq6h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--fo-red-bg, #3b0f0f); /* suggest: --fo-red-bg */
    border: 2px solid var(--fo-red, #ef4444);
    color: var(--fo-red);
    font-size: 1.6rem;
}

/* Plan tier badge — matches PlanGate style */
.upgrade-tier-badge[b-rh9a5ttq6h] {
    display: inline-block;
    padding: 0.2em 0.75em;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    background: var(--fo-blue-dark, #1e3a5f); /* suggest: --fo-blue-dark */
    color: var(--fo-blue-light, #93c5fd); /* suggest: --fo-blue-light */
    border: 1px solid var(--fo-blue, #1d4ed8);
    letter-spacing: 0.03em;
    text-transform: capitalize;
}

.upgrade-card .btn-primary[b-rh9a5ttq6h] {
    font-weight: 600;
}
/* /Components/Shared/UsageTriggerBanner.razor.rz.scp.css */
.usage-trigger-banner[b-mmd63wdom5] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem 1rem;
    border-radius: 12px;
    font-size: .875rem;
    margin-bottom: .75rem;
    border: 1px solid var(--fo-border);
    background: var(--fo-card);
    color: var(--fo-text-primary);
    box-shadow: var(--fo-shadow);
}

/* ── Amber — action-needed, high-intent ─────────────────────────── */
.utb--amber[b-mmd63wdom5] {
    background: var(--fo-yellow-bg, #fffbeb); /* suggest: --fo-yellow-bg */
    border-color: var(--fo-yellow, #f59e0b);
    color: var(--fo-yellow-dark, #92400e); /* suggest: --fo-yellow-dark */
}

.utb--amber .utb-icon[b-mmd63wdom5] { color: var(--fo-yellow-dark, #d97706); }

.utb--amber .utb-link[b-mmd63wdom5] {
    color: var(--fo-yellow-darker, #b45309); /* suggest: --fo-yellow-darker */
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.utb--amber .utb-link:hover[b-mmd63wdom5] { text-decoration: underline; }

/* ── Blue — informational upgrade opportunity ────────────────────── */
.utb--blue[b-mmd63wdom5] {
    background: var(--fo-bg, #eff6ff);
    border-color: var(--fo-blue, #3b82f6);
    color: var(--fo-blue-dark, #1e3a8a);
}

.utb--blue .utb-icon[b-mmd63wdom5] { color: var(--fo-blue, #2563eb); }

.utb--blue .utb-link[b-mmd63wdom5] {
    color: var(--fo-blue, #1d4ed8);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.utb--blue .utb-link:hover[b-mmd63wdom5] { text-decoration: underline; }

/* ── Subtle — soft awareness ─────────────────────────────────────── */
.utb--subtle[b-mmd63wdom5] {
    background: var(--fo-bg, #f8fafc);
    border-color: var(--fo-border, #e2e8f0);
    color: var(--fo-text-secondary, #475569);
}

.utb--subtle .utb-icon[b-mmd63wdom5] { color: var(--fo-text-tertiary, #94a3b8); /* suggest: --fo-text-tertiary */ }

.utb--subtle .utb-link[b-mmd63wdom5] {
    color: var(--fo-blue, #6366f1);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.utb--subtle .utb-link:hover[b-mmd63wdom5] { text-decoration: underline; }

/* ── Shared internals ────────────────────────────────────────────── */
.utb-icon[b-mmd63wdom5]    { font-size: 1rem; flex-shrink: 0; }
.utb-message[b-mmd63wdom5] { flex: 1; }
.utb-dismiss[b-mmd63wdom5] { flex-shrink: 0; margin-left: auto; opacity: .5; }
.utb-dismiss:hover[b-mmd63wdom5] { opacity: 1; }