/* _content/ZenZonApp/ClientClinicPortal/Components/Pages/Settings/ClinicHoursSettings.razor.rz.scp.css */
.clinic-hours-settings-page[b-jk6adwgcpr] {
    min-height: 320px;
}

.hours-actions[b-jk6adwgcpr] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.weekly-hours-grid[b-jk6adwgcpr] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.day-hours-row[b-jk6adwgcpr] {
    display: grid;
    grid-template-columns: 140px 160px 1fr 1fr auto;
    gap: 14px;
    align-items: end;
    padding: 14px;
    border-radius: 18px;
    background: rgba(210, 230, 250, 0.55);
    border: 1px solid rgba(30, 60, 90, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 4px 10px -6px rgba(0, 20, 40, 0.2);
}

.day-name[b-jk6adwgcpr] {
    font-weight: 800;
    color: #0a2642;
    padding-bottom: 10px;
}

.day-open[b-jk6adwgcpr] {
    min-width: 0;
}

.day-time[b-jk6adwgcpr] {
    min-width: 0;
}

.day-badge-wrap[b-jk6adwgcpr] {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
}

.glass-label.small[b-jk6adwgcpr] {
    font-size: 0.84rem;
    margin-bottom: 6px;
    color: #0f2e4a;
}

/* ===== TIME INPUT FIELDS - GLASS STYLING ===== */
.glass-input[type="time"][b-jk6adwgcpr] {
    width: 100%;
    padding: 0.85rem 1.2rem;
    background: rgba(200, 225, 250, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 24px;
    font-size: 0.95rem;
    color: #0a2642;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 15, 35, 0.1), inset 0 1px 3px rgba(255, 255, 255, 0.6);
    transition: all 0.15s ease;
    font-family: 'Inter', monospace;
}

    .glass-input[type="time"]:hover:not(:disabled)[b-jk6adwgcpr] {
        background: rgba(215, 240, 255, 0.85);
        border-color: rgba(255, 255, 255, 0.7);
    }

    .glass-input[type="time"]:focus:not(:disabled)[b-jk6adwgcpr] {
        outline: none;
        background: rgba(225, 245, 255, 0.9);
        border-color: rgba(70, 130, 210, 0.7);
        box-shadow: 0 8px 20px -10px rgba(35, 80, 145, 0.3), 0 0 0 3px rgba(255, 255, 255, 0.3);
    }

    .glass-input[type="time"]:disabled[b-jk6adwgcpr] {
        background: rgba(180, 200, 225, 0.4);
        color: rgba(10, 38, 66, 0.4);
        cursor: not-allowed;
        border-color: rgba(255, 255, 255, 0.3);
        opacity: 0.7;
    }

/* ===== TIME ZONE INPUT - GLASS STYLING ===== */
.glass-input[type="text"][b-jk6adwgcpr] {
    width: 100%;
    padding: 0.85rem 1.2rem;
    background: rgba(200, 225, 250, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 24px;
    font-size: 0.95rem;
    color: #0a2642;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 15, 35, 0.1), inset 0 1px 3px rgba(255, 255, 255, 0.6);
    transition: all 0.15s ease;
}

    .glass-input[type="text"]:hover[b-jk6adwgcpr] {
        background: rgba(215, 240, 255, 0.85);
        border-color: rgba(255, 255, 255, 0.7);
    }

    .glass-input[type="text"]:focus[b-jk6adwgcpr] {
        outline: none;
        background: rgba(225, 245, 255, 0.9);
        border-color: rgba(70, 130, 210, 0.7);
        box-shadow: 0 8px 20px -10px rgba(35, 80, 145, 0.3), 0 0 0 3px rgba(255, 255, 255, 0.3);
    }

    .glass-input[type="text"][b-jk6adwgcpr]::placeholder {
        color: #5a728f;
        font-weight: 400;
        font-size: 0.9rem;
        opacity: 0.8;
    }

/* ===== TOGGLE ROWS - ENHANCED GLASS ===== */
.glass-toggle-row[b-jk6adwgcpr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.2rem;
    background: rgba(195, 220, 250, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: all 0.15s;
    cursor: pointer;
    font-weight: 500;
    color: #0a2642;
    box-shadow: 0 4px 12px rgba(0, 15, 35, 0.08);
}

    .glass-toggle-row:hover[b-jk6adwgcpr] {
        background: rgba(210, 235, 255, 0.8);
        border-color: rgba(255, 255, 255, 0.6);
        transform: translateY(-1px);
    }

    .glass-toggle-row input[type="checkbox"][b-jk6adwgcpr] {
        width: 1.3rem;
        height: 1.3rem;
        border-radius: 6px;
        background: rgba(240, 245, 255, 0.9);
        border: 1px solid rgba(80, 120, 180, 0.5);
        appearance: none;
        -webkit-appearance: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
        transition: all 0.1s ease;
    }

        .glass-toggle-row input[type="checkbox"]:checked[b-jk6adwgcpr] {
            background: #2d7fc1;
            border-color: white;
            box-shadow: 0 2px 8px rgba(45, 127, 193, 0.3);
        }

            .glass-toggle-row input[type="checkbox"]:checked[b-jk6adwgcpr]::after {
                content: "✓";
                color: white;
                font-size: 0.9rem;
                font-weight: bold;
            }

        .glass-toggle-row input[type="checkbox"]:focus[b-jk6adwgcpr] {
            outline: none;
            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
        }

    /* Compact toggle for day rows */
    .glass-toggle-row.compact[b-jk6adwgcpr] {
        min-height: 44px;
        margin-bottom: 0;
        padding: 0.65rem 1.2rem;
        background: rgba(195, 220, 250, 0.7);
    }

        .glass-toggle-row.compact:hover[b-jk6adwgcpr] {
            background: rgba(210, 235, 255, 0.8);
        }

/* ===== ACTION BUTTONS ===== */
.hours-actions .glass-secondary-dark-btn[b-jk6adwgcpr] {
    border-radius: 40px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(195, 220, 250, 0.7);
    color: #0a2642;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.15s ease;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 15, 35, 0.08);
    letter-spacing: 0.01em;
}

    .hours-actions .glass-secondary-dark-btn:hover[b-jk6adwgcpr] {
        background: rgba(215, 240, 255, 0.85);
        border-color: rgba(255, 255, 255, 0.7);
        transform: translateY(-2px);
        box-shadow: 0 8px 18px -8px rgba(0, 40, 80, 0.2);
    }

    .hours-actions .glass-secondary-dark-btn:active[b-jk6adwgcpr] {
        transform: translateY(0);
    }

/* ===== BADGES ===== */
.glass-settings-badge[b-jk6adwgcpr] {
    background: rgba(185, 215, 250, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 0.5rem 1.2rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0a2642;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    display: inline-block;
}

/* ===== NOTES SECTION ===== */
.hours-notes[b-jk6adwgcpr] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.note-item[b-jk6adwgcpr] {
    padding: 12px 16px;
    border-radius: 18px;
    background: rgba(200, 225, 250, 0.6);
    color: #0a2642;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 10px -6px rgba(0, 20, 40, 0.1);
    font-size: 0.95rem;
}

/* ===== SUMMARY SECTION ===== */
.hours-summary[b-jk6adwgcpr] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #0a2642;
}

.summary-line[b-jk6adwgcpr] {
    color: #0a2642;
    padding: 4px 0;
}

.summary-row[b-jk6adwgcpr] {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px dashed rgba(60, 100, 150, 0.25);
    color: #0a2642;
    font-weight: 500;
}

    .summary-row span:first-child[b-jk6adwgcpr] {
        font-weight: 600;
        color: #0a2642;
    }

/* ===== VALIDATION PANEL ===== */
.settings-validation-panel[b-jk6adwgcpr] {
    margin-top: 18px;
    padding: 16px 20px;
    border-radius: 24px;
    background: rgba(200, 70, 80, 0.18);
    border: 1px solid rgba(200, 60, 70, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.settings-validation-item[b-jk6adwgcpr] {
    color: #711c1c;
    font-weight: 600;
    margin-bottom: 8px;
    padding-left: 8px;
    border-left: 3px solid rgba(200, 60, 70, 0.5);
}

    .settings-validation-item:last-child[b-jk6adwgcpr] {
        margin-bottom: 0;
    }

/* ===== STATUS MESSAGE (reuse from previous) ===== */
.settings-status-message[b-jk6adwgcpr] {
    margin: 1.5rem 0;
    padding: 1rem 1.8rem;
    border-radius: 50px;
    font-weight: 500;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.4);
    animation: slideIn-b-jk6adwgcpr 0.2s ease;
}

    .settings-status-message.success[b-jk6adwgcpr] {
        background: rgba(55, 135, 105, 0.35);
        color: #073a24;
        border-left: 4px solid #1a7645;
    }

    .settings-status-message.error[b-jk6adwgcpr] {
        background: rgba(185, 65, 65, 0.35);
        color: #591f1f;
        border-left: 4px solid #a53636;
    }

/* ===== STICKY SAVE BAR ===== */
.settings-sticky-bar[b-jk6adwgcpr] {
    position: sticky;
    bottom: 2rem;
    margin-top: 2rem;
    background: rgba(195, 218, 248, 0.85);
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 60px;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 25px 40px -18px rgba(0, 15, 40, 0.4), inset 0 1px 4px rgba(255,255,255,0.6);
    z-index: 100;
    animation: slideUp-b-jk6adwgcpr 0.3s ease;
}

.settings-sticky-left[b-jk6adwgcpr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #10334f;
    font-weight: 500;
    font-size: 0.95rem;
}

    .settings-sticky-left i[b-jk6adwgcpr] {
        font-size: 1.2rem;
        color: #ac601c;
    }

.settings-sticky-right[b-jk6adwgcpr] {
    display: flex;
    gap: 1rem;
}

/* ===== GLASS BUTTONS ===== */
.glass-primary-btn[b-jk6adwgcpr] {
    background: rgba(40, 120, 190, 0.45);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 40px;
    padding: 0.7rem 2rem;
    font-weight: 600;
    color: #062e50;
    box-shadow: 0 8px 16px -10px rgba(0,40,90,0.35);
    transition: all 0.15s;
    cursor: pointer;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

    .glass-primary-btn:hover:not(:disabled)[b-jk6adwgcpr] {
        background: rgba(50, 140, 220, 0.55);
        border-color: white;
        transform: translateY(-2px);
        box-shadow: 0 14px 22px -14px #0f3d68;
    }

.glass-secondary-btn[b-jk6adwgcpr] {
    background: rgba(185, 212, 250, 0.7);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 40px;
    padding: 0.7rem 2rem;
    font-weight: 500;
    color: #1a3858;
    transition: all 0.15s;
    cursor: pointer;
    font-size: 0.95rem;
}

    .glass-secondary-btn:hover:not(:disabled)[b-jk6adwgcpr] {
        background: rgba(205, 230, 255, 0.8);
        border-color: white;
    }

    .glass-primary-btn:disabled[b-jk6adwgcpr], .glass-secondary-btn:disabled[b-jk6adwgcpr] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ===== ANIMATIONS ===== */
@keyframes slideIn-b-jk6adwgcpr {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp-b-jk6adwgcpr {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .day-hours-row[b-jk6adwgcpr] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .day-name[b-jk6adwgcpr],
    .day-badge-wrap[b-jk6adwgcpr] {
        padding-bottom: 0;
    }

    .hours-actions[b-jk6adwgcpr] {
        justify-content: flex-start;
        margin-top: 10px;
    }

    .summary-row[b-jk6adwgcpr] {
        flex-direction: column;
        gap: 4px;
    }

    .hours-actions .glass-secondary-dark-btn[b-jk6adwgcpr] {
        width: 100%;
        text-align: center;
    }
}
/* _content/ZenZonApp/ClientClinicPortal/Components/Pages/Settings/ClinicProfileSettings.razor.rz.scp.css */
/* ========== PRODUCTION GLASSMORPHISM - CLINIC PROFILE ========== */
/* Light theme · premium frosted glass with darker contrast · ready for Blazor */
/* NO @import statements - compatible with scoped CSS */

.clinic-profile-settings-page[b-ia1mdeinkq] {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: #1a2a3a;
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* ===== LOADING STATES ===== */
.glass-settings-loading[b-ia1mdeinkq] {
    background: rgba(245, 247, 250, 0.65);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-radius: 32px;
    padding: 3rem;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 500;
    color: #1e2f40;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 20px 40px -12px rgba(0, 10, 25, 0.25), inset 0 1px 2px rgba(255,255,255,0.7);
    letter-spacing: 0.3px;
}

/* ===== SECTION CARD (overriding SettingsSectionCard) ===== */
[b-ia1mdeinkq] .settings-section-card {
    background: rgba(235, 240, 248, 0.65);
    backdrop-filter: blur(20px) saturate(200%);
    -webkit-backdrop-filter: blur(20px) saturate(200%);
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 25px 45px -18px rgba(0, 15, 35, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.7), inset 0 -1px 2px rgba(255, 255, 255, 0.4);
    padding: 1.8rem 2rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 1.2rem;
}

    [b-ia1mdeinkq] .settings-section-card:hover {
        box-shadow: 0 28px 48px -18px rgba(0, 25, 45, 0.35), inset 0 1px 3px rgba(255, 255, 255, 0.8);
        transform: translateY(-2px);
        background: rgba(240, 245, 252, 0.7);
    }

    /* Card header */
    [b-ia1mdeinkq] .settings-section-card h3 {
        font-size: 1.5rem;
        font-weight: 600;
        letter-spacing: -0.02em;
        color: #0b2238;
        margin-bottom: 0.25rem;
    }

    [b-ia1mdeinkq] .settings-section-card .subtitle {
        color: #1f3853;
        font-weight: 400;
        font-size: 0.95rem;
        opacity: 0.9;
        margin-bottom: 1.75rem;
        border-left: 3px solid rgba(90, 130, 180, 0.5);
        padding-left: 1rem;
    }

    [b-ia1mdeinkq] .settings-section-card .header-right {
        background: rgba(210, 225, 245, 0.6);
        border-radius: 40px;
        padding: 0.3rem 1.2rem;
        font-size: 0.85rem;
        font-weight: 600;
        color: #0d3a62;
        border: 1px solid rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(4px);
    }

/* ===== FORM LABELS ===== */
.glass-label[b-ia1mdeinkq] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #153753;
    margin-bottom: 0.5rem;
    padding-left: 0.75rem;
    opacity: 1;
}

/* ===== GLASS INPUTS ===== */
.glass-input[b-ia1mdeinkq] {
    width: 100%;
    padding: 0.85rem 1.2rem;
    background: rgba(220, 230, 245, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 24px;
    font-size: 0.95rem;
    color: #0d263f;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 15, 30, 0.08), inset 0 1px 3px rgba(255, 255, 255, 0.7);
    transition: all 0.15s ease;
}

    .glass-input:hover[b-ia1mdeinkq] {
        background: rgba(230, 240, 255, 0.8);
        border-color: rgba(255, 255, 255, 0.9);
    }

    .glass-input:focus[b-ia1mdeinkq] {
        outline: none;
        background: rgba(240, 248, 255, 0.9);
        border-color: rgba(90, 150, 220, 0.8);
        box-shadow: 0 8px 20px -10px rgba(40, 90, 150, 0.25), 0 0 0 3px rgba(255, 255, 255, 0.4);
    }

    .glass-input[b-ia1mdeinkq]::placeholder {
        color: #647a94;
        font-weight: 400;
        font-size: 0.9rem;
        opacity: 0.7;
    }

/* Textarea specific */
.glass-textarea[b-ia1mdeinkq] {
    min-height: 100px;
    resize: vertical;
    line-height: 1.5;
}

/* ===== TOGGLE / CHECKBOX ROWS ===== */
.glass-toggle-row[b-ia1mdeinkq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.2rem;
    background: rgba(215, 230, 250, 0.6);
    backdrop-filter: blur(4px);
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: background 0.15s;
    cursor: pointer;
    font-weight: 500;
    color: #123456;
}

    .glass-toggle-row:hover[b-ia1mdeinkq] {
        background: rgba(225, 240, 255, 0.75);
    }

    .glass-toggle-row input[type="checkbox"][b-ia1mdeinkq] {
        width: 1.3rem;
        height: 1.3rem;
        border-radius: 6px;
        background: rgba(240, 245, 255, 0.8);
        border: 1px solid rgba(120, 160, 210, 0.5);
        appearance: none;
        -webkit-appearance: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
    }

        .glass-toggle-row input[type="checkbox"]:checked[b-ia1mdeinkq] {
            background: #2d7fc1;
            border-color: white;
            position: relative;
        }

            .glass-toggle-row input[type="checkbox"]:checked[b-ia1mdeinkq]::after {
                content: "✓";
                color: white;
                font-size: 0.9rem;
                font-weight: bold;
            }

/* ===== LIVE PREVIEW CARD ===== */
.clinic-profile-preview[b-ia1mdeinkq] {
    background: rgba(220, 235, 250, 0.65);
    backdrop-filter: blur(12px);
    border-radius: 28px;
    padding: 1.8rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: inset 0 1px 4px rgba(255,255,255,0.6);
}

.preview-title[b-ia1mdeinkq] {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: #08203a;
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.preview-subtitle[b-ia1mdeinkq] {
    font-size: 1.1rem;
    font-weight: 400;
    color: #2a486b;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.4);
}

.preview-line[b-ia1mdeinkq] {
    padding: 0.35rem 0;
    color: #183956;
    font-weight: 400;
    font-size: 0.95rem;
}

    .preview-line strong[b-ia1mdeinkq] {
        font-weight: 600;
        color: #0a2845;
        width: 70px;
        display: inline-block;
    }

.clinic-profile-preview hr[b-ia1mdeinkq] {
    margin: 1.2rem 0;
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(150, 180, 220, 0.5), transparent);
}

.preview-status-grid[b-ia1mdeinkq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

.glass-settings-badge[b-ia1mdeinkq] {
    background: rgba(210, 230, 255, 0.7);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    padding: 0.4rem 1.2rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #0e3a60;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

/* ===== STATUS MESSAGE ===== */
.settings-status-message[b-ia1mdeinkq] {
    margin: 1.5rem 0;
    padding: 1rem 1.8rem;
    border-radius: 50px;
    font-weight: 500;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.5);
    animation: slideIn-b-ia1mdeinkq 0.2s ease;
}

    .settings-status-message.success[b-ia1mdeinkq] {
        background: rgba(60, 140, 110, 0.3);
        color: #0a3a28;
        border-left: 4px solid #1e7b4a;
    }

    .settings-status-message.error[b-ia1mdeinkq] {
        background: rgba(190, 70, 70, 0.3);
        color: #642424;
        border-left: 4px solid #b13e3e;
    }

/* ===== STICKY SAVE BAR ===== */
.settings-sticky-bar[b-ia1mdeinkq] {
    position: sticky;
    bottom: 2rem;
    margin-top: 2rem;
    background: rgba(215, 230, 250, 0.75);
    backdrop-filter: blur(24px) saturate(200%);
    -webkit-backdrop-filter: blur(24px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 60px;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 25px 40px -18px rgba(0, 15, 35, 0.35), inset 0 1px 4px rgba(255,255,255,0.7);
    z-index: 100;
    animation: slideUp-b-ia1mdeinkq 0.3s ease;
}

.settings-sticky-left[b-ia1mdeinkq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #153857;
    font-weight: 500;
    font-size: 0.95rem;
}

    .settings-sticky-left i[b-ia1mdeinkq] {
        font-size: 1.2rem;
        color: #b86b1f;
    }

.settings-sticky-right[b-ia1mdeinkq] {
    display: flex;
    gap: 1rem;
}

/* ===== GLASS BUTTONS ===== */
.glass-primary-btn[b-ia1mdeinkq] {
    background: rgba(45, 127, 193, 0.4);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 40px;
    padding: 0.7rem 2rem;
    font-weight: 600;
    color: #083257;
    box-shadow: 0 8px 16px -10px rgba(0,45,95,0.3);
    transition: all 0.15s;
    cursor: pointer;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

    .glass-primary-btn:hover:not(:disabled)[b-ia1mdeinkq] {
        background: rgba(55, 145, 220, 0.5);
        border-color: white;
        transform: translateY(-2px);
        box-shadow: 0 14px 22px -14px #124570;
    }

.glass-secondary-btn[b-ia1mdeinkq] {
    background: rgba(210, 225, 250, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 40px;
    padding: 0.7rem 2rem;
    font-weight: 500;
    color: #1f3e60;
    transition: all 0.15s;
    cursor: pointer;
    font-size: 0.95rem;
}

    .glass-secondary-btn:hover:not(:disabled)[b-ia1mdeinkq] {
        background: rgba(225, 240, 255, 0.75);
        border-color: white;
    }

    .glass-primary-btn:disabled[b-ia1mdeinkq], .glass-secondary-btn:disabled[b-ia1mdeinkq] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ===== GRID ENHANCEMENTS ===== */
[b-ia1mdeinkq] .row {
    margin: 0 -0.75rem;
}

[b-ia1mdeinkq] [class*="col-"] {
    padding: 0 0.75rem;
}

[b-ia1mdeinkq] .g-3 > [class*="col-"] {
    margin-bottom: 1rem;
}

[b-ia1mdeinkq] .g-4 > [class*="col-"] {
    margin-bottom: 1.5rem;
}

/* ===== ANIMATIONS ===== */
@keyframes slideIn-b-ia1mdeinkq {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp-b-ia1mdeinkq {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== RESPONSIVE TOUCHES ===== */
@media (max-width: 768px) {
    [b-ia1mdeinkq] .settings-section-card {
        padding: 1.4rem;
    }

    .settings-sticky-bar[b-ia1mdeinkq] {
        flex-direction: column;
        gap: 1rem;
        border-radius: 32px;
        align-items: stretch;
        text-align: center;
    }

    .settings-sticky-right[b-ia1mdeinkq] {
        justify-content: center;
    }

    .preview-title[b-ia1mdeinkq] {
        font-size: 1.5rem;
    }
}
/* _content/ZenZonApp/ClientClinicPortal/Components/Pages/Settings/ClinicSettings.razor.rz.scp.css */
*[b-qzcew4nod7] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* main container — glassmorphism stage */
.clinic-settings-page[b-qzcew4nod7] {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.clinic-settings-shell[b-qzcew4nod7] {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 1.5rem;
    backdrop-filter: blur(2px);
}

/* ========== LEFT PANEL – GLASS NAV ========== */
.clinic-settings-left[b-qzcew4nod7] {
    background: rgba(210, 220, 238, 0.45);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-radius: 32px;
    box-shadow: 0 20px 40px -8px rgba(0, 20, 40, 0.25), inset 0 1px 2px rgba(255,255,255,0.6), inset 0 -2px 3px rgba(255,255,255,0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 1.75rem 0.75rem;
    height: fit-content;
    transition: all 0.2s ease;
}

/* nav items - recreate <SettingsTreeNav> with glass styling */
.settings-tree-nav[b-qzcew4nod7] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.nav-section[b-qzcew4nod7] {
    border-radius: 18px;
    transition: background 0.15s;
}

.nav-item[b-qzcew4nod7] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1.25rem;
    margin: 0 0.25rem;
    border-radius: 16px;
    font-weight: 500;
    font-size: 0.95rem;
    color: rgba(15, 25, 45, 0.9);
    cursor: default;
    transition: all 0.18s;
    border: 1px solid transparent;
    background: transparent;
}

    .nav-item i[b-qzcew4nod7] {
        width: 1.6rem;
        font-size: 1.25rem;
        color: rgba(30, 50, 85, 0.85);
        text-align: center;
    }

    .nav-item.selected[b-qzcew4nod7] {
        background: rgba(225, 235, 255, 0.6);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255,255,255,0.6);
        box-shadow: 0 8px 18px -6px rgba(0,32,64,0.2);
        color: #08223f;
        font-weight: 600;
    }

        .nav-item.selected i[b-qzcew4nod7] {
            color: #15406b;
        }

    .nav-item:not(.selected):hover[b-qzcew4nod7] {
        background: rgba(215, 230, 250, 0.45);
        border-color: rgba(255,255,255,0.3);
    }

/* small indicator for future items (subtle) */
.nav-meta[b-qzcew4nod7] {
    margin-left: auto;
    font-size: 0.7rem;
    background: rgba(100, 130, 180, 0.3);
    padding: 0.2rem 0.6rem;
    border-radius: 50px;
    color: #1f3757;
    border: 1px solid rgba(255,255,255,0.25);
    backdrop-filter: blur(2px);
}

/* ========== RIGHT PANEL – GLASS CARD ========== */
.clinic-settings-right[b-qzcew4nod7] {
    background: rgba(215, 228, 248, 0.4);
    backdrop-filter: blur(18px) saturate(200%);
    -webkit-backdrop-filter: blur(18px) saturate(200%);
    border-radius: 36px;
    box-shadow: 0 30px 50px -18px rgba(0, 30, 60, 0.3), inset 0 1px 3px rgba(255,255,255,0.7);
    border: 1px solid rgba(255, 255, 255, 0.45);
    padding: 2rem 2.2rem;
    transition: all 0.2s;
    min-height: 520px;
}

/* Section card (placeholder) with extra glass */
.settings-section-card[b-qzcew4nod7] {
    background: rgba(215, 230, 250, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 28px;
    padding: 1.75rem 2rem;
    border: 1px solid rgba(255,255,255,0.6);
    box-shadow: 0 8px 20px -10px rgba(0,20,40,0.25);
}

    .settings-section-card h2[b-qzcew4nod7] {
        font-size: 1.7rem;
        font-weight: 600;
        letter-spacing: -0.02em;
        color: #0f2642;
        margin-bottom: 0.25rem;
    }

    .settings-section-card .subtitle[b-qzcew4nod7] {
        color: #203a58;
        font-weight: 500;
        opacity: 0.9;
        margin-bottom: 1.8rem;
        font-size: 1rem;
    }

.settings-placeholder-block[b-qzcew4nod7] {
    background: rgba(200, 225, 250, 0.6);
    border-radius: 20px;
    padding: 3rem 2rem;
    text-align: center;
    font-size: 1.1rem;
    border: 1px dashed rgba(90, 130, 190, 0.6);
    color: #163353;
    backdrop-filter: blur(4px);
    box-shadow: inset 0 2px 6px rgba(255,255,255,0.5);
}

/* overview simulation (glass) */
.settings-overview[b-qzcew4nod7] {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.overview-card[b-qzcew4nod7] {
    background: rgba(210, 230, 255, 0.6);
    backdrop-filter: blur(8px);
    border-radius: 22px;
    padding: 1.5rem 2rem;
    border: 1px solid rgba(255,255,255,0.6);
}

.clinic-badge[b-qzcew4nod7] {
    font-weight: 600;
    color: #0b253f;
}

.flex-row[b-qzcew4nod7] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.btn-glass[b-qzcew4nod7] {
    background: rgba(200, 225, 255, 0.65);
    border: 1px solid rgba(255,255,255,0.7);
    padding: 0.75rem 1.8rem;
    border-radius: 40px;
    font-weight: 600;
    color: #0c2e50;
    box-shadow: 0 6px 14px -8px rgba(0,0,0,0.2);
    backdrop-filter: blur(4px);
    cursor: default;
    transition: 0.1s;
}

    .btn-glass i[b-qzcew4nod7] {
        margin-right: 0.5rem;
    }

/* documents simulation */
.doc-card[b-qzcew4nod7] {
    background: rgba(200, 225, 250, 0.5);
    border-radius: 24px;
    padding: 1.5rem;
}

/* clinic hours mock */
.hours-mock span[b-qzcew4nod7] {
    background: rgba(200, 225, 255, 0.7);
    border-radius: 40px;
    padding: 0.5rem 1.2rem;
}

/* make everything responsive */
@media (max-width: 900px) {
    .clinic-settings-shell[b-qzcew4nod7] {
        grid-template-columns: 1fr;
    }

    body[b-qzcew4nod7] {
        padding: 1rem;
    }
}

/* subtle icons for each section (matching blazor navigation) */
.nav-icon-overview[b-qzcew4nod7]:before {
    content: "\f2c9";
}
/* fa-clipboard-list */
.nav-icon-profile[b-qzcew4nod7]:before {
    content: "\f2bb";
}
/* fa-hospital-user */
.nav-icon-locations[b-qzcew4nod7]:before {
    content: "\f3c5";
}
/* fa-map-marker-alt */
.nav-icon-hours[b-qzcew4nod7]:before {
    content: "\f017";
}
/* fa-clock */
.nav-icon-services[b-qzcew4nod7]:before {
    content: "\f02b";
}
/* fa-tag */
.nav-icon-communications[b-qzcew4nod7]:before {
    content: "\f086";
}
/* fa-comments */
.nav-icon-documents[b-qzcew4nod7]:before {
    content: "\f15c";
}
/* fa-file-alt */
.nav-icon-staff[b-qzcew4nod7]:before {
    content: "\f0c0";
}
/* fa-users */
.nav-icon-finance[b-qzcew4nod7]:before {
    content: "\f53d";
}
/* fa-coins */
.nav-icon-integrations[b-qzcew4nod7]:before {
    content: "\f7d9";
}
/* fa-puzzle-piece */
.nav-icon-security[b-qzcew4nod7]:before {
    content: "\f3ed";
}
/* fa-shield-alt */
.nav-icon-advanced[b-qzcew4nod7]:before {
    content: "\f085";
}
/* fa-cogs */
.settings-practitioner-list[b-qzcew4nod7] {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.settings-practitioner-item[b-qzcew4nod7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.8rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.settings-practitioner-photo[b-qzcew4nod7] {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.settings-practitioner-photo-placeholder[b-qzcew4nod7] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.45);
    color: #1f3a5f;
    font-weight: 700;
}

.settings-practitioner-meta[b-qzcew4nod7] {
    min-width: 0;
}

.settings-practitioner-name[b-qzcew4nod7] {
    font-weight: 700;
    color: #1f3a5f;
    line-height: 1.2;
}

.settings-practitioner-title[b-qzcew4nod7] {
    font-size: 0.9rem;
    color: #4f6785;
    line-height: 1.2;
    margin-top: 0.2rem;
}
.settings-overview-single-row[b-qzcew4nod7] {
    margin-top: 1rem;
}

.practitioners-card-wide[b-qzcew4nod7] {
    width: 100%;
}

.settings-practitioner-row[b-qzcew4nod7] {
    margin-top: 1rem;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.9rem;
    overflow-x: auto;
    padding-bottom: 0.35rem;
}

.settings-practitioner-chip[b-qzcew4nod7] {
    min-width: 190px;
    max-width: 220px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 0.9rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.35);
    flex: 0 0 auto;
}

.settings-practitioner-photo[b-qzcew4nod7] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.settings-practitioner-photo-placeholder[b-qzcew4nod7] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.45);
    color: #1f3a5f;
    font-weight: 700;
}

.settings-practitioner-meta[b-qzcew4nod7] {
    min-width: 0;
}

.settings-practitioner-name[b-qzcew4nod7] {
    font-weight: 700;
    color: #1f3a5f;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-practitioner-title[b-qzcew4nod7] {
    font-size: 0.9rem;
    color: #4f6785;
    line-height: 1.2;
    margin-top: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* _content/ZenZonApp/ClientClinicPortal/Components/Pages/Settings/CreateClinicDocumentCategoryModal.razor.rz.scp.css */
.category-modal-shell[b-h0kfhh60nl] {
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(760px, 92vw);
    max-height: 88vh;
    overflow: auto;
    transform: translate(-50%, -50%);
    z-index: 1055;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(255,255,255,0.45);
    box-shadow: 0 20px 60px rgba(18, 52, 77, 0.20);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.glass-modal-header[b-h0kfhh60nl],
.glass-modal-footer[b-h0kfhh60nl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
}

.glass-modal-body[b-h0kfhh60nl] {
    padding: 0 22px 22px 22px;
}

.glass-modal-title[b-h0kfhh60nl] {
    margin: 0;
    color: #12344d;
    font-weight: 800;
}

.glass-modal-subtitle[b-h0kfhh60nl] {
    margin-top: 4px;
    color: #6a8498;
    font-size: 0.92rem;
}

.glass-close-btn[b-h0kfhh60nl] {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 12px;
    background: rgba(18, 52, 77, 0.08);
    color: #12344d;
    font-size: 1.2rem;
    font-weight: 800;
}

    .glass-close-btn:hover[b-h0kfhh60nl] {
        background: rgba(18, 52, 77, 0.14);
    }

.glass-modal-footer[b-h0kfhh60nl] {
    justify-content: flex-end;
}
/* _content/ZenZonApp/ClientClinicPortal/Components/Shared/Settings/DocumentsAndCorrespondenceSettings.razor.rz.scp.css */
.documents-correspondence-page[b-jl0bp00cif] {
    min-height: 320px;
}

.dc-header-actions[b-jl0bp00cif] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.internal-tab-strip[b-jl0bp00cif] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(18, 52, 77, 0.08);
}

.internal-tab-btn[b-jl0bp00cif] {
    border: none;
    border-radius: 14px;
    padding: 10px 16px;
    background: rgba(255,255,255,0.7);
    color: #12344d;
    font-weight: 700;
    transition: all 0.2s ease;
}

    .internal-tab-btn:hover[b-jl0bp00cif] {
        background: rgba(255,255,255,0.92);
        color: #0f3057;
    }

    .internal-tab-btn.active[b-jl0bp00cif] {
        background: linear-gradient(135deg, rgba(58,134,255,0.18), rgba(43,179,192,0.18));
        border: 1px solid rgba(58,134,255,0.22);
        color: #0f3057;
    }

.glass-table[b-jl0bp00cif] {
    margin-bottom: 0;
}

    .glass-table thead th[b-jl0bp00cif] {
        background: rgba(18, 52, 77, 0.06);
        color: #12344d;
        font-weight: 800;
        border-bottom: 1px solid rgba(18, 52, 77, 0.08);
    }

    .glass-table tbody td[b-jl0bp00cif] {
        background: rgba(255,255,255,0.32);
        color: #12344d;
        border-top: 1px solid rgba(18, 52, 77, 0.06);
        vertical-align: middle;
    }

.dc-note-list[b-jl0bp00cif] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .dc-note-list .note-item[b-jl0bp00cif] {
        padding: 12px 14px;
        border-radius: 14px;
        background: rgba(255,255,255,0.42);
        color: #12344d;
        font-weight: 600;
    }

.text-muted[b-jl0bp00cif] {
    color: #6c7f90 !important;
}
/* _content/ZenZonApp/ClinicMigration/Dashboard/MigrationDashboard.razor.rz.scp.css */
/* Glassmorphism styles */
body[b-oqhpp4g094] {
    background: linear-gradient(135deg, #1e1e2f 0%, #2a2a40 100%);
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 20px;
}

/* Page Title with Gradient Text */
/* The container for the title */
.page-title[b-oqhpp4g094] {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 2rem;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    display: inline-flex;
    align-items: center;
    gap: 15px;
    /* Remove any background-clip or text-fill-color from here! */
}

/* This targets ONLY the text, leaving the emoji alone */
.gradient-text-only[b-oqhpp4g094] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

/* Ensure the input row is perfectly level */
.row.d-flex[b-oqhpp4g094] {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start; /* Aligns labels to the top */
}

.col-md-6[b-oqhpp4g094] {
    flex: 0 0 50%;
    max-width: 50%;
}
    .page-title[b-oqhpp4g094]  {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

/* Card styling with glass effect */
.glass-card[b-oqhpp4g094] {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

    .glass-card:hover[b-oqhpp4g094] {
        transform: translateY(-5px);
        box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.4);
        background: rgba(255, 255, 255, 0.95);
    }

.glass-card-header[b-oqhpp4g094] {
    background: rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 20px 20px 0 0 !important;
    color: #1e1e2f;
    font-weight: 600;
    padding: 1rem 1.5rem;
}

    .glass-card-header h5[b-oqhpp4g094] {
        margin: 0;
        color: #1e1e2f;
        font-weight: 700;
    }

.glass-card-body[b-oqhpp4g094] {
    background: transparent;
    color: #1e1e2f;
    padding: 1.5rem;
}

/* Form controls */
.glass-label[b-oqhpp4g094] {
    color: #1e1e2f;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
}

.glass-input[b-oqhpp4g094] {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    color: #1e1e2f;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
    width: 100%;
}

    .glass-input:focus[b-oqhpp4g094] {
        background: white;
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        color: #1e1e2f;
        outline: none;
    }

    .glass-input[b-oqhpp4g094]::placeholder {
        color: #6c757d;
    }

/* Button styling */
.glass-button[b-oqhpp4g094] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 10px;
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

    .glass-button:hover:not(:disabled)[b-oqhpp4g094] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.3);
        background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    }

    .glass-button:disabled[b-oqhpp4g094] {
        background: rgba(0, 0, 0, 0.2);
        color: rgba(255, 255, 255, 0.5);
        cursor: not-allowed;
    }

/* Stats cards */
.stat-card[b-oqhpp4g094] {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    padding: 1.5rem;
    color: #1e1e2f;
}

    .stat-card:hover[b-oqhpp4g094] {
        transform: translateY(-5px);
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.3);
    }

.stat-card-title[b-oqhpp4g094] {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    color: #4a5568;
}

.stat-card-value[b-oqhpp4g094] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1e1e2f;
}

/* Table styling */
.glass-table-container[b-oqhpp4g094] {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.glass-table[b-oqhpp4g094] {
    width: 100%;
    margin-bottom: 0;
    color: #1e1e2f;
}

    .glass-table thead[b-oqhpp4g094] {
        background: rgba(0, 0, 0, 0.05);
    }

    .glass-table th[b-oqhpp4g094] {
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 2px solid rgba(0, 0, 0, 0.1);
        color: #1e1e2f;
        padding: 1rem;
    }

    .glass-table td[b-oqhpp4g094] {
        color: #1e1e2f;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        padding: 1rem;
    }

    .glass-table tbody tr[b-oqhpp4g094] {
        transition: all 0.3s ease;
    }

        .glass-table tbody tr:hover[b-oqhpp4g094] {
            background: rgba(255, 255, 255, 0.5) !important;
        }

/* Badge styling */
.glass-badge[b-oqhpp4g094] {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    display: inline-block;
}

.badge-completed[b-oqhpp4g094] {
    background: #28a745;
    color: white;
}

.badge-inprogress[b-oqhpp4g094] {
    background: #17a2b8;
    color: white;
}

.badge-failed[b-oqhpp4g094] {
    background: #dc3545;
    color: white;
}

.badge-pending[b-oqhpp4g094] {
    background: #ffc107;
    color: #1e1e2f;
}

/* Alert styling */
.glass-alert[b-oqhpp4g094] {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    color: #1e1e2f;
    font-weight: 500;
    padding: 1rem;
}

.alert-success[b-oqhpp4g094] {
    background: #d4edda !important;
    color: #155724 !important;
    border-color: #c3e6cb !important;
}

.alert-danger[b-oqhpp4g094] {
    background: #f8d7da !important;
    color: #721c24 !important;
    border-color: #f5c6cb !important;
}

.alert-info[b-oqhpp4g094] {
    background: #d1ecf1 !important;
    color: #0c5460 !important;
    border-color: #bee5eb !important;
}

/* Loading text */
.glass-loading[b-oqhpp4g094] {
    color: #1e1e2f;
    font-size: 1.2rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.9);
    padding: 2rem;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    text-align: center;
}

/* Spinner */
.spinner-border[b-oqhpp4g094] {
    width: 1.5rem;
    height: 1.5rem;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin-b-oqhpp4g094 1s ease-in-out infinite;
    display: inline-block;
    margin-right: 0.5rem;
}

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

/* Progress bar */
.glass-progress[b-oqhpp4g094] {
    height: 6px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    margin-left: 0.5rem;
    flex-grow: 1;
}

.glass-progress-bar[b-oqhpp4g094] {
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Layout & Grid System */
.container-fluid[b-oqhpp4g094] {
    max-width: 1400px;
    margin: 0 auto;
}

.row[b-oqhpp4g094] {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.75rem;
    margin-left: -0.75rem;
}

/* Column Classes */
.col-half[b-oqhpp4g094] {
    flex: 0 0 50%;
    max-width: 50%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    box-sizing: border-box;
}

.col-full[b-oqhpp4g094] {
    flex: 0 0 100%;
    max-width: 100%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    box-sizing: border-box;
}

.col-md-3[b-oqhpp4g094] {
    flex: 0 0 25%;
    max-width: 25%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    box-sizing: border-box;
}

.col-md-4[b-oqhpp4g094] {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    box-sizing: border-box;
}

.col-md-6[b-oqhpp4g094] {
    flex: 0 0 50%;
    max-width: 50%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    box-sizing: border-box;
}

.col-md-12[b-oqhpp4g094] {
    flex: 0 0 100%;
    max-width: 100%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    box-sizing: border-box;
}

/* Gap utility */
.g-3[b-oqhpp4g094] {
    gap: 1rem;
}

/* Margin Utilities */
.mb-0[b-oqhpp4g094] {
    margin-bottom: 0 !important;
}

.mb-4[b-oqhpp4g094] {
    margin-bottom: 1.5rem !important;
}

.mt-3[b-oqhpp4g094] {
    margin-top: 1rem !important;
}

.mx-auto[b-oqhpp4g094] {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Padding Utilities */
.py-4[b-oqhpp4g094] {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

/* Width Utilities */
.w-100[b-oqhpp4g094] {
    width: 100% !important;
}

/* Flexbox Utilities */
.d-flex[b-oqhpp4g094] {
    display: flex !important;
}

.align-items-center[b-oqhpp4g094] {
    align-items: center !important;
}

.align-items-end[b-oqhpp4g094] {
    align-items: flex-end !important;
}

.flex-grow-1[b-oqhpp4g094] {
    flex-grow: 1 !important;
}

.flex-wrap[b-oqhpp4g094] {
    flex-wrap: wrap !important;
}

/* Spacing Utilities */
.me-2[b-oqhpp4g094] {
    margin-right: 0.5rem !important;
}

.ms-2[b-oqhpp4g094] {
    margin-left: 0.5rem !important;
}

/* Text Utilities */
.text-white[b-oqhpp4g094] {
    color: white !important;
}

.text-dark[b-oqhpp4g094] {
    color: #1e1e2f !important;
}
.dashboard-title-icon[b-oqhpp4g094] {
    color: initial !important;
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    -webkit-text-fill-color: initial !important;
    background: none !important;
    text-shadow: none !important;
}
.migration-grid[b-oqhpp4g094] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
.title-emoji[b-oqhpp4g094] {
    color: inherit !important; /* or color: initial !important; */
    filter: none !important; /* Removes any color filters */
    -webkit-filter: none !important;
}

    /* Or more specifically targeting emojis */
    .title-emoji img[b-oqhpp4g094],
    .title-emoji span[b-oqhpp4g094],
    .title-emoji[b-oqhpp4g094] {
        font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "EmojiOne Color", "Android Emoji", "EmojiSymbols", sans-serif;
        color: initial;
    }
/* _content/ZenZonApp/Components/Admin/AdminDashboard.razor.rz.scp.css */
/* =============================================
   ZenZonApp Admin Dashboard — Component Styles
   ============================================= */

/* --- Layout --- */
.admin-dashboard[b-52wavp1nfy] {
    padding: 1.5rem 2rem;
    width: 100%;
    box-sizing: border-box;
}

/* --- Header --- */
.dashboard-header[b-52wavp1nfy] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.75rem;
}

.admin-page-title[b-52wavp1nfy] {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a1f2e;
    margin: 0 0 0.25rem 0;
    letter-spacing: -0.02em;
}

.dashboard-subtitle[b-52wavp1nfy] {
    font-size: 0.875rem;
    color: #7c8591;
    margin: 0;
}

.header-actions[b-52wavp1nfy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.last-updated[b-52wavp1nfy] {
    font-size: 0.78rem;
    color: #adb5bd;
    white-space: nowrap;
}

.btn-refresh[b-52wavp1nfy] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s ease;
}

    .btn-refresh:hover:not(:disabled)[b-52wavp1nfy] {
        border-color: #4f6ef7;
        color: #4f6ef7;
        background: #f0f3ff;
    }

    .btn-refresh:disabled[b-52wavp1nfy] {
        opacity: 0.5;
        cursor: default;
    }

    .btn-refresh.spinning i[b-52wavp1nfy] {
        animation: spin-b-52wavp1nfy 0.8s linear infinite;
    }

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

/* --- Stat Cards --- */
.admin-stats-row[b-52wavp1nfy] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.admin-stat-card[b-52wavp1nfy] {
    background: #fff;
    border-radius: 14px;
    border: 1.5px solid #eef0f4;
    padding: 1.25rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

    .admin-stat-card:hover[b-52wavp1nfy] {
        box-shadow: 0 4px 20px rgba(0,0,0,0.07);
        transform: translateY(-1px);
    }

.stat-icon-wrap[b-52wavp1nfy] {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .stat-icon-wrap.default[b-52wavp1nfy] {
        background: #f0f3ff;
        color: #4f6ef7;
    }

    .stat-icon-wrap.success[b-52wavp1nfy] {
        background: #ecfdf5;
        color: #10b981;
    }

    .stat-icon-wrap.danger[b-52wavp1nfy] {
        background: #fff1f2;
        color: #ef4444;
    }

    .stat-icon-wrap.warning[b-52wavp1nfy] {
        background: #fffbeb;
        color: #f59e0b;
    }

    .stat-icon-wrap i[b-52wavp1nfy] {
        font-size: 1.4rem;
    }

.stat-content[b-52wavp1nfy] {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.stat-value[b-52wavp1nfy] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a1f2e;
    line-height: 1;
    letter-spacing: -0.03em;
}

.stat-label[b-52wavp1nfy] {
    font-size: 0.78rem;
    color: #94a3b8;
    margin-top: 0.25rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.stat-trend[b-52wavp1nfy] {
    color: #10b981;
    opacity: 0.6;
}

.stat-pill[b-52wavp1nfy] {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    margin-left: auto;
    flex-shrink: 0;
    align-self: flex-start;
}

    .stat-pill.success[b-52wavp1nfy] {
        background: #ecfdf5;
        color: #10b981;
    }

    .stat-pill.danger[b-52wavp1nfy] {
        background: #fff1f2;
        color: #ef4444;
    }

.pulse-dot[b-52wavp1nfy] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f59e0b;
    margin-left: auto;
    align-self: flex-start;
    flex-shrink: 0;
    animation: pulse-b-52wavp1nfy 1.5s ease-in-out infinite;
}

@keyframes pulse-b-52wavp1nfy {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(0.75);
    }
}

/* --- Health Bar --- */
.health-bar-section[b-52wavp1nfy] {
    background: #fff;
    border: 1.5px solid #eef0f4;
    border-radius: 14px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.75rem;
}

.health-bar-header[b-52wavp1nfy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
}

.health-label[b-52wavp1nfy] {
    font-size: 0.82rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.health-score[b-52wavp1nfy] {
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 6px;
    padding: 0.15rem 0.5rem;
}

    .health-score.health-good[b-52wavp1nfy] {
        color: #10b981;
        background: #ecfdf5;
    }

    .health-score.health-warn[b-52wavp1nfy] {
        color: #f59e0b;
        background: #fffbeb;
    }

    .health-score.health-bad[b-52wavp1nfy] {
        color: #ef4444;
        background: #fff1f2;
    }

.health-bar-track[b-52wavp1nfy] {
    height: 8px;
    background: #f1f5f9;
    border-radius: 999px;
    display: flex;
    overflow: hidden;
    gap: 2px;
}

.health-bar-fill[b-52wavp1nfy] {
    height: 100%;
    border-radius: 999px;
    transition: width 0.6s ease;
}

    .health-bar-fill.success[b-52wavp1nfy] {
        background: #10b981;
    }

    .health-bar-fill.warning[b-52wavp1nfy] {
        background: #f59e0b;
    }

    .health-bar-fill.danger[b-52wavp1nfy] {
        background: #ef4444;
    }

.health-bar-legend[b-52wavp1nfy] {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

    .health-bar-legend span[b-52wavp1nfy] {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.75rem;
        color: #94a3b8;
    }

.legend-dot[b-52wavp1nfy] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

    .legend-dot.success[b-52wavp1nfy] {
        background: #10b981;
    }

    .legend-dot.warning[b-52wavp1nfy] {
        background: #f59e0b;
    }

    .legend-dot.danger[b-52wavp1nfy] {
        background: #ef4444;
    }

/* --- Section Title --- */
.admin-section-title[b-52wavp1nfy] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.85rem 0;
}

.section-header-row[b-52wavp1nfy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}

    .section-header-row .admin-section-title[b-52wavp1nfy] {
        margin-bottom: 0;
    }

.view-all-link[b-52wavp1nfy] {
    display: flex;
    align-items: center;
    font-size: 0.82rem;
    color: #4f6ef7;
    text-decoration: none;
    font-weight: 600;
    gap: 0.1rem;
    transition: gap 0.2s ease;
}

    .view-all-link:hover[b-52wavp1nfy] {
        gap: 0.3rem;
    }

    .view-all-link i[b-52wavp1nfy] {
        font-size: 1rem;
    }

/* --- Quick Action Cards --- */
.admin-quick-links[b-52wavp1nfy] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.admin-quick-card[b-52wavp1nfy] {
    background: #fff;
    border: 1.5px solid #eef0f4;
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

    .admin-quick-card:hover[b-52wavp1nfy] {
        border-color: #4f6ef7;
        box-shadow: 0 4px 18px rgba(79, 110, 247, 0.1);
        transform: translateY(-1px);
    }

        .admin-quick-card:hover .quick-arrow[b-52wavp1nfy] {
            transform: translateX(4px);
        }

    .admin-quick-card.danger-card:hover[b-52wavp1nfy] {
        border-color: #ef4444;
        box-shadow: 0 4px 18px rgba(239, 68, 68, 0.1);
    }

.quick-card-icon[b-52wavp1nfy] {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #f0f3ff;
    color: #4f6ef7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .quick-card-icon.danger[b-52wavp1nfy] {
        background: #fff1f2;
        color: #ef4444;
    }

    .quick-card-icon i[b-52wavp1nfy] {
        font-size: 1.25rem;
    }

.quick-card-body[b-52wavp1nfy] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.quick-card-title[b-52wavp1nfy] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1f2e;
}

.quick-card-desc[b-52wavp1nfy] {
    font-size: 0.78rem;
    color: #94a3b8;
    line-height: 1.35;
}

.quick-arrow[b-52wavp1nfy] {
    font-size: 1.1rem;
    color: #cbd5e1;
    flex-shrink: 0;
    transition: transform 0.2s ease, color 0.2s ease;
}

.admin-quick-card:hover .quick-arrow[b-52wavp1nfy] {
    color: #4f6ef7;
}

/* --- Table Card --- */
.admin-table-card[b-52wavp1nfy] {
    background: #fff;
    border: 1.5px solid #eef0f4;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 2rem;
}

.admin-table[b-52wavp1nfy] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

    .admin-table thead th[b-52wavp1nfy] {
        padding: 0.85rem 1.25rem;
        text-align: left;
        font-size: 0.75rem;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        background: #f8fafc;
        border-bottom: 1.5px solid #eef0f4;
    }

    .admin-table tbody tr[b-52wavp1nfy] {
        border-bottom: 1px solid #f1f5f9;
        transition: background 0.15s ease;
    }

        .admin-table tbody tr:last-child[b-52wavp1nfy] {
            border-bottom: none;
        }

        .admin-table tbody tr:hover[b-52wavp1nfy] {
            background: #fafbff;
        }

    .admin-table td[b-52wavp1nfy] {
        padding: 0.9rem 1.25rem;
        color: #334155;
        vertical-align: middle;
    }

.clinic-cell[b-52wavp1nfy] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.clinic-avatar[b-52wavp1nfy] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.progress-cell[b-52wavp1nfy] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.mini-progress-track[b-52wavp1nfy] {
    width: 80px;
    height: 6px;
    background: #f1f5f9;
    border-radius: 999px;
    overflow: hidden;
    flex-shrink: 0;
}

.mini-progress-fill[b-52wavp1nfy] {
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s ease;
}

    .mini-progress-fill.badge-success[b-52wavp1nfy] {
        background: #10b981;
    }

    .mini-progress-fill.badge-warning[b-52wavp1nfy] {
        background: #f59e0b;
    }

    .mini-progress-fill.badge-danger[b-52wavp1nfy] {
        background: #ef4444;
    }

    .mini-progress-fill.badge-muted[b-52wavp1nfy] {
        background: #cbd5e1;
    }

.progress-text[b-52wavp1nfy] {
    font-size: 0.78rem;
    color: #94a3b8;
    white-space: nowrap;
}

.date-cell[b-52wavp1nfy] {
    color: #64748b;
    font-size: 0.82rem;
}

/* --- Badges --- */
.admin-badge[b-52wavp1nfy] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-icon[b-52wavp1nfy] {
    font-size: 0.85rem !important;
}

.badge-success[b-52wavp1nfy] {
    background: #ecfdf5;
    color: #059669;
}

.badge-danger[b-52wavp1nfy] {
    background: #fff1f2;
    color: #dc2626;
}

.badge-warning[b-52wavp1nfy] {
    background: #fffbeb;
    color: #d97706;
}

.badge-muted[b-52wavp1nfy] {
    background: #f1f5f9;
    color: #64748b;
}

/* --- Icon Button --- */
.btn-icon[b-52wavp1nfy] {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

    .btn-icon:hover[b-52wavp1nfy] {
        background: #f0f3ff;
        color: #4f6ef7;
    }

    .btn-icon i[b-52wavp1nfy] {
        font-size: 1.05rem;
    }

/* --- Empty State --- */
.empty-state[b-52wavp1nfy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    gap: 0.75rem;
}

.empty-icon[b-52wavp1nfy] {
    font-size: 2.5rem !important;
    color: #cbd5e1;
}

.btn-start-migration[b-52wavp1nfy] {
    margin-top: 0.25rem;
    padding: 0.5rem 1.25rem;
    background: #4f6ef7;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: background 0.2s ease;
}

    .btn-start-migration:hover[b-52wavp1nfy] {
        background: #3b5ee8;
    }

/* --- Loading State --- */
.table-loading[b-52wavp1nfy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem;
    gap: 0.75rem;
}

.loading-spinner[b-52wavp1nfy] {
    width: 28px;
    height: 28px;
    border: 3px solid #e2e8f0;
    border-top-color: #4f6ef7;
    border-radius: 50%;
    animation: spin-b-52wavp1nfy 0.7s linear infinite;
}

.admin-muted[b-52wavp1nfy] {
    color: #94a3b8;
    font-size: 0.875rem;
    margin: 0;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .admin-stats-row[b-52wavp1nfy] {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-quick-links[b-52wavp1nfy] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .admin-dashboard[b-52wavp1nfy] {
        padding: 1rem;
    }

    .admin-stats-row[b-52wavp1nfy] {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .dashboard-header[b-52wavp1nfy] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .admin-table thead th:nth-child(4)[b-52wavp1nfy],
    .admin-table td:nth-child(4)[b-52wavp1nfy] {
        display: none;
    }
}
/* _content/ZenZonApp/Components/Admin/AdminLayout.razor.rz.scp.css */
/* ── Full-viewport shell ── */
.admin-wrapper[b-hasvp3mevu] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    background: #f5f6fa;
}

/* ── Top bar: spans full width ── */
.admin-topbar[b-hasvp3mevu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    height: 56px;
    min-height: 56px;
    background: #ffffff;
    border-bottom: 1px solid #e8eaf0;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
}

.admin-topbar-right[b-hasvp3mevu] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.admin-topbar-title[b-hasvp3mevu] {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1a1f2e;
}

.admin-topbar-user[b-hasvp3mevu] {
    font-size: 0.85rem;
    color: #6b7280;
}

.admin-home-btn[b-hasvp3mevu] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: #4f6ef7;
    text-decoration: none;
    font-weight: 500;
}

    .admin-home-btn:hover[b-hasvp3mevu] {
        text-decoration: underline;
    }

/* ── Content area: fills remaining height, full width ── */
.admin-content[b-hasvp3mevu] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.5rem 2rem;
    width: 100%;
    box-sizing: border-box;
}
/* _content/ZenZonApp/Components/Admin/AdminLogin.razor.rz.scp.css */
/* Force landing-root to cover full viewport for the login page */
:global(.landing-root):has(.admin-login-wrapper)[b-o39quxym94] {
    min-height: 100vh;
    display: flex;
    margin: 0;
    padding: 0;
}

*[b-o39quxym94] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.admin-login-wrapper[b-o39quxym94] {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    /* Dark blue gradient background */
    background: linear-gradient(135deg, #060d1f 0%, #0d1b3e 50%, #0a1628 100%);
    font-family: 'Inter', sans-serif;
}

.admin-login-box[b-o39quxym94] {
    width: 100%;
    max-width: 420px;
    background: rgba(13, 27, 62, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 24px;
    border: 1px solid rgba(99, 140, 255, 0.15);
    box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(99, 140, 255, 0.05);
    padding: 2.5rem;
}

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

.admin-logo[b-o39quxym94] {
    width: 70px;
    height: 70px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, #3b5bdb, #6c5ce7);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    box-shadow: 0 12px 24px -8px rgba(108, 92, 231, 0.5);
}

.admin-login-header h1[b-o39quxym94] {
    color: #e8eeff;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    letter-spacing: -0.5px;
}

.admin-login-header p[b-o39quxym94] {
    color: #7b93c9;
    font-size: 0.9rem;
}

/* ── Error alert ── */
.admin-alert-error[b-o39quxym94] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    color: #fca5a5;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .admin-alert-error i[b-o39quxym94] {
        color: #ef4444;
    }

/* ── Form ── */
.admin-form[b-o39quxym94] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.admin-field[b-o39quxym94] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .admin-field label[b-o39quxym94] {
        color: #a8bddf;
        font-size: 0.875rem;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

        .admin-field label i[b-o39quxym94] {
            color: #6c8fff;
            width: 16px;
            font-size: 0.85rem;
        }

.admin-input[b-o39quxym94] {
    width: 100%;
    padding: 0.85rem 1.25rem;
    background: rgba(6, 13, 31, 0.6);
    border: 1px solid rgba(99, 140, 255, 0.2);
    border-radius: 12px;
    color: #e8eeff;
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .admin-input:focus[b-o39quxym94] {
        outline: none;
        border-color: #6c8fff;
        box-shadow: 0 0 0 3px rgba(108, 143, 255, 0.12);
        background: rgba(6, 13, 31, 0.8);
    }

    .admin-input[b-o39quxym94]::placeholder {
        color: #3a4f72;
    }

/* ── Submit button ── */
.admin-login-btn[b-o39quxym94] {
    margin-top: 0.5rem;
    padding: 0.9rem;
    background: linear-gradient(135deg, #3b5bdb, #6c5ce7);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    letter-spacing: 0.01em;
}

    .admin-login-btn:hover[b-o39quxym94] {
        opacity: 0.92;
        transform: translateY(-2px);
        box-shadow: 0 12px 24px -8px rgba(108, 92, 231, 0.5);
    }

    .admin-login-btn:active[b-o39quxym94] {
        transform: translateY(0);
    }

/* ── Footer ── */
.admin-login-footer[b-o39quxym94] {
    margin-top: 2rem;
    text-align: center;
    color: #3a4f72;
    font-size: 0.8rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(99, 140, 255, 0.08);
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .admin-login-box[b-o39quxym94] {
        padding: 1.75rem 1.25rem;
    }
}
/* _content/ZenZonApp/Components/Admin/Importer/MigrationImporter.razor.rz.scp.css */
/* glass-morphism.css - Add to your main stylesheet */

:root[b-839s3fs2rb] {
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-bg-dark: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    --glass-blur: blur(10px);
    --glass-border-radius: 16px;
    --primary-glass: linear-gradient(135deg, rgba(106, 17, 203, 0.1) 0%, rgba(37, 117, 252, 0.1) 100%);
    --success-glass: linear-gradient(135deg, rgba(0, 201, 167, 0.1) 0%, rgba(0, 184, 124, 0.1) 100%);
    --warning-glass: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 145, 0, 0.1) 100%);
    --danger-glass: linear-gradient(135deg, rgba(255, 71, 87, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);
}

/* Base glass effect */
.glass-card[b-839s3fs2rb] {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-border-radius);
    box-shadow: var(--glass-shadow);
    transition: all 0.3s ease;
}

    .glass-card:hover[b-839s3fs2rb] {
        background: var(--glass-bg-dark);
        box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.25);
        transform: translateY(-2px);
    }

.glass-card-header[b-839s3fs2rb] {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--glass-border-radius) var(--glass-border-radius) 0 0 !important;
    padding: 1rem 1.5rem;
}

.glass-card-footer[b-839s3fs2rb] {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0 0 var(--glass-border-radius) var(--glass-border-radius) !important;
    padding: 1rem 1.5rem;
}

/* Glass inputs */
.glass-input[b-839s3fs2rb] {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
    color: #2c3e50;
}

    .glass-input:focus[b-839s3fs2rb] {
        background: rgba(255, 255, 255, 0.8);
        border-color: rgba(106, 17, 203, 0.5);
        box-shadow: 0 0 0 4px rgba(106, 17, 203, 0.1);
        outline: none;
    }

    .glass-input:hover[b-839s3fs2rb] {
        background: rgba(255, 255, 255, 0.7);
    }

.glass-label[b-839s3fs2rb] {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #4a5568;
    margin-bottom: 0.25rem;
    display: block;
}

/* Glass buttons */
.glass-btn-primary[b-839s3fs2rb] {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 0.6rem 1.5rem;
    font-weight: 500;
    box-shadow: 0 4px 15px rgba(37, 117, 252, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .glass-btn-primary[b-839s3fs2rb]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.5s ease;
    }

    .glass-btn-primary:hover[b-839s3fs2rb]::before {
        left: 100%;
    }

    .glass-btn-primary:hover[b-839s3fs2rb] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(37, 117, 252, 0.4);
    }

.glass-btn-outline[b-839s3fs2rb] {
    background: transparent;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 0.6rem 1.5rem;
    color: #2c3e50;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .glass-btn-outline:hover[b-839s3fs2rb] {
        background: rgba(255, 255, 255, 0.3);
        border-color: #6a11cb;
        color: #6a11cb;
        transform: translateY(-1px);
    }

/* Glass stepper */
.glass-stepper[b-839s3fs2rb] {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 100px;
    padding: 0.5rem;
    box-shadow: var(--glass-shadow);
}

.glass-step-item[b-839s3fs2rb] {
    position: relative;
    padding: 0.5rem 1rem;
    border-radius: 100px;
    transition: all 0.3s ease;
}

.glass-step-active[b-839s3fs2rb] {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(106, 17, 203, 0.3);
}

.glass-step-done[b-839s3fs2rb] {
    background: linear-gradient(135deg, #00c9a7 0%, #00b894 100%);
    color: white;
}

.glass-step-pending[b-839s3fs2rb] {
    background: rgba(255, 255, 255, 0.3);
    color: #2c3e50;
}

.glass-step-circle[b-839s3fs2rb] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin: 0 auto;
    background: inherit;
    border: 2px solid currentColor;
}

/* Glass table */
.glass-table-container[b-839s3fs2rb] {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--glass-border-radius);
    overflow: hidden;
    box-shadow: var(--glass-shadow);
}

.glass-table[b-839s3fs2rb] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .glass-table thead th[b-839s3fs2rb] {
        background: rgba(255, 255, 255, 0.5);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        padding: 1rem;
        font-weight: 600;
        color: #2c3e50;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    }

    .glass-table tbody tr[b-839s3fs2rb] {
        transition: all 0.2s ease;
    }

        .glass-table tbody tr:hover[b-839s3fs2rb] {
            background: rgba(255, 255, 255, 0.3);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
        }

    .glass-table td[b-839s3fs2rb] {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

/* Glass dropzone */
.glass-dropzone[b-839s3fs2rb] {
    background: linear-gradient(135deg, rgba(106, 17, 203, 0.05) 0%, rgba(37, 117, 252, 0.05) 100%);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 2px dashed rgba(106, 17, 203, 0.3);
    border-radius: 24px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .glass-dropzone:hover[b-839s3fs2rb] {
        border-color: #6a11cb;
        background: linear-gradient(135deg, rgba(106, 17, 203, 0.1) 0%, rgba(37, 117, 252, 0.1) 100%);
    }

    .glass-dropzone.drag-over[b-839s3fs2rb] {
        border-color: #00c9a7;
        background: linear-gradient(135deg, rgba(0, 201, 167, 0.1) 0%, rgba(0, 184, 124, 0.1) 100%);
        transform: scale(1.02);
    }

.glass-dropzone-input[b-839s3fs2rb] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Glass progress bar */
.glass-progress[b-839s3fs2rb] {
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 100px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.glass-progress-bar[b-839s3fs2rb] {
    background: linear-gradient(90deg, #6a11cb, #2575fc);
    border-radius: 100px;
    position: relative;
    overflow: hidden;
}

    .glass-progress-bar[b-839s3fs2rb]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        animation: shimmer-b-839s3fs2rb 2s infinite;
    }

/* Glass alert */
.glass-alert[b-839s3fs2rb] {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.glass-alert-success[b-839s3fs2rb] {
    background: linear-gradient(135deg, rgba(0, 201, 167, 0.2) 0%, rgba(0, 184, 124, 0.2) 100%);
    border-left: 4px solid #00c9a7;
}

.glass-alert-warning[b-839s3fs2rb] {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2) 0%, rgba(255, 145, 0, 0.2) 100%);
    border-left: 4px solid #ffc107;
}

.glass-alert-danger[b-839s3fs2rb] {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.2) 0%, rgba(220, 38, 38, 0.2) 100%);
    border-left: 4px solid #ff4757;
}

/* Glass badge */
.glass-badge[b-839s3fs2rb] {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    padding: 0.35rem 0.65rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-badge-success[b-839s3fs2rb] {
    background: linear-gradient(135deg, rgba(0, 201, 167, 0.3) 0%, rgba(0, 184, 124, 0.3) 100%);
    color: #006b4d;
}

.glass-badge-warning[b-839s3fs2rb] {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.3) 0%, rgba(255, 145, 0, 0.3) 100%);
    color: #8b5e00;
}

.glass-badge-danger[b-839s3fs2rb] {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.3) 0%, rgba(220, 38, 38, 0.3) 100%);
    color: #8b0000;
}

.glass-badge-info[b-839s3fs2rb] {
    background: linear-gradient(135deg, rgba(23, 162, 184, 0.3) 0%, rgba(0, 139, 139, 0.3) 100%);
    color: #005662;
}

/* Glass pagination */
.glass-pagination[b-839s3fs2rb] {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 100px;
    padding: 0.25rem;
    background: rgba(255, 255, 255, 0.3);
}

    .glass-pagination .page-item .page-link[b-839s3fs2rb] {
        background: transparent;
        border: none;
        color: #2c3e50;
        border-radius: 100px;
        margin: 0 2px;
        padding: 0.5rem 1rem;
        transition: all 0.3s ease;
    }

    .glass-pagination .page-item.active .page-link[b-839s3fs2rb] {
        background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(106, 17, 203, 0.3);
    }

    .glass-pagination .page-item .page-link:hover[b-839s3fs2rb] {
        background: rgba(255, 255, 255, 0.5);
        transform: translateY(-1px);
    }

/* Glass navigation */
.glass-nav[b-839s3fs2rb] {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 100px;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.3);
}

.glass-nav-link[b-839s3fs2rb] {
    border-radius: 100px;
    padding: 0.5rem 1.25rem;
    color: #2c3e50;
    transition: all 0.3s ease;
    text-decoration: none;
    font-weight: 500;
}

    .glass-nav-link:hover[b-839s3fs2rb] {
        background: rgba(255, 255, 255, 0.5);
        color: #6a11cb;
    }

    .glass-nav-link.active[b-839s3fs2rb] {
        background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(106, 17, 203, 0.3);
    }

/* Glass select */
.glass-select[b-839s3fs2rb] {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 0.5rem 2rem 0.5rem 1rem;
    transition: all 0.3s ease;
    color: #2c3e50;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232c3e50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px;
}

    .glass-select:focus[b-839s3fs2rb] {
        background-color: rgba(255, 255, 255, 0.8);
        border-color: #6a11cb;
        box-shadow: 0 0 0 4px rgba(106, 17, 203, 0.1);
        outline: none;
    }

    .glass-select:hover[b-839s3fs2rb] {
        background-color: rgba(255, 255, 255, 0.7);
    }

/* Glass checkbox */
.glass-checkbox[b-839s3fs2rb] {
    width: 1.2rem;
    height: 1.2rem;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

    .glass-checkbox:checked[b-839s3fs2rb] {
        background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        border-color: transparent;
    }

        .glass-checkbox:checked[b-839s3fs2rb]::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 0.8rem;
        }

/* Animations */
@keyframes shimmer-b-839s3fs2rb {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes glass-pulse-b-839s3fs2rb {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

.glass-pulse[b-839s3fs2rb] {
    animation: glass-pulse-b-839s3fs2rb 2s infinite;
}

/* Glass spinner */
.glass-spinner[b-839s3fs2rb] {
    width: 3rem;
    height: 3rem;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #6a11cb;
    border-radius: 50%;
    animation: spin-b-839s3fs2rb 1s linear infinite;
}

@keyframes spin-b-839s3fs2rb {
    to {
        transform: rotate(360deg);
    }
}
/* _content/ZenZonApp/Components/Admin/Importer/_FieldMapper.razor.rz.scp.css */
/* glass-morphism.css - Add to your main stylesheet */

:root[b-e74oa6d7et] {
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-bg-dark: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    --glass-blur: blur(10px);
    --glass-border-radius: 16px;
    --primary-glass: linear-gradient(135deg, rgba(106, 17, 203, 0.1) 0%, rgba(37, 117, 252, 0.1) 100%);
    --success-glass: linear-gradient(135deg, rgba(0, 201, 167, 0.1) 0%, rgba(0, 184, 124, 0.1) 100%);
    --warning-glass: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 145, 0, 0.1) 100%);
    --danger-glass: linear-gradient(135deg, rgba(255, 71, 87, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);
}

/* Base glass effect */
.glass-card[b-e74oa6d7et] {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-border-radius);
    box-shadow: var(--glass-shadow);
    transition: all 0.3s ease;
}

    .glass-card:hover[b-e74oa6d7et] {
        background: var(--glass-bg-dark);
        box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.25);
        transform: translateY(-2px);
    }

.glass-card-header[b-e74oa6d7et] {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--glass-border-radius) var(--glass-border-radius) 0 0 !important;
    padding: 1rem 1.5rem;
}

.glass-card-footer[b-e74oa6d7et] {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0 0 var(--glass-border-radius) var(--glass-border-radius) !important;
    padding: 1rem 1.5rem;
}

/* Glass inputs */
.glass-input[b-e74oa6d7et] {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
    color: #2c3e50;
}

    .glass-input:focus[b-e74oa6d7et] {
        background: rgba(255, 255, 255, 0.8);
        border-color: rgba(106, 17, 203, 0.5);
        box-shadow: 0 0 0 4px rgba(106, 17, 203, 0.1);
        outline: none;
    }

    .glass-input:hover[b-e74oa6d7et] {
        background: rgba(255, 255, 255, 0.7);
    }

.glass-label[b-e74oa6d7et] {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #4a5568;
    margin-bottom: 0.25rem;
    display: block;
}

/* Glass buttons */
.glass-btn-primary[b-e74oa6d7et] {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 0.6rem 1.5rem;
    font-weight: 500;
    box-shadow: 0 4px 15px rgba(37, 117, 252, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .glass-btn-primary[b-e74oa6d7et]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.5s ease;
    }

    .glass-btn-primary:hover[b-e74oa6d7et]::before {
        left: 100%;
    }

    .glass-btn-primary:hover[b-e74oa6d7et] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(37, 117, 252, 0.4);
    }

.glass-btn-outline[b-e74oa6d7et] {
    background: transparent;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 0.6rem 1.5rem;
    color: #2c3e50;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .glass-btn-outline:hover[b-e74oa6d7et] {
        background: rgba(255, 255, 255, 0.3);
        border-color: #6a11cb;
        color: #6a11cb;
        transform: translateY(-1px);
    }

/* Glass stepper */
.glass-stepper[b-e74oa6d7et] {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 100px;
    padding: 0.5rem;
    box-shadow: var(--glass-shadow);
}

.glass-step-item[b-e74oa6d7et] {
    position: relative;
    padding: 0.5rem 1rem;
    border-radius: 100px;
    transition: all 0.3s ease;
}

.glass-step-active[b-e74oa6d7et] {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(106, 17, 203, 0.3);
}

.glass-step-done[b-e74oa6d7et] {
    background: linear-gradient(135deg, #00c9a7 0%, #00b894 100%);
    color: white;
}

.glass-step-pending[b-e74oa6d7et] {
    background: rgba(255, 255, 255, 0.3);
    color: #2c3e50;
}

.glass-step-circle[b-e74oa6d7et] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin: 0 auto;
    background: inherit;
    border: 2px solid currentColor;
}

/* Glass table */
.glass-table-container[b-e74oa6d7et] {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--glass-border-radius);
    overflow: hidden;
    box-shadow: var(--glass-shadow);
}

.glass-table[b-e74oa6d7et] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .glass-table thead th[b-e74oa6d7et] {
        background: rgba(255, 255, 255, 0.5);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        padding: 1rem;
        font-weight: 600;
        color: #2c3e50;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    }

    .glass-table tbody tr[b-e74oa6d7et] {
        transition: all 0.2s ease;
    }

        .glass-table tbody tr:hover[b-e74oa6d7et] {
            background: rgba(255, 255, 255, 0.3);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
        }

    .glass-table td[b-e74oa6d7et] {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

/* Glass dropzone */
.glass-dropzone[b-e74oa6d7et] {
    background: linear-gradient(135deg, rgba(106, 17, 203, 0.05) 0%, rgba(37, 117, 252, 0.05) 100%);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 2px dashed rgba(106, 17, 203, 0.3);
    border-radius: 24px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .glass-dropzone:hover[b-e74oa6d7et] {
        border-color: #6a11cb;
        background: linear-gradient(135deg, rgba(106, 17, 203, 0.1) 0%, rgba(37, 117, 252, 0.1) 100%);
    }

    .glass-dropzone.drag-over[b-e74oa6d7et] {
        border-color: #00c9a7;
        background: linear-gradient(135deg, rgba(0, 201, 167, 0.1) 0%, rgba(0, 184, 124, 0.1) 100%);
        transform: scale(1.02);
    }

.glass-dropzone-input[b-e74oa6d7et] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Glass progress bar */
.glass-progress[b-e74oa6d7et] {
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 100px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.glass-progress-bar[b-e74oa6d7et] {
    background: linear-gradient(90deg, #6a11cb, #2575fc);
    border-radius: 100px;
    position: relative;
    overflow: hidden;
}

    .glass-progress-bar[b-e74oa6d7et]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        animation: shimmer-b-e74oa6d7et 2s infinite;
    }

/* Glass alert */
.glass-alert[b-e74oa6d7et] {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.glass-alert-success[b-e74oa6d7et] {
    background: linear-gradient(135deg, rgba(0, 201, 167, 0.2) 0%, rgba(0, 184, 124, 0.2) 100%);
    border-left: 4px solid #00c9a7;
}

.glass-alert-warning[b-e74oa6d7et] {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2) 0%, rgba(255, 145, 0, 0.2) 100%);
    border-left: 4px solid #ffc107;
}

.glass-alert-danger[b-e74oa6d7et] {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.2) 0%, rgba(220, 38, 38, 0.2) 100%);
    border-left: 4px solid #ff4757;
}

/* Glass badge */
.glass-badge[b-e74oa6d7et] {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    padding: 0.35rem 0.65rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-badge-success[b-e74oa6d7et] {
    background: linear-gradient(135deg, rgba(0, 201, 167, 0.3) 0%, rgba(0, 184, 124, 0.3) 100%);
    color: #006b4d;
}

.glass-badge-warning[b-e74oa6d7et] {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.3) 0%, rgba(255, 145, 0, 0.3) 100%);
    color: #8b5e00;
}

.glass-badge-danger[b-e74oa6d7et] {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.3) 0%, rgba(220, 38, 38, 0.3) 100%);
    color: #8b0000;
}

.glass-badge-info[b-e74oa6d7et] {
    background: linear-gradient(135deg, rgba(23, 162, 184, 0.3) 0%, rgba(0, 139, 139, 0.3) 100%);
    color: #005662;
}

/* Glass pagination */
.glass-pagination[b-e74oa6d7et] {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 100px;
    padding: 0.25rem;
    background: rgba(255, 255, 255, 0.3);
}

    .glass-pagination .page-item .page-link[b-e74oa6d7et] {
        background: transparent;
        border: none;
        color: #2c3e50;
        border-radius: 100px;
        margin: 0 2px;
        padding: 0.5rem 1rem;
        transition: all 0.3s ease;
    }

    .glass-pagination .page-item.active .page-link[b-e74oa6d7et] {
        background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(106, 17, 203, 0.3);
    }

    .glass-pagination .page-item .page-link:hover[b-e74oa6d7et] {
        background: rgba(255, 255, 255, 0.5);
        transform: translateY(-1px);
    }

/* Glass navigation */
.glass-nav[b-e74oa6d7et] {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 100px;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.3);
}

.glass-nav-link[b-e74oa6d7et] {
    border-radius: 100px;
    padding: 0.5rem 1.25rem;
    color: #2c3e50;
    transition: all 0.3s ease;
    text-decoration: none;
    font-weight: 500;
}

    .glass-nav-link:hover[b-e74oa6d7et] {
        background: rgba(255, 255, 255, 0.5);
        color: #6a11cb;
    }

    .glass-nav-link.active[b-e74oa6d7et] {
        background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(106, 17, 203, 0.3);
    }

/* Glass select */
.glass-select[b-e74oa6d7et] {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 0.5rem 2rem 0.5rem 1rem;
    transition: all 0.3s ease;
    color: #2c3e50;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232c3e50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px;
}

    .glass-select:focus[b-e74oa6d7et] {
        background-color: rgba(255, 255, 255, 0.8);
        border-color: #6a11cb;
        box-shadow: 0 0 0 4px rgba(106, 17, 203, 0.1);
        outline: none;
    }

    .glass-select:hover[b-e74oa6d7et] {
        background-color: rgba(255, 255, 255, 0.7);
    }

/* Glass checkbox */
.glass-checkbox[b-e74oa6d7et] {
    width: 1.2rem;
    height: 1.2rem;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

    .glass-checkbox:checked[b-e74oa6d7et] {
        background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        border-color: transparent;
    }

        .glass-checkbox:checked[b-e74oa6d7et]::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 0.8rem;
        }

/* Animations */
@keyframes shimmer-b-e74oa6d7et {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes glass-pulse-b-e74oa6d7et {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

.glass-pulse[b-e74oa6d7et] {
    animation: glass-pulse-b-e74oa6d7et 2s infinite;
}

/* Glass spinner */
.glass-spinner[b-e74oa6d7et] {
    width: 3rem;
    height: 3rem;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #6a11cb;
    border-radius: 50%;
    animation: spin-b-e74oa6d7et 1s linear infinite;
}

@keyframes spin-b-e74oa6d7et {
    to {
        transform: rotate(360deg);
    }
}
/* _content/ZenZonApp/Components/Admin/Importer/_ImportPreview.razor.rz.scp.css */
/* glass-morphism.css - Add to your main stylesheet */

:root[b-jfm4czi8pt] {
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-bg-dark: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    --glass-blur: blur(10px);
    --glass-border-radius: 16px;
    --primary-glass: linear-gradient(135deg, rgba(106, 17, 203, 0.1) 0%, rgba(37, 117, 252, 0.1) 100%);
    --success-glass: linear-gradient(135deg, rgba(0, 201, 167, 0.1) 0%, rgba(0, 184, 124, 0.1) 100%);
    --warning-glass: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 145, 0, 0.1) 100%);
    --danger-glass: linear-gradient(135deg, rgba(255, 71, 87, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);
}

/* Base glass effect */
.glass-card[b-jfm4czi8pt] {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-border-radius);
    box-shadow: var(--glass-shadow);
    transition: all 0.3s ease;
}

    .glass-card:hover[b-jfm4czi8pt] {
        background: var(--glass-bg-dark);
        box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.25);
        transform: translateY(-2px);
    }

.glass-card-header[b-jfm4czi8pt] {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--glass-border-radius) var(--glass-border-radius) 0 0 !important;
    padding: 1rem 1.5rem;
}

.glass-card-footer[b-jfm4czi8pt] {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0 0 var(--glass-border-radius) var(--glass-border-radius) !important;
    padding: 1rem 1.5rem;
}

/* Glass inputs */
.glass-input[b-jfm4czi8pt] {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
    color: #2c3e50;
}

    .glass-input:focus[b-jfm4czi8pt] {
        background: rgba(255, 255, 255, 0.8);
        border-color: rgba(106, 17, 203, 0.5);
        box-shadow: 0 0 0 4px rgba(106, 17, 203, 0.1);
        outline: none;
    }

    .glass-input:hover[b-jfm4czi8pt] {
        background: rgba(255, 255, 255, 0.7);
    }

.glass-label[b-jfm4czi8pt] {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #4a5568;
    margin-bottom: 0.25rem;
    display: block;
}

/* Glass buttons */
.glass-btn-primary[b-jfm4czi8pt] {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 0.6rem 1.5rem;
    font-weight: 500;
    box-shadow: 0 4px 15px rgba(37, 117, 252, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .glass-btn-primary[b-jfm4czi8pt]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.5s ease;
    }

    .glass-btn-primary:hover[b-jfm4czi8pt]::before {
        left: 100%;
    }

    .glass-btn-primary:hover[b-jfm4czi8pt] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(37, 117, 252, 0.4);
    }

.glass-btn-outline[b-jfm4czi8pt] {
    background: transparent;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 0.6rem 1.5rem;
    color: #2c3e50;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .glass-btn-outline:hover[b-jfm4czi8pt] {
        background: rgba(255, 255, 255, 0.3);
        border-color: #6a11cb;
        color: #6a11cb;
        transform: translateY(-1px);
    }

/* Glass stepper */
.glass-stepper[b-jfm4czi8pt] {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 100px;
    padding: 0.5rem;
    box-shadow: var(--glass-shadow);
}

.glass-step-item[b-jfm4czi8pt] {
    position: relative;
    padding: 0.5rem 1rem;
    border-radius: 100px;
    transition: all 0.3s ease;
}

.glass-step-active[b-jfm4czi8pt] {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(106, 17, 203, 0.3);
}

.glass-step-done[b-jfm4czi8pt] {
    background: linear-gradient(135deg, #00c9a7 0%, #00b894 100%);
    color: white;
}

.glass-step-pending[b-jfm4czi8pt] {
    background: rgba(255, 255, 255, 0.3);
    color: #2c3e50;
}

.glass-step-circle[b-jfm4czi8pt] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin: 0 auto;
    background: inherit;
    border: 2px solid currentColor;
}

/* Glass table */
.glass-table-container[b-jfm4czi8pt] {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--glass-border-radius);
    overflow: hidden;
    box-shadow: var(--glass-shadow);
}

.glass-table[b-jfm4czi8pt] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .glass-table thead th[b-jfm4czi8pt] {
        background: rgba(255, 255, 255, 0.5);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        padding: 1rem;
        font-weight: 600;
        color: #2c3e50;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    }

    .glass-table tbody tr[b-jfm4czi8pt] {
        transition: all 0.2s ease;
    }

        .glass-table tbody tr:hover[b-jfm4czi8pt] {
            background: rgba(255, 255, 255, 0.3);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
        }

    .glass-table td[b-jfm4czi8pt] {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

/* Glass dropzone */
.glass-dropzone[b-jfm4czi8pt] {
    background: linear-gradient(135deg, rgba(106, 17, 203, 0.05) 0%, rgba(37, 117, 252, 0.05) 100%);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 2px dashed rgba(106, 17, 203, 0.3);
    border-radius: 24px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .glass-dropzone:hover[b-jfm4czi8pt] {
        border-color: #6a11cb;
        background: linear-gradient(135deg, rgba(106, 17, 203, 0.1) 0%, rgba(37, 117, 252, 0.1) 100%);
    }

    .glass-dropzone.drag-over[b-jfm4czi8pt] {
        border-color: #00c9a7;
        background: linear-gradient(135deg, rgba(0, 201, 167, 0.1) 0%, rgba(0, 184, 124, 0.1) 100%);
        transform: scale(1.02);
    }

.glass-dropzone-input[b-jfm4czi8pt] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Glass progress bar */
.glass-progress[b-jfm4czi8pt] {
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 100px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.glass-progress-bar[b-jfm4czi8pt] {
    background: linear-gradient(90deg, #6a11cb, #2575fc);
    border-radius: 100px;
    position: relative;
    overflow: hidden;
}

    .glass-progress-bar[b-jfm4czi8pt]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        animation: shimmer-b-jfm4czi8pt 2s infinite;
    }

/* Glass alert */
.glass-alert[b-jfm4czi8pt] {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.glass-alert-success[b-jfm4czi8pt] {
    background: linear-gradient(135deg, rgba(0, 201, 167, 0.2) 0%, rgba(0, 184, 124, 0.2) 100%);
    border-left: 4px solid #00c9a7;
}

.glass-alert-warning[b-jfm4czi8pt] {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2) 0%, rgba(255, 145, 0, 0.2) 100%);
    border-left: 4px solid #ffc107;
}

.glass-alert-danger[b-jfm4czi8pt] {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.2) 0%, rgba(220, 38, 38, 0.2) 100%);
    border-left: 4px solid #ff4757;
}

/* Glass badge */
.glass-badge[b-jfm4czi8pt] {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    padding: 0.35rem 0.65rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-badge-success[b-jfm4czi8pt] {
    background: linear-gradient(135deg, rgba(0, 201, 167, 0.3) 0%, rgba(0, 184, 124, 0.3) 100%);
    color: #006b4d;
}

.glass-badge-warning[b-jfm4czi8pt] {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.3) 0%, rgba(255, 145, 0, 0.3) 100%);
    color: #8b5e00;
}

.glass-badge-danger[b-jfm4czi8pt] {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.3) 0%, rgba(220, 38, 38, 0.3) 100%);
    color: #8b0000;
}

.glass-badge-info[b-jfm4czi8pt] {
    background: linear-gradient(135deg, rgba(23, 162, 184, 0.3) 0%, rgba(0, 139, 139, 0.3) 100%);
    color: #005662;
}

/* Glass pagination */
.glass-pagination[b-jfm4czi8pt] {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 100px;
    padding: 0.25rem;
    background: rgba(255, 255, 255, 0.3);
}

    .glass-pagination .page-item .page-link[b-jfm4czi8pt] {
        background: transparent;
        border: none;
        color: #2c3e50;
        border-radius: 100px;
        margin: 0 2px;
        padding: 0.5rem 1rem;
        transition: all 0.3s ease;
    }

    .glass-pagination .page-item.active .page-link[b-jfm4czi8pt] {
        background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(106, 17, 203, 0.3);
    }

    .glass-pagination .page-item .page-link:hover[b-jfm4czi8pt] {
        background: rgba(255, 255, 255, 0.5);
        transform: translateY(-1px);
    }

/* Glass navigation */
.glass-nav[b-jfm4czi8pt] {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 100px;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.3);
}

.glass-nav-link[b-jfm4czi8pt] {
    border-radius: 100px;
    padding: 0.5rem 1.25rem;
    color: #2c3e50;
    transition: all 0.3s ease;
    text-decoration: none;
    font-weight: 500;
}

    .glass-nav-link:hover[b-jfm4czi8pt] {
        background: rgba(255, 255, 255, 0.5);
        color: #6a11cb;
    }

    .glass-nav-link.active[b-jfm4czi8pt] {
        background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(106, 17, 203, 0.3);
    }

/* Glass select */
.glass-select[b-jfm4czi8pt] {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 0.5rem 2rem 0.5rem 1rem;
    transition: all 0.3s ease;
    color: #2c3e50;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232c3e50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px;
}

    .glass-select:focus[b-jfm4czi8pt] {
        background-color: rgba(255, 255, 255, 0.8);
        border-color: #6a11cb;
        box-shadow: 0 0 0 4px rgba(106, 17, 203, 0.1);
        outline: none;
    }

    .glass-select:hover[b-jfm4czi8pt] {
        background-color: rgba(255, 255, 255, 0.7);
    }

/* Glass checkbox */
.glass-checkbox[b-jfm4czi8pt] {
    width: 1.2rem;
    height: 1.2rem;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

    .glass-checkbox:checked[b-jfm4czi8pt] {
        background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        border-color: transparent;
    }

        .glass-checkbox:checked[b-jfm4czi8pt]::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 0.8rem;
        }

/* Animations */
@keyframes shimmer-b-jfm4czi8pt {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes glass-pulse-b-jfm4czi8pt {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

.glass-pulse[b-jfm4czi8pt] {
    animation: glass-pulse-b-jfm4czi8pt 2s infinite;
}

/* Glass spinner */
.glass-spinner[b-jfm4czi8pt] {
    width: 3rem;
    height: 3rem;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #6a11cb;
    border-radius: 50%;
    animation: spin-b-jfm4czi8pt 1s linear infinite;
}

@keyframes spin-b-jfm4czi8pt {
    to {
        transform: rotate(360deg);
    }
}
/* _content/ZenZonApp/Components/Admin/Importer/_ValidationReport.razor.rz.scp.css */
/* glass-morphism.css - Add to your main stylesheet */

:root[b-y4fgez1zc3] {
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-bg-dark: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    --glass-blur: blur(10px);
    --glass-border-radius: 16px;
    --primary-glass: linear-gradient(135deg, rgba(106, 17, 203, 0.1) 0%, rgba(37, 117, 252, 0.1) 100%);
    --success-glass: linear-gradient(135deg, rgba(0, 201, 167, 0.1) 0%, rgba(0, 184, 124, 0.1) 100%);
    --warning-glass: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 145, 0, 0.1) 100%);
    --danger-glass: linear-gradient(135deg, rgba(255, 71, 87, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);
}

/* Base glass effect */
.glass-card[b-y4fgez1zc3] {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-border-radius);
    box-shadow: var(--glass-shadow);
    transition: all 0.3s ease;
}

    .glass-card:hover[b-y4fgez1zc3] {
        background: var(--glass-bg-dark);
        box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.25);
        transform: translateY(-2px);
    }

.glass-card-header[b-y4fgez1zc3] {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--glass-border-radius) var(--glass-border-radius) 0 0 !important;
    padding: 1rem 1.5rem;
}

.glass-card-footer[b-y4fgez1zc3] {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0 0 var(--glass-border-radius) var(--glass-border-radius) !important;
    padding: 1rem 1.5rem;
}

/* Glass inputs */
.glass-input[b-y4fgez1zc3] {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
    color: #2c3e50;
}

    .glass-input:focus[b-y4fgez1zc3] {
        background: rgba(255, 255, 255, 0.8);
        border-color: rgba(106, 17, 203, 0.5);
        box-shadow: 0 0 0 4px rgba(106, 17, 203, 0.1);
        outline: none;
    }

    .glass-input:hover[b-y4fgez1zc3] {
        background: rgba(255, 255, 255, 0.7);
    }

.glass-label[b-y4fgez1zc3] {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #4a5568;
    margin-bottom: 0.25rem;
    display: block;
}

/* Glass buttons */
.glass-btn-primary[b-y4fgez1zc3] {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 0.6rem 1.5rem;
    font-weight: 500;
    box-shadow: 0 4px 15px rgba(37, 117, 252, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .glass-btn-primary[b-y4fgez1zc3]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.5s ease;
    }

    .glass-btn-primary:hover[b-y4fgez1zc3]::before {
        left: 100%;
    }

    .glass-btn-primary:hover[b-y4fgez1zc3] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(37, 117, 252, 0.4);
    }

.glass-btn-outline[b-y4fgez1zc3] {
    background: transparent;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 0.6rem 1.5rem;
    color: #2c3e50;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .glass-btn-outline:hover[b-y4fgez1zc3] {
        background: rgba(255, 255, 255, 0.3);
        border-color: #6a11cb;
        color: #6a11cb;
        transform: translateY(-1px);
    }

/* Glass stepper */
.glass-stepper[b-y4fgez1zc3] {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 100px;
    padding: 0.5rem;
    box-shadow: var(--glass-shadow);
}

.glass-step-item[b-y4fgez1zc3] {
    position: relative;
    padding: 0.5rem 1rem;
    border-radius: 100px;
    transition: all 0.3s ease;
}

.glass-step-active[b-y4fgez1zc3] {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(106, 17, 203, 0.3);
}

.glass-step-done[b-y4fgez1zc3] {
    background: linear-gradient(135deg, #00c9a7 0%, #00b894 100%);
    color: white;
}

.glass-step-pending[b-y4fgez1zc3] {
    background: rgba(255, 255, 255, 0.3);
    color: #2c3e50;
}

.glass-step-circle[b-y4fgez1zc3] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin: 0 auto;
    background: inherit;
    border: 2px solid currentColor;
}

/* Glass table */
.glass-table-container[b-y4fgez1zc3] {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--glass-border-radius);
    overflow: hidden;
    box-shadow: var(--glass-shadow);
}

.glass-table[b-y4fgez1zc3] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .glass-table thead th[b-y4fgez1zc3] {
        background: rgba(255, 255, 255, 0.5);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        padding: 1rem;
        font-weight: 600;
        color: #2c3e50;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    }

    .glass-table tbody tr[b-y4fgez1zc3] {
        transition: all 0.2s ease;
    }

        .glass-table tbody tr:hover[b-y4fgez1zc3] {
            background: rgba(255, 255, 255, 0.3);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
        }

    .glass-table td[b-y4fgez1zc3] {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

/* Glass dropzone */
.glass-dropzone[b-y4fgez1zc3] {
    background: linear-gradient(135deg, rgba(106, 17, 203, 0.05) 0%, rgba(37, 117, 252, 0.05) 100%);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 2px dashed rgba(106, 17, 203, 0.3);
    border-radius: 24px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .glass-dropzone:hover[b-y4fgez1zc3] {
        border-color: #6a11cb;
        background: linear-gradient(135deg, rgba(106, 17, 203, 0.1) 0%, rgba(37, 117, 252, 0.1) 100%);
    }

    .glass-dropzone.drag-over[b-y4fgez1zc3] {
        border-color: #00c9a7;
        background: linear-gradient(135deg, rgba(0, 201, 167, 0.1) 0%, rgba(0, 184, 124, 0.1) 100%);
        transform: scale(1.02);
    }

.glass-dropzone-input[b-y4fgez1zc3] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Glass progress bar */
.glass-progress[b-y4fgez1zc3] {
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 100px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.glass-progress-bar[b-y4fgez1zc3] {
    background: linear-gradient(90deg, #6a11cb, #2575fc);
    border-radius: 100px;
    position: relative;
    overflow: hidden;
}

    .glass-progress-bar[b-y4fgez1zc3]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        animation: shimmer-b-y4fgez1zc3 2s infinite;
    }

/* Glass alert */
.glass-alert[b-y4fgez1zc3] {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.glass-alert-success[b-y4fgez1zc3] {
    background: linear-gradient(135deg, rgba(0, 201, 167, 0.2) 0%, rgba(0, 184, 124, 0.2) 100%);
    border-left: 4px solid #00c9a7;
}

.glass-alert-warning[b-y4fgez1zc3] {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2) 0%, rgba(255, 145, 0, 0.2) 100%);
    border-left: 4px solid #ffc107;
}

.glass-alert-danger[b-y4fgez1zc3] {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.2) 0%, rgba(220, 38, 38, 0.2) 100%);
    border-left: 4px solid #ff4757;
}

/* Glass badge */
.glass-badge[b-y4fgez1zc3] {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    padding: 0.35rem 0.65rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-badge-success[b-y4fgez1zc3] {
    background: linear-gradient(135deg, rgba(0, 201, 167, 0.3) 0%, rgba(0, 184, 124, 0.3) 100%);
    color: #006b4d;
}

.glass-badge-warning[b-y4fgez1zc3] {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.3) 0%, rgba(255, 145, 0, 0.3) 100%);
    color: #8b5e00;
}

.glass-badge-danger[b-y4fgez1zc3] {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.3) 0%, rgba(220, 38, 38, 0.3) 100%);
    color: #8b0000;
}

.glass-badge-info[b-y4fgez1zc3] {
    background: linear-gradient(135deg, rgba(23, 162, 184, 0.3) 0%, rgba(0, 139, 139, 0.3) 100%);
    color: #005662;
}

/* Glass pagination */
.glass-pagination[b-y4fgez1zc3] {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 100px;
    padding: 0.25rem;
    background: rgba(255, 255, 255, 0.3);
}

    .glass-pagination .page-item .page-link[b-y4fgez1zc3] {
        background: transparent;
        border: none;
        color: #2c3e50;
        border-radius: 100px;
        margin: 0 2px;
        padding: 0.5rem 1rem;
        transition: all 0.3s ease;
    }

    .glass-pagination .page-item.active .page-link[b-y4fgez1zc3] {
        background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(106, 17, 203, 0.3);
    }

    .glass-pagination .page-item .page-link:hover[b-y4fgez1zc3] {
        background: rgba(255, 255, 255, 0.5);
        transform: translateY(-1px);
    }

/* Glass navigation */
.glass-nav[b-y4fgez1zc3] {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 100px;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.3);
}

.glass-nav-link[b-y4fgez1zc3] {
    border-radius: 100px;
    padding: 0.5rem 1.25rem;
    color: #2c3e50;
    transition: all 0.3s ease;
    text-decoration: none;
    font-weight: 500;
}

    .glass-nav-link:hover[b-y4fgez1zc3] {
        background: rgba(255, 255, 255, 0.5);
        color: #6a11cb;
    }

    .glass-nav-link.active[b-y4fgez1zc3] {
        background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(106, 17, 203, 0.3);
    }

/* Glass select */
.glass-select[b-y4fgez1zc3] {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 0.5rem 2rem 0.5rem 1rem;
    transition: all 0.3s ease;
    color: #2c3e50;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232c3e50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px;
}

    .glass-select:focus[b-y4fgez1zc3] {
        background-color: rgba(255, 255, 255, 0.8);
        border-color: #6a11cb;
        box-shadow: 0 0 0 4px rgba(106, 17, 203, 0.1);
        outline: none;
    }

    .glass-select:hover[b-y4fgez1zc3] {
        background-color: rgba(255, 255, 255, 0.7);
    }

/* Glass checkbox */
.glass-checkbox[b-y4fgez1zc3] {
    width: 1.2rem;
    height: 1.2rem;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

    .glass-checkbox:checked[b-y4fgez1zc3] {
        background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        border-color: transparent;
    }

        .glass-checkbox:checked[b-y4fgez1zc3]::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 0.8rem;
        }

/* Animations */
@keyframes shimmer-b-y4fgez1zc3 {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes glass-pulse-b-y4fgez1zc3 {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

.glass-pulse[b-y4fgez1zc3] {
    animation: glass-pulse-b-y4fgez1zc3 2s infinite;
}

/* Glass spinner */
.glass-spinner[b-y4fgez1zc3] {
    width: 3rem;
    height: 3rem;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #6a11cb;
    border-radius: 50%;
    animation: spin-b-y4fgez1zc3 1s linear infinite;
}

@keyframes spin-b-y4fgez1zc3 {
    to {
        transform: rotate(360deg);
    }
}
/* _content/ZenZonApp/Components/Admin/Migration.razor.rz.scp.css */
/* glass-morphism.css - Add to your main stylesheet */

:root[b-5s7bd7lvrh] {
    --glass-bg: rgba(255, 255, 255, 0.75);
    --glass-bg-dark: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.5);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    --glass-blur: blur(10px);
    --glass-border-radius: 16px;
    --primary-glass: linear-gradient(135deg, rgba(106, 17, 203, 0.1) 0%, rgba(37, 117, 252, 0.1) 100%);
    --success-glass: linear-gradient(135deg, rgba(0, 201, 167, 0.1) 0%, rgba(0, 184, 124, 0.1) 100%);
    --warning-glass: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 145, 0, 0.1) 100%);
    --danger-glass: linear-gradient(135deg, rgba(255, 71, 87, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);
}

/* Base glass effect */
.glass-card[b-5s7bd7lvrh] {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-border-radius);
    box-shadow: var(--glass-shadow);
    transition: all 0.3s ease;
}

    .glass-card:hover[b-5s7bd7lvrh] {
        background: var(--glass-bg-dark);
        box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.25);
        transform: translateY(-2px);
    }

.glass-card-header[b-5s7bd7lvrh] {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--glass-border-radius) var(--glass-border-radius) 0 0 !important;
    padding: 1rem 1.5rem;
}

.glass-card-footer[b-5s7bd7lvrh] {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0 0 var(--glass-border-radius) var(--glass-border-radius) !important;
    padding: 1rem 1.5rem;
}

/* Glass inputs */
.glass-input[b-5s7bd7lvrh] {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
    color: #2c3e50;
}

    .glass-input:focus[b-5s7bd7lvrh] {
        background: rgba(255, 255, 255, 0.8);
        border-color: rgba(106, 17, 203, 0.5);
        box-shadow: 0 0 0 4px rgba(106, 17, 203, 0.1);
        outline: none;
    }

    .glass-input:hover[b-5s7bd7lvrh] {
        background: rgba(255, 255, 255, 0.7);
    }

.glass-label[b-5s7bd7lvrh] {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #4a5568;
    margin-bottom: 0.25rem;
    display: block;
}

/* Glass buttons */
.glass-btn-primary[b-5s7bd7lvrh] {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 0.6rem 1.5rem;
    font-weight: 500;
    box-shadow: 0 4px 15px rgba(37, 117, 252, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .glass-btn-primary[b-5s7bd7lvrh]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.5s ease;
    }

    .glass-btn-primary:hover[b-5s7bd7lvrh]::before {
        left: 100%;
    }

    .glass-btn-primary:hover[b-5s7bd7lvrh] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(37, 117, 252, 0.4);
    }

.glass-btn-outline[b-5s7bd7lvrh] {
    background: transparent;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 0.6rem 1.5rem;
    color: #2c3e50;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .glass-btn-outline:hover[b-5s7bd7lvrh] {
        background: rgba(255, 255, 255, 0.3);
        border-color: #6a11cb;
        color: #6a11cb;
        transform: translateY(-1px);
    }

/* Glass stepper */
.glass-stepper[b-5s7bd7lvrh] {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 100px;
    padding: 0.5rem;
    box-shadow: var(--glass-shadow);
}

.glass-step-item[b-5s7bd7lvrh] {
    position: relative;
    padding: 0.5rem 1rem;
    border-radius: 100px;
    transition: all 0.3s ease;
}

.glass-step-active[b-5s7bd7lvrh] {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(106, 17, 203, 0.3);
}

.glass-step-done[b-5s7bd7lvrh] {
    background: linear-gradient(135deg, #00c9a7 0%, #00b894 100%);
    color: white;
}

.glass-step-pending[b-5s7bd7lvrh] {
    background: rgba(255, 255, 255, 0.3);
    color: #2c3e50;
}

.glass-step-circle[b-5s7bd7lvrh] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin: 0 auto;
    background: inherit;
    border: 2px solid currentColor;
}

/* Glass table */
.glass-table-container[b-5s7bd7lvrh] {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--glass-border-radius);
    overflow: hidden;
    box-shadow: var(--glass-shadow);
}

.glass-table[b-5s7bd7lvrh] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .glass-table thead th[b-5s7bd7lvrh] {
        background: rgba(255, 255, 255, 0.5);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        padding: 1rem;
        font-weight: 600;
        color: #2c3e50;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    }

    .glass-table tbody tr[b-5s7bd7lvrh] {
        transition: all 0.2s ease;
    }

        .glass-table tbody tr:hover[b-5s7bd7lvrh] {
            background: rgba(255, 255, 255, 0.3);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
        }

    .glass-table td[b-5s7bd7lvrh] {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

/* Glass dropzone */
.glass-dropzone[b-5s7bd7lvrh] {
    background: linear-gradient(135deg, rgba(106, 17, 203, 0.05) 0%, rgba(37, 117, 252, 0.05) 100%);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 2px dashed rgba(106, 17, 203, 0.3);
    border-radius: 24px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .glass-dropzone:hover[b-5s7bd7lvrh] {
        border-color: #6a11cb;
        background: linear-gradient(135deg, rgba(106, 17, 203, 0.1) 0%, rgba(37, 117, 252, 0.1) 100%);
    }

    .glass-dropzone.drag-over[b-5s7bd7lvrh] {
        border-color: #00c9a7;
        background: linear-gradient(135deg, rgba(0, 201, 167, 0.1) 0%, rgba(0, 184, 124, 0.1) 100%);
        transform: scale(1.02);
    }

.glass-dropzone-input[b-5s7bd7lvrh] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Glass progress bar */
.glass-progress[b-5s7bd7lvrh] {
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 100px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.glass-progress-bar[b-5s7bd7lvrh] {
    background: linear-gradient(90deg, #6a11cb, #2575fc);
    border-radius: 100px;
    position: relative;
    overflow: hidden;
}

    .glass-progress-bar[b-5s7bd7lvrh]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        animation: shimmer-b-5s7bd7lvrh 2s infinite;
    }

/* Glass alert */
.glass-alert[b-5s7bd7lvrh] {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.glass-alert-success[b-5s7bd7lvrh] {
    background: linear-gradient(135deg, rgba(0, 201, 167, 0.2) 0%, rgba(0, 184, 124, 0.2) 100%);
    border-left: 4px solid #00c9a7;
}

.glass-alert-warning[b-5s7bd7lvrh] {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.2) 0%, rgba(255, 145, 0, 0.2) 100%);
    border-left: 4px solid #ffc107;
}

.glass-alert-danger[b-5s7bd7lvrh] {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.2) 0%, rgba(220, 38, 38, 0.2) 100%);
    border-left: 4px solid #ff4757;
}

/* Glass badge */
.glass-badge[b-5s7bd7lvrh] {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    padding: 0.35rem 0.65rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-badge-success[b-5s7bd7lvrh] {
    background: linear-gradient(135deg, rgba(0, 201, 167, 0.3) 0%, rgba(0, 184, 124, 0.3) 100%);
    color: #006b4d;
}

.glass-badge-warning[b-5s7bd7lvrh] {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.3) 0%, rgba(255, 145, 0, 0.3) 100%);
    color: #8b5e00;
}

.glass-badge-danger[b-5s7bd7lvrh] {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.3) 0%, rgba(220, 38, 38, 0.3) 100%);
    color: #8b0000;
}

.glass-badge-info[b-5s7bd7lvrh] {
    background: linear-gradient(135deg, rgba(23, 162, 184, 0.3) 0%, rgba(0, 139, 139, 0.3) 100%);
    color: #005662;
}

/* Glass pagination */
.glass-pagination[b-5s7bd7lvrh] {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 100px;
    padding: 0.25rem;
    background: rgba(255, 255, 255, 0.3);
}

    .glass-pagination .page-item .page-link[b-5s7bd7lvrh] {
        background: transparent;
        border: none;
        color: #2c3e50;
        border-radius: 100px;
        margin: 0 2px;
        padding: 0.5rem 1rem;
        transition: all 0.3s ease;
    }

    .glass-pagination .page-item.active .page-link[b-5s7bd7lvrh] {
        background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(106, 17, 203, 0.3);
    }

    .glass-pagination .page-item .page-link:hover[b-5s7bd7lvrh] {
        background: rgba(255, 255, 255, 0.5);
        transform: translateY(-1px);
    }

/* Glass navigation */
.glass-nav[b-5s7bd7lvrh] {
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 100px;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.3);
}

.glass-nav-link[b-5s7bd7lvrh] {
    border-radius: 100px;
    padding: 0.5rem 1.25rem;
    color: #2c3e50;
    transition: all 0.3s ease;
    text-decoration: none;
    font-weight: 500;
}

    .glass-nav-link:hover[b-5s7bd7lvrh] {
        background: rgba(255, 255, 255, 0.5);
        color: #6a11cb;
    }

    .glass-nav-link.active[b-5s7bd7lvrh] {
        background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        color: white;
        box-shadow: 0 4px 15px rgba(106, 17, 203, 0.3);
    }

/* Glass select */
.glass-select[b-5s7bd7lvrh] {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 0.5rem 2rem 0.5rem 1rem;
    transition: all 0.3s ease;
    color: #2c3e50;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232c3e50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px;
}

    .glass-select:focus[b-5s7bd7lvrh] {
        background-color: rgba(255, 255, 255, 0.8);
        border-color: #6a11cb;
        box-shadow: 0 0 0 4px rgba(106, 17, 203, 0.1);
        outline: none;
    }

    .glass-select:hover[b-5s7bd7lvrh] {
        background-color: rgba(255, 255, 255, 0.7);
    }

/* Glass checkbox */
.glass-checkbox[b-5s7bd7lvrh] {
    width: 1.2rem;
    height: 1.2rem;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

    .glass-checkbox:checked[b-5s7bd7lvrh] {
        background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        border-color: transparent;
    }

        .glass-checkbox:checked[b-5s7bd7lvrh]::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 0.8rem;
        }

/* Animations */
@keyframes shimmer-b-5s7bd7lvrh {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes glass-pulse-b-5s7bd7lvrh {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

.glass-pulse[b-5s7bd7lvrh] {
    animation: glass-pulse-b-5s7bd7lvrh 2s infinite;
}

/* Glass spinner */
.glass-spinner[b-5s7bd7lvrh] {
    width: 3rem;
    height: 3rem;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #6a11cb;
    border-radius: 50%;
    animation: spin-b-5s7bd7lvrh 1s linear infinite;
}

@keyframes spin-b-5s7bd7lvrh {
    to {
        transform: rotate(360deg);
    }
}
/* =========================================================
   Migration.razor.css
   Scoped styling only for the Start New Migration block
   ========================================================= */

.migration-start-section[b-5s7bd7lvrh] {
    max-width: 1400px;
    margin: 0 auto;
}

    .migration-start-section .glass-card[b-5s7bd7lvrh] {
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.5);
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease;
    }

        .migration-start-section .glass-card:hover[b-5s7bd7lvrh] {
            transform: translateY(-5px);
            box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.4);
            background: rgba(255, 255, 255, 0.95);
        }

    .migration-start-section .glass-card-header[b-5s7bd7lvrh] {
        background: rgba(0, 0, 0, 0.05);
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 20px 20px 0 0 !important;
        color: #1e1e2f;
        font-weight: 600;
        padding: 1rem 1.5rem;
    }

        .migration-start-section .glass-card-header h5[b-5s7bd7lvrh] {
            margin: 0;
            color: #1e1e2f;
            font-weight: 700;
        }

    .migration-start-section .glass-card-body[b-5s7bd7lvrh] {
        background: transparent;
        color: #1e1e2f;
        padding: 1.5rem;
    }

    .migration-start-section .glass-label[b-5s7bd7lvrh] {
        color: #1e1e2f;
        font-weight: 600;
        margin-bottom: 0.5rem;
        display: block;
        font-size: 1rem;
        text-transform: none;
        letter-spacing: normal;
    }

    .migration-start-section .glass-input[b-5s7bd7lvrh] {
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        color: #1e1e2f;
        padding: 0.75rem 1rem;
        transition: all 0.3s ease;
        width: 100%;
        box-sizing: border-box;
    }

        .migration-start-section .glass-input:focus[b-5s7bd7lvrh] {
            background: #ffffff;
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
            color: #1e1e2f;
            outline: none;
        }

        .migration-start-section .glass-input[b-5s7bd7lvrh]::placeholder {
            color: #6c757d;
        }

    .migration-start-section .glass-button[b-5s7bd7lvrh] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
        border-radius: 10px;
        color: #ffffff;
        font-weight: 600;
        padding: 0.75rem 1.5rem;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.2);
        cursor: pointer;
    }

        .migration-start-section .glass-button:hover:not(:disabled)[b-5s7bd7lvrh] {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.3);
            background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
        }

        .migration-start-section .glass-button:disabled[b-5s7bd7lvrh] {
            background: rgba(0, 0, 0, 0.2);
            color: rgba(255, 255, 255, 0.5);
            cursor: not-allowed;
        }

    .migration-start-section .spinner-border[b-5s7bd7lvrh] {
        width: 1.5rem;
        height: 1.5rem;
        border: 3px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        border-top-color: #ffffff;
        animation: migration-start-spin-b-5s7bd7lvrh 1s ease-in-out infinite;
        display: inline-block;
        margin-right: 0.5rem;
        vertical-align: middle;
    }

@keyframes migration-start-spin-b-5s7bd7lvrh {
    to {
        transform: rotate(360deg);
    }
}

/* Better spacing for this block only */
.migration-start-section .row[b-5s7bd7lvrh] {
    margin-right: -0.75rem;
    margin-left: -0.75rem;
}

.migration-start-section .col-md-6[b-5s7bd7lvrh],
.migration-start-section .col-md-12[b-5s7bd7lvrh],
.migration-start-section .col-12[b-5s7bd7lvrh] {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    box-sizing: border-box;
}

/* Keep the 2-column layout clean */
.migration-start-section .g-3[b-5s7bd7lvrh] {
    row-gap: 1rem;
}

/* Mobile */
@media (max-width: 767.98px) {
    .migration-start-section .glass-card-body[b-5s7bd7lvrh] {
        padding: 1rem;
    }

    .migration-start-section .glass-card-header[b-5s7bd7lvrh] {
        padding: 0.9rem 1rem;
    }

    .migration-start-section .glass-button[b-5s7bd7lvrh] {
        width: 100%;
    }
}
/* Status badge text must stay white */
.glass-badge[b-5s7bd7lvrh],
.badge-completed[b-5s7bd7lvrh],
.badge-inprogress[b-5s7bd7lvrh],
.badge-failed[b-5s7bd7lvrh],
.badge-pending[b-5s7bd7lvrh] {
    color: #fff !important;
}
.badge-completed[b-5s7bd7lvrh] {
    color: #fff !important;
}
/* _content/ZenZonApp/Components/Booking/StepIndicator.razor.rz.scp.css */
.step-indicator[b-0f3hp1c4bk] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 4px;
}

.step-indicator__item[b-0f3hp1c4bk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.step-indicator__circle[b-0f3hp1c4bk] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    border: 2px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.5);
    background: transparent;
    transition: all 0.3s;
}

.step-indicator__item.active .step-indicator__circle[b-0f3hp1c4bk] {
    background: white;
    color: #764ba2;
    border-color: white;
}

.step-indicator__item.completed .step-indicator__circle[b-0f3hp1c4bk] {
    background: #4ade80;
    color: white;
    border-color: #4ade80;
}

.step-indicator__label[b-0f3hp1c4bk] {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
    white-space: nowrap;
}

.step-indicator__item.active .step-indicator__label[b-0f3hp1c4bk],
.step-indicator__item.completed .step-indicator__label[b-0f3hp1c4bk] {
    color: white;
}

.step-indicator__line[b-0f3hp1c4bk] {
    width: 40px;
    height: 2px;
    background: rgba(255,255,255,0.2);
    margin-bottom: 22px;
    transition: background 0.3s;
}

    .step-indicator__line.completed[b-0f3hp1c4bk] {
        background: #4ade80;
    }
/* _content/ZenZonApp/Components/Home/Home.razor.rz.scp.css */
/* wwwroot/css/site.css (or your main css) */
html[b-7qvf2ybk11], body[b-7qvf2ybk11] {
    height: 100%;
}

.landing-root[b-7qvf2ybk11] {
    min-height: 100vh;
}

    .glass-home[b-7qvf2ybk11] {
        min-height: 100vh;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        padding: 4rem 1rem;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
    }

    .glass-home[b-7qvf2ybk11]::before {
        content: '';
        position: absolute;
        top: -20%;
        right: -10%;
        width: 60%;
        height: 60%;
        background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
        border-radius: 50%;
        pointer-events: none;
        animation: float 20s ease-in-out infinite;
    }

    .glass-home[b-7qvf2ybk11]::after {
        content: '';
        position: absolute;
        bottom: -20%;
        left: -10%;
        width: 70%;
        height: 70%;
        background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
        border-radius: 50%;
        pointer-events: none;
        animation: float 25s ease-in-out infinite reverse;
    }

    @@keyframes float {
        0%[b-7qvf2ybk11], 100%[b-7qvf2ybk11] { transform: translate(0, 0) rotate(0deg); }
        33%[b-7qvf2ybk11] { transform: translate(2%, 2%) rotate(2deg); }
        66%[b-7qvf2ybk11] { transform: translate(-2%, -2%) rotate(-2deg); }
    }

    .glass-hero[b-7qvf2ybk11] {
        text-align: center;
        margin-bottom: 4rem;
        position: relative;
        z-index: 2;
    }

    .glass-hero h1[b-7qvf2ybk11] {
        font-size: 3.5rem;
        font-weight: 700;
        background: linear-gradient(135deg, #ffffff, #f0e9ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 1.5rem;
        text-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        animation: fadeInUp 0.8s ease-out;
    }

    .glass-hero .lead[b-7qvf2ybk11] {
        font-size: 1.4rem;
        color: rgba(255, 255, 255, 0.95);
        max-width: 700px;
        margin: 0 auto;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        animation: fadeInUp 0.8s ease-out 0.2s both;
    }

    @@keyframes fadeInUp {
        from[b-7qvf2ybk11] {
            opacity: 0;
            transform: translateY(30px);
        }
        to[b-7qvf2ybk11] {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .glass-feature-card[b-7qvf2ybk11] {
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 30px;
        padding: 2.5rem 1.5rem;
        height: 100%;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        position: relative;
        overflow: hidden;
        animation: fadeInUp 0.8s ease-out;
        animation-fill-mode: both;
    }

    .glass-feature-card:nth-child(1)[b-7qvf2ybk11] { animation-delay: 0.3s; }
    .glass-feature-card:nth-child(2)[b-7qvf2ybk11] { animation-delay: 0.4s; }
    .glass-feature-card:nth-child(3)[b-7qvf2ybk11] { animation-delay: 0.5s; }

    .glass-feature-card[b-7qvf2ybk11]::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.6s ease;
        pointer-events: none;
    }

    .glass-feature-card:hover[b-7qvf2ybk11] {
        transform: translateY(-15px) scale(1.02);
        background: rgba(255, 255, 255, 0.25);
        border-color: rgba(255, 255, 255, 0.5);
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
    }

    .glass-feature-card:hover[b-7qvf2ybk11]::before {
        opacity: 1;
    }

    .feature-icon[b-7qvf2ybk11] {
        width: 100px;
        height: 100px;
        border-radius: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.5rem;
        font-size: 2.8rem;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border: 2px solid rgba(255, 255, 255, 0.4);
        transition: all 0.3s ease;
    }

    .glass-feature-card:hover .feature-icon[b-7qvf2ybk11] {
        transform: scale(1.1) rotate(5deg);
        border-color: rgba(255, 255, 255, 0.8);
    }

    .glass-feature-card h5[b-7qvf2ybk11] {
        color: white;
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 1rem;
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .glass-feature-card p[b-7qvf2ybk11] {
        color: rgba(255, 255, 255, 0.9);
        font-size: 1.1rem;
        line-height: 1.6;
        margin-bottom: 0;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .glass-button[b-7qvf2ybk11] {
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 2px solid rgba(255, 255, 255, 0.5);
        border-radius: 50px;
        padding: 1rem 2.5rem;
        font-size: 1.2rem;
        font-weight: 600;
        color: white;
        text-decoration: none;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        position: relative;
        overflow: hidden;
        animation: fadeInUp 0.8s ease-out 0.6s both;
    }

    .glass-button:hover[b-7qvf2ybk11] {
        background: rgba(255, 255, 255, 0.35);
        border-color: rgba(255, 255, 255, 0.8);
        transform: translateY(-3px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        color: white;
    }

    .glass-button:active[b-7qvf2ybk11] {
        transform: translateY(-1px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
    }

    .glass-button-primary[b-7qvf2ybk11] {
        background: linear-gradient(135deg, #667eea, #764ba2);
        border: none;
        position: relative;
        z-index: 1;
    }

    .glass-button-primary[b-7qvf2ybk11]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, #764ba2, #667eea);
        border-radius: 50px;
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: -1;
    }

    .glass-button-primary:hover[b-7qvf2ybk11]::before {
        opacity: 1;
    }

    .glass-button-outline[b-7qvf2ybk11] {
        background: transparent;
        border: 2px solid rgba(255, 255, 255, 0.8);
    }

    .glass-button-outline:hover[b-7qvf2ybk11] {
        background: rgba(255, 255, 255, 0.15);
        border-color: white;
    }

    .button-group[b-7qvf2ybk11] {
        display: flex;
        gap: 1.5rem;
        justify-content: center;
        margin-top: 3rem;
        flex-wrap: wrap;
    }

    .floating-shape[b-7qvf2ybk11] {
        position: absolute;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        pointer-events: none;
        z-index: 1;
    }

    .shape-1[b-7qvf2ybk11] {
        width: 300px;
        height: 300px;
        top: -150px;
        left: -150px;
        animation: float 18s ease-in-out infinite;
    }

    .shape-2[b-7qvf2ybk11] {
        width: 200px;
        height: 200px;
        bottom: -100px;
        right: -100px;
        animation: float 22s ease-in-out infinite reverse;
    }

    .shape-3[b-7qvf2ybk11] {
        width: 150px;
        height: 150px;
        top: 50%;
        left: 10%;
        animation: float 15s ease-in-out infinite;
    }

    @@media (max-width: 768px) {
        .glass-hero h1[b-7qvf2ybk11] {
            font-size: 2.2rem;
        }
        
        .glass-hero .lead[b-7qvf2ybk11] {
            font-size: 1.1rem;
        }
        
        .glass-feature-card[b-7qvf2ybk11] {
            padding: 1.5rem;
        }
        
        .feature-icon[b-7qvf2ybk11] {
            width: 70px;
            height: 70px;
            font-size: 2rem;
        }
        
        .button-group[b-7qvf2ybk11] {
            flex-direction: column;
            gap: 1rem;
            padding: 0 2rem;
        }
        
        .glass-button[b-7qvf2ybk11] {
            width: 100%;
        }
    }

    @@media (max-width: 480px) {
        .glass-hero h1[b-7qvf2ybk11] {
            font-size: 1.8rem;
        }
    }
/* _content/ZenZonApp/Components/Insurance/PatientCaseInsurancePanel.razor.rz.scp.css */
/* Glassmorphism base styles */
.glassmorphism-backdrop[b-icgv3lhq8p] {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.glassmorphism-modal[b-icgv3lhq8p] {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

    .glassmorphism-modal .modal-header[b-icgv3lhq8p] {
        background: rgba(255, 255, 255, 0.2);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px 16px 0 0;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .glassmorphism-modal .modal-footer[b-icgv3lhq8p] {
        background: rgba(255, 255, 255, 0.1);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0 0 16px 16px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

.glassmorphism-content[b-icgv3lhq8p] {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.glassmorphism-border[b-icgv3lhq8p] {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Improved form controls for glassmorphism */
.glassmorphism-modal .form-control[b-icgv3lhq8p],
.glassmorphism-modal .form-select[b-icgv3lhq8p] {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 8px;
    transition: all 0.3s ease;
}

    .glassmorphism-modal .form-control:focus[b-icgv3lhq8p],
    .glassmorphism-modal .form-select:focus[b-icgv3lhq8p] {
        background: rgba(255, 255, 255, 0.95);
        border-color: rgba(86, 124, 254, 0.4);
        box-shadow: 0 0 0 0.25rem rgba(86, 124, 254, 0.2);
    }

/* Table styling for glassmorphism */
.glassmorphism-modal .table[b-icgv3lhq8p] {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 8px;
}

    .glassmorphism-modal .table th[b-icgv3lhq8p] {
        background: rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

/* Button styling */
.glassmorphism-modal .btn-primary[b-icgv3lhq8p] {
    background: linear-gradient(135deg, rgba(86, 124, 254, 0.9), rgba(58, 97, 233, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: white;
}

.glassmorphism-modal .btn-secondary[b-icgv3lhq8p] {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #333;
}

.glassmorphism-modal .btn-outline-primary[b-icgv3lhq8p] {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(86, 124, 254, 0.5);
    color: #567cfe;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Alert styling */
.glassmorphism-modal .alert-danger[b-icgv3lhq8p] {
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #dc3545;
}

/* Disabled state styling */
fieldset[disabled][b-icgv3lhq8p] {
    opacity: 0.7;
}

/* Checkbox and radio styling */
.glassmorphism-modal .form-check-input[b-icgv3lhq8p] {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.2);
}

/* Scrollbar styling */
.glassmorphism-modal .modal-body[b-icgv3lhq8p]::-webkit-scrollbar {
    width: 8px;
}

.glassmorphism-modal .modal-body[b-icgv3lhq8p]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.glassmorphism-modal .modal-body[b-icgv3lhq8p]::-webkit-scrollbar-thumb {
    background: rgba(86, 124, 254, 0.3);
    border-radius: 10px;
}
/* Force checkboxes to render the checkmark (some glass CSS overrides hide it) */
.form-check-input[type="checkbox"][b-icgv3lhq8p] {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    accent-color: #0d6efd; /* Bootstrap primary */
    background-image: none !important;
}
/* Ensure primary buttons in glass modal stay readable */
.glassmorphism-modal .btn.btn-primary[b-icgv3lhq8p] {
    color: #fff !important;
}

    /* Also cover cases where glassmorphism-border overrides backgrounds */
    .glassmorphism-modal .btn.btn-primary.glassmorphism-border[b-icgv3lhq8p] {
        color: #fff !important;
    }

.glassmorphism-modal .btn.btn-primary[b-icgv3lhq8p] {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}



/* _content/ZenZonApp/Components/Invoicing/InvoiceDocumentEditable.razor.rz.scp.css */
/* Invoice Modal Styles */
.modal-overlay[b-t623237rdv] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 20px;
}

    .modal-overlay.show[b-t623237rdv] {
        display: flex;
        animation: fadeIn-b-t623237rdv 0.3s ease;
    }

.glass-modal[b-t623237rdv] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 1000px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: slideUp-b-t623237rdv 0.4s ease;
}

.modal-close-btn[b-t623237rdv] {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    border: none;
    font-size: 20px;
    color: #4a5568;
    cursor: pointer;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

    .modal-close-btn:hover[b-t623237rdv] {
        background: white;
        transform: rotate(90deg);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

.invoice-header[b-t623237rdv] {
    display: flex;
    justify-content: space-between;
    padding: 30px;
    background: rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.clinic-info[b-t623237rdv] {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.clinic-logo[b-t623237rdv] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    flex-shrink: 0;
}

.clinic-details h2[b-t623237rdv] {
    color: #2d3748;
    font-size: 24px;
    margin-bottom: 5px;
}

.clinic-details p[b-t623237rdv] {
    color: #4a5568;
    font-size: 14px;
    margin-bottom: 3px;
    line-height: 1.4;
}

.invoice-meta h1[b-t623237rdv] {
    color: #2d3748;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 15px;
    text-align: right;
}

.invoice-details[b-t623237rdv] {
    text-align: right;
}

.detail-row[b-t623237rdv] {
    margin-bottom: 8px;
}

.detail-label[b-t623237rdv] {
    color: #4a5568;
    font-size: 14px;
    font-weight: 600;
    display: inline-block;
    width: 100px;
}

.detail-value[b-t623237rdv] {
    color: #2d3748;
    font-weight: 500;
}

.separator[b-t623237rdv] {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(155, 155, 155, 0.3), transparent);
    margin: 0 30px;
}

    .separator.light[b-t623237rdv] {
        margin: 10px 0;
    }

.patient-section[b-t623237rdv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding: 30px;
}

    .patient-section h4[b-t623237rdv] {
        color: #2d3748;
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 15px;
        padding-bottom: 5px;
        border-bottom: 2px solid rgba(102, 126, 234, 0.3);
    }

.info-row[b-t623237rdv] {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.info-label[b-t623237rdv] {
    color: #4a5568;
    font-size: 14px;
    font-weight: 500;
    width: 120px;
    flex-shrink: 0;
}

.info-value[b-t623237rdv] {
    color: #2d3748;
    font-weight: 500;
    flex: 1;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.services-table-container[b-t623237rdv] {
    padding: 0 30px 30px;
}

.services-table[b-t623237rdv] {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

    .services-table thead[b-t623237rdv] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

    .services-table th[b-t623237rdv] {
        padding: 15px;
        text-align: left;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 0.5px;
    }

        .services-table th.text-center[b-t623237rdv] {
            text-align: center;
        }

        .services-table th.text-right[b-t623237rdv] {
            text-align: right;
        }

    .services-table td[b-t623237rdv] {
        padding: 15px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        color: #2d3748;
    }

        .services-table td.text-center[b-t623237rdv] {
            text-align: center;
        }

        .services-table td.text-right[b-t623237rdv] {
            text-align: right;
        }

.subtotal-section[b-t623237rdv] {
    padding: 0 30px;
    display: flex;
    justify-content: flex-end;
}

.subtotal-row[b-t623237rdv] {
    width: 300px;
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

    .subtotal-row .label[b-t623237rdv] {
        color: #4a5568;
        font-weight: 600;
    }

    .subtotal-row .value[b-t623237rdv] {
        color: #2d3748;
        font-weight: 700;
    }

.totals-section[b-t623237rdv] {
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.total-row[b-t623237rdv], .adjustment-row[b-t623237rdv], .balance-row[b-t623237rdv] {
    width: 300px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

    .total-row.main[b-t623237rdv] {
        font-weight: 700;
        font-size: 18px;
        color: #2d3748;
        border-bottom: 2px solid rgba(102, 126, 234, 0.5);
    }

    .adjustment-row .input-container[b-t623237rdv] {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .adjustment-row .currency[b-t623237rdv] {
        color: #4a5568;
        font-weight: 500;
    }

.adjustment-input[b-t623237rdv] {
    width: 120px;
    padding: 8px 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.8);
    color: #2d3748;
    font-size: 14px;
    text-align: right;
}

    .adjustment-input:focus[b-t623237rdv] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
    }

.balance-row[b-t623237rdv] {
    font-weight: 700;
    font-size: 18px;
    border-top: 2px solid rgba(0, 0, 0, 0.1);
    margin-top: 10px;
    padding-top: 15px;
}

    .balance-row .value.unpaid[b-t623237rdv] {
        color: #e53e3e;
    }

    .balance-row .value.paid[b-t623237rdv] {
        color: #38a169;
    }

.practitioner-section[b-t623237rdv] {
    margin: 30px;
    padding: 25px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.practitioner-header[b-t623237rdv] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 16px;
}

.practitioner-table[b-t623237rdv] {
    width: 100%;
    border-collapse: collapse;
}

    .practitioner-table th[b-t623237rdv] {
        color: #4a5568;
        font-weight: 600;
        font-size: 14px;
        padding: 12px;
        text-align: left;
        border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    }

    .practitioner-table td[b-t623237rdv] {
        padding: 15px 12px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        color: #2d3748;
    }

.practitioner-tag[b-t623237rdv] {
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
}

.policy-section[b-t623237rdv] {
    margin: 30px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.policy-header[b-t623237rdv] {
    color: #2d3748;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}

.policy-text[b-t623237rdv] {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #4a5568;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    font-family: inherit;
}

    .policy-text:focus[b-t623237rdv] {
        outline: none;
        border-color: #667eea;
    }

.modal-actions[b-t623237rdv] {
    padding: 25px 30px;
    background: rgba(255, 255, 255, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

.btn[b-t623237rdv] {
    padding: 12px 28px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    outline: none;
}

.btn-secondary[b-t623237rdv] {
    background: rgba(255, 255, 255, 0.8);
    color: #4a5568;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

    .btn-secondary:hover[b-t623237rdv] {
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

.btn-primary[b-t623237rdv] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

    .btn-primary:hover[b-t623237rdv] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.6);
    }

@keyframes fadeIn-b-t623237rdv {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp-b-t623237rdv {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .glass-modal[b-t623237rdv] {
        max-height: 95vh;
        margin: 10px;
    }

    .invoice-header[b-t623237rdv] {
        flex-direction: column;
    }

    .invoice-meta h1[b-t623237rdv] {
        text-align: left;
        margin-top: 20px;
    }

    .invoice-details[b-t623237rdv] {
        text-align: left;
    }

    .patient-section[b-t623237rdv] {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .subtotal-row[b-t623237rdv],
    .total-row[b-t623237rdv],
    .adjustment-row[b-t623237rdv],
    .balance-row[b-t623237rdv] {
        width: 100%;
    }

    .services-table[b-t623237rdv],
    .practitioner-table[b-t623237rdv] {
        display: block;
        overflow-x: auto;
    }
}
/* Editable-mode controls */
.edit-input[b-t623237rdv] {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: inherit;
    padding: 4px 8px;
    border-radius: 4px;
    font: inherit;
    width: 100%;
    box-sizing: border-box;
}

    .edit-input:focus[b-t623237rdv] {
        outline: none;
        border-color: rgba(99, 102, 241, 0.6);
        background: rgba(255, 255, 255, 0.12);
    }

.edit-h2[b-t623237rdv] {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.number-input[b-t623237rdv] {
    text-align: right;
    max-width: 100px;
}

.btn-icon[b-t623237rdv] {
    background: transparent;
    border: none;
    color: #ef4444;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}

    .btn-icon:hover[b-t623237rdv] {
        background: rgba(239, 68, 68, 0.1);
    }

.btn-add-line[b-t623237rdv] {
    margin-top: 8px;
    padding: 6px 12px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px dashed rgba(99, 102, 241, 0.4);
    color: rgb(99, 102, 241);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
}

    .btn-add-line:hover[b-t623237rdv] {
        background: rgba(99, 102, 241, 0.2);
    }
/* Inline meta rows in the invoice header (Invoice #, Date, Due Date) */
.meta-row[b-t623237rdv] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    justify-content: flex-end;
}

.meta-label[b-t623237rdv] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    white-space: nowrap;
    min-width: 100px;
    text-align: right;
}

.meta-value[b-t623237rdv] {
    max-width: 200px;
}

/* Hide number-input spinners (Chrome/Safari/Edge + Firefox) */
.no-spinner[b-t623237rdv]::-webkit-inner-spin-button,
.no-spinner[b-t623237rdv]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.no-spinner[b-t623237rdv] {
    -moz-appearance: textfield;
}

/* Right-align amount inputs so decimals line up */
.adjustment-input[b-t623237rdv] {
    text-align: right;
}
.clinic-logo-img[b-t623237rdv] {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 16px;
    background: #fff;
    padding: 6px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
/* _content/ZenZonApp/Components/Invoicing/InvoiceDocumentReadOnly.razor.rz.scp.css */
/* Invoice Modal Styles */
.modal-overlay[b-0iozd62uyi] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 20px;
}

    .modal-overlay.show[b-0iozd62uyi] {
        display: flex;
        animation: fadeIn-b-0iozd62uyi 0.3s ease;
    }

.glass-modal[b-0iozd62uyi] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 1000px;
    max-height: none;
    overflow-y: visible;
    position: relative;
    animation: slideUp-b-0iozd62uyi 0.4s ease;
}

.modal-close-btn[b-0iozd62uyi] {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    border: none;
    font-size: 20px;
    color: #4a5568;
    cursor: pointer;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

    .modal-close-btn:hover[b-0iozd62uyi] {
        background: white;
        transform: rotate(90deg);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

.invoice-header[b-0iozd62uyi] {
    display: flex;
    justify-content: space-between;
    padding: 30px;
    background: rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.clinic-info[b-0iozd62uyi] {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.clinic-logo[b-0iozd62uyi] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 32px;
    flex-shrink: 0;
}

.clinic-details h2[b-0iozd62uyi] {
    color: #2d3748;
    font-size: 24px;
    margin-bottom: 5px;
}

.clinic-details p[b-0iozd62uyi] {
    color: #4a5568;
    font-size: 14px;
    margin-bottom: 3px;
    line-height: 1.4;
}

.invoice-meta h1[b-0iozd62uyi] {
    color: #2d3748;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 15px;
    text-align: right;
}

.invoice-details[b-0iozd62uyi] {
    text-align: right;
}

.detail-row[b-0iozd62uyi] {
    margin-bottom: 8px;
}

.detail-label[b-0iozd62uyi] {
    color: #4a5568;
    font-size: 14px;
    font-weight: 600;
    display: inline-block;
    width: 100px;
}

.detail-value[b-0iozd62uyi] {
    color: #2d3748;
    font-weight: 500;
}

.separator[b-0iozd62uyi] {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(155, 155, 155, 0.3), transparent);
    margin: 0 30px;
}

    .separator.light[b-0iozd62uyi] {
        margin: 10px 0;
    }

.patient-section[b-0iozd62uyi] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding: 30px;
}

    .patient-section h4[b-0iozd62uyi] {
        color: #2d3748;
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 15px;
        padding-bottom: 5px;
        border-bottom: 2px solid rgba(102, 126, 234, 0.3);
    }

.info-row[b-0iozd62uyi] {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

.info-label[b-0iozd62uyi] {
    color: #4a5568;
    font-size: 14px;
    font-weight: 500;
    width: 120px;
    flex-shrink: 0;
}

.info-value[b-0iozd62uyi] {
    color: #2d3748;
    font-weight: 500;
    flex: 1;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.services-table-container[b-0iozd62uyi] {
    padding: 0 30px 30px;
}

.services-table[b-0iozd62uyi] {
    width: 100%;
    border-collapse: collapse;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    overflow: visible;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

    .services-table thead[b-0iozd62uyi] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

    .services-table th[b-0iozd62uyi] {
        padding: 15px;
        text-align: left;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 0.5px;
    }

        .services-table th.text-center[b-0iozd62uyi] {
            text-align: center;
        }

        .services-table th.text-right[b-0iozd62uyi] {
            text-align: right;
        }

    .services-table td[b-0iozd62uyi] {
        padding: 15px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        color: #2d3748;
    }

        .services-table td.text-center[b-0iozd62uyi] {
            text-align: center;
        }

        .services-table td.text-right[b-0iozd62uyi] {
            text-align: right;
        }

.subtotal-section[b-0iozd62uyi] {
    padding: 0 30px;
    display: flex;
    justify-content: flex-end;
}

.subtotal-row[b-0iozd62uyi] {
    width: 300px;
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

    .subtotal-row .label[b-0iozd62uyi] {
        color: #4a5568;
        font-weight: 600;
    }

    .subtotal-row .value[b-0iozd62uyi] {
        color: #2d3748;
        font-weight: 700;
    }

.totals-section[b-0iozd62uyi] {
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.total-row[b-0iozd62uyi], .adjustment-row[b-0iozd62uyi], .balance-row[b-0iozd62uyi] {
    width: 300px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

    .total-row.main[b-0iozd62uyi] {
        font-weight: 700;
        font-size: 18px;
        color: #2d3748;
        border-bottom: 2px solid rgba(102, 126, 234, 0.5);
    }

    .adjustment-row .input-container[b-0iozd62uyi] {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .adjustment-row .currency[b-0iozd62uyi] {
        color: #4a5568;
        font-weight: 500;
    }

.adjustment-input[b-0iozd62uyi] {
    width: 120px;
    padding: 8px 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.8);
    color: #2d3748;
    font-size: 14px;
    text-align: right;
}

    .adjustment-input:focus[b-0iozd62uyi] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
    }

.balance-row[b-0iozd62uyi] {
    font-weight: 700;
    font-size: 18px;
    border-top: 2px solid rgba(0, 0, 0, 0.1);
    margin-top: 10px;
    padding-top: 15px;
}

    .balance-row .value.unpaid[b-0iozd62uyi] {
        color: #e53e3e;
    }

    .balance-row .value.paid[b-0iozd62uyi] {
        color: #38a169;
    }

.practitioner-section[b-0iozd62uyi] {
    margin: 30px;
    padding: 25px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.practitioner-header[b-0iozd62uyi] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-weight: 600;
    font-size: 16px;
}

.practitioner-table[b-0iozd62uyi] {
    width: 100%;
    border-collapse: collapse;
}

    .practitioner-table th[b-0iozd62uyi] {
        color: #4a5568;
        font-weight: 600;
        font-size: 14px;
        padding: 12px;
        text-align: left;
        border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    }

    .practitioner-table td[b-0iozd62uyi] {
        padding: 15px 12px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        color: #2d3748;
    }

.practitioner-tag[b-0iozd62uyi] {
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
}

.policy-section[b-0iozd62uyi] {
    margin: 30px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.policy-header[b-0iozd62uyi] {
    color: #2d3748;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}

.policy-text[b-0iozd62uyi] {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #4a5568;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    font-family: inherit;
}

    .policy-text:focus[b-0iozd62uyi] {
        outline: none;
        border-color: #667eea;
    }

.modal-actions[b-0iozd62uyi] {
    padding: 25px 30px;
    background: rgba(255, 255, 255, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

.btn[b-0iozd62uyi] {
    padding: 12px 28px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    outline: none;
}

.btn-secondary[b-0iozd62uyi] {
    background: rgba(255, 255, 255, 0.8);
    color: #4a5568;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

    .btn-secondary:hover[b-0iozd62uyi] {
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

.btn-primary[b-0iozd62uyi] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

    .btn-primary:hover[b-0iozd62uyi] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.6);
    }

@keyframes fadeIn-b-0iozd62uyi {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp-b-0iozd62uyi {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .glass-modal[b-0iozd62uyi] {
        max-height: 95vh;
        margin: 10px;
    }

    .invoice-header[b-0iozd62uyi] {
        flex-direction: column;
    }

    .invoice-meta h1[b-0iozd62uyi] {
        text-align: left;
        margin-top: 20px;
    }

    .invoice-details[b-0iozd62uyi] {
        text-align: left;
    }

    .patient-section[b-0iozd62uyi] {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .subtotal-row[b-0iozd62uyi],
    .total-row[b-0iozd62uyi],
    .adjustment-row[b-0iozd62uyi],
    .balance-row[b-0iozd62uyi] {
        width: 100%;
    }

    .services-table[b-0iozd62uyi],
    .practitioner-table[b-0iozd62uyi] {
        display: block;
        overflow-x: auto;
    }
}
.clinic-logo-img[b-0iozd62uyi] {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 16px;
    background: #fff;
    padding: 6px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
/* _content/ZenZonApp/Components/Invoicing/ReceiptDocument.razor.rz.scp.css */
.rec-overlay[b-gqa2obdr8y] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(6px);
    display: none;
    align-items: flex-start;
    justify-content: center;
    z-index: 9999;
    padding: 24px 16px;
    overflow-y: auto;
}

.receipt-document[b-gqa2obdr8y] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.25);
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── TOP BAR ── */
.rec-topbar[b-gqa2obdr8y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px 16px 0 0;
}

.rec-topbar-title[b-gqa2obdr8y] {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.3px;
}

.rec-topbar-number[b-gqa2obdr8y] {
    color: rgba(255,255,255,0.85);
    font-size: 0.9rem;
    font-weight: 500;
}

/* ── BODY ── */
.rec-body[b-gqa2obdr8y] {
    padding: 36px 40px 28px 40px;
}

/* ── HEADER ROW ── */
.rec-header-row[b-gqa2obdr8y] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 32px;
}

.rec-clinic-block[b-gqa2obdr8y] {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    flex: 1;
}

.rec-logo[b-gqa2obdr8y] {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    flex-shrink: 0;
}

.rec-clinic-details h2[b-gqa2obdr8y] {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 6px 0;
}

.rec-clinic-details p[b-gqa2obdr8y] {
    font-size: 0.875rem;
    color: #4a5568;
    margin: 0 0 3px 0;
}

.rec-meta-block[b-gqa2obdr8y] {
    text-align: right;
    flex-shrink: 0;
}

    .rec-meta-block h1[b-gqa2obdr8y] {
        font-size: 2.2rem;
        font-weight: 300;
        color: #2d3748;
        margin: 0 0 12px 0;
        letter-spacing: 4px;
    }

.rec-meta-row[b-gqa2obdr8y] {
    font-size: 0.85rem;
    color: #718096;
    margin-bottom: 4px;
}

    .rec-meta-row strong[b-gqa2obdr8y] {
        color: #2d3748;
    }

/* ── DIVIDER ── */
.rec-divider[b-gqa2obdr8y] {
    height: 1px;
    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
    margin: 0 0 28px 0;
    border: none;
}

/* ── CUSTOMER ── */
.rec-customer[b-gqa2obdr8y] {
    background: #f7f9fc;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 28px;
    border: 1px solid #e2e8f0;
}

.rec-customer-label[b-gqa2obdr8y] {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #667eea;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid rgba(102,126,234,0.2);
}

.rec-customer-name[b-gqa2obdr8y] {
    font-size: 1rem;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 4px 0;
}

.rec-customer-detail[b-gqa2obdr8y] {
    font-size: 0.875rem;
    color: #4a5568;
    margin: 0 0 2px 0;
}

/* ── TABLE ── */
.rec-table[b-gqa2obdr8y] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
    border-radius: 10px;
    overflow: hidden;
}

    .rec-table thead tr[b-gqa2obdr8y] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .rec-table thead th[b-gqa2obdr8y] {
        color: #fff;
        font-size: 0.8rem;
        font-weight: 600;
        padding: 12px 14px;
        text-align: left;
        white-space: nowrap;
        letter-spacing: 0.3px;
    }

        .rec-table thead th.r[b-gqa2obdr8y] {
            text-align: right;
        }

        .rec-table thead th.c[b-gqa2obdr8y] {
            text-align: center;
        }

    .rec-table tbody tr[b-gqa2obdr8y] {
        border-bottom: 1px solid #f0f4f8;
        transition: background 0.1s;
    }

        .rec-table tbody tr:hover[b-gqa2obdr8y] {
            background: #f7f9ff;
        }

    .rec-table tbody td[b-gqa2obdr8y] {
        padding: 11px 14px;
        font-size: 0.875rem;
        color: #2d3748;
        vertical-align: middle;
    }

        .rec-table tbody td.r[b-gqa2obdr8y] {
            text-align: right;
        }

        .rec-table tbody td.c[b-gqa2obdr8y] {
            text-align: center;
        }

/* ── TOTALS ── */
.rec-totals-wrap[b-gqa2obdr8y] {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.rec-totals-card[b-gqa2obdr8y] {
    width: 320px;
    background: #f7f9fc;
    border-radius: 12px;
    padding: 18px 20px;
    border: 1px solid #e2e8f0;
}

.rec-total-row[b-gqa2obdr8y] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 0.875rem;
    color: #4a5568;
}

    .rec-total-row.main[b-gqa2obdr8y] {
        font-size: 1rem;
        font-weight: 700;
        color: #1a202c;
        border-bottom: 2px solid #e2e8f0;
        padding-bottom: 10px;
        margin-bottom: 4px;
    }

    .rec-total-row.paid[b-gqa2obdr8y] {
        font-size: 1.05rem;
        font-weight: 500;
        color: #38a169;
        border-top: 2px solid #e2e8f0;
        margin-top: 4px;
        padding-top: 10px;
    }

/* ── PAYMENTS ── */
.rec-payments[b-gqa2obdr8y] {
    margin-top: 28px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.rec-payments-header[b-gqa2obdr8y] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: #fff;
    padding: 11px 18px;
    font-weight: 700;
    font-size: 0.9rem;
}

.rec-payments-table[b-gqa2obdr8y] {
    width: 100%;
    border-collapse: collapse;
}

    .rec-payments-table td[b-gqa2obdr8y] {
        padding: 10px 14px;
        font-size: 0.875rem;
        color: #2d3748;
        border-bottom: 1px solid #f0f4f8;
    }

        .rec-payments-table td.r[b-gqa2obdr8y] {
            text-align: right;
        }

/* ── FOOTER ── */
.rec-footer[b-gqa2obdr8y] {
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
    text-align: center;
    font-size: 0.8rem;
    color: #9ca3af;
}
/* _content/ZenZonApp/Components/Invoicing/StatementDocument.razor.rz.scp.css */
.statement-document[b-l6af2b35gl] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.25);
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.sta-topbar[b-l6af2b35gl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px 16px 0 0;
}

.sta-topbar-title[b-l6af2b35gl] {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.3px;
}

.sta-topbar-number[b-l6af2b35gl] {
    color: rgba(255,255,255,0.85);
    font-size: 0.9rem;
    font-weight: 500;
}

.sta-body[b-l6af2b35gl] {
    padding: 36px 40px 28px 40px;
}

.sta-header-row[b-l6af2b35gl] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 32px;
}

.sta-clinic-block[b-l6af2b35gl] {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    flex: 1;
}

.sta-logo[b-l6af2b35gl] {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    flex-shrink: 0;
}

.sta-clinic-details h2[b-l6af2b35gl] {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 6px 0;
}

.sta-clinic-details p[b-l6af2b35gl] {
    font-size: 0.875rem;
    color: #4a5568;
    margin: 0 0 3px 0;
}

.sta-meta-block[b-l6af2b35gl] {
    text-align: right;
    flex-shrink: 0;
}

    .sta-meta-block h1[b-l6af2b35gl] {
        font-size: 2.2rem;
        font-weight: 800;
        color: #2d3748;
        margin: 0 0 12px 0;
        letter-spacing: 2px;
    }

.sta-meta-row[b-l6af2b35gl] {
    font-size: 0.85rem;
    color: #718096;
    margin-bottom: 4px;
}

    .sta-meta-row strong[b-l6af2b35gl] {
        color: #2d3748;
    }

.sta-divider[b-l6af2b35gl] {
    height: 1px;
    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
    margin: 0 0 28px 0;
    border: none;
}

.sta-status-paid[b-l6af2b35gl] {
    background: rgba(56,161,105,0.12);
    color: #276749;
}

.sta-status-overdue[b-l6af2b35gl] {
    background: rgba(229,62,62,0.12);
    color: #9b2c2c;
}

.sta-status-outstanding[b-l6af2b35gl] {
    background: rgba(102,126,234,0.12);
    color: #434190;
}

.sta-customer[b-l6af2b35gl] {
    background: #f7f9fc;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 28px;
    border: 1px solid #e2e8f0;
}

.sta-customer-label[b-l6af2b35gl] {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #667eea;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid rgba(102,126,234,0.2);
}

.sta-customer-name[b-l6af2b35gl] {
    font-size: 1rem;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 4px 0;
}

.sta-customer-detail[b-l6af2b35gl] {
    font-size: 0.875rem;
    color: #4a5568;
    margin: 0 0 2px 0;
}

.sta-table[b-l6af2b35gl] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
    border-radius: 10px;
    overflow: hidden;
}

    .sta-table thead tr[b-l6af2b35gl] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .sta-table thead th[b-l6af2b35gl] {
        color: #fff;
        font-size: 0.8rem;
        font-weight: 600;
        padding: 12px 14px;
        text-align: left;
        white-space: nowrap;
        letter-spacing: 0.3px;
    }

        .sta-table thead th.r[b-l6af2b35gl] {
            text-align: right;
        }

        .sta-table thead th.c[b-l6af2b35gl] {
            text-align: center;
        }

    .sta-table tbody tr[b-l6af2b35gl] {
        border-bottom: 1px solid #f0f4f8;
        transition: background 0.1s;
    }

        .sta-table tbody tr:hover[b-l6af2b35gl] {
            background: #f7f9ff;
        }

    .sta-table tbody td[b-l6af2b35gl] {
        padding: 11px 14px;
        font-size: 0.875rem;
        color: #2d3748;
        vertical-align: middle;
    }

        .sta-table tbody td.r[b-l6af2b35gl] {
            text-align: right;
        }

        .sta-table tbody td.c[b-l6af2b35gl] {
            text-align: center;
        }

.sta-totals-wrap[b-l6af2b35gl] {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

.sta-totals-card[b-l6af2b35gl] {
    width: 320px;
    background: #f7f9fc;
    border-radius: 12px;
    padding: 18px 20px;
    border: 1px solid #e2e8f0;
}

.sta-total-row[b-l6af2b35gl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 0.875rem;
    color: #4a5568;
}

    .sta-total-row.main[b-l6af2b35gl] {
        font-size: 1rem;
        font-weight: 700;
        color: #1a202c;
        border-bottom: 2px solid #e2e8f0;
        padding-bottom: 10px;
        margin-bottom: 4px;
    }

    .sta-total-row.balance[b-l6af2b35gl] {
        font-size: 1.05rem;
        font-weight: 800;
        color: #e53e3e;
        border-top: 2px solid #e2e8f0;
        margin-top: 4px;
        padding-top: 10px;
    }

.sta-payments[b-l6af2b35gl] {
    margin-top: 28px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.sta-payments-header[b-l6af2b35gl] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: #fff;
    padding: 11px 18px;
    font-weight: 700;
    font-size: 0.9rem;
}

.sta-payments-table[b-l6af2b35gl] {
    width: 100%;
    border-collapse: collapse;
}

    .sta-payments-table td[b-l6af2b35gl] {
        padding: 10px 14px;
        font-size: 0.875rem;
        color: #2d3748;
        border-bottom: 1px solid #f0f4f8;
    }

        .sta-payments-table td.r[b-l6af2b35gl] {
            text-align: right;
        }

.sta-instructions[b-l6af2b35gl] {
    margin-top: 24px;
    background: #fffbf0;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 16px 18px;
}

.sta-instructions-header[b-l6af2b35gl] {
    font-size: 0.78rem;
    font-weight: 700;
    color: #92400e;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.sta-instructions-text[b-l6af2b35gl] {
    font-size: 0.85rem;
    color: #4a5568;
    margin: 0;
    line-height: 1.5;
}

.sta-footer[b-l6af2b35gl] {
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
    text-align: center;
    font-size: 0.8rem;
    color: #9ca3af;
}
/* _content/ZenZonApp/Components/Layout/DashboardLayout.razor.rz.scp.css */
/* Modern CSS Reset */
*[b-p8dya5cjvh] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



/* Glass Effect Container - Light and airy */
.zx-main-header[b-p8dya5cjvh] {
    position: relative;
    z-index: 20;
    overflow: visible;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 30px -10px rgba(0, 20, 40, 0.1), inset 0 1px 2px rgba(255, 255, 255, 0.8);
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    transition: all 0.2s ease;
}

    .zx-main-header:hover[b-p8dya5cjvh] {
        background: rgba(255, 255, 255, 0.75);
        box-shadow: 0 15px 35px -12px rgba(0, 30, 60, 0.15), inset 0 1px 3px rgba(255, 255, 255, 0.9);
    }

/* Clinic Branding Panel */
.clinic-branding-panel[b-p8dya5cjvh] {
    position: relative;
    z-index: 21;
    overflow: visible;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 2rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

/* Branding Left - Logo Section */
.branding-left[b-p8dya5cjvh] {
    display: flex;
    align-items: center;
}

.clinic-logo-wrapper[b-p8dya5cjvh] {
    width: 85px;
    height: 85px;
    border-radius: 22px;
    background: white;
    border: 1px solid rgba(59, 130, 246, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 8px 20px -8px rgba(0, 60, 120, 0.15);
    transition: all 0.25s ease;
}

    .clinic-logo-wrapper:hover[b-p8dya5cjvh] {
        transform: scale(1.02);
        border-color: rgba(59, 130, 246, 0.4);
        box-shadow: 0 12px 25px -10px rgba(0, 80, 160, 0.2);
    }

.clinic-logo-img[b-p8dya5cjvh] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.clinic-logo-placeholder[b-p8dya5cjvh] {
    font-size: 2.6rem;
    font-weight: 600;
    color: #2C3E50;
    background: linear-gradient(135deg, #E3F2FD, #BBDEFB);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Branding Center - Clinic Info */
.branding-center[b-p8dya5cjvh] {
    text-align: center;
}

.clinic-metadata[b-p8dya5cjvh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: center;
}

.meta-item[b-p8dya5cjvh] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1.2rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    border-radius: 40px;
    border: 1px solid rgba(59, 130, 246, 0.15);
    color: #2C3E50;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

    .meta-item:hover[b-p8dya5cjvh] {
        background: white;
        border-color: rgba(59, 130, 246, 0.3);
        transform: translateY(-1px);
        box-shadow: 0 6px 12px -8px rgba(0, 80, 160, 0.2);
    }

    /* Beautiful Emoji Colors */
    .meta-item .material-symbols-outlined[b-p8dya5cjvh] {
        font-size: 1.3rem;
        color: #3B82F6;
    }

/* Branding Right - Status Section */
.branding-right[b-p8dya5cjvh] {
    position: relative;
    z-index: 30;
    overflow: visible;
    display: flex;
    align-items: center;
}

.status-box[b-p8dya5cjvh] {
    position: relative;
    z-index: 31;
    overflow: visible;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(8px);
    border-radius: 24px;
    padding: 1rem 1.6rem;
    border: 1px solid rgba(59, 130, 246, 0.2);
    min-width: 260px;
    box-shadow: 0 8px 20px -10px rgba(0, 30, 60, 0.1);
}

.location-container[b-p8dya5cjvh], .status-container[b-p8dya5cjvh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0;
}

.location-container[b-p8dya5cjvh] {
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
    margin-bottom: 0.3rem;
}

.label[b-p8dya5cjvh] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #5A6F84;
    text-transform: uppercase;
}

.value[b-p8dya5cjvh] {
    font-weight: 600;
    color: #1A2B3C;
    font-size: 0.95rem;
}

/* Location Dropdown Styles */
.location-dropdown[b-p8dya5cjvh] {
    position: relative;
    z-index: 200;
}

.location-selector-btn[b-p8dya5cjvh] {
    background: white;
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 30px;
    padding: 0.4rem 1rem;
    color: #1A2B3C;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

    .location-selector-btn:hover[b-p8dya5cjvh] {
        background: #F8FAFF;
        border-color: rgba(59, 130, 246, 0.4);
        box-shadow: 0 4px 8px -4px rgba(0, 80, 160, 0.15);
    }

.location-dropdown-menu[b-p8dya5cjvh] {
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 20px;
    padding: 0.5rem;
    min-width: 220px;
    z-index: 9999;
    box-shadow: 0 15px 35px -15px rgba(0, 40, 80, 0.2);
    animation: fadeIn-b-p8dya5cjvh 0.2s ease;
}

@keyframes fadeIn-b-p8dya5cjvh {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-item[b-p8dya5cjvh] {
    width: 100%;
    padding: 0.8rem 1.2rem;
    background: transparent;
    border: none;
    color: #1A2B3C;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .dropdown-item:hover[b-p8dya5cjvh] {
        background: rgba(59, 130, 246, 0.08);
    }

    .dropdown-item.active[b-p8dya5cjvh] {
        background: rgba(59, 130, 246, 0.12);
        font-weight: 600;
        color: #2563EB;
    }

    .dropdown-item .material-symbols-outlined[b-p8dya5cjvh] {
        font-size: 1.2rem;
        color: #3B82F6;
    }

/* Status Badge - Light theme */
.status-badge[b-p8dya5cjvh] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 1.2rem;
    border-radius: 40px;
    font-weight: 600;
    font-size: 0.9rem;
}

    .status-badge.active[b-p8dya5cjvh] {
        background: linear-gradient(135deg, #E3F7E3, #C8E6C9);
        color: #1E7E34;
        border: 1px solid rgba(46, 125, 50, 0.2);
    }

    .status-badge.inactive[b-p8dya5cjvh] {
        background: linear-gradient(135deg, #FFEBEE, #FFCDD2);
        color: #B71C1C;
        border: 1px solid rgba(183, 28, 28, 0.15);
    }

.dot[b-p8dya5cjvh] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-badge.active .dot[b-p8dya5cjvh] {
    background: #2E7D32;
}

.status-badge.inactive .dot[b-p8dya5cjvh] {
    background: #B71C1C;
}

/* Navigation Bar - Light theme */
.zx-nav-bar[b-p8dya5cjvh] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
    padding: 1rem 0 0.2rem;
    border-top: 1px solid rgba(59, 130, 246, 0.15);
}

.nav-btn[b-p8dya5cjvh] {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.8rem 1.3rem;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 18px;
    color: #2C3E50;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

    .nav-btn:hover[b-p8dya5cjvh] {
        background: white;
        transform: translateY(-2px);
        border-color: rgba(59, 130, 246, 0.3);
        box-shadow: 0 8px 16px -10px rgba(0, 60, 120, 0.15);
    }

    .nav-btn.active[b-p8dya5cjvh] {
        background: white;
        border-color: #3B82F6;
        box-shadow: 0 6px 14px -8px #3B82F6;
        font-weight: 600;
        color: #2563EB;
    }

    /* Beautiful Emoji-like Icon Colors */
    .nav-btn .material-symbols-outlined[b-p8dya5cjvh] {
        font-size: 1.4rem;
    }

    .nav-btn svg[b-p8dya5cjvh] {
        stroke: #4A5F73;
    }

    /* Individual icon colors */
    .nav-btn[href="/appointments"] svg[b-p8dya5cjvh] {
        stroke: #3B82F6;
    }

    .nav-btn[href="/patients"] .material-symbols-outlined[b-p8dya5cjvh] {
        color: #EC4899;
    }

    .nav-btn[href="/practitioners"] .material-symbols-outlined[b-p8dya5cjvh] {
        color: #8B5CF6;
    }

    .nav-btn[href="/services"] .material-symbols-outlined[b-p8dya5cjvh] {
        color: #10B981;
    }

    .nav-btn[href="/activities"] .material-symbols-outlined[b-p8dya5cjvh] {
        color: #F59E0B;
    }

    .nav-btn[href="/clinic-hours"] .material-symbols-outlined[b-p8dya5cjvh] {
        color: #6366F1;
    }

    .nav-btn[href="/overview"] .material-symbols-outlined[b-p8dya5cjvh] {
        color: #EF4444;
    }

    .nav-btn[href="/subscription"] .material-symbols-outlined[b-p8dya5cjvh] {
        color: #FBBF24;
    }

    .nav-btn[href^="/ClinicClient"] .material-symbols-outlined[b-p8dya5cjvh] {
        color: #14B8A6;
    }

    .nav-btn[href="/reports"] .material-symbols-outlined[b-p8dya5cjvh] {
        color: #A78BFA;
    }

    .nav-btn[href="/settings"] .material-symbols-outlined[b-p8dya5cjvh] {
        color: #64748B;
    }

/* Page Content Area - Light theme */
zx-page-content

.zx-page-content:hover[b-p8dya5cjvh] {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 20px 40px -18px rgba(0, 30, 60, 0.12);
}

    /* Content text styling */
    .zx-page-content h1[b-p8dya5cjvh],
    .zx-page-content h2[b-p8dya5cjvh],
    .zx-page-content h3[b-p8dya5cjvh],
    .zx-page-content p[b-p8dya5cjvh],
    .zx-page-content span:not(.material-symbols-outlined)[b-p8dya5cjvh] {
        color: #1A2B3C;
    }

    /* Table styling for content area */
    .zx-page-content table[b-p8dya5cjvh] {
        color: #2C3E50;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 16px;
    }

    .zx-page-content th[b-p8dya5cjvh] {
        color: #1E3A5F;
        font-weight: 600;
    }

    .zx-page-content td[b-p8dya5cjvh] {
        color: #2C3E50;
        border-bottom: 1px solid rgba(59, 130, 246, 0.1);
    }

    /* Form elements in content area */
    .zx-page-content input[b-p8dya5cjvh],
    .zx-page-content select[b-p8dya5cjvh],
    .zx-page-content textarea[b-p8dya5cjvh] {
        background: white;
        border: 1px solid rgba(59, 130, 246, 0.2);
        color: #1A2B3C;
        border-radius: 12px;
        padding: 0.6rem 1rem;
    }

        .zx-page-content input:focus[b-p8dya5cjvh],
        .zx-page-content select:focus[b-p8dya5cjvh],
        .zx-page-content textarea:focus[b-p8dya5cjvh] {
            border-color: #3B82F6;
            outline: none;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

    .zx-page-content label[b-p8dya5cjvh] {
        color: #2C3E50;
        font-weight: 500;
    }

    /* Button styling in content area */
    .zx-page-content button:not(.dropdown-item):not(.location-selector-btn)[b-p8dya5cjvh] {
        background: white;
        border: 1px solid rgba(59, 130, 246, 0.2);
        color: #2C3E50;
        border-radius: 12px;
        padding: 0.6rem 1.2rem;
        font-weight: 500;
        transition: all 0.2s ease;
    }

        .zx-page-content button:not(.dropdown-item):not(.location-selector-btn):hover[b-p8dya5cjvh] {
            background: #F8FAFF;
            border-color: #3B82F6;
            color: #2563EB;
        }

    /* Card styling for content */
    .zx-page-content .card[b-p8dya5cjvh] {
        background: rgba(255, 255, 255, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.9);
        border-radius: 20px;
        padding: 1.5rem;
        box-shadow: 0 5px 15px -8px rgba(0, 0, 0, 0.05);
    }

/* Responsive Design */
@media (max-width: 1200px) {
    .clinic-branding-panel[b-p8dya5cjvh] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        text-align: center;
    }

    .branding-left[b-p8dya5cjvh], .branding-right[b-p8dya5cjvh] {
        justify-content: center;
    }

    .status-box[b-p8dya5cjvh] {
        width: 100%;
        max-width: 400px;
    }
}

@media (max-width: 768px) {
    .zx-layout[b-p8dya5cjvh] {
        padding: 1rem;
    }

    .clinic-name-display[b-p8dya5cjvh] {
        font-size: 1.8rem;
    }

    .clinic-metadata[b-p8dya5cjvh] {
        flex-direction: column;
        align-items: center;
    }

    .nav-btn span[b-p8dya5cjvh] {
        display: none;
    }

    .nav-btn[b-p8dya5cjvh] {
        padding: 0.9rem;
    }

        .nav-btn .material-symbols-outlined[b-p8dya5cjvh] {
            font-size: 1.6rem;
        }

    .zx-main-header[b-p8dya5cjvh] {
        padding: 1.2rem;
    }
}

/* Custom scrollbar - Light theme */
[b-p8dya5cjvh]::-webkit-scrollbar {
    width: 10px;
}

[b-p8dya5cjvh]::-webkit-scrollbar-track {
    background: rgba(59, 130, 246, 0.05);
    border-radius: 10px;
}

[b-p8dya5cjvh]::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.2);
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

    [b-p8dya5cjvh]::-webkit-scrollbar-thumb:hover {
        background: rgba(59, 130, 246, 0.3);
    }

/* Selection styling */
[b-p8dya5cjvh]::selection {
    background: rgba(59, 130, 246, 0.2);
    color: #1A2B3C;
}

/* Placeholder text */
[b-p8dya5cjvh]::placeholder {
    color: #94A3B8;
    opacity: 0.7;
}
.nav-dropdown[b-p8dya5cjvh] {
    position: relative;
    display: inline-block;
}

.nav-dropdown-menu[b-p8dya5cjvh] {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 999;
    min-width: 150px;
    padding: 4px 0;
}

.nav-dropdown-item[b-p8dya5cjvh] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    text-decoration: none;
    color: #1e3a5f;
    font-size: 0.875rem;
    white-space: nowrap;
}

    .nav-dropdown-item:hover[b-p8dya5cjvh] {
        background: #f1f5f9;
    }
/* _content/ZenZonApp/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-8su868u1cr] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-8su868u1cr] {
    flex: 1;
}

.sidebar[b-8su868u1cr] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-8su868u1cr] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

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

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

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

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

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

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

    .sidebar[b-8su868u1cr] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

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

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

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

#blazor-error-ui[b-8su868u1cr] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px 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-8su868u1cr] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/ZenZonApp/Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-cz223fxntn] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-cz223fxntn] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-cz223fxntn] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

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

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

.bi-house-door-fill-nav-menu[b-cz223fxntn] {
    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-cz223fxntn] {
    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-cz223fxntn] {
    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-cz223fxntn] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

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

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

    .nav-item[b-cz223fxntn]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-cz223fxntn]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-cz223fxntn]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

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

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

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

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

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* _content/ZenZonApp/Components/Pages/Account/BasicPlanPackagePicker.razor.rz.scp.css */
.basic-package-page[b-6eb5jc45h1] {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container[b-6eb5jc45h1] {
    max-width: 1200px;
    margin: 0 auto;
}

.page-title[b-6eb5jc45h1] {
    color: white;
    font-size: 2.5rem;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.page-subtitle[b-6eb5jc45h1] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
}

.rings-grid[b-6eb5jc45h1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 2rem;
    justify-items: center;
    padding: 2rem 0;
}

.ring-card[b-6eb5jc45h1] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 1rem;
    transition: transform 0.3s ease;
}

    .ring-card:hover[b-6eb5jc45h1] {
        transform: translateY(-5px);
    }

.ring-outer[b-6eb5jc45h1] {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255,255,255,0.5);
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.ring-card.selected .ring-outer[b-6eb5jc45h1] {
    border-color: #fff;
    box-shadow: 0 0 20px rgba(255,255,255,0.5);
    transform: scale(1.05);
}

.ring-inner[b-6eb5jc45h1] {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.profession-name[b-6eb5jc45h1] {
    color: white;
    font-weight: 600;
    text-align: center;
    font-size: 1rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.selection-summary[b-6eb5jc45h1] {
    margin-top: 3rem;
}

.summary-card[b-6eb5jc45h1] {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.summary-left h5[b-6eb5jc45h1] {
    color: white;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}

.summary-left p[b-6eb5jc45h1] {
    color: rgba(255, 255, 255, 0.9);
}

.btn-glass-primary[b-6eb5jc45h1], .btn-glass-secondary[b-6eb5jc45h1] {
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    color: white;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.3);
}

.btn-glass-primary[b-6eb5jc45h1] {
    background: rgba(255,255,255,0.3);
}

    .btn-glass-primary:hover:not(:disabled)[b-6eb5jc45h1] {
        background: rgba(255,255,255,0.4);
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

.btn-glass-secondary:hover[b-6eb5jc45h1] {
    background: rgba(255,255,255,0.3);
    transform: translateY(-2px);
}

.btn-glass-primary:disabled[b-6eb5jc45h1] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive adjustments */
@@media (max-width: 768px) {
    .summary-card[b-6eb5jc45h1] {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .rings-grid[b-6eb5jc45h1] {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    .ring-outer[b-6eb5jc45h1] {
        width: 140px;
        height: 140px;
    }

    .ring-inner[b-6eb5jc45h1] {
        width: 110px;
        height: 110px;
    }

    .profession-name[b-6eb5jc45h1] {
        font-size: 0.9rem;
    }
}
/* _content/ZenZonApp/Components/Pages/Account/Login.razor.rz.scp.css */
.glass-container[b-akk0t32b8y] {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 2rem 1rem;
    position: relative;
    overflow: hidden;
}

    .glass-container[b-akk0t32b8y]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
        pointer-events: none;
    }

    .glass-container[b-akk0t32b8y]::after {
        content: '';
        position: absolute;
        bottom: -50%;
        left: -50%;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
        pointer-events: none;
    }

.glass-card[b-akk0t32b8y] {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 8px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .glass-card:hover[b-akk0t32b8y] {
        transform: translateY(-5px);
        box-shadow: 0 30px 50px rgba(0, 0, 0, 0.15);
    }

.glass-header[b-akk0t32b8y] {
    text-align: center;
    margin-bottom: 2rem;
}

    .glass-header h2[b-akk0t32b8y] {
        font-size: 2.2rem;
        font-weight: 600;
        background: linear-gradient(135deg, #667eea, #764ba2);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 0.5rem;
    }

    .glass-header p[b-akk0t32b8y] {
        color: #4a5568;
        font-size: 1rem;
        opacity: 0.9;
    }

.glass-input[b-akk0t32b8y] {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 16px !important;
    padding: 1rem 1.2rem !important;
    height: auto !important;
    font-size: 1rem !important;
    color: #2d3748 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.3s ease !important;
}

    .glass-input:focus[b-akk0t32b8y] {
        background: rgba(255, 255, 255, 1) !important;
        border-color: #667eea !important;
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.1) !important;
        outline: none !important;
    }

.floating-label[b-akk0t32b8y] {
    color: #4a5568 !important;
    font-weight: 500 !important;
    opacity: 0.8;
    padding-left: 0.8rem !important;
}

.glass-checkbox[b-akk0t32b8y] {
    accent-color: #667eea;
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 0.5rem;
    cursor: pointer;
}

.glass-checkbox-label[b-akk0t32b8y] {
    color: #4a5568;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
}

.glass-button[b-akk0t32b8y] {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    border: none !important;
    border-radius: 16px !important;
    padding: 1rem !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    color: white !important;
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.2) !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

    .glass-button:hover:not(:disabled)[b-akk0t32b8y] {
        transform: translateY(-2px);
        box-shadow: 0 15px 30px rgba(102, 126, 234, 0.3) !important;
    }

    .glass-button:active:not(:disabled)[b-akk0t32b8y] {
        transform: translateY(0);
    }

    .glass-button[b-akk0t32b8y]::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .glass-button:hover[b-akk0t32b8y]::after {
        opacity: 1;
    }

    .glass-button:disabled[b-akk0t32b8y] {
        background: linear-gradient(135deg, #a0aec0, #718096) !important;
        opacity: 0.7;
        cursor: not-allowed;
    }

.glass-link[b-akk0t32b8y] {
    color: #667eea !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    position: relative;
    transition: all 0.3s ease;
}

    .glass-link:hover[b-akk0t32b8y] {
        color: #764ba2 !important;
    }

    .glass-link[b-akk0t32b8y]::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 2px;
        background: linear-gradient(135deg, #667eea, #764ba2);
        transition: width 0.3s ease;
    }

    .glass-link:hover[b-akk0t32b8y]::after {
        width: 100%;
    }

.glass-alert[b-akk0t32b8y] {
    background: rgba(254, 202, 202, 0.8) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(252, 165, 165, 0.5) !important;
    border-radius: 16px !important;
    color: #991b1b !important;
    font-weight: 500;
    padding: 1rem !important;
}

.glass-validation[b-akk0t32b8y] {
    color: #dc2626 !important;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    margin-left: 0.5rem;
    font-weight: 500;
}

.glass-spinner[b-akk0t32b8y] {
    color: white;
    margin-right: 0.75rem;
}

.form-floating[b-akk0t32b8y] {
    margin-bottom: 1.25rem;
}

    .form-floating > .form-control:focus ~ label[b-akk0t32b8y],
    .form-floating > .form-control:not(:placeholder-shown) ~ label[b-akk0t32b8y] {
        color: #667eea !important;
        opacity: 1;
        font-weight: 600;
        transform: scale(0.85) translateY(-0.75rem) translateX(0.15rem);
    }

.checkbox-wrapper[b-akk0t32b8y] {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
/* _content/ZenZonApp/Components/Pages/Account/Register.razor.rz.scp.css */
.glass-container[b-vecwm614t8] {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 2rem 1rem;
    position: relative;
    overflow: hidden;
}

    .glass-container[b-vecwm614t8]::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
        pointer-events: none;
    }

    .glass-container[b-vecwm614t8]::after {
        content: '';
        position: absolute;
        bottom: -50%;
        left: -50%;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
        pointer-events: none;
    }

.glass-card[b-vecwm614t8] {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 8px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .glass-card:hover[b-vecwm614t8] {
        transform: translateY(-5px);
        box-shadow: 0 30px 50px rgba(0, 0, 0, 0.15);
    }

.glass-header[b-vecwm614t8] {
    text-align: center;
    margin-bottom: 2rem;
}

    .glass-header h2[b-vecwm614t8] {
        font-size: 2.2rem;
        font-weight: 600;
        background: linear-gradient(135deg, #667eea, #764ba2);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 0.5rem;
    }

    .glass-header p[b-vecwm614t8] {
        color: #4a5568;
        font-size: 1rem;
        opacity: 0.9;
    }

.glass-input[b-vecwm614t8] {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 16px !important;
    padding: 1rem 1.2rem !important;
    height: auto !important;
    font-size: 1rem !important;
    color: #2d3748 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.3s ease !important;
}

    .glass-input:focus[b-vecwm614t8] {
        background: rgba(255, 255, 255, 1) !important;
        border-color: #667eea !important;
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.1) !important;
        outline: none !important;
    }

.floating-label[b-vecwm614t8] {
    color: #4a5568 !important;
    font-weight: 500 !important;
    opacity: 0.8;
    padding-left: 0.8rem !important;
}

.glass-checkbox[b-vecwm614t8] {
    accent-color: #667eea;
    margin-right: 0.5rem;
}

.glass-checkbox-label[b-vecwm614t8] {
    color: #4a5568;
    font-weight: 500;
}

.glass-button[b-vecwm614t8] {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    border: none !important;
    border-radius: 16px !important;
    padding: 1rem !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
    color: white !important;
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.2) !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

    .glass-button:hover:not(:disabled)[b-vecwm614t8] {
        transform: translateY(-2px);
        box-shadow: 0 15px 30px rgba(102, 126, 234, 0.3) !important;
    }

    .glass-button:active:not(:disabled)[b-vecwm614t8] {
        transform: translateY(0);
    }

    .glass-button[b-vecwm614t8]::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .glass-button:hover[b-vecwm614t8]::after {
        opacity: 1;
    }

    .glass-button:disabled[b-vecwm614t8] {
        background: linear-gradient(135deg, #a0aec0, #718096) !important;
        opacity: 0.7;
        cursor: not-allowed;
    }

.glass-link[b-vecwm614t8] {
    color: #667eea !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    position: relative;
    transition: all 0.3s ease;
}

    .glass-link:hover[b-vecwm614t8] {
        color: #764ba2 !important;
    }

    .glass-link[b-vecwm614t8]::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 2px;
        background: linear-gradient(135deg, #667eea, #764ba2);
        transition: width 0.3s ease;
    }

    .glass-link:hover[b-vecwm614t8]::after {
        width: 100%;
    }

.glass-alert[b-vecwm614t8] {
    background: rgba(254, 202, 202, 0.8) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(252, 165, 165, 0.5) !important;
    border-radius: 16px !important;
    color: #991b1b !important;
    font-weight: 500;
    padding: 1rem !important;
}

.glass-validation[b-vecwm614t8] {
    color: #dc2626 !important;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    margin-left: 0.5rem;
    font-weight: 500;
}

.glass-spinner[b-vecwm614t8] {
    color: white;
    margin-right: 0.75rem;
}

.form-floating[b-vecwm614t8] {
    margin-bottom: 1.25rem;
}

    .form-floating > .form-control:focus ~ label[b-vecwm614t8],
    .form-floating > .form-control:not(:placeholder-shown) ~ label[b-vecwm614t8] {
        color: #667eea !important;
        opacity: 1;
        font-weight: 600;
    }
/* _content/ZenZonApp/Components/Pages/Appointments.razor.rz.scp.css */
/* ==============================================
   GLOBAL TYPOGRAPHY & COLORS
   ============================================== */

/* Global heading / label colour */
.page-title[b-aue1v7bunu], /* "Appointments" */
.schedule-title[b-aue1v7bunu], /* "Schedule" */
.calendar-title[b-aue1v7bunu], /* "Monthly View" */
.practitioners-title[b-aue1v7bunu], /* "Practitioners" */
.time-header[b-aue1v7bunu],
.time-cell[b-aue1v7bunu] {
    color: #003366; /* dark blue */

}

/* Schedule table headers */
.schedule-table thead th[b-aue1v7bunu] {
    text-align: center;
    color: #003366;
    font-weight: 600;
}

/* Time column cells */
.schedule-table td.time-cell[b-aue1v7bunu] {
    text-align: center;
    color: #003366;

}

/* Weekday letters in mini calendar */
.calendar-weekday-header small[b-aue1v7bunu] {
    color: #003366;
    font-weight: 600;
}

/* Month & Year selects */
.calendar-header .form-select[b-aue1v7bunu] {
    color: #003366;
    font-weight: 600;
    border-color: #d0d7e2;
}

/* Calendar header buttons */
.calendar-header .btn-outline-secondary[b-aue1v7bunu] {
    color: #003366;
    border-color: #d0d7e2;
}

/* ==============================================
   PRACTITIONER STYLES
   ============================================== */

/* Practitioner chips - default state */
.practitioner-chip .fw-semibold[b-aue1v7bunu],
.practitioner-chip .practitioner-profession[b-aue1v7bunu] {
    color: #003366;
}

/* Active practitioner chip */
.btn-primary.practitioner-chip .fw-semibold[b-aue1v7bunu],
.btn-primary.practitioner-chip .practitioner-profession[b-aue1v7bunu] {
    color: #ffffff;
}

/* Practitioner profession label */
.practitioner-profession[b-aue1v7bunu] {
    color: #0d6efd;
}

/* Hover/active state for profession text */
.btn-outline-primary:hover .practitioner-profession[b-aue1v7bunu],
.btn-primary .practitioner-profession[b-aue1v7bunu],
.btn-primary:hover .practitioner-profession[b-aue1v7bunu] {
    color: #ffffff;
}

/* Practitioner avatar */
.practitioner-avatar[b-aue1v7bunu] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.practitioner-avatar-active[b-aue1v7bunu] {
    border-color: var(--bs-primary);
}

/* Practitioner column headers in schedule */
.practitioner-column-header[b-aue1v7bunu] {
    vertical-align: middle !important;
    padding: 4px !important;
    min-width: 100px;
    transition: all 0.2s ease;
    cursor: pointer;
    user-select: none;
}

    .practitioner-column-header:hover[b-aue1v7bunu] {
        background-color: #f8f9fa !important;
    }

.practitioner-active[b-aue1v7bunu] {
    background-color: #e7f3ff !important;
    border-bottom: 2px solid #0d6efd !important;
}

.practitioner-inactive[b-aue1v7bunu] {
    background-color: #f8f9fa !important;
}

.practitioner-avatar-header[b-aue1v7bunu] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #dee2e6;
}

.practitioner-avatar-header-sm[b-aue1v7bunu] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #dee2e6;
}

/* ==============================================
   CALENDAR STYLES
   ============================================== */

/* Base calendar day button */
.calendar-day-btn[b-aue1v7bunu] {
    position: relative;
    border: 1px solid #8ab4f8;
    background-color: #ffffff;
    color: #202124;
    border-radius: 6px;
    padding: 0;
}

/* Days from previous/next month */
.calendar-day-outside[b-aue1v7bunu] {
    color: #9aa0a6;
    opacity: 0.7;
}

/* Selected day */
.calendar-day-selected[b-aue1v7bunu] {
    background-color: AliceBlue;
    border-color: #1a73e8;
    color: #0b5394;
}

/* Today */
.calendar-day-today[b-aue1v7bunu] {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: #ffffff;
}

/* Days with appointments */
.calendar-day-has-appt small[b-aue1v7bunu] {
    font-weight: 600;
}

/* Month/Year buttons */
.calendar-monthyear-btn[b-aue1v7bunu] {
    color: #202124;
}

    .calendar-monthyear-btn:hover[b-aue1v7bunu] {
        text-decoration: underline;
    }

/* ==============================================
   APPOINTMENT CELL STYLES
   ============================================== */

/* Appointment cell container */
td.appointment-cell[b-aue1v7bunu] {
    position: relative;
    padding: 2px 4px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    vertical-align: middle;
}

/* Compact appointment content */
.appointment-cell .text-center[b-aue1v7bunu] {
    line-height: 1.1;
}

.appointment-cell strong[b-aue1v7bunu] {
    font-size: 0.75rem;
    font-weight: 600;
}

.appointment-cell .small[b-aue1v7bunu] {
    font-size: 0.70rem;
}

.appointment-cell .status-badge[b-aue1v7bunu] {
    font-size: 0.65rem;
    padding: 0.1rem 0.35rem;
}
/* Payment and case indicators */
/* PAID $ indicator — text only (no square) */
.paid-indicator[b-aue1v7bunu] {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-weight: 800;
    font-size: 14px;
    line-height: 1;
    /* keep it crisp on glass */
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* Option A: DarkGreen */
.paid-indicator[b-aue1v7bunu] {
    color: #0B6B2E !important;
}

.telehealth-indicator[b-aue1v7bunu] {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 0.9rem;
    line-height: 1;
}

/* ==============================================
   CONTEXT MENU STYLES
   ============================================== */

.context-menu-backdrop[b-aue1v7bunu] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background-color: transparent;
}

.context-menu[b-aue1v7bunu] {
    position: fixed;
    z-index: 10000;
    min-width: 180px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 4px 0;
    animation: fadeIn-b-aue1v7bunu 0.1s ease-out;
}

.context-item[b-aue1v7bunu] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 16px;
    border: none;
    background: none;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
}

    .context-item:hover[b-aue1v7bunu] {
        background-color: #f5f5f5;
    }

    .context-item:disabled[b-aue1v7bunu] {
        color: #999;
        cursor: not-allowed;
        background-color: #fafafa;
    }

    .context-item.text-danger[b-aue1v7bunu] {
        color: #dc3545;
    }

        .context-item.text-danger:hover[b-aue1v7bunu] {
            background-color: #f8d7da;
            color: #721c24;
        }

.context-menu hr[b-aue1v7bunu] {
    margin: 4px 0;
    border: none;
    border-top: 1px solid #eee;
}

/* Context menu animations */
@keyframes fadeIn-b-aue1v7bunu {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Prevent text selection */
.context-menu[b-aue1v7bunu] {
    user-select: none;
    -webkit-user-select: none;
}

/* ==============================================
   GLASSMORPHISM MODAL STYLES
   ============================================== */

/* Modal backdrop */
.modal-backdrop.glass-backdrop[b-aue1v7bunu] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 9999;
    cursor: pointer;
}

.glass-backdrop[b-aue1v7bunu] {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Modal container */
.modal.glass-modal-container[b-aue1v7bunu] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    pointer-events: auto;
}

.modal.d-block[b-aue1v7bunu] {
    display: flex !important;
}

/* Modal dialog */
.modal.glass-modal-container .modal-dialog[b-aue1v7bunu] {
    pointer-events: auto;
    margin: 1rem;
}

/* Glass card */
.glass-card[b-aue1v7bunu] {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    pointer-events: auto;
    cursor: default;
}

/* Header */
.glass-header[b-aue1v7bunu] {
    background: rgba(255, 255, 255, 0.4) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 15px 15px 0 0 !important;
    padding: 1rem 1.5rem !important;
}

/* Footer */
.glass-footer[b-aue1v7bunu] {
    background: rgba(255, 255, 255, 0.4) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 0 0 15px 15px !important;
    padding: 1rem 1.5rem !important;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

    .glass-footer .btn[b-aue1v7bunu] {
        flex: 1;
    }

/* Inputs */
.glass-input[b-aue1v7bunu] {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px !important;
    transition: all 0.3s ease;
    pointer-events: auto !important;
    cursor: text !important;
}

select.glass-input[b-aue1v7bunu] {
    cursor: pointer !important;
}

.glass-input:focus[b-aue1v7bunu] {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(86, 140, 255, 0.5) !important;
    box-shadow: 0 0 0 0.25rem rgba(86, 140, 255, 0.2) !important;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

select.glass-input option[b-aue1v7bunu] {
    background: rgba(255, 255, 255, 0.95);
    color: #333;
}

/* Textarea */
.glass-textarea[b-aue1v7bunu] {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px !important;
    transition: all 0.3s ease;
    resize: vertical;
    min-height: 80px;
}

    .glass-textarea:focus[b-aue1v7bunu] {
        background: rgba(255, 255, 255, 0.9) !important;
        border-color: rgba(86, 140, 255, 0.5) !important;
        box-shadow: 0 0 0 0.25rem rgba(86, 140, 255, 0.2) !important;
    }

/* Labels */
.glass-label[b-aue1v7bunu] {
    color: rgba(0, 0, 0, 0.8);
    font-weight: 500;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
    margin-bottom: 0.5rem;
}

/* Buttons */
.btn-glass-primary[b-aue1v7bunu] {
    background: rgba(86, 140, 255, 0.8) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(86, 140, 255, 0.3) !important;
    color: white !important;
    border-radius: 10px !important;
    transition: all 0.3s ease;
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative; /* Ensure it creates a stacking context */
    z-index: 2; /* Ensure it's above its parent */
}
/* Debug: Make Book button stand out */
.btn-glass-primary[b-aue1v7bunu] {
    border: 3px solid red !important; /* Temporary debug border */
    position: relative !important;
    z-index: 9999 !important;
}
    .btn-glass-primary:hover[b-aue1v7bunu] {
        background: rgba(86, 140, 255, 0.9) !important;
        border-color: rgba(86, 140, 255, 0.5) !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 15px rgba(86, 140, 255, 0.3);
    }

.btn-glass-secondary[b-aue1v7bunu] {
    background: rgba(108, 117, 125, 0.7) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: white !important;
    border-radius: 10px !important;
    transition: all 0.3s ease;
    pointer-events: auto !important;
    cursor: pointer !important;
}

    .btn-glass-secondary:hover[b-aue1v7bunu] {
        background: rgba(108, 117, 125, 0.8) !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

.btn-glass-danger[b-aue1v7bunu] {
    background: rgba(220, 53, 69, 0.8) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(220, 53, 69, 0.3) !important;
    color: white !important;
    border-radius: 10px !important;
    transition: all 0.3s ease;
    padding: 0.5rem 1rem !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

    .btn-glass-danger:hover[b-aue1v7bunu] {
        background: rgba(220, 53, 69, 0.9) !important;
        border-color: rgba(220, 53, 69, 0.5) !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
    }

    .btn-glass-danger:active[b-aue1v7bunu] {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
    }

/* Context menu items */
.glass-menu-item[b-aue1v7bunu] {
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    margin: 2px 4px;
    padding: 8px 12px;
    width: calc(100% - 8px);
    text-align: left;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    font-size: 0.9rem;
}

    .glass-menu-item:hover[b-aue1v7bunu] {
        background: rgba(255, 255, 255, 0.7) !important;
        border-color: rgba(86, 140, 255, 0.3) !important;
        transform: translateX(2px);
    }

    .glass-menu-item:disabled[b-aue1v7bunu] {
        background: rgba(255, 255, 255, 0.2) !important;
        color: rgba(0, 0, 0, 0.3) !important;
        cursor: not-allowed;
        transform: none !important;
    }

.glass-divider[b-aue1v7bunu] {
    border-color: rgba(255, 255, 255, 0.3) !important;
    margin: 8px 4px !important;
}

/* Tables */
.glass-table[b-aue1v7bunu] {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    overflow: hidden;
}

.glass-table-header[b-aue1v7bunu] {
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.glass-table-row[b-aue1v7bunu] {
    background: rgba(255, 255, 255, 0.3) !important;
    transition: all 0.2s ease;
}

    .glass-table-row:hover[b-aue1v7bunu] {
        background: rgba(255, 255, 255, 0.5) !important;
    }

.glass-badge[b-aue1v7bunu] {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-weight: 500;
}

.glass-text[b-aue1v7bunu] {
    color: rgba(0, 0, 0, 0.8);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

/* ==============================================
   CHECK-IN MODAL STYLES
   ============================================== */

.glass-checkin-backdrop[b-aue1v7bunu] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.glass-checkin-modal[b-aue1v7bunu] {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.glass-checkin-header[b-aue1v7bunu] {
    padding: 24px 28px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.7);
}

.glass-checkin-title[b-aue1v7bunu] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.glass-checkin-subtitle[b-aue1v7bunu] {
    font-size: 0.95rem;
    color: #666;
}

.glass-checkin-patient-info[b-aue1v7bunu] {
    display: flex;
    gap: 24px;
    margin-top: 12px;
    padding: 16px;
    background: rgba(240, 247, 255, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(33, 150, 243, 0.15);
}

.glass-checkin-info-item[b-aue1v7bunu] {
    flex: 1;
}

.glass-checkin-info-label[b-aue1v7bunu] {
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.glass-checkin-info-value[b-aue1v7bunu] {
    font-size: 1.1rem;
    font-weight: 500;
    color: #2196F3;
}

.glass-checkin-body[b-aue1v7bunu] {
    padding: 28px;
    flex: 1;
    overflow-y: auto;
}

.glass-checkin-services-title[b-aue1v7bunu] {
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.glass-checkin-service-item[b-aue1v7bunu] {
    display: flex;
    align-items: center;
    padding: 16px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: all 0.2s;
}

    .glass-checkin-service-item:hover[b-aue1v7bunu] {
        background: rgba(240, 247, 255, 0.9);
        transform: translateX(4px);
    }

.glass-checkin-checkbox[b-aue1v7bunu] {
    margin-right: 16px;
}

.glass-checkin-service-details[b-aue1v7bunu] {
    flex: 1;
}

.glass-checkin-service-name[b-aue1v7bunu] {
    font-weight: 500;
    color: #333;
    margin-bottom: 4px;
}

.glass-checkin-service-meta[b-aue1v7bunu] {
    font-size: 0.85rem;
    color: #666;
}

.glass-checkin-footer[b-aue1v7bunu] {
    padding: 20px 28px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.glass-checkin-selectall[b-aue1v7bunu] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.glass-checkin-selectall-label[b-aue1v7bunu] {
    cursor: pointer;
}

.glass-checkin-count[b-aue1v7bunu] {
    font-size: 0.9rem;
    color: #666;
    margin-right: 16px;
}

.glass-checkin-buttons[b-aue1v7bunu] {
    display: flex;
    gap: 12px;
}

.glass-checkin-btn[b-aue1v7bunu] {
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.glass-checkin-btn-secondary[b-aue1v7bunu] {
    background: rgba(0, 0, 0, 0.05);
    color: #666;
}

    .glass-checkin-btn-secondary:hover[b-aue1v7bunu] {
        background: rgba(0, 0, 0, 0.1);
    }

/* ==============================================
   NAVIGATION & SIDEBAR
   ============================================== */

/* Quick dashboard fix */
.row > .col-12.col-md-4.col-lg-3[b-aue1v7bunu] {
    display: block !important;
    width: 100% !important;
    max-width: 280px !important;
    margin-right: auto !important;
    margin-left: 0 !important;
}

.sticky-top[b-aue1v7bunu] {
    position: -webkit-sticky;
    position: sticky;
    width: 100%;
    max-width: 280px;
}

/* Navigation */
.nav-children[b-aue1v7bunu] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
    padding-left: 8px;
}

    .nav-children.nested[b-aue1v7bunu] {
        padding-left: 14px;
        margin-top: 8px;
    }

.nav-chev[b-aue1v7bunu] {
    margin-left: auto;
    font-size: 12px;
    opacity: 0.75;
    transition: transform .15s ease;
}

    .nav-chev.open[b-aue1v7bunu] {
        transform: rotate(180deg);
    }

.glass-nav-btn.nav-child[b-aue1v7bunu] {
    height: 40px;
    background: rgba(255,255,255,0.28);
}

.glass-nav-btn.nav-grandchild[b-aue1v7bunu] {
    height: 38px;
    background: rgba(255,255,255,0.22);
}

.ico.small[b-aue1v7bunu] {
    width: 26px;
    height: 26px;
    border-radius: 10px;
    font-size: 13px;
}

.ico.tiny[b-aue1v7bunu] {
    width: 24px;
    height: 24px;
    border-radius: 10px;
    font-size: 12px;
}

/* ==============================================
   UTILITY CLASSES
   ============================================== */

/* Icon spacing */
.btn i[b-aue1v7bunu] {
    font-size: 0.9em;
}

/* Spacing */
.mb-3[b-aue1v7bunu] {
    margin-bottom: 1rem !important;
}

/* ==============================================
   RESPONSIVE ADJUSTMENTS
   ============================================== */

@media (max-width: 576px) {
    .glass-card[b-aue1v7bunu] {
        margin: 1rem;
    }

    .glass-header[b-aue1v7bunu], .glass-footer[b-aue1v7bunu] {
        padding: 0.75rem 1rem !important;
    }

    .btn-glass-danger[b-aue1v7bunu],
    .btn-glass-secondary[b-aue1v7bunu],
    .btn-glass-primary[b-aue1v7bunu] {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.875rem;
    }

    .practitioner-column-header[b-aue1v7bunu] {
        min-width: 80px;
    }

    .practitioner-avatar-header[b-aue1v7bunu] {
        width: 30px;
        height: 30px;
    }
}

/* Prevent body scroll when modal is open */
body.modal-open[b-aue1v7bunu] {
    overflow: hidden;
}
.practitioner-blocked[b-aue1v7bunu] {
    opacity: 0.7;
    position: relative;
}
/* ==============================================
   SCHEDULE GRID SCROLLABLE CONTAINER
   ============================================== */

.schedule-grid-scrollable[b-aue1v7bunu] {
    max-height: 81vh; /* Adjust this value as needed */
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    position: relative;
}

    /* Make the time column sticky */
    .schedule-grid-scrollable .sticky-col[b-aue1v7bunu] {
        position: sticky;
        left: 0;
        background-color: #f8f9fa;
        z-index: 10;
    }

    /* Make the practitioner headers sticky */
    .schedule-grid-scrollable .sticky-head[b-aue1v7bunu] {
        position: sticky;
        top: 0;
        z-index: 20;
        background-color: #f8f9fa;
    }

    /* Make the corner cell (time header) doubly sticky */
    .schedule-grid-scrollable .sticky-corner[b-aue1v7bunu] {
        position: sticky;
        left: 0;
        top: 0;
        z-index: 30;
    }

    /* Ensure the table takes full width */
    .schedule-grid-scrollable .schedule-table[b-aue1v7bunu] {
        margin-bottom: 0;
        min-width: 100%;
    }

    /* Optional: Style the scrollbar */
    .schedule-grid-scrollable[b-aue1v7bunu]::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    .schedule-grid-scrollable[b-aue1v7bunu]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    .schedule-grid-scrollable[b-aue1v7bunu]::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }

        .schedule-grid-scrollable[b-aue1v7bunu]::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
        /* 1) Make sure the scroll wrapper is the sticky reference (use your real wrapper class if different) */
.schedule-grid-scrollable[b-aue1v7bunu],
.schedule-scroll[b-aue1v7bunu],
.schedule-wrapper[b-aue1v7bunu] {
    position: relative;
    overflow: auto;
}

/* 2) Practitioner header cells sticky (top) */
.schedule-table thead th[b-aue1v7bunu] {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #eef6ff; /* keep a solid bg while sticky */
}

/* 3) TIME HEADER = sticky in both directions (top-left corner) */
.schedule-table thead th.time-header[b-aue1v7bunu],
.schedule-table thead th.sticky-corner[b-aue1v7bunu] {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 999;                 /* must be higher than other sticky cells */
    background: AliceBlue !important;

    /* vertical centering (table-native) */
    vertical-align: middle;
    text-align: center;
    font-weight: 700;
}

/* 4) TIME COLUMN cells sticky on the left (so the time values stay too) */
.schedule-table tbody td.time-cell[b-aue1v7bunu],
.schedule-table tbody td.sticky-col[b-aue1v7bunu] {
    position: sticky;
    left: 0;
    z-index: 5;
    background: #fff;
}
/* Off-working hours: visible grid, but disabled */
.slot-disabled[b-aue1v7bunu] {
    background: #f3f4f6; /* light gray */
    color: #9aa3af; /* muted text */
    cursor: not-allowed;
}

/* This is what truly blocks clicking/dragging inside the cell */
.slot-disabled[b-aue1v7bunu] {
    pointer-events: none;
}

/* Optional: keep grid lines visible even when disabled */
.schedule-table td.slot-disabled[b-aue1v7bunu] {
    border: 1px solid #e5e7eb;
}



/* Add these styles to your existing CSS */
.row-offhours[b-aue1v7bunu] {
    background-color: #F0F0F0;
}

    .row-offhours .time-cell[b-aue1v7bunu] {
        color: #999;
        font-style: italic;
    }

.offhours-slot.disabled-slot[b-aue1v7bunu] {
    background-color: #F0F0F0 !important;
    opacity: 0.6;
    cursor: not-allowed !important;
    border-color: #e9ecef !important;
}

    .offhours-slot.disabled-slot:hover[b-aue1v7bunu] {
        background-color: #F0F0F0 !important;
    }

.working-slot[b-aue1v7bunu] {
    background-color: white;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .working-slot:hover[b-aue1v7bunu] {
        background-color: #f0f8ff;
        box-shadow: inset 0 0 0 1px #cfe2ff;
    }

.appointment-offhours[b-aue1v7bunu] {
    opacity: 0.7 !important;
    filter: grayscale(20%);
}

    /* Ensure appointments in off-hours maintain some visibility */
    .appointment-offhours .text-center[b-aue1v7bunu] {
        opacity: 0.9;
    }
/* Slot states */
.slot-not-available[b-aue1v7bunu] {
    background-color: #ffeaa7 !important; /* Light yellow for working but not available */
    cursor: not-allowed !important;
}

.slot-break-time[b-aue1v7bunu] {
    background-color: #dfe6e9 !important; /* Light gray for break time */
    cursor: not-allowed !important;
}

.slot-off-hours[b-aue1v7bunu] {
    background-color: #f8f9fa !important; /* Very light gray for off-hours */
    cursor: not-allowed !important;
}

/* Hover tooltip styles */
.working-slot:hover[b-aue1v7bunu] {
    background-color: #e3f2fd !important;
}
.clinic-closed-head[b-aue1v7bunu] {
    background: aliceblue !important;
    border-color: #d6e4ff !important;
    height: 44px;
}

.clinic-closed-cell[b-aue1v7bunu] {
    background: #f8f9fa !important; /* Very light gray for off-hours */
    border-color: #d6e4ff !important;
    text-align: center;
    opacity: 0.7;
    cursor: not-allowed;
    user-select: none;
    font-size: 14px;
}
/* Make the table obey column widths */
.schedule-table[b-aue1v7bunu] {
    table-layout: fixed;
    width: 100%;
}

/* Set your time column width once */
:root[b-aue1v7bunu] {
    --time-col-width: 90px;
}

/* Time column fixed */
.time-header[b-aue1v7bunu],
.time-cell[b-aue1v7bunu] {
    width: var(--time-col-width);
    min-width: var(--time-col-width);
    max-width: var(--time-col-width);
}

/* CLOSED TEMPLATE: 4 columns split remaining width equally */
.clinic-closed-head[b-aue1v7bunu],
.clinic-closed-cell[b-aue1v7bunu] {
    width: calc((100% - var(--time-col-width)) / 6);
}

/* Optional visuals */
.clinic-closed-head[b-aue1v7bunu],
.clinic-closed-cell[b-aue1v7bunu] {
    background: LightGray;
    text-align: center;
    opacity: 0.8;
}

/* Appointment type colors */
/* IA / intake = green */
.appointment-ia[b-aue1v7bunu] {
    --appt-h: 145;
    --appt-s: 45%;
    --appt-l: 42%;
}

/* TCM follow-up = jade/teal */
.appointment-tcm-fu[b-aue1v7bunu] {
    --appt-h: 165;
    --appt-s: 48%;
    --appt-l: 40%;
}

/* PT = blue */
.appointment-pt-fu[b-aue1v7bunu] {
    --appt-h: 210;
    --appt-s: 55%;
    --appt-l: 42%;
}

/* DC = violet */
.appointment-dc-fu[b-aue1v7bunu] {
    --appt-h: 265;
    --appt-s: 48%;
    --appt-l: 44%;
}

/* RMT = warm teal */
.appointment-rmt-fu[b-aue1v7bunu] {
    --appt-h: 190;
    --appt-s: 45%;
    --appt-l: 40%;
}


/* Grid background + lines */
.schedule-table[b-aue1v7bunu] {
    --grid-line: rgba(0, 51, 102, 0.10);
    --grid-fill: rgba(255, 255, 255, 0.65);
    --grid-fill-alt: rgba(255, 255, 255, 0.45);
    background: transparent;
}

    .schedule-table td[b-aue1v7bunu],
    .schedule-table th[b-aue1v7bunu] {
        border-color: var(--grid-line) !important;
    }

/* Working vs offhours cells */
.working-slot[b-aue1v7bunu] {
    background: linear-gradient(180deg, var(--grid-fill), var(--grid-fill-alt));
}

.offhours-slot[b-aue1v7bunu],
.disabled-slot[b-aue1v7bunu] {
    background: rgba(245, 248, 252, 0.75) !important;
    color: rgba(0, 51, 102, 0.35);
}

/* Row hover (subtle) */
.schedule-table tbody tr:hover td[b-aue1v7bunu] {
    background-color: rgba(0, 51, 102, 0.03);
}


/* BOOKED appointment cell: glass card with colored accent stripe */
.schedule-table td[class*="appointment-"][b-aue1v7bunu] {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    padding: 10px 12px !important;
    /* default tint if a type forgets to set it */
    --appt-h: 145; /* hue */
    --appt-s: 45%;
    --appt-l: 45%;
    /* soft tinted glass fill */
    background: linear-gradient( 135deg, hsla(var(--appt-h), var(--appt-s), calc(var(--appt-l) + 20%), 0.35) 0%, hsla(var(--appt-h), var(--appt-s), calc(var(--appt-l) + 10%), 0.18) 55%, rgba(255, 255, 255, 0.10) 100% ) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 10px 24px rgba(0, 51, 102, 0.10), 0 2px 6px rgba(0, 51, 102, 0.10);
    color: #003366;
}

    /* Colored left stripe = “type” */
    .schedule-table td[class*="appointment-"][b-aue1v7bunu]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 6px;
        background: linear-gradient( 180deg, hsla(var(--appt-h), var(--appt-s), calc(var(--appt-l) + 20%), 0.95), hsla(var(--appt-h), var(--appt-s), var(--appt-l), 0.85) );
    }

    /* Sheen highlight (glass) */
    .schedule-table td[class*="appointment-"][b-aue1v7bunu]::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient( circle at 18% 18%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.15) 28%, rgba(255, 255, 255, 0.00) 60% );
    }

    /* Hover polish */
    .schedule-table td[class*="appointment-"]:hover[b-aue1v7bunu] {
        box-shadow: 0 14px 28px rgba(0, 51, 102, 0.12), 0 2px 8px rgba(0, 51, 102, 0.12);
    }
.sp-backdrop[b-aue1v7bunu] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: sp-fade-in-b-aue1v7bunu 0.15s ease;
}

@keyframes sp-fade-in-b-aue1v7bunu {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.sp-modal[b-aue1v7bunu] {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18), 0 8px 20px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 440px;
    overflow: hidden;
    animation: sp-slide-up-b-aue1v7bunu 0.18s ease;
}

@keyframes sp-slide-up-b-aue1v7bunu {
    from {
        transform: translateY(12px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Header */
.sp-header[b-aue1v7bunu] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid #f1f5f9;
}

.sp-title[b-aue1v7bunu] {
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.2rem;
}

.sp-subtitle[b-aue1v7bunu] {
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 0;
}

.sp-close[b-aue1v7bunu] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.12s;
    flex-shrink: 0;
}

    .sp-close:hover[b-aue1v7bunu] {
        background: #e2e8f0;
    }

    .sp-close .material-symbols-outlined[b-aue1v7bunu] {
        font-size: 18px;
    }

/* Body */
.sp-body[b-aue1v7bunu] {
    padding: 1rem 1.25rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Option buttons */
.sp-option[b-aue1v7bunu] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.12s, background 0.12s, transform 0.1s;
}

    .sp-option:hover[b-aue1v7bunu] {
        transform: translateX(2px);
    }

.sp-option--default:hover[b-aue1v7bunu] {
    border-color: #6366f1;
    background: #eef2ff;
}

.sp-option--custom:hover[b-aue1v7bunu] {
    border-color: #8b5cf6;
    background: #f5f3ff;
}

/* Icon badge */
.sp-option-icon[b-aue1v7bunu] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sp-option-icon--system[b-aue1v7bunu] {
    background: linear-gradient(135deg, #6366f1, #818cf8);
    color: #ffffff;
}

.sp-option-icon--custom[b-aue1v7bunu] {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
    color: #ffffff;
}

.sp-option-icon .material-symbols-outlined[b-aue1v7bunu] {
    font-size: 20px;
}

/* Text */
.sp-option-text[b-aue1v7bunu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .sp-option-text strong[b-aue1v7bunu] {
        font-size: 0.9rem;
        font-weight: 700;
        color: #0f172a;
    }

    .sp-option-text span[b-aue1v7bunu] {
        font-size: 0.78rem;
        color: #94a3b8;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 260px;
    }

.sp-option-arrow[b-aue1v7bunu] {
    font-size: 18px;
    color: #cbd5e1;
    flex-shrink: 0;
}

/* Divider */
.sp-divider[b-aue1v7bunu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: #cbd5e1;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0.25rem 0;
}

    .sp-divider[b-aue1v7bunu]::before,
    .sp-divider[b-aue1v7bunu]::after {
        content: "";
        flex: 1;
        height: 1px;
        background: #f1f5f9;
    }

/* Loading state */
.sp-loading[b-aue1v7bunu] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    color: #94a3b8;
    font-size: 0.85rem;
}

.sp-spinner[b-aue1v7bunu] {
    width: 18px;
    height: 18px;
    border: 2px solid #e2e8f0;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: sp-spin-b-aue1v7bunu 0.6s linear infinite;
    flex-shrink: 0;
}

@keyframes sp-spin-b-aue1v7bunu {
    to {
        transform: rotate(360deg);
    }
}
.telehealth-join-overlay[b-aue1v7bunu] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}

.telehealth-join-modal[b-aue1v7bunu] {
    width: 380px;
    max-width: 92vw;
    background: #ffffff;
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}

    .telehealth-join-modal h4[b-aue1v7bunu] {
        margin-bottom: 16px;
        color: #1f2a7a;
        font-weight: 700;
    }

.telehealth-join-actions[b-aue1v7bunu] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}
/* _content/ZenZonApp/Components/Pages/Charges.razor.rz.scp.css */
/* ============================================================
   Charges.razor.css  –  Light Glass Morphism Theme
   ============================================================ */

/* ---------- Page shell ---------- */

.charges-root[b-51g3gs0cfr] {
    min-height: 100vh;
    padding: 2rem;
    font-family: 'DM Sans', system-ui, sans-serif;
    position: relative;
    overflow: hidden;
}

    /* Paint the gradient behind everything without fighting the layout background */
    .charges-root[b-51g3gs0cfr]::before {
        content: '';
        position: fixed;
        inset: 0;
        background: linear-gradient(160deg, #eef4fb 0%, #e8f0f8 35%, #ddeaf5 70%, #e4eef8 100%);
        z-index: -1;
        pointer-events: none;
    }

/* Ambient glow orbs */
.orb[b-51g3gs0cfr] {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.orb-1[b-51g3gs0cfr] {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(160,190,255,0.22) 0%, transparent 70%);
    top: -120px;
    left: -120px;
}

.orb-2[b-51g3gs0cfr] {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(100,200,230,0.15) 0%, transparent 70%);
    bottom: 40px;
    right: -80px;
}

.orb-3[b-51g3gs0cfr] {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(180,160,255,0.12) 0%, transparent 70%);
    top: 40%;
    left: 55%;
}

/* Push all direct children above orbs */
.charges-root > *:not(.orb)[b-51g3gs0cfr] {
    position: relative;
    z-index: 1;
}

/* ---------- Typography ---------- */

.page-title[b-51g3gs0cfr] {
    color: #1e3a5f;
    font-weight: 600;
    font-size: 22px;
    margin: 0 0 1.5rem;
    letter-spacing: -0.3px;
}

.loading-text[b-51g3gs0cfr] {
    color: #6b8aaa;
    font-size: 14px;
}

/* ---------- Glass utilities ---------- */

.glass[b-51g3gs0cfr] {
    background: rgba(255,255,255,0.52);
    backdrop-filter: blur(16px) saturate(1.8);
    -webkit-backdrop-filter: blur(16px) saturate(1.8);
    border: 1px solid rgba(255,255,255,0.75);
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(100,130,180,0.08);
}

.glass-strong[b-51g3gs0cfr] {
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(24px) saturate(2);
    -webkit-backdrop-filter: blur(24px) saturate(2);
    border: 1px solid rgba(255,255,255,0.85);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(100,130,180,0.10);
}

/* ---------- Alerts ---------- */

.glass-alert[b-51g3gs0cfr] {
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 13px;
    margin-bottom: 1rem;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.glass-alert-info[b-51g3gs0cfr] {
    background: rgba(50,110,200,0.08);
    border: 1px solid rgba(50,110,200,0.25);
    color: #1a5fc8;
}

.glass-alert-danger[b-51g3gs0cfr] {
    background: rgba(200,50,50,0.07);
    border: 1px solid rgba(200,50,50,0.25);
    color: #c0392b;
}

/* ---------- Header bar ---------- */

.header-bar[b-51g3gs0cfr] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.patient-name[b-51g3gs0cfr] {
    color: #1e3a5f;
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 3px;
}

.patient-meta[b-51g3gs0cfr] {
    color: #6b8aaa;
    font-size: 12px;
    margin: 0;
}

.header-actions[b-51g3gs0cfr] {
    display: flex;
    gap: 10px;
}

/* ---------- Buttons ---------- */

.btn-glass[b-51g3gs0cfr] {
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(160,190,230,0.50);
    color: #3a6090;
    padding: 7px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
}

    .btn-glass:hover:not(:disabled)[b-51g3gs0cfr] {
        background: rgba(255,255,255,0.82);
    }

    .btn-glass:disabled[b-51g3gs0cfr] {
        opacity: 0.4;
        cursor: not-allowed;
    }

.btn-glass-primary[b-51g3gs0cfr] {
    background: rgba(50,110,200,0.15);
    border: 1px solid rgba(50,110,200,0.35);
    color: #1a5fc8;
    font-weight: 500;
}

    .btn-glass-primary:hover:not(:disabled)[b-51g3gs0cfr] {
        background: rgba(50,110,200,0.26);
    }

/* ---------- Section cards ---------- */

.section-card[b-51g3gs0cfr] {
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

/* ---------- Form labels ---------- */

.glass-label[b-51g3gs0cfr] {
    display: block;
    color: #6b8aaa;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}

/* ---------- Inputs & selects ---------- */

.glass-select[b-51g3gs0cfr],
.glass-input[b-51g3gs0cfr] {
    width: 100%;
    background: rgba(255,255,255,0.60);
    border: 1px solid rgba(160,190,230,0.50);
    color: #1e3a5f;
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
    appearance: none;
    -webkit-appearance: none;
}

.glass-input[b-51g3gs0cfr] {
    width: auto;
    min-width: 180px;
}

    .glass-select:focus[b-51g3gs0cfr],
    .glass-input:focus[b-51g3gs0cfr] {
        border-color: rgba(50,110,200,0.50);
        background: rgba(255,255,255,0.88);
    }

/* Chevron for select */
.select-wrap[b-51g3gs0cfr] {
    position: relative;
}

    .select-wrap[b-51g3gs0cfr]::after {
        content: '▾';
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: #6b8aaa;
        font-size: 12px;
        pointer-events: none;
    }

/* ---------- Hints ---------- */

.glass-hint[b-51g3gs0cfr] {
    font-size: 11px;
    color: #7a9ab8;
    margin: 8px 0 0;
    line-height: 1.5;
}

    .glass-hint strong[b-51g3gs0cfr] {
        color: #3a6090;
        font-weight: 500;
    }

.glass-hint-danger[b-51g3gs0cfr] {
    color: #c0392b;
}

/* ---------- Table ---------- */

.glass-table-wrap[b-51g3gs0cfr] {
    background: rgba(255,255,255,0.45);
    backdrop-filter: blur(16px) saturate(1.8);
    -webkit-backdrop-filter: blur(16px) saturate(1.8);
    border: 1px solid rgba(255,255,255,0.75);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(100,130,180,0.07);
    margin-bottom: 1.25rem;
}

.glass-table[b-51g3gs0cfr] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .glass-table thead tr[b-51g3gs0cfr] {
        background: rgba(220,235,255,0.35);
        border-bottom: 1px solid rgba(160,190,230,0.30);
    }

    .glass-table thead th[b-51g3gs0cfr] {
        color: #6b8aaa;
        font-weight: 500;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.7px;
        padding: 10px 14px;
        text-align: left;
        white-space: nowrap;
    }

    .glass-table tbody tr[b-51g3gs0cfr] {
        border-bottom: 1px solid rgba(160,190,230,0.18);
        transition: background 0.15s;
    }

        .glass-table tbody tr:last-child[b-51g3gs0cfr] {
            border-bottom: none;
        }

        .glass-table tbody tr:hover[b-51g3gs0cfr] {
            background: rgba(220,235,255,0.25);
        }

    .glass-table td[b-51g3gs0cfr] {
        padding: 10px 14px;
        vertical-align: middle;
        color: #1e3a5f;
    }

.td-center[b-51g3gs0cfr] {
    text-align: center;
}

.td-right[b-51g3gs0cfr] {
    text-align: right;
    font-weight: 500;
    color: #1e3a5f;
}

/* ---------- Table cell content ---------- */

.service-name[b-51g3gs0cfr] {
    font-weight: 500;
    font-size: 13px;
    color: #1e3a5f;
}

.service-meta[b-51g3gs0cfr] {
    font-size: 11px;
    color: #7a9ab8;
    margin-top: 2px;
}

.already-charged[b-51g3gs0cfr] {
    font-size: 11px;
    color: #c0392b;
    margin-top: 3px;
}

.practitioner-cell[b-51g3gs0cfr] {
    font-size: 12px;
    color: #4a7090;
}

/* ---------- In-table inputs ---------- */

.form-input[b-51g3gs0cfr] {
    background: rgba(255,255,255,0.60);
    border: 1px solid rgba(160,190,230,0.50);
    color: #1e3a5f;
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
}

.form-input--qty[b-51g3gs0cfr] {
    width: 72px;
    text-align: center;
}

.form-input--price[b-51g3gs0cfr] {
    width: 110px;
    text-align: right;
}

.form-input:focus[b-51g3gs0cfr] {
    border-color: rgba(50,110,200,0.50);
    background: rgba(255,255,255,0.88);
}

.form-input:disabled[b-51g3gs0cfr] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ---------- Checkboxes ---------- */

.glass-checkbox[b-51g3gs0cfr] {
    width: 16px;
    height: 16px;
    border-radius: 5px;
    border: 1.5px solid rgba(100,150,210,0.45);
    background: rgba(255,255,255,0.60);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    transition: background 0.15s, border-color 0.15s;
}

    .glass-checkbox:checked[b-51g3gs0cfr] {
        background: rgba(50,110,200,0.75);
        border-color: rgba(50,110,200,0.90);
    }

        .glass-checkbox:checked[b-51g3gs0cfr]::after {
            content: '';
            position: absolute;
            left: 4px;
            top: 1px;
            width: 5px;
            height: 9px;
            border: 2px solid #fff;
            border-left: none;
            border-top: none;
            transform: rotate(45deg);
        }

    .glass-checkbox:disabled[b-51g3gs0cfr] {
        opacity: 0.35;
        cursor: not-allowed;
    }

/* ---------- Totals panel ---------- */

.totals-panel[b-51g3gs0cfr] {
    padding: 1rem 1.25rem;
    background: rgba(220,235,255,0.20);
    border-top: 1px solid rgba(160,190,230,0.22);
}

.totals-row[b-51g3gs0cfr] {
    display: flex;
    justify-content: flex-end;
    gap: 2rem;
    font-size: 13px;
    color: #6b8aaa;
    margin-bottom: 6px;
}

    .totals-row span:last-child[b-51g3gs0cfr] {
        min-width: 80px;
        text-align: right;
        color: #2c5282;
    }

.totals-final[b-51g3gs0cfr] {
    font-size: 17px;
    font-weight: 600;
    color: #1e3a5f;
    border-top: 1px solid rgba(160,190,230,0.30);
    padding-top: 10px;
    margin-top: 4px;
    margin-bottom: 0;
}

    .totals-final span:last-child[b-51g3gs0cfr] {
        color: #1a5fc8;
    }
/* _content/ZenZonApp/Components/Pages/ChargesSummary.razor.rz.scp.css */
/* ============================================================
   ChargesSummary.razor.css  –  Light Glass Morphism Theme
   (identical design system as Charges.razor.css)
   ============================================================ */

/* ---------- Page shell ---------- */

.charges-root[b-pmpmw0uxa2] {
    min-height: 100vh;
    padding: 2rem;
    font-family: 'DM Sans', system-ui, sans-serif;
    position: relative;
    overflow: hidden;
}

    .charges-root[b-pmpmw0uxa2]::before {
        content: '';
        position: fixed;
        inset: 0;
        background: linear-gradient(160deg, #eef4fb 0%, #e8f0f8 35%, #ddeaf5 70%, #e4eef8 100%);
        z-index: -1;
        pointer-events: none;
    }

.orb[b-pmpmw0uxa2] {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.orb-1[b-pmpmw0uxa2] {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(160,190,255,0.22) 0%, transparent 70%);
    top: -120px;
    left: -120px;
}

.orb-2[b-pmpmw0uxa2] {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(100,200,230,0.15) 0%, transparent 70%);
    bottom: 40px;
    right: -80px;
}

.orb-3[b-pmpmw0uxa2] {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(180,160,255,0.12) 0%, transparent 70%);
    top: 40%;
    left: 55%;
}

.charges-root > *:not(.orb)[b-pmpmw0uxa2] {
    position: relative;
    z-index: 1;
}

/* ---------- Typography ---------- */

.page-title[b-pmpmw0uxa2] {
    color: #1e3a5f;
    font-weight: 600;
    font-size: 22px;
    margin: 0 0 1.5rem;
    letter-spacing: -0.3px;
}

.loading-text[b-pmpmw0uxa2] {
    color: #6b8aaa;
    font-size: 14px;
}

/* ---------- Glass utilities ---------- */

.glass[b-pmpmw0uxa2] {
    background: rgba(255,255,255,0.52);
    backdrop-filter: blur(16px) saturate(1.8);
    -webkit-backdrop-filter: blur(16px) saturate(1.8);
    border: 1px solid rgba(255,255,255,0.75);
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(100,130,180,0.08);
}

/* ---------- Alerts ---------- */

.glass-alert[b-pmpmw0uxa2] {
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 13px;
    margin-bottom: 1rem;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.glass-alert-info[b-pmpmw0uxa2] {
    background: rgba(50,110,200,0.08);
    border: 1px solid rgba(50,110,200,0.25);
    color: #1a5fc8;
}

.glass-alert-danger[b-pmpmw0uxa2] {
    background: rgba(200,50,50,0.07);
    border: 1px solid rgba(200,50,50,0.25);
    color: #c0392b;
}

/* ---------- Header section card ---------- */

.section-card[b-pmpmw0uxa2] {
    padding: 1.25rem;
}

.mb-card[b-pmpmw0uxa2] {
    margin-bottom: 1.25rem;
}

.mt-field[b-pmpmw0uxa2] {
    margin-top: 1rem;
}

/* 3-column responsive grid for header fields */
.field-grid[b-pmpmw0uxa2] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 680px) {
    .field-grid[b-pmpmw0uxa2] {
        grid-template-columns: 1fr;
    }
}

.field-group[b-pmpmw0uxa2] {
    display: flex;
    flex-direction: column;
}

/* ---------- Labels ---------- */

.glass-label[b-pmpmw0uxa2] {
    display: block;
    color: #6b8aaa;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}

/* ---------- Read-only inputs & textarea ---------- */

.glass-input[b-pmpmw0uxa2] {
    background: rgba(255,255,255,0.60);
    border: 1px solid rgba(160,190,230,0.50);
    color: #1e3a5f;
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
}

.glass-input--readonly[b-pmpmw0uxa2] {
    background: rgba(240,246,255,0.55);
    color: #2c5282;
    cursor: default;
}

    .glass-input--readonly:focus[b-pmpmw0uxa2] {
        border-color: rgba(160,190,230,0.50);
    }

.glass-textarea[b-pmpmw0uxa2] {
    background: rgba(240,246,255,0.55);
    border: 1px solid rgba(160,190,230,0.50);
    color: #2c5282;
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    width: 100%;
    resize: none;
    cursor: default;
}

/* ---------- Table ---------- */

.glass-table-wrap[b-pmpmw0uxa2] {
    background: rgba(255,255,255,0.45);
    backdrop-filter: blur(16px) saturate(1.8);
    -webkit-backdrop-filter: blur(16px) saturate(1.8);
    border: 1px solid rgba(255,255,255,0.75);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(100,130,180,0.07);
    margin-bottom: 1.25rem;
}

.table-header[b-pmpmw0uxa2] {
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid rgba(160,190,230,0.20);
}

.table-title[b-pmpmw0uxa2] {
    color: #1e3a5f;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.2px;
}

.glass-table[b-pmpmw0uxa2] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .glass-table thead tr[b-pmpmw0uxa2] {
        background: rgba(220,235,255,0.35);
        border-bottom: 1px solid rgba(160,190,230,0.30);
    }

    .glass-table thead th[b-pmpmw0uxa2] {
        color: #6b8aaa;
        font-weight: 500;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.7px;
        padding: 10px 14px;
        text-align: left;
        white-space: nowrap;
    }

    .glass-table tbody tr[b-pmpmw0uxa2] {
        border-bottom: 1px solid rgba(160,190,230,0.18);
        transition: background 0.15s;
    }

        .glass-table tbody tr:last-child[b-pmpmw0uxa2] {
            border-bottom: none;
        }

        .glass-table tbody tr:hover[b-pmpmw0uxa2] {
            background: rgba(220,235,255,0.22);
        }

    .glass-table td[b-pmpmw0uxa2] {
        padding: 10px 14px;
        vertical-align: middle;
        color: #1e3a5f;
        font-size: 13px;
    }

.td-right[b-pmpmw0uxa2] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #2c5282;
}

.practitioner-cell[b-pmpmw0uxa2] {
    font-size: 12px;
    color: #4a7090;
}

.empty-state[b-pmpmw0uxa2] {
    text-align: center;
    color: #7a9ab8;
    padding: 2rem 14px;
    font-size: 13px;
}

/* ---------- Totals ---------- */

.totals-panel[b-pmpmw0uxa2] {
    padding: 1rem 1.25rem;
    background: rgba(220,235,255,0.20);
    border-top: 1px solid rgba(160,190,230,0.22);
}

.totals-row[b-pmpmw0uxa2] {
    display: flex;
    justify-content: flex-end;
    gap: 2rem;
    font-size: 13px;
    color: #6b8aaa;
    margin-bottom: 6px;
}

    .totals-row span:last-child[b-pmpmw0uxa2] {
        min-width: 90px;
        text-align: right;
        color: #2c5282;
        font-variant-numeric: tabular-nums;
    }

.totals-final[b-pmpmw0uxa2] {
    font-size: 17px;
    font-weight: 600;
    color: #1e3a5f;
    border-top: 1px solid rgba(160,190,230,0.30);
    padding-top: 10px;
    margin-top: 4px;
    margin-bottom: 0;
}

    .totals-final span:last-child[b-pmpmw0uxa2] {
        color: #1a5fc8;
    }

/* ---------- Actions bar ---------- */

.actions-bar[b-pmpmw0uxa2] {
    display: flex;
    justify-content: flex-end;
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(160,190,230,0.18);
}

/* ---------- Button ---------- */

.btn-glass[b-pmpmw0uxa2] {
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(160,190,230,0.50);
    color: #3a6090;
    padding: 7px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
}

    .btn-glass:hover:not(:disabled)[b-pmpmw0uxa2] {
        background: rgba(255,255,255,0.82);
    }

    .btn-glass:disabled[b-pmpmw0uxa2] {
        opacity: 0.4;
        cursor: not-allowed;
    }
/* _content/ZenZonApp/Components/Pages/ClinicClient/Forms/PatientIntake.razor.rz.scp.css */
/* ============================================
   Intake Wrapper — widened to match page layout
   ============================================ */
.intake-wrapper[b-fqt4ozrier] {
    width: 100%;
    min-height: calc(100vh - 40px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 24px 32px 48px;
    box-sizing: border-box;
}

.intake-card[b-fqt4ozrier] {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    border-radius: 24px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
}

/* ============================================
   Header
   ============================================ */
.intake-header[b-fqt4ozrier] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.75rem 2rem 1rem 2rem;
    gap: 1rem;
}

    .intake-header h2[b-fqt4ozrier],
    .intake-header .h2[b-fqt4ozrier] {
        margin-bottom: 0.15rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        color: #1e293b;
    }

    .intake-header p[b-fqt4ozrier],
    .intake-header .text-muted[b-fqt4ozrier] {
        margin-bottom: 0;
        font-size: 0.95rem;
        color: #64748b;
    }

.intake-icon-wrapper[b-fqt4ozrier] {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.8);
    color: #2563eb;
    font-size: 1.9rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.intake-progress .badge[b-fqt4ozrier] {
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
    padding: 0.55rem 1.1rem;
    border-radius: 40px;
    font-weight: 600;
    font-size: 0.85rem;
    border: 1px solid rgba(37, 99, 235, 0.25);
    letter-spacing: 0.02em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ============================================
   Body / Sections
   ============================================ */
.intake-body[b-fqt4ozrier] {
    padding: 1.5rem 2rem 2rem 2rem;
}

.intake-section[b-fqt4ozrier] {
    animation: fadeIn-b-fqt4ozrier 0.3s ease;
    margin-bottom: 2rem;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 16px rgba(31, 38, 135, 0.08);
}

    .intake-section:last-child[b-fqt4ozrier] {
        margin-bottom: 0;
    }

.section-title[b-fqt4ozrier] {
    color: #1e293b;
    font-weight: 600;
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(99, 102, 241, 0.15);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: 0.01em;
}

    .section-title i[b-fqt4ozrier] {
        color: #2563eb;
    }

.intake-section .row[b-fqt4ozrier] {
    --bs-gutter-y: 1.1rem;
}

.intake-section .form-label[b-fqt4ozrier] {
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
    color: #334155;
}

/* ============================================
   Inputs - Enhanced Glassmorphism
   ============================================ */
.glass-input[b-fqt4ozrier],
.intake-section .form-control[b-fqt4ozrier],
.intake-section .form-select[b-fqt4ozrier] {
    min-height: 46px;
    padding: 0.65rem 1rem;
    font-size: 0.95rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease;
    color: #1e293b;
    box-shadow: 0 2px 8px rgba(31, 38, 135, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

    .glass-input:hover[b-fqt4ozrier],
    .intake-section .form-control:hover[b-fqt4ozrier],
    .intake-section .form-select:hover[b-fqt4ozrier] {
        background: rgba(255, 255, 255, 0.85);
        border-color: rgba(37, 99, 235, 0.25);
        box-shadow: 0 4px 12px rgba(31, 38, 135, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    }

    .glass-input:focus[b-fqt4ozrier],
    .intake-section .form-control:focus[b-fqt4ozrier],
    .intake-section .form-select:focus[b-fqt4ozrier] {
        background: rgba(255, 255, 255, 0.95);
        border-color: rgba(37, 99, 235, 0.5);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.95);
        outline: none;
    }

    .glass-input[b-fqt4ozrier]::placeholder,
    .intake-section .form-control[b-fqt4ozrier]::placeholder {
        color: #94a3b8;
    }

.glass-input-group[b-fqt4ozrier] {
    display: flex;
    align-items: stretch;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    min-height: 46px;
    box-shadow: 0 2px 8px rgba(31, 38, 135, 0.06);
    transition: all 0.2s ease;
}

    .glass-input-group:focus-within[b-fqt4ozrier] {
        border-color: rgba(37, 99, 235, 0.5);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    }

.glass-input-prefix[b-fqt4ozrier] {
    background: rgba(255, 255, 255, 0.5);
    border: none;
    color: #64748b;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    border-right: 1px solid rgba(99, 102, 241, 0.1);
    font-size: 0.9rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.glass-input-group .glass-input[b-fqt4ozrier] {
    border: none;
    background: transparent;
    border-radius: 0;
    min-height: auto;
    box-shadow: none;
}

    .glass-input-group .glass-input:focus[b-fqt4ozrier] {
        box-shadow: none;
        background: transparent;
    }

/* ============================================
   Radio & Checkbox — Enhanced Glassmorphism
   ============================================ */
.glass-radio[b-fqt4ozrier],
.glass-checkbox[b-fqt4ozrier] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    border: 2px solid rgba(37, 99, 235, 0.4) !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    transition: all 0.2s ease-in-out;
    appearance: none !important;
    -webkit-appearance: none !important;
    position: relative;
}

.glass-radio[b-fqt4ozrier] {
    border-radius: 50%;
}

.glass-checkbox[b-fqt4ozrier] {
    border-radius: 6px;
}

    .glass-radio:hover[b-fqt4ozrier],
    .glass-checkbox:hover[b-fqt4ozrier] {
        border-color: rgba(37, 99, 235, 0.6);
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
        transform: scale(1.05);
    }

    .glass-checkbox:checked[b-fqt4ozrier] {
        background-color: #2563eb !important;
        border-color: #2563eb !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.5);
    }

/* Radio dot */
.glass-radio:checked[b-fqt4ozrier] {
    border-color: #2563eb !important;
    background-color: #2563eb !important;
}

    .glass-radio:checked[b-fqt4ozrier]::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 0.5em;
        height: 0.5em;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

/* Checkbox checkmark */
.glass-checkbox:checked[b-fqt4ozrier]::after {
    content: '';
    position: absolute;
    top: 45%;
    left: 50%;
    width: 0.35em;
    height: 0.65em;
    border: solid #fff;
    border-width: 0 0.2em 0.2em 0;
    transform: translate(-50%, -55%) rotate(45deg);
}

.glass-radio:focus[b-fqt4ozrier],
.glass-checkbox:focus[b-fqt4ozrier] {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
    outline: none;
}

.form-check[b-fqt4ozrier] {
    padding-left: 1.85em;
    margin-right: 0.5rem;
    min-height: 1.5em;
}

    .form-check .glass-radio[b-fqt4ozrier],
    .form-check .glass-checkbox[b-fqt4ozrier] {
        margin-left: -1.85em;
        margin-top: 0.15em;
        float: left;
    }

.form-check-label[b-fqt4ozrier] {
    font-size: 0.95rem;
    cursor: pointer;
    user-select: none;
    color: #334155;
}

/* ============================================
   Textarea
   ============================================ */
.glass-textarea[b-fqt4ozrier] {
    border-radius: 14px !important;
    resize: vertical;
    min-height: 110px;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 8px rgba(31, 38, 135, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

    .glass-textarea:focus[b-fqt4ozrier] {
        background: rgba(255, 255, 255, 0.95);
        border-color: rgba(37, 99, 235, 0.5);
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    }

/* ============================================
   Insurance / conditional fields
   ============================================ */
.insurance-fields[b-fqt4ozrier] {
    animation: slideDown-b-fqt4ozrier 0.3s ease;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    margin-top: 1rem;
    box-shadow: 0 4px 16px rgba(31, 38, 135, 0.06);
}

@keyframes slideDown-b-fqt4ozrier {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn-b-fqt4ozrier {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ============================================
   Footer
   ============================================ */
.intake-footer[b-fqt4ozrier] {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 1.25rem 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 -4px 16px rgba(31, 38, 135, 0.08);
}

    /* ============================================
   GLASSMORPHISM BUTTONS
   ============================================ */
    .btn-glass[b-fqt4ozrier],
    .intake-footer .btn[b-fqt4ozrier],
    .intake-footer .btn-primary[b-fqt4ozrier],
    .intake-footer .btn-secondary[b-fqt4ozrier],
    .intake-footer .btn-outline-primary[b-fqt4ozrier],
    .intake-footer .btn-outline-secondary[b-fqt4ozrier] {
        background: rgba(255, 255, 255, 0.35);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.6);
        color: #1e293b;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6);
        border-radius: 40px;
        padding: 0.65rem 1.75rem;
        font-weight: 500;
        font-size: 0.95rem;
        min-height: 46px;
        transition: all 0.2s ease;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    }

        .btn-glass:hover[b-fqt4ozrier],
        .intake-footer .btn:hover[b-fqt4ozrier] {
            background: rgba(255, 255, 255, 0.5);
            border-color: rgba(255, 255, 255, 0.8);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7);
            transform: translateY(-1px);
            color: #1e293b;
        }

        .btn-glass:active[b-fqt4ozrier],
        .intake-footer .btn:active[b-fqt4ozrier] {
            transform: translateY(0);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(0, 0, 0, 0.05);
        }

    /* Primary glass button — tinted with brand color */
    .btn-glass-primary[b-fqt4ozrier],
    .intake-footer .btn-primary[b-fqt4ozrier] {
        background: linear-gradient(135deg, rgba(37, 99, 235, 0.85) 0%, rgba(79, 70, 229, 0.75) 100%);
        border: 1px solid rgba(255, 255, 255, 0.5);
        color: #fff;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
        box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

        .btn-glass-primary:hover[b-fqt4ozrier],
        .intake-footer .btn-primary:hover[b-fqt4ozrier] {
            background: linear-gradient(135deg, rgba(37, 99, 235, 0.95) 0%, rgba(79, 70, 229, 0.85) 100%);
            color: #fff;
            box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
            transform: translateY(-1px);
        }

    /* Disabled state */
    .btn-glass:disabled[b-fqt4ozrier],
    .intake-footer .btn:disabled[b-fqt4ozrier] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    }

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1200px) {
    .intake-wrapper[b-fqt4ozrier] {
        padding: 20px 20px 40px;
    }

    .intake-card[b-fqt4ozrier] {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .intake-wrapper[b-fqt4ozrier] {
        padding: 12px 12px 32px;
    }

    .intake-header[b-fqt4ozrier] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.25rem 1.25rem 0.75rem;
    }

    .intake-body[b-fqt4ozrier] {
        padding: 1rem 1.25rem 1.5rem;
    }

    .intake-section[b-fqt4ozrier] {
        padding: 1rem;
    }

    .intake-footer[b-fqt4ozrier] {
        padding: 1rem 1.25rem;
    }

        .intake-footer .d-flex[b-fqt4ozrier] {
            flex-direction: column;
            gap: 0.75rem;
        }

            .intake-footer .d-flex > div[b-fqt4ozrier] {
                width: 100%;
                display: flex;
                justify-content: space-between;
            }
}

/* ============================================
   Loading state
   ============================================ */
.glass-input.is-loading[b-fqt4ozrier] {
    background: linear-gradient(110deg, rgba(255, 255, 255, 0.2) 30%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.2) 70%);
    background-size: 200% 100%;
    animation: loading-b-fqt4ozrier 1.5s ease infinite;
    pointer-events: none;
}

@keyframes loading-b-fqt4ozrier {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

/* ============================================
   Tooltip
   ============================================ */
.glass-tooltip[b-fqt4ozrier] {
    position: relative;
    cursor: help;
}

    .glass-tooltip:hover[b-fqt4ozrier]::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        color: #1e293b;
        padding: 0.5rem 1rem;
        border-radius: 8px;
        font-size: 0.8rem;
        white-space: nowrap;
        border: 1px solid rgba(255, 255, 255, 0.8);
        box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
        z-index: 1000;
    }

/* ============================================
   Validation states
   ============================================ */
.glass-input.valid[b-fqt4ozrier] {
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(16, 185, 129, 0.05);
}

.glass-input.invalid[b-fqt4ozrier] {
    border-color: rgba(220, 53, 69, 0.5);
    background: rgba(220, 53, 69, 0.05);
}

/* ============================================
   Icons within inputs
   ============================================ */
.input-icon-left[b-fqt4ozrier] {
    position: relative;
}

    .input-icon-left i[b-fqt4ozrier] {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: #64748b;
        z-index: 10;
        pointer-events: none;
    }

    .input-icon-left .glass-input[b-fqt4ozrier] {
        padding-left: 2.5rem;
    }

/* =========================================================
   Patient Intake - Footer Glassmorphism Buttons FIX
   ========================================================= */
.intake-footer[b-fqt4ozrier] {
    padding: 18px 22px !important;
    background: rgba(255, 255, 255, 0.5) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    box-shadow: 0 -4px 16px rgba(31, 38, 135, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

    /* Base glass button */
    .intake-footer button.btn-glass-outline[b-fqt4ozrier],
    .intake-footer button.btn-glass-primary[b-fqt4ozrier] {
        appearance: none !important;
        -webkit-appearance: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        min-height: 38px !important;
        padding: 9px 18px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(255, 255, 255, 0.7) !important;
        font-size: 0.88rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        text-decoration: none !important;
        cursor: pointer !important;
        backdrop-filter: blur(18px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
        transition: all 0.22s ease-in-out !important;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    }

    /* Outline buttons */
    .intake-footer button.btn-glass-outline[b-fqt4ozrier] {
        color: #1e3a8a !important;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5)) !important;
        border-color: rgba(37, 99, 235, 0.2) !important;
    }

        .intake-footer button.btn-glass-outline:hover:not(:disabled)[b-fqt4ozrier] {
            color: #ffffff !important;
            background: linear-gradient(135deg, rgba(37, 99, 235, 0.9), rgba(79, 70, 229, 0.85)) !important;
            border-color: rgba(255, 255, 255, 0.8) !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 12px 28px rgba(37, 99, 235, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
        }

    /* Primary button */
    .intake-footer button.btn-glass-primary[b-fqt4ozrier] {
        color: #ffffff !important;
        background: linear-gradient(135deg, rgba(37, 99, 235, 0.98), rgba(79, 70, 229, 0.95)) !important;
        border-color: rgba(255, 255, 255, 0.7) !important;
    }

        .intake-footer button.btn-glass-primary:hover:not(:disabled)[b-fqt4ozrier] {
            transform: translateY(-1px) !important;
            background: linear-gradient(135deg, rgba(29, 78, 216, 1), rgba(67, 56, 202, 0.98)) !important;
            box-shadow: 0 14px 32px rgba(37, 99, 235, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
        }

        /* Disabled state */
        .intake-footer button.btn-glass-primary:disabled[b-fqt4ozrier],
        .intake-footer button.btn-glass-outline:disabled[b-fqt4ozrier] {
            opacity: 0.5 !important;
            cursor: not-allowed !important;
            transform: none !important;
            color: rgba(255, 255, 255, 0.85) !important;
            background: linear-gradient(135deg, rgba(148, 163, 184, 0.65), rgba(203, 213, 225, 0.5)) !important;
            border-color: rgba(255, 255, 255, 0.5) !important;
            box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
        }

        /* Small buttons */
        .intake-footer button.btn-sm[b-fqt4ozrier],
        .intake-footer button.btn-glass-outline.btn-sm[b-fqt4ozrier],
        .intake-footer button.btn-glass-primary.btn-sm[b-fqt4ozrier] {
            min-height: 34px !important;
            padding: 7px 14px !important;
            border-radius: 12px !important;
            font-size: 0.8rem !important;
        }

    /* Icons inside footer buttons */
    .intake-footer button i[b-fqt4ozrier] {
        font-size: 0.88rem !important;
    }

    /* Footer layout */
    .intake-footer .d-flex[b-fqt4ozrier] {
        gap: 12px !important;
        flex-wrap: wrap !important;
    }

@media (max-width: 768px) {
    .intake-footer .d-flex[b-fqt4ozrier] {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .intake-footer button.btn-glass-outline[b-fqt4ozrier],
    .intake-footer button.btn-glass-primary[b-fqt4ozrier] {
        width: 100% !important;
    }

    .intake-footer .text-secondary[b-fqt4ozrier] {
        display: block !important;
        text-align: center !important;
        margin: 8px 0 !important;
    }
}

/* ==========================================================
   EMERGENCY CONTACT — clean glassmorphism (matches modal)
   ========================================================== */

/* -------- Card container -------- */
.info-glass.info-glass-emergency[b-fqt4ozrier] {
    position: relative;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 5px 15px -8px rgba(0, 30, 60, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

    .info-glass.info-glass-emergency:hover[b-fqt4ozrier] {
        background: rgba(255, 255, 255, 0.8);
        transform: translateY(-2px);
        box-shadow: 0 10px 25px -12px rgba(0, 50, 100, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }

    /* -------- Header (icon + title) -------- */
    .info-glass.info-glass-emergency .info-glass-header[b-fqt4ozrier] {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 1.25rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid rgba(59, 130, 246, 0.15);
    }

    /* White tile, purple icon only — matches screen 2 */
    .info-glass.info-glass-emergency .glass-icon[b-fqt4ozrier] {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        font-size: 1.2rem;
        color: #8B5CF6;
        background: rgba(255, 255, 255, 0.9);
        border: 1px solid rgba(139, 92, 246, 0.2);
        box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.05);
        transition: transform 0.2s ease;
    }

        .info-glass.info-glass-emergency .glass-icon:hover[b-fqt4ozrier] {
            transform: scale(1.05);
            background: white;
        }

    .info-glass.info-glass-emergency .text-glass[b-fqt4ozrier] {
        color: #1A2B3C;
        font-weight: 600;
        margin: 0;
    }

    /* -------- Form groups -------- */
    .info-glass.info-glass-emergency .form-group[b-fqt4ozrier] {
        margin-bottom: 0;
    }

    .info-glass.info-glass-emergency .form-label[b-fqt4ozrier] {
        display: flex;
        align-items: center;
        color: #2C3E50;
        font-weight: 500;
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
    }

        .info-glass.info-glass-emergency .form-label .text-accent[b-fqt4ozrier],
        .info-glass.info-glass-emergency .form-label i[b-fqt4ozrier] {
            color: #3B82F6;
        }

/* ----------------------------------------------------------
   2. SECTION CARDS (Personal Info, Contact, Emergency, Family Doctor)
   ---------------------------------------------------------- */
.info-glass[b-fqt4ozrier] {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    padding: 1.5rem;
    height: 100%;
    transition: all 0.2s ease;
    box-shadow: 0 5px 15px -8px rgba(0, 0, 0, 0.05);
}

    .info-glass:hover[b-fqt4ozrier] {
        background: rgba(255, 255, 255, 0.8);
        box-shadow: 0 10px 25px -12px rgba(0, 50, 100, 0.15);
        transform: translateY(-2px);
    }

.info-glass-header[b-fqt4ozrier] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}


/* ----------------------------------------------------------
   3. SECTION ICONS (the small rounded square next to each title)
   ---------------------------------------------------------- */
.glass-icon[b-fqt4ozrier] {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3B82F6;
    font-size: 1.2rem;
    border: 1px solid rgba(59, 130, 246, 0.2);
    box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.05);
}

    .glass-icon:hover[b-fqt4ozrier] {
        transform: scale(1.05);
        background: white;
        border-color: #3B82F6;
    }

    .glass-icon.glass-purple[b-fqt4ozrier] {
        color: #8B5CF6;
    }
    /* Emergency Contact */
    .glass-icon.glass-blue[b-fqt4ozrier] {
        color: #3B82F6;
    }
    /* Personal / Contact */
    .glass-icon.glass-green[b-fqt4ozrier] {
        color: #10B981;
    }
/* Family Doctor */


/* ----------------------------------------------------------
   4. TEXT STYLES INSIDE THE MODAL
   ---------------------------------------------------------- */
.text-glass[b-fqt4ozrier] {
    color: #1A2B3C;
    font-weight: 500;
}

.text-subtle[b-fqt4ozrier] {
    color: #5A6F84;
    font-size: 0.9rem;
}

.text-accent[b-fqt4ozrier] {
    color: #3B82F6;
}


/* ----------------------------------------------------------
   5. FORM FIELDS (labels + inputs + selects)
   ---------------------------------------------------------- */
.form-group[b-fqt4ozrier] {
    margin-bottom: 1rem;
}

.form-label[b-fqt4ozrier] {
    color: #2C3E50;
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: block;
}

    .form-label i[b-fqt4ozrier] {
        color: #3B82F6;
    }

.glass-input[b-fqt4ozrier] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 14px;
    color: #1A2B3C;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

    .glass-input:focus[b-fqt4ozrier] {
        outline: none;
        border-color: #3B82F6;
        background: white;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .glass-input.border-danger[b-fqt4ozrier] {
        border-color: #EF4444;
    }
/* _content/ZenZonApp/Components/Pages/ClinicClient/Onboarding/ClinicProfile.razor.rz.scp.css */
/* Progress Bar - Glass Style */
.glass-progress[b-u3ko57y6dg] {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 20px 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.progress-header[b-u3ko57y6dg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.progress-title[b-u3ko57y6dg] {
    margin: 0;
    color: white;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.5px;
}

.progress-step[b-u3ko57y6dg] {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 100px;
    color: white;
    font-size: 13px;
    font-weight: 500;
}

.progress-container[b-u3ko57y6dg] {
    position: relative;
}

.progress-track[b-u3ko57y6dg] {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    overflow: hidden;
}

.progress-fill[b-u3ko57y6dg] {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 100px;
    position: relative;
    animation: progressPulse-b-u3ko57y6dg 2s infinite;
}

    .progress-fill[b-u3ko57y6dg]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        animation: shimmer 2s infinite;
    }

.progress-steps[b-u3ko57y6dg] {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    padding: 0 2px;
}

.step-dot[b-u3ko57y6dg] {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: all 0.3s ease;
}

    .step-dot.active[b-u3ko57y6dg] {
        background: white;
        box-shadow: 0 0 15px #667eea;
        transform: scale(1.2);
    }

/* Profile Card */
.profile-card[b-u3ko57y6dg] {
    margin-top: 24px;
}

/* Form Sections */
.form-section[b-u3ko57y6dg] {
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

    .form-section:last-of-type[b-u3ko57y6dg] {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

.section-header[b-u3ko57y6dg] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.section-icon[b-u3ko57y6dg] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
    border-radius: 10px;
    color: white;
    font-size: 18px;
}

.section-title[b-u3ko57y6dg] {
    margin: 0;
    color: white;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.3px;
}

.optional-badge[b-u3ko57y6dg] {
    margin-left: 8px;
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
}

/* Form Groups */
.form-group[b-u3ko57y6dg] {
    margin-bottom: 0;
}

.form-label[b-u3ko57y6dg] {
    display: block;
    margin-bottom: 8px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.required-star[b-u3ko57y6dg] {
    color: #ef4444;
    margin-left: 2px;
}

/* White Inputs with Dark Blue Text */
.glass-input[b-u3ko57y6dg] {
    width: 100%;
    padding: 14px 16px;
    background: white;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    color: #1a237e;
    font-size: 15px;
    transition: all 0.3s ease;
}

    .glass-input:focus[b-u3ko57y6dg] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
    }

    .glass-input[b-u3ko57y6dg]::placeholder {
        color: #9aa5b8;
    }

/* Select Inputs */
.select-wrapper[b-u3ko57y6dg] {
    position: relative;
}

.glass-select[b-u3ko57y6dg] {
    width: 100%;
    padding: 14px 16px;
    background: white;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    color: #1a237e;
    font-size: 15px;
    appearance: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .glass-select:focus[b-u3ko57y6dg] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
    }

.select-arrow[b-u3ko57y6dg] {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    color: #1a237e;
    pointer-events: none;
    opacity: 0.5;
}

/* Form Hints */
.form-hint[b-u3ko57y6dg] {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}

/* Validation */
.validation-wrapper[b-u3ko57y6dg] {
    margin-bottom: 24px;
}

.validation-summary[b-u3ko57y6dg] {
    padding: 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 12px;
    color: #ef4444;
    font-size: 14px;
}

.validation-message[b-u3ko57y6dg] {
    margin-top: 4px;
    color: #ef4444;
    font-size: 12px;
    font-weight: 500;
}

/* Logo Upload Area */
.logo-upload-area[b-u3ko57y6dg] {
    background: rgba(255, 255, 255, 0.05);
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 32px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

    .logo-upload-area:hover[b-u3ko57y6dg] {
        border-color: #667eea;
        background: rgba(255, 255, 255, 0.1);
    }

    .logo-upload-area.drag-over[b-u3ko57y6dg] {
        border-color: #10b981;
        background: rgba(16, 185, 129, 0.1);
        transform: scale(1.02);
    }

.upload-prompt[b-u3ko57y6dg] {
    text-align: center;
}

.upload-icon[b-u3ko57y6dg] {
    font-size: 48px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 16px;
    animation: float 3s ease-in-out infinite;
}

.upload-text[b-u3ko57y6dg] {
    color: white;
    font-size: 16px;
    margin-bottom: 8px;
}

.browse-text[b-u3ko57y6dg] {
    color: #667eea;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.upload-hint[b-u3ko57y6dg] {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    margin: 0;
}

/* Logo Preview */
.logo-preview[b-u3ko57y6dg] {
    text-align: center;
}

.preview-container[b-u3ko57y6dg] {
    position: relative;
    display: inline-block;
    margin-bottom: 16px;
}

    .preview-container img[b-u3ko57y6dg] {
        max-height: 120px;
        border-radius: 16px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }

.remove-logo-btn[b-u3ko57y6dg] {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
    background: #ef4444;
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 5px 15px rgba(239, 68, 68, 0.3);
}

    .remove-logo-btn:hover[b-u3ko57y6dg] {
        transform: scale(1.1);
        background: #dc2626;
    }

.preview-actions[b-u3ko57y6dg] {
    display: flex;
    justify-content: center;
}

/* Tips Card */
.tips-card[b-u3ko57y6dg] {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    height: 100%;
}

.tips-title[b-u3ko57y6dg] {
    margin: 0 0 16px;
    color: white;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

.tips-list[b-u3ko57y6dg] {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .tips-list li[b-u3ko57y6dg] {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 0;
        color: rgba(255, 255, 255, 0.8);
        font-size: 13px;
    }

        .tips-list li i[b-u3ko57y6dg] {
            color: #10b981;
            font-size: 14px;
        }

/* Social Media Icons */
.social-icon[b-u3ko57y6dg] {
    font-size: 18px;
    margin-right: 8px;
}

    .social-icon.facebook[b-u3ko57y6dg] {
        color: #1877f2;
    }

    .social-icon.instagram[b-u3ko57y6dg] {
        color: #e4405f;
    }

/* Form Actions */
.form-actions[b-u3ko57y6dg] {
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.actions-group[b-u3ko57y6dg] {
    display: flex;
    gap: 12px;
}

/* Help Card */
.help-card[b-u3ko57y6dg] {
    margin-top: 24px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.help-icon[b-u3ko57y6dg] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 12px;
    color: white;
    font-size: 20px;
    flex-shrink: 0;
}

.help-content h6[b-u3ko57y6dg] {
    margin: 0 0 4px;
    color: white;
    font-size: 15px;
    font-weight: 600;
}

.help-content p[b-u3ko57y6dg] {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.5;
}

/* Reuse animations from checkout */
@keyframes progressPulse-b-u3ko57y6dg {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .glass-progress[b-u3ko57y6dg] {
        padding: 16px;
    }

    .progress-title[b-u3ko57y6dg] {
        font-size: 18px;
    }

    .form-actions[b-u3ko57y6dg] {
        flex-direction: column;
    }

    .actions-group[b-u3ko57y6dg] {
        width: 100%;
        flex-direction: column;
    }

    .glass-button[b-u3ko57y6dg] {
        width: 100%;
    }

    .help-card[b-u3ko57y6dg] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* Ensure validation messages are visible */
[b-u3ko57y6dg] .validation-message {
    color: #ef4444;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}
/* _content/ZenZonApp/Components/Pages/ClinicClient/Onboarding/Complete.razor.rz.scp.css */
.complete-container[b-3xsv6g79l6] {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* Success animation */
.success-checkmark[b-3xsv6g79l6] {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.check-icon[b-3xsv6g79l6] {
    width: 80px;
    height: 80px;
    position: relative;
    border-radius: 50%;
    box-sizing: content-box;
    border: 4px solid #4caf50;
}

    .check-icon[b-3xsv6g79l6]::before {
        top: 3px;
        left: -2px;
        width: 30px;
        transform-origin: 100% 50%;
        border-radius: 100px 0 0 100px;
    }

    .check-icon[b-3xsv6g79l6]::after {
        top: 0;
        left: 30px;
        width: 60px;
        transform-origin: 0 50%;
        border-radius: 0 100px 100px 0;
        animation: rotate-circle 4.25s ease-in;
    }

    .check-icon[b-3xsv6g79l6]::before, .check-icon[b-3xsv6g79l6]::after {
        content: '';
        height: 100px;
        position: absolute;
        background: #ffffff;
        transform: rotate(-45deg);
    }

.icon-line[b-3xsv6g79l6] {
    height: 5px;
    background-color: #4caf50;
    display: block;
    border-radius: 2px;
    position: absolute;
    z-index: 10;
}

    .icon-line.line-tip[b-3xsv6g79l6] {
        top: 46px;
        left: 14px;
        width: 25px;
        transform: rotate(45deg);
        animation: icon-line-tip-b-3xsv6g79l6 0.75s;
    }

    .icon-line.line-long[b-3xsv6g79l6] {
        top: 38px;
        right: 8px;
        width: 47px;
        transform: rotate(-45deg);
        animation: icon-line-long-b-3xsv6g79l6 0.75s;
    }

.icon-circle[b-3xsv6g79l6] {
    top: -4px;
    left: -4px;
    z-index: 10;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: absolute;
    box-sizing: content-box;
    border: 4px solid rgba(76, 175, 80, 0.5);
}

.icon-fix[b-3xsv6g79l6] {
    top: 8px;
    width: 5px;
    left: 26px;
    z-index: 1;
    height: 85px;
    position: absolute;
    transform: rotate(-45deg);
    background-color: #ffffff;
}

@keyframes icon-line-tip-b-3xsv6g79l6 {
    0% {
        width: 0;
        left: 1px;
        top: 19px;
    }

    54% {
        width: 0;
        left: 1px;
        top: 19px;
    }

    70% {
        width: 50px;
        left: -8px;
        top: 37px;
    }

    84% {
        width: 17px;
        left: 21px;
        top: 48px;
    }

    100% {
        width: 25px;
        left: 14px;
        top: 45px;
    }
}

@keyframes icon-line-long-b-3xsv6g79l6 {
    0% {
        width: 0;
        right: 46px;
        top: 54px;
    }

    65% {
        width: 0;
        right: 46px;
        top: 54px;
    }

    84% {
        width: 55px;
        right: 0px;
        top: 35px;
    }

    100% {
        width: 47px;
        right: 8px;
        top: 38px;
    }
}

/* QR Code */
.qr-code-container[b-3xsv6g79l6] {
    background: #f8f9fa;
}

.placeholder-qr[b-3xsv6g79l6] {
    background: linear-gradient(45deg, #e9ecef 25%, #dee2e6 25%, #dee2e6 50%, #e9ecef 50%, #e9ecef 75%, #dee2e6 75%);
    background-size: 20px 20px;
}

/* Embed code */
.embed-code-container[b-3xsv6g79l6] {
    max-height: 150px;
    overflow-y: auto;
    font-family: 'Courier New', monospace;
}

    .embed-code-container pre[b-3xsv6g79l6] {
        white-space: pre-wrap;
        word-wrap: break-word;
    }

/* Step icons */
.step-icon[b-3xsv6g79l6] {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

    .step-icon:hover[b-3xsv6g79l6] {
        transform: scale(1.1);
    }

/* Responsive */
@media (max-width: 768px) {
    .complete-container[b-3xsv6g79l6] {
        margin: 1rem auto;
    }

    .display-5[b-3xsv6g79l6] {
        font-size: 1.75rem;
    }

    .booking-url-container .input-group[b-3xsv6g79l6] {
        flex-direction: column;
    }

    .booking-url-container .btn[b-3xsv6g79l6] {
        margin-top: 0.5rem;
        border-radius: 0.375rem !important;
    }

    .d-flex.flex-wrap.gap-2[b-3xsv6g79l6] {
        flex-direction: column;
    }

        .d-flex.flex-wrap.gap-2 .btn[b-3xsv6g79l6] {
            width: 100%;
        }
}
/* _content/ZenZonApp/Components/Pages/ClinicClient/Onboarding/Welcome.razor.rz.scp.css */
.welcome-container[b-kai09olfqj] {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.setup-steps[b-kai09olfqj] {
    position: relative;
    padding-left: 2rem;
}

    .setup-steps[b-kai09olfqj]::before {
        content: '';
        position: absolute;
        left: 1rem;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #e9ecef;
    }

.step-item[b-kai09olfqj] {
    position: relative;
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-left: 1rem;
    transition: all 0.3s ease;
}

    .step-item:last-child[b-kai09olfqj] {
        margin-bottom: 0;
    }

.step-number[b-kai09olfqj] {
    width: 2.5rem;
    height: 2.5rem;
    background: #e9ecef;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #6c757d;
    z-index: 1;
    transition: all 0.3s ease;
}

.step-item.completed .step-number[b-kai09olfqj] {
    background: #28a745;
    color: white;
}

.step-item.completed .step-content h5[b-kai09olfqj] {
    color: #28a745;
}

.step-item.completed .step-content p[b-kai09olfqj] {
    opacity: 0.7;
}

.step-content[b-kai09olfqj] {
    flex: 1;
    padding-bottom: 1rem;
}

    .step-content h5[b-kai09olfqj] {
        margin-bottom: 0.25rem;
        transition: color 0.3s ease;
    }

    .step-content p[b-kai09olfqj] {
        margin-bottom: 0.75rem;
    }

@media (max-width: 768px) {
    .setup-steps[b-kai09olfqj] {
        padding-left: 1rem;
    }

    .step-item[b-kai09olfqj] {
        gap: 1rem;
    }

    .step-number[b-kai09olfqj] {
        width: 2rem;
        height: 2rem;
        font-size: 0.9rem;
    }
}
/* _content/ZenZonApp/Components/Pages/ClinicClient/ProfileSetup.razor.rz.scp.css */
/* Profile Setup Container */
.profile-setup-container[b-8v8s546t9v] {
    min-height: 100vh;
    position: relative;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    overflow: hidden;
}

/* Animated Background */
.gradient-bg[b-8v8s546t9v] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.gradient-sphere[b-8v8s546t9v] {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
    top: -200px;
    right: -200px;
    filter: blur(80px);
    animation: float-b-8v8s546t9v 20s ease-in-out infinite;
}

.gradient-sphere-2[b-8v8s546t9v] {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle at 70% 70%, rgba(110, 69, 226, 0.6), rgba(136, 72, 218, 0.2));
    bottom: -150px;
    left: -150px;
    filter: blur(80px);
    animation: float-b-8v8s546t9v 15s ease-in-out infinite reverse;
}

/* Glass Progress */
.glass-progress[b-8v8s546t9v] {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 20px 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

.progress-header[b-8v8s546t9v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.progress-title[b-8v8s546t9v] {
    margin: 0;
    color: white;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.5px;
}

.progress-step[b-8v8s546t9v] {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 100px;
    color: white;
    font-size: 13px;
    font-weight: 500;
}

.progress-container[b-8v8s546t9v] {
    position: relative;
}

.progress-track[b-8v8s546t9v] {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    overflow: hidden;
}

.progress-fill[b-8v8s546t9v] {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 100px;
    position: relative;
    animation: progressPulse-b-8v8s546t9v 2s infinite;
}

    .progress-fill[b-8v8s546t9v]::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        animation: shimmer-b-8v8s546t9v 2s infinite;
    }

.progress-steps[b-8v8s546t9v] {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    padding: 0 2px;
}

.step-dot[b-8v8s546t9v] {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: all 0.3s ease;
}

    .step-dot.active[b-8v8s546t9v] {
        background: white;
        box-shadow: 0 0 15px #667eea;
        transform: scale(1.2);
    }

/* Glass Card */
.glass-card[b-8v8s546t9v] {
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    z-index: 1;
}

    .glass-card[b-8v8s546t9v]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -50%;
        width: 200%;
        height: 100%;
        background: linear-gradient( to right, transparent, rgba(255, 255, 255, 0.1), transparent );
        transform: rotate(45deg);
        animation: shimmer-b-8v8s546t9v 8s infinite;
    }

.glass-card__shimmer[b-8v8s546t9v] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
}

.glass-card__glow[b-8v8s546t9v] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.05));
}

.glass-card__header[b-8v8s546t9v] {
    padding: 24px 32px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-icon[b-8v8s546t9v] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 16px;
    color: white;
    font-size: 24px;
    box-shadow: 0 10px 20px -5px rgba(102, 126, 234, 0.5);
}

.header-content[b-8v8s546t9v] {
    flex: 1;
}

.header-title[b-8v8s546t9v] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: white;
    letter-spacing: -0.5px;
}

.header-subtitle[b-8v8s546t9v] {
    margin: 4px 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.header-badge[b-8v8s546t9v] {
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 100px;
    color: white;
    font-size: 13px;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

.badge-glow[b-8v8s546t9v] {
    position: relative;
    z-index: 1;
}

.header-badge[b-8v8s546t9v]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shimmer-b-8v8s546t9v 2s infinite;
}

.glass-card__body[b-8v8s546t9v] {
    padding: 32px;
}

/* Form Sections */
.form-section[b-8v8s546t9v] {
    margin-bottom: 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

    .form-section:last-of-type[b-8v8s546t9v] {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

.section-header[b-8v8s546t9v] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.section-icon[b-8v8s546t9v] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2), rgba(118, 75, 162, 0.2));
    border-radius: 10px;
    color: white;
    font-size: 18px;
}

.section-title[b-8v8s546t9v] {
    margin: 0;
    color: white;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.3px;
}

/* Form Groups */
.form-group[b-8v8s546t9v] {
    margin-bottom: 0;
}

.form-label[b-8v8s546t9v] {
    display: block;
    margin-bottom: 8px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.required-star[b-8v8s546t9v] {
    color: #ef4444;
    margin-left: 2px;
}

/* White Inputs with Dark Blue Text */
.glass-input[b-8v8s546t9v] {
    width: 100%;
    padding: 16px;
    background: white;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    color: #1a237e;
    font-size: 15px;
    transition: all 0.3s ease;
}

    .glass-input:focus[b-8v8s546t9v] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
    }

    .glass-input[b-8v8s546t9v]::placeholder {
        color: #9aa5b8;
    }

    .glass-input:disabled[b-8v8s546t9v] {
        background: rgba(255, 255, 255, 0.8);
        color: #666;
        cursor: not-allowed;
    }

.input-wrapper[b-8v8s546t9v] {
    position: relative;
}

.input-glow[b-8v8s546t9v] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 16px;
    pointer-events: none;
    transition: opacity 0.3s ease;
    opacity: 0;
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
}

.glass-input:focus + .input-glow[b-8v8s546t9v] {
    opacity: 1;
}

/* Select Inputs */
.select-wrapper[b-8v8s546t9v] {
    position: relative;
}

.glass-select[b-8v8s546t9v] {
    width: 100%;
    padding: 16px;
    background: white;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    color: #1a237e;
    font-size: 15px;
    appearance: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .glass-select:focus[b-8v8s546t9v] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15);
    }

.select-arrow[b-8v8s546t9v] {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    color: #1a237e;
    pointer-events: none;
    opacity: 0.5;
}

/* Form Hints */
.form-hint[b-8v8s546t9v] {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}

/* Validation */
.validation-wrapper[b-8v8s546t9v] {
    margin-bottom: 24px;
}

.validation-summary[b-8v8s546t9v] {
    padding: 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 12px;
    color: #ef4444;
    font-size: 14px;
}

.validation-message[b-8v8s546t9v] {
    margin-top: 4px;
    color: #ef4444;
    font-size: 12px;
    font-weight: 500;
}

/* Error Message */
.error-message[b-8v8s546t9v] {
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 12px;
    color: #ef4444;
    font-size: 14px;
    display: flex;
    align-items: center;
}

/* Terms Checkbox */
.terms-wrapper[b-8v8s546t9v] {
    margin-top: 24px;
}

.terms-checkbox[b-8v8s546t9v] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    color: white;
    font-size: 14px;
}

    .terms-checkbox input[b-8v8s546t9v] {
        display: none;
    }

.checkbox-custom[b-8v8s546t9v] {
    width: 20px;
    height: 20px;
    background: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-top: 2px;
}

.terms-checkbox input:checked + .checkbox-custom[b-8v8s546t9v] {
    background: #667eea;
    border-color: #667eea;
}

    .terms-checkbox input:checked + .checkbox-custom[b-8v8s546t9v]::after {
        content: '✓';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 12px;
        font-weight: bold;
    }

.checkbox-label[b-8v8s546t9v] {
    flex: 1;
    line-height: 1.5;
}

    .checkbox-label a[b-8v8s546t9v] {
        color: white;
        text-decoration: none;
        font-weight: 600;
        position: relative;
    }

        .checkbox-label a[b-8v8s546t9v]::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 1px;
            background: rgba(255, 255, 255, 0.3);
            transition: all 0.2s ease;
        }

        .checkbox-label a:hover[b-8v8s546t9v]::after {
            background: white;
        }

/* Form Actions */
.form-actions[b-8v8s546t9v] {
    margin-top: 32px;
}

.glass-button[b-8v8s546t9v] {
    padding: 16px 24px;
    border: none;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.glass-button--primary[b-8v8s546t9v] {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    box-shadow: 0 10px 20px -5px rgba(102, 126, 234, 0.5);
}

    .glass-button--primary:hover:not(:disabled)[b-8v8s546t9v] {
        transform: translateY(-2px);
        box-shadow: 0 15px 30px -5px rgba(102, 126, 234, 0.6);
    }

    .glass-button--primary:disabled[b-8v8s546t9v] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.glass-button[b-8v8s546t9v]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.glass-button:hover[b-8v8s546t9v]::before {
    width: 300px;
    height: 300px;
}

.glass-button > *[b-8v8s546t9v] {
    position: relative;
    z-index: 1;
}

/* Button Loader */
.button-loader[b-8v8s546t9v] {
    display: flex;
    gap: 4px;
}

.loader-dot[b-8v8s546t9v] {
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    animation: bounce-b-8v8s546t9v 1.4s infinite ease-in-out both;
}

    .loader-dot:nth-child(1)[b-8v8s546t9v] {
        animation-delay: -0.32s;
    }

    .loader-dot:nth-child(2)[b-8v8s546t9v] {
        animation-delay: -0.16s;
    }

/* Help Card */
.help-card[b-8v8s546t9v] {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.help-icon[b-8v8s546t9v] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #10b981, #34d399);
    border-radius: 12px;
    color: white;
    font-size: 20px;
    flex-shrink: 0;
}

.help-content h6[b-8v8s546t9v] {
    margin: 0 0 4px;
    color: white;
    font-size: 15px;
    font-weight: 600;
}

.help-content p[b-8v8s546t9v] {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    line-height: 1.5;
}

/* Animations */
@keyframes float-b-8v8s546t9v {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(30px, -30px) rotate(120deg);
    }

    66% {
        transform: translate(-20px, 20px) rotate(240deg);
    }
}

@keyframes shimmer-b-8v8s546t9v {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

@keyframes progressPulse-b-8v8s546t9v {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

@keyframes bounce-b-8v8s546t9v {
    0%, 80%, 100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .glass-progress[b-8v8s546t9v] {
        padding: 16px;
    }

    .progress-title[b-8v8s546t9v] {
        font-size: 18px;
    }

    .glass-card__header[b-8v8s546t9v] {
        flex-direction: column;
        text-align: center;
    }

    .glass-card__body[b-8v8s546t9v] {
        padding: 20px;
    }

    .section-header[b-8v8s546t9v] {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .help-card[b-8v8s546t9v] {
        flex-direction: column;
        text-align: center;
    }
}
/* _content/ZenZonApp/Components/Pages/ClinicClient/Subscription/Checkout.razor.rz.scp.css */
/* Base Styles */
.checkout-container[b-mohcrvtom9] {
    min-height: 100vh;
    position: relative;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    overflow: hidden;
}

/* Animated Background */
.gradient-bg[b-mohcrvtom9] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.gradient-sphere[b-mohcrvtom9] {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
    top: -200px;
    right: -200px;
    filter: blur(80px);
    animation: float-b-mohcrvtom9 20s ease-in-out infinite;
}

.gradient-sphere-2[b-mohcrvtom9] {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle at 70% 70%, rgba(110, 69, 226, 0.6), rgba(136, 72, 218, 0.2));
    bottom: -150px;
    left: -150px;
    filter: blur(80px);
    animation: float-b-mohcrvtom9 15s ease-in-out infinite reverse;
}

/* Glass Card */
.glass-card[b-mohcrvtom9] {
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    z-index: 1;
}

    .glass-card[b-mohcrvtom9]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -50%;
        width: 200%;
        height: 100%;
        background: linear-gradient( to right, transparent, rgba(255, 255, 255, 0.1), transparent );
        transform: rotate(45deg);
        animation: shimmer-b-mohcrvtom9 8s infinite;
    }

.glass-card__shimmer[b-mohcrvtom9] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
}

.glass-card__glow[b-mohcrvtom9] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.05));
}

/* Header */
.glass-card__header[b-mohcrvtom9] {
    padding: 24px 32px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-icon[b-mohcrvtom9] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 16px;
    color: white;
    font-size: 24px;
    box-shadow: 0 10px 20px -5px rgba(102, 126, 234, 0.5);
}

.header-content[b-mohcrvtom9] {
    flex: 1;
}

.header-title[b-mohcrvtom9] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: white;
    letter-spacing: -0.5px;
}

.header-subtitle[b-mohcrvtom9] {
    margin: 4px 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.header-badge[b-mohcrvtom9] {
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 100px;
    color: white;
    font-size: 13px;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

.badge-glow[b-mohcrvtom9] {
    position: relative;
    z-index: 1;
}

.header-badge[b-mohcrvtom9]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shimmer-b-mohcrvtom9 2s infinite;
}

/* Body */
.glass-card__body[b-mohcrvtom9] {
    padding: 32px;
}

/* Loading State */
.loading-state[b-mohcrvtom9] {
    text-align: center;
    padding: 60px 0;
}

.loading-spinner[b-mohcrvtom9] {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
}

.spinner-ring[b-mohcrvtom9] {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 4px solid transparent;
    border-top-color: white;
    border-right-color: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: spin-b-mohcrvtom9 1s linear infinite;
}

.spinner-ring-2[b-mohcrvtom9] {
    position: absolute;
    width: 60px;
    height: 60px;
    top: 10px;
    left: 10px;
    border: 4px solid transparent;
    border-bottom-color: rgba(255, 255, 255, 0.5);
    border-left-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: spin-b-mohcrvtom9 1.5s linear infinite reverse;
}

.loading-text[b-mohcrvtom9] {
    color: white;
    font-size: 16px;
    font-weight: 500;
    opacity: 0.9;
}

/* Error State */
.error-state[b-mohcrvtom9] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 20px;
}

.error-icon[b-mohcrvtom9] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.2);
    border-radius: 50%;
    color: #ef4444;
    font-size: 24px;
}

.error-content[b-mohcrvtom9] {
    flex: 1;
}

    .error-content h5[b-mohcrvtom9] {
        margin: 0 0 4px;
        color: white;
        font-size: 16px;
        font-weight: 600;
    }

    .error-content p[b-mohcrvtom9] {
        margin: 0;
        color: rgba(255, 255, 255, 0.7);
        font-size: 14px;
    }

/* Checkout Grid */
.checkout-grid[b-mohcrvtom9] {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 32px;
}

/* Order Summary */
.order-summary-section[b-mohcrvtom9] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.summary-card[b-mohcrvtom9] {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 24px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.summary-header[b-mohcrvtom9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

    .summary-header h5[b-mohcrvtom9] {
        margin: 0;
        color: white;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: -0.3px;
    }

.summary-badge[b-mohcrvtom9] {
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    font-weight: 500;
}

.plan-details[b-mohcrvtom9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.plan-name[b-mohcrvtom9] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-size: 16px;
    font-weight: 500;
}

.plan-icon[b-mohcrvtom9] {
    color: #667eea;
    font-size: 18px;
}

.plan-price[b-mohcrvtom9] {
    color: white;
    font-size: 18px;
    font-weight: 600;
}

.billing-details[b-mohcrvtom9] {
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.billing-row[b-mohcrvtom9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.billing-label[b-mohcrvtom9] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    display: flex;
    align-items: center;
}

.billing-value[b-mohcrvtom9] {
    color: white;
    font-size: 14px;
    font-weight: 500;
}

.discount-row[b-mohcrvtom9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.discount-label[b-mohcrvtom9] {
    color: #10b981;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.discount-value[b-mohcrvtom9] {
    color: #10b981;
    font-size: 14px;
    font-weight: 600;
}

.total-section[b-mohcrvtom9] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid rgba(255, 255, 255, 0.1);
}

.total-row[b-mohcrvtom9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.total-label[b-mohcrvtom9] {
    color: white;
    font-size: 18px;
    font-weight: 600;
}

.total-amount[b-mohcrvtom9] {
    color: white;
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(135deg, #fff, #e0e0e0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.security-badge[b-mohcrvtom9] {
    margin-top: 20px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
}

    .security-badge i[b-mohcrvtom9] {
        color: #10b981;
    }

/* Features Card */
.features-card[b-mohcrvtom9] {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 24px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

    .features-card h6[b-mohcrvtom9] {
        margin: 0 0 16px;
        color: white;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -0.3px;
    }

.features-list[b-mohcrvtom9] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.feature-item[b-mohcrvtom9] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
}

.feature-icon[b-mohcrvtom9] {
    color: #10b981;
    font-size: 16px;
}

/* Payment Form - UPDATED with white backgrounds and dark blue text */
.payment-form-section[b-mohcrvtom9] {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.form-title[b-mohcrvtom9] {
    margin: 0 0 24px;
    color: white;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.5px;
}

.form-group[b-mohcrvtom9] {
    margin-bottom: 24px;
}

.form-label[b-mohcrvtom9] {
    display: block;
    margin-bottom: 8px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.input-wrapper[b-mohcrvtom9] {
    position: relative;
}

/* White background inputs with dark blue text */
.glass-input[b-mohcrvtom9] {
    width: 100%;
    padding: 16px;
    background: white;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    color: #1a237e; /* Dark Blue */
    font-size: 15px;
    transition: all 0.3s ease;
}

    .glass-input:focus[b-mohcrvtom9] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

    .glass-input[b-mohcrvtom9]::placeholder {
        color: #9aa5b8; /* Light gray-blue for placeholder */
    }

.input-glow[b-mohcrvtom9] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 16px;
    pointer-events: none;
    transition: opacity 0.3s ease;
    opacity: 0;
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
}

.glass-input:focus + .input-glow[b-mohcrvtom9] {
    opacity: 1;
}

/* Card Element with white background */
.card-element-wrapper[b-mohcrvtom9] {
    position: relative;
}

.glass-card-element[b-mohcrvtom9] {
    padding: 16px;
    background: white;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    color: #1a237e; /* Dark Blue */
    transition: all 0.3s ease;
}

    .glass-card-element:focus-within[b-mohcrvtom9] {
        border-color: #667eea;
        box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    }

.card-icons[b-mohcrvtom9] {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
    color: #1a237e; /* Dark Blue */
    opacity: 0.5;
    pointer-events: none;
}

.card-errors[b-mohcrvtom9] {
    margin-top: 8px;
    color: #ef4444;
    font-size: 13px;
}

.error-message[b-mohcrvtom9] {
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 12px;
    color: #ef4444;
    font-size: 14px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
}

/* Terms Checkbox - UPDATED */
.terms-wrapper[b-mohcrvtom9] {
    margin-bottom: 24px;
}

.terms-checkbox[b-mohcrvtom9] {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    color: white;
    font-size: 14px;
}

    .terms-checkbox input[b-mohcrvtom9] {
        display: none;
    }

.checkbox-custom[b-mohcrvtom9] {
    width: 20px;
    height: 20px;
    background: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    position: relative;
    transition: all 0.2s ease;
}

.terms-checkbox input:checked + .checkbox-custom[b-mohcrvtom9] {
    background: #667eea;
    border-color: #667eea;
}

    .terms-checkbox input:checked + .checkbox-custom[b-mohcrvtom9]::after {
        content: '✓';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 12px;
        font-weight: bold;
    }

.checkbox-label[b-mohcrvtom9] {
    flex: 1;
}

    .checkbox-label a[b-mohcrvtom9] {
        color: white;
        text-decoration: none;
        font-weight: 600;
        position: relative;
    }

        .checkbox-label a[b-mohcrvtom9]::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 1px;
            background: rgba(255, 255, 255, 0.3);
            transition: all 0.2s ease;
        }

        .checkbox-label a:hover[b-mohcrvtom9]::after {
            background: white;
        }

/* Action Buttons */
.action-buttons[b-mohcrvtom9] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.glass-button[b-mohcrvtom9] {
    padding: 16px 24px;
    border: none;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.glass-button--primary[b-mohcrvtom9] {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    box-shadow: 0 10px 20px -5px rgba(102, 126, 234, 0.5);
}

    .glass-button--primary:hover:not(:disabled)[b-mohcrvtom9] {
        transform: translateY(-2px);
        box-shadow: 0 15px 30px -5px rgba(102, 126, 234, 0.6);
    }

    .glass-button--primary:disabled[b-mohcrvtom9] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.glass-button--secondary[b-mohcrvtom9] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .glass-button--secondary:hover[b-mohcrvtom9] {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.3);
    }

.glass-button--text[b-mohcrvtom9] {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
}

    .glass-button--text:hover[b-mohcrvtom9] {
        color: white;
        background: rgba(255, 255, 255, 0.05);
    }

.glass-button[b-mohcrvtom9]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.glass-button:hover[b-mohcrvtom9]::before {
    width: 300px;
    height: 300px;
}

.glass-button > *[b-mohcrvtom9] {
    position: relative;
    z-index: 1;
}

/* Button Loader */
.button-loader[b-mohcrvtom9] {
    display: flex;
    gap: 4px;
}

.loader-dot[b-mohcrvtom9] {
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    animation: bounce-b-mohcrvtom9 1.4s infinite ease-in-out both;
}

    .loader-dot:nth-child(1)[b-mohcrvtom9] {
        animation-delay: -0.32s;
    }

    .loader-dot:nth-child(2)[b-mohcrvtom9] {
        animation-delay: -0.16s;
    }

/* Payment Methods */
.payment-methods[b-mohcrvtom9] {
    margin-top: 24px;
    text-align: center;
}

.methods-row[b-mohcrvtom9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.method-icon[b-mohcrvtom9] {
    height: 30px;
    filter: brightness(0) invert(1);
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

    .method-icon:hover[b-mohcrvtom9] {
        opacity: 1;
    }

.method-divider[b-mohcrvtom9] {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
}

.security-note[b-mohcrvtom9] {
    margin: 16px 0 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .security-note i[b-mohcrvtom9] {
        color: #10b981;
    }

/* Animations */
@keyframes float-b-mohcrvtom9 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(30px, -30px) rotate(120deg);
    }

    66% {
        transform: translate(-20px, 20px) rotate(240deg);
    }
}

@keyframes shimmer-b-mohcrvtom9 {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }

    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

@keyframes spin-b-mohcrvtom9 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes bounce-b-mohcrvtom9 {
    0%, 80%, 100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .glass-card__header[b-mohcrvtom9] {
        flex-direction: column;
        text-align: center;
    }

    .checkout-grid[b-mohcrvtom9] {
        grid-template-columns: 1fr;
    }

    .glass-card__body[b-mohcrvtom9] {
        padding: 20px;
    }

    .methods-row[b-mohcrvtom9] {
        gap: 12px;
    }
}

/* Stripe Element Overrides - UPDATED for white background */
.StripeElement[b-mohcrvtom9] {
    background: white !important;
    color: #1a237e !important;
}

.StripeElement--focus[b-mohcrvtom9] {
    border-color: #667eea !important;
}

.StripeElement--invalid[b-mohcrvtom9] {
    border-color: #ef4444 !important;
}
/* _content/ZenZonApp/Components/Pages/ClinicClient/Subscription/PatientPayments.razor.rz.scp.css */
/* ── Setup Steps ─────────────────────────────────────────── */
.setup-step[b-rrgan3f38g] {
    padding: 1.25rem 1.5rem;
    transition: background 0.2s ease;
}

    .setup-step.step-complete[b-rrgan3f38g] {
        background: rgba(25, 135, 84, 0.04);
    }

    .setup-step.step-active[b-rrgan3f38g] {
        background: rgba(13, 110, 253, 0.04);
    }

    .setup-step.step-pending[b-rrgan3f38g] {
        background: rgba(255, 193, 7, 0.04);
    }

    .setup-step.step-locked[b-rrgan3f38g] {
        background: transparent;
        opacity: 0.55;
    }

.step-divider[b-rrgan3f38g] {
    height: 1px;
    background: rgba(0, 0, 0, 0.07);
    margin: 0 1.5rem;
}

/* ── Step Circles ────────────────────────────────────────── */
.step-circle[b-rrgan3f38g] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

    .step-circle.complete[b-rrgan3f38g] {
        background: rgba(25, 135, 84, 0.15);
        color: #198754;
        border: 2px solid rgba(25, 135, 84, 0.4);
    }

    .step-circle.active[b-rrgan3f38g] {
        background: rgba(13, 110, 253, 0.15);
        color: #0d6efd;
        border: 2px solid rgba(13, 110, 253, 0.4);
    }

    .step-circle.pending[b-rrgan3f38g] {
        background: rgba(255, 193, 7, 0.15);
        color: #997404;
        border: 2px solid rgba(255, 193, 7, 0.4);
    }

    .step-circle.locked[b-rrgan3f38g] {
        background: rgba(0, 0, 0, 0.06);
        color: rgba(0, 0, 0, 0.3);
        border: 2px solid rgba(0, 0, 0, 0.1);
    }

/* ── Wrapper ─────────────────────────────────────────────── */
.patient-payments-wrapper[b-rrgan3f38g] {
    max-width: 860px;
    margin: 0 auto;
}body[b-rrgan3f38g] {
}
/* _content/ZenZonApp/Components/Pages/ClinicClient/Subscription/Pricing.razor.rz.scp.css */
body[b-r2yygfipad] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Stunning Glassmorphism Effect */
.glass-card[b-r2yygfipad] {
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 8px 20px rgba(0, 0, 0, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.3) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

    .glass-card:hover[b-r2yygfipad] {
        transform: translateY(-8px) scale(1.02) !important;
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3), 0 15px 30px rgba(0, 0, 0, 0.25), inset 0 1px 3px rgba(255, 255, 255, 0.4) !important;
        background: rgba(255, 255, 255, 0.3) !important;
    }

    .glass-card[b-r2yygfipad]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.5s ease;
    }

    .glass-card:hover[b-r2yygfipad]::before {
        left: 100%;
    }

    /* Popular card special glass effect */
    .glass-card.popular[b-r2yygfipad] {
        background: rgba(255, 255, 255, 0.3) !important;
        border: 2px solid rgba(255, 255, 255, 0.5) !important;
        box-shadow: 0 25px 50px rgba(102, 126, 234, 0.3), 0 10px 25px rgba(0, 0, 0, 0.2), inset 0 1px 3px rgba(255, 255, 255, 0.5) !important;
    }

/* Center content in cards */
.pricing-card .card-body[b-r2yygfipad] {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.pricing-card .list-unstyled[b-r2yygfipad] {
    text-align: left !important; /* Keep list items left-aligned for better readability */
    width: 100%;
    max-width: 250px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.pricing-card .btn[b-r2yygfipad] {
    max-width: 200px;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Glassmorphism for other elements */
.glass-text[b-r2yygfipad] {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.glass-text-muted[b-r2yygfipad] {
    color: rgba(255, 255, 255, 0.8) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.glass-badge[b-r2yygfipad] {
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white !important;
}

.glass-toggle .btn[b-r2yygfipad] {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white !important;
    transition: all 0.3s ease;
}

.glass-toggle .btn-primary[b-r2yygfipad] {
    background: rgba(102, 126, 234, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.glass-toggle .btn:hover[b-r2yygfipad] {
    background: rgba(255, 255, 255, 0.25) !important;
    transform: translateY(-2px);
}

/* FAQ section glass effect */
.glass-faq-item[b-r2yygfipad] {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    transition: all 0.3s ease;
}

    .glass-faq-item:hover[b-r2yygfipad] {
        background: rgba(255, 255, 255, 0.15) !important;
        transform: translateY(-3px);
    }

/* Custom button styles for glass effect */
.btn-glass[b-r2yygfipad] {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white !important;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

    .btn-glass:hover[b-r2yygfipad] {
        background: rgba(255, 255, 255, 0.3) !important;
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }

.btn-glass-primary[b-r2yygfipad] {
    background: rgba(102, 126, 234, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

    .btn-glass-primary:hover[b-r2yygfipad] {
        background: rgba(102, 126, 234, 0.6) !important;
    }

/* Header text */
h1[b-r2yygfipad], h3[b-r2yygfipad], h5[b-r2yygfipad] {
    color: white !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.lead[b-r2yygfipad] {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Popular badge */
.popular-badge[b-r2yygfipad] {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* List icons */
.bi-check-circle-fill[b-r2yygfipad] {
    color: #4ade80 !important;
    filter: drop-shadow(0 2px 4px rgba(74, 222, 128, 0.3));
}

.bi-x-circle[b-r2yygfipad] {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Price text */
.plan-price[b-r2yygfipad] {
    color: white !important;
}

.text-muted[b-r2yygfipad] {
    color: rgba(255, 255, 255, 0.7) !important;
}

.text-success[b-r2yygfipad] {
    color: #4ade80 !important;
}

/* Border top */
.border-top[b-r2yygfipad] {
    border-top-color: rgba(255, 255, 255, 0.2) !important;
}
/* _content/ZenZonApp/Components/Pages/ClinicClient/Subscription/Subscription.razor.rz.scp.css */
/* Components/Pages/Clinic/Subscription/Subscription.razor.css */

/* Glassmorphism Variables */
:root[b-s4g4jg0niz] {
    --glass-bg: rgba(255, 255, 255, 0.25);
    --glass-border: rgba(255, 255, 255, 0.18);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    --glass-blur: blur(10px);
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --success-gradient: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
    --warning-gradient: linear-gradient(135deg, #fad961 0%, #f76b1c 100%);
    --danger-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --text-primary: #1a202c; /* Almost black for primary text */
    --text-secondary: #2d3748; /* Dark gray for secondary text */
    --text-muted: #4a5568; /* Medium gray for muted text */
    --text-light: #718096; /* Light gray for subtle text */
}

/* Main Layout */
.sub-page[b-s4g4jg0niz] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 2rem;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.sub-shell[b-s4g4jg0niz] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2rem;
    max-width: 1600px;
    margin: 0 auto;
}

/* Glassmorphism Base Style */
.glass-card[b-s4g4jg0niz] {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: var(--glass-shadow);
}

/* Left Sidebar - Glassmorphism */
.sub-sidebar[b-s4g4jg0niz] {
    composes: glass-card;
    padding: 2rem 1rem;
    height: fit-content;
    position: sticky;
    top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sub-sidebar-title[b-s4g4jg0niz] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-primary);
    padding: 0 1rem;
    margin: 1rem 0 0.5rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

    .sub-sidebar-title:first-of-type[b-s4g4jg0niz] {
        margin-top: 0;
    }

.sub-nav[b-s4g4jg0niz] {
    background: transparent;
    border: none;
    padding: 0.875rem 1rem;
    text-align: left;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .sub-nav[b-s4g4jg0niz]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 12px;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .sub-nav:hover[b-s4g4jg0niz]::before {
        opacity: 1;
    }

    .sub-nav.active[b-s4g4jg0niz] {
        background: rgba(255, 255, 255, 0.4);
        color: #000000;
        font-weight: 600;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

        .sub-nav.active[b-s4g4jg0niz]::after {
            content: '';
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #000000;
            box-shadow: 0 0 10px #000000;
        }

.sub-sidebar-spacer[b-s4g4jg0niz] {
    flex: 1;
}

/* Main Content Area */
.sub-main[b-s4g4jg0niz] {
    composes: glass-card;
    padding: 2rem;
}

/* Header Section */
.sub-header[b-s4g4jg0niz] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.sub-h1[b-s4g4jg0niz] {
    font-size: 2rem;
    font-weight: 700;
    color: #000000;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.5);
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
}

.sub-h2[b-s4g4jg0niz] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.sub-actions[b-s4g4jg0niz] {
    display: flex;
    gap: 0.75rem;
}

/* Buttons */
.btn[b-s4g4jg0niz] {
    padding: 0.625rem 1.25rem;
    border-radius: 12px;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #000000;
}

    .btn:hover[b-s4g4jg0niz] {
        background: rgba(255, 255, 255, 0.5);
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }

.btn-primary[b-s4g4jg0niz] {
    background: var(--primary-gradient);
    border: none;
    color: #000000;
}

.btn-outline-primary[b-s4g4jg0niz] {
    background: transparent;
    border: 1px solid #000000;
    color: #000000;
}

    .btn-outline-primary:hover[b-s4g4jg0niz] {
        background: rgba(255, 255, 255, 0.3);
        border-color: #000000;
    }

.btn-success[b-s4g4jg0niz] {
    background: var(--success-gradient);
    color: #000000;
}

    .btn-success:disabled[b-s4g4jg0niz] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Loading State */
.sub-loading[b-s4g4jg0niz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    color: #000000;
}

.spinner-border[b-s4g4jg0niz] {
    width: 3rem;
    height: 3rem;
    border: 3px solid rgba(0, 0, 0, 0.2);
    border-top-color: #000000;
    border-radius: 50%;
    animation: spin-b-s4g4jg0niz 1s linear infinite;
}

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

/* Grid Layouts */
.sub-grid-2[b-s4g4jg0niz] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Cards */
.sub-card[b-s4g4jg0niz] {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .sub-card:hover[b-s4g4jg0niz] {
        transform: translateY(-2px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }

.sub-card-title[b-s4g4jg0niz] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #000000;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .sub-card-title[b-s4g4jg0niz]::before {
        content: '';
        width: 4px;
        height: 24px;
        background: var(--primary-gradient);
        border-radius: 4px;
    }

/* Current Plan Section */
.sub-plan-row[b-s4g4jg0niz] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.sub-plan-name[b-s4g4jg0niz] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 0.25rem;
}

.sub-plan-desc[b-s4g4jg0niz] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.sub-plan-price[b-s4g4jg0niz] {
    text-align: right;
}

.sub-price[b-s4g4jg0niz] {
    font-size: 2rem;
    font-weight: 700;
    color: #000000;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.sub-price-unit[b-s4g4jg0niz] {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-secondary);
}

.sub-badge[b-s4g4jg0niz] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

    .sub-badge.on[b-s4g4jg0niz] {
        background: rgba(72, 187, 120, 0.2);
        color: #22543d;
        border: 1px solid rgba(72, 187, 120, 0.3);
    }

    .sub-badge.off[b-s4g4jg0niz] {
        background: rgba(245, 101, 101, 0.2);
        color: #742a2a;
        border: 1px solid rgba(245, 101, 101, 0.3);
    }

/* Billing Toggle */
.sub-toggle[b-s4g4jg0niz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
}

.sub-pill[b-s4g4jg0niz] {
    display: inline-flex;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    padding: 0.25rem;
}

.sub-pill-btn[b-s4g4jg0niz] {
    padding: 0.5rem 1.25rem;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .sub-pill-btn.active[b-s4g4jg0niz] {
        background: white;
        color: #667eea;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

/* KPIs */
.sub-kpis[b-s4g4jg0niz] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
}

.sub-kpi[b-s4g4jg0niz] {
    text-align: center;
}

.sub-kpi-label[b-s4g4jg0niz] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.sub-kpi-val[b-s4g4jg0niz] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #000000;
}

/* Payment Methods */
.sub-payment-grid[b-s4g4jg0niz] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    margin-bottom: 1rem;
}

.sub-payment-tile[b-s4g4jg0niz] {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

    .sub-payment-tile.empty[b-s4g4jg0niz] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 120px;
    }

.sub-card-mini[b-s4g4jg0niz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.sub-card-mock[b-s4g4jg0niz] {
    width: 40px;
    height: 25px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 6px;
}

.sub-card-brand[b-s4g4jg0niz] {
    font-weight: 600;
    color: #000000;
}

.sub-card-last4[b-s4g4jg0niz] {
    font-family: monospace;
    color: var(--text-secondary);
}

.sub-pm-meta[b-s4g4jg0niz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sub-pm-label[b-s4g4jg0niz] {
    font-size: 0.75rem;
    background: rgba(72, 187, 120, 0.2);
    color: #22543d;
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    display: inline-block;
}

.sub-pm-exp[b-s4g4jg0niz] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.sub-pm-actions[b-s4g4jg0niz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.sub-payment-add[b-s4g4jg0niz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 2px dashed rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
}

    .sub-payment-add:hover[b-s4g4jg0niz] {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(0, 0, 0, 0.5);
    }

.sub-plus[b-s4g4jg0niz] {
    font-size: 2rem;
    font-weight: 300;
    color: #000000;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.sub-add-text[b-s4g4jg0niz] {
    font-size: 0.75rem;
    color: #000000;
}

.sub-note[b-s4g4jg0niz] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* =========================
   Plans Grid (Aligned + Elegant)
   ========================= */

.sub-plans[b-s4g4jg0niz] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    align-items: stretch; /* equal height cards */
}

/* Card */
.sub-plan-tile[b-s4g4jg0niz] {
    position: relative;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    padding: 1.5rem 1.5rem 1.25rem;
    border: 1px solid rgba(26, 43, 76, 0.12);
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center; /* horizontal centering of blocks */
    justify-content: center; /* vertical centering of blocks */
    min-height: 420px; /* keeps tiles visually consistent */
}

    .sub-plan-tile:hover[b-s4g4jg0niz] {
        transform: translateY(-3px);
        background: rgba(255, 255, 255, 0.24);
        box-shadow: 0 16px 34px rgba(10, 20, 40, 0.10);
    }

    .sub-plan-tile.selected[b-s4g4jg0niz] {
        border-color: rgba(102, 126, 234, 0.55);
        background: rgba(102, 126, 234, 0.10);
        box-shadow: 0 18px 40px rgba(102, 126, 234, 0.18);
    }

/* Top block (name + price + unit) */
.sub-plan-tile-top[b-s4g4jg0niz] {
    display: grid;
    gap: 0.55rem;
    margin-bottom: 0.95rem;
    width: 100%;
    max-width: 320px; /* keeps text elegant and not too wide */
    margin-left: auto;
    margin-right: auto;
}

/* Name */
.sub-plan-tile-name[b-s4g4jg0niz] {
    font-size: 1.5rem;
    font-weight: 700; /* bold */
    color: var(--text-primary);
    line-height: 1.2;
}

/* Price line: price + unit aligned nicely */
.sub-plan-tile-price[b-s4g4jg0niz] {
    margin-top: 0.15rem;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.4rem;
    font-size: 1.55rem;
    font-weight: 500; /* not bold */
    color: var(--text-primary);
    line-height: 1.1;
}

    .sub-plan-tile-price .unit[b-s4g4jg0niz],
    .sub-plan-tile-price small
    .sub-plan-tile-price span:last-child[b-s4g4jg0niz] {
        font-size: 0.8rem;
        font-weight: 400;
        color: var(--text-secondary) !important;
        opacity: 1 !important;
    }

/* Description (consistent height) */
.sub-plan-tile-desc[b-s4g4jg0niz] {
    font-size: 0.92rem;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.4;
    min-height: 2.6rem; /* keeps all cards aligned */
    margin: 0 0 1rem 0;
    width: 100%;
    max-width: 320px; /* keeps text elegant and not too wide */
    margin-left: auto;
    margin-right: auto;
}

/* Feature list */
.sub-plan-feats[b-s4g4jg0niz] {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
    width: fit-content;        /* shrink to longest feature */
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;        /* keep the whole list centered in the card */
    justify-items: start;      /* grid alignment */
    text-align: left;  
}

    /* Each feature row */
    .sub-plan-feats div[b-s4g4jg0niz] {
        display: grid;
        align-items: start;
        grid-template-columns: 18px auto;
        gap: 0.5rem;
        font-size: 0.92rem;
        font-weight: 400;
        color: var(--text-primary);
        line-height: 1.35;
        padding: 0;
        margin: 0;
        width: auto;
        justify-content: start;    /* keep ✓ + text aligned left */
        grid-template-columns: 18px 1fr;
    }

        /* checkmark */
        .sub-plan-feats div[b-s4g4jg0niz]::before {
            content: "✓";
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: rgba(72, 187, 120, 0.14);
            color: #2f855a;
            font-size: 0.75rem;
            font-weight: 600;
            margin-top: 1px;
        }

/* CTA pinned to bottom */
.sub-plan-tile-cta[b-s4g4jg0niz] {
    padding-top: 1rem;
    width: 100%;
    max-width: 320px;
    margin-top: auto; /* stays at bottom */
}

    .sub-plan-tile-cta .btn[b-s4g4jg0niz] {
        width: 100%;
        justify-content: center;
        font-weight: 500; /* not bold */
    }

/* -------------------------
   MOST POPULAR badge (stable)
   Recommended: add class .sub-plan-badge in markup.
   If you can't change markup, see fallback below.
-------------------------- */

.sub-plan-badge[b-s4g4jg0niz] {
    position: absolute;
    top: 10px;
    right: 12px;
    background: rgba(102, 126, 234, 0.16);
    border: 1px solid rgba(102, 126, 234, 0.35);
    color: #2d3a8c;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.70rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Fallback ONLY if you cannot add .sub-plan-badge:
   This targets a direct child element with data-plan-badge="popular" */
.sub-plan-tile > [data-plan-badge="popular"][b-s4g4jg0niz] {
    position: absolute;
    top: 10px;
    right: 12px;
    background: rgba(102, 126, 234, 0.16);
    border: 1px solid rgba(102, 126, 234, 0.35);
    color: #2d3a8c;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.70rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 1200px) {
    .sub-plans[b-s4g4jg0niz] {
        grid-template-columns: 1fr;
    }

    .sub-plan-tile[b-s4g4jg0niz] {
        min-height: auto;
    }
}

/* =========================
   Invoice History alignment (6 columns)
   ========================= */

.sub-table[b-s4g4jg0niz] {
    width: 100%;
}

/* IMPORTANT: 6 columns to match your markup order:
   Date | Invoice# | Description | Status | Amount | Actions */
.sub-tr[b-s4g4jg0niz] {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1.8fr 0.9fr 0.85fr 0.65fr;
    gap: 0.75rem; /* equal spacing between columns */
    padding: 0.85rem 1rem;
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* Header styling (keep yours, just soften a touch if you want) */
.sub-th[b-s4g4jg0niz] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(255,255,255,0.20);
    border-radius: 10px;
}

/* Hover row */
.sub-tr:not(.sub-th):hover[b-s4g4jg0niz] {
    background: rgba(255,255,255,0.10);
}

/* Keep Amount + Actions right aligned (both are last 2 cols) */
.sub-tr > :nth-child(5)[b-s4g4jg0niz],
.sub-tr > :nth-child(6)[b-s4g4jg0niz] {
    text-align: right;
}

/* Description wraps nicely and stays aligned */
.sub-tr > :nth-child(3)[b-s4g4jg0niz] {
    line-height: 1.35;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* remove this line if you want multi-line */
}
/* Status column: remove pill styling and make it inline text */
.sub-table .sub-tr .sub-badge[b-s4g4jg0niz] {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: var(--text-primary) !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
/* =========================
   Billing Summary (clean)
   ========================= */

.sub-billing-summary .sub-card-title[b-s4g4jg0niz] {
    font-weight: 500;
}

/* 3-column layout */
.sub-summary-grid[b-s4g4jg0niz] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
}

/* item */
.sub-summary-item[b-s4g4jg0niz] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* label */
.sub-summary-label[b-s4g4jg0niz] {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-secondary);
}

/* amount (smaller + elegant, not bold) */
.sub-summary-value[b-s4g4jg0niz] {
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.2;
}

/* responsive */
@media (max-width: 768px) {
    .sub-summary-grid[b-s4g4jg0niz] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}
/* Links */
.sub-link[b-s4g4jg0niz] {
    background: none;
    border: none;
    color: #667eea;
    cursor: pointer;
    font-size: inherit;
    padding: 0;
    text-decoration: none;
    transition: color 0.3s ease;
}

    .sub-link:hover[b-s4g4jg0niz] {
        color: #764ba2;
        text-decoration: underline;
    }

    .sub-link.danger[b-s4g4jg0niz] {
        color: #e53e3e;
    }

        .sub-link.danger:hover[b-s4g4jg0niz] {
            color: #c53030;
        }

.sub-dot[b-s4g4jg0niz] {
    color: var(--text-secondary);
}

/* Account Section */
.sub-profile-section[b-s4g4jg0niz] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.sub-avatar-section[b-s4g4jg0niz] {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.sub-avatar[b-s4g4jg0niz] {
    width: 80px;
    height: 80px;
    background: var(--primary-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 600;
    color: white;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.sub-avatar-upload[b-s4g4jg0niz] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sub-form-grid[b-s4g4jg0niz] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.sub-form-group[b-s4g4jg0niz] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sub-label[b-s4g4jg0niz] {
    font-size: 0.875rem;
    font-weight: 500;
    color: #000000;
}

.sub-input[b-s4g4jg0niz] {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: #000000;
    font-size: 1rem;
    transition: all 0.3s ease;
}

    .sub-input:focus[b-s4g4jg0niz] {
        outline: none;
        border-color: #667eea;
        background: rgba(255, 255, 255, 0.3);
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .sub-input[b-s4g4jg0niz]::placeholder {
        color: var(--text-secondary);
    }

/* Devices Section */
.sub-devices-grid[b-s4g4jg0niz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

.sub-device-item[b-s4g4jg0niz] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

    .sub-device-item:hover[b-s4g4jg0niz] {
        background: rgba(255, 255, 255, 0.25);
        transform: translateX(4px);
    }

.sub-device-icon[b-s4g4jg0niz] {
    font-size: 1.5rem;
}

.sub-device-info[b-s4g4jg0niz] {
    flex: 1;
}

.sub-device-name[b-s4g4jg0niz] {
    font-weight: 600;
    color: #000000;
    margin-bottom: 0.25rem;
}

.sub-device-meta[b-s4g4jg0niz] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.sub-device-badge[b-s4g4jg0niz] {
    font-size: 0.625rem;
    padding: 0.125rem 0.5rem;
    background: rgba(72, 187, 120, 0.2);
    color: #22543d;
    border-radius: 12px;
    display: inline-block;
}

/* Security Section */
.sub-security-section[b-s4g4jg0niz] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.sub-security-item[b-s4g4jg0niz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.sub-security-left[b-s4g4jg0niz] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sub-security-icon[b-s4g4jg0niz] {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.sub-security-info h4[b-s4g4jg0niz] {
    font-weight: 600;
    color: #000000;
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
}

.sub-security-info p[b-s4g4jg0niz] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Toggle Switch */
.sub-toggle-switch[b-s4g4jg0niz] {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

    .sub-toggle-switch input[b-s4g4jg0niz] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.sub-toggle-slider[b-s4g4jg0niz] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.2);
    transition: .3s;
    border-radius: 34px;
}

    .sub-toggle-slider[b-s4g4jg0niz]:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 2px;
        bottom: 2px;
        background-color: white;
        transition: .3s;
        border-radius: 50%;
    }

input:checked + .sub-toggle-slider[b-s4g4jg0niz] {
    background: var(--primary-gradient);
}

    input:checked + .sub-toggle-slider[b-s4g4jg0niz]:before {
        transform: translateX(26px);
    }

/* Privacy Section */
.sub-privacy-settings[b-s4g4jg0niz] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sub-privacy-item[b-s4g4jg0niz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .sub-privacy-item h4[b-s4g4jg0niz] {
        color: #000000;
        margin: 0 0 0.25rem 0;
    }

.sub-privacy-actions[b-s4g4jg0niz] {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.sub-data-export-btn[b-s4g4jg0niz] {
    flex: 1;
}

/* Utility Classes */
.text-muted[b-s4g4jg0niz] {
    color: var(--text-secondary) !important;
}

.text-end[b-s4g4jg0niz] {
    text-align: right;
}

.w-100[b-s4g4jg0niz] {
    width: 100%;
}

.mt-2[b-s4g4jg0niz] {
    margin-top: 0.5rem;
}

.me-2[b-s4g4jg0niz] {
    margin-right: 0.5rem;
}

/* Scrollbar Styling */
[b-s4g4jg0niz]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[b-s4g4jg0niz]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

[b-s4g4jg0niz]::-webkit-scrollbar-thumb {
    background: var(--text-secondary);
    border-radius: 4px;
}

    [b-s4g4jg0niz]::-webkit-scrollbar-thumb:hover {
        background: var(--text-primary);
    }

/* Responsive Design */
@media (max-width: 1200px) {
    .sub-shell[b-s4g4jg0niz] {
        grid-template-columns: 1fr;
    }

    .sub-sidebar[b-s4g4jg0niz] {
        position: static;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .sub-grid-2[b-s4g4jg0niz] {
        grid-template-columns: 1fr;
    }

    .sub-plans[b-s4g4jg0niz] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .sub-page[b-s4g4jg0niz] {
        padding: 1rem;
    }

    .sub-header[b-s4g4jg0niz] {
        flex-direction: column;
        gap: 1rem;
    }

    .sub-kpis[b-s4g4jg0niz] {
        grid-template-columns: repeat(2, 1fr);
    }

    .sub-payment-grid[b-s4g4jg0niz] {
        grid-template-columns: 1fr;
    }

    .sub-tr[b-s4g4jg0niz] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .sub-th[b-s4g4jg0niz] {
        display: none;
    }

    .sub-tr:not(.sub-th)[b-s4g4jg0niz] {
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        padding: 1rem;
    }

    .sub-form-grid[b-s4g4jg0niz] {
        grid-template-columns: 1fr;
    }
}

/* Animations */
@keyframes fadeIn-b-s4g4jg0niz {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sub-card[b-s4g4jg0niz] {
    animation: fadeIn-b-s4g4jg0niz 0.5s ease-out;
}

/* Focus States */
.sub-nav:focus-visible[b-s4g4jg0niz],
.btn:focus-visible[b-s4g4jg0niz],
.sub-link:focus-visible[b-s4g4jg0niz] {
    outline: 2px solid #000000;
    outline-offset: 2px;
}

/* Print Styles */
@media print {
    .sub-page[b-s4g4jg0niz] {
        background: white;
        padding: 0;
    }

    .sub-sidebar[b-s4g4jg0niz],
    .sub-actions[b-s4g4jg0niz],
    .btn[b-s4g4jg0niz] {
        display: none;
    }

    .sub-main[b-s4g4jg0niz] {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}
/* Add spacing between "Manage in Portal" and "Change Plan" buttons */
.sub-plan-row .btn[b-s4g4jg0niz],
.sub-card .btn[b-s4g4jg0niz] {
    margin-right: 0.5rem;
}

/* Better: if those two buttons are inside a wrapper (recommended) */
.sub-current-actions[b-s4g4jg0niz],
.sub-plan-actions[b-s4g4jg0niz],
.sub-portal-actions[b-s4g4jg0niz] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}
/* _content/ZenZonApp/Components/Pages/ClinicSchedule.razor.rz.scp.css */
<style >
.glass-card[b-vvkfbtxy1e] {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.glass-card[b-vvkfbtxy1e]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
}

.glass-input[b-vvkfbtxy1e] {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: #333;
    transition: all 0.3s ease;
}

    .glass-input:focus[b-vvkfbtxy1e] {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(103, 58, 183, 0.5);
        box-shadow: 0 0 0 3px rgba(103, 58, 183, 0.1);
        outline: none;
    }

    .glass-input[b-vvkfbtxy1e]::placeholder {
        color: rgba(0, 0, 0, 0.5);
    }

.glass-checkbox[b-vvkfbtxy1e] {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 2px solid rgba(103, 58, 183, 0.3);
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .glass-checkbox:checked[b-vvkfbtxy1e] {
        background: #673ab7;
        border-color: #673ab7;
    }

.glass-table[b-vvkfbtxy1e] {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    overflow: hidden;
}

    .glass-table thead[b-vvkfbtxy1e] {
        background: rgba(103, 58, 183, 0.15);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .glass-table th[b-vvkfbtxy1e] {
        color: #5a189a;
        font-weight: 600;
        padding: 1rem;
        border: none;
    }

    .glass-table td[b-vvkfbtxy1e] {
        padding: 1rem;
        border-color: rgba(255, 255, 255, 0.1) !important;
        vertical-align: middle;
    }

    .glass-table tr:hover[b-vvkfbtxy1e] {
        background: rgba(103, 58, 183, 0.05);
    }

.glass-badge[b-vvkfbtxy1e] {
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-weight: 500;
    font-size: 0.85rem;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.bg-primary[b-vvkfbtxy1e] {
    background: linear-gradient(135deg, rgba(103, 58, 183, 0.3), rgba(156, 39, 176, 0.3)) !important;
    color: #5a189a;
}

.bg-secondary[b-vvkfbtxy1e] {
    background: linear-gradient(135deg, rgba(158, 158, 158, 0.3), rgba(97, 97, 97, 0.3)) !important;
    color: #424242;
}

.glass-button[b-vvkfbtxy1e] {
    padding: 0.6rem 1.5rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #333;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .glass-button:hover[b-vvkfbtxy1e] {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.3);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    }

    .glass-button:active[b-vvkfbtxy1e] {
        transform: translateY(0);
    }

.btn-primary[b-vvkfbtxy1e] {
    background: linear-gradient(135deg, rgba(103, 58, 183, 0.8), rgba(156, 39, 176, 0.8)) !important;
    border-color: rgba(103, 58, 183, 0.3) !important;
    color: white !important;
}

.btn-outline-primary[b-vvkfbtxy1e] {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(103, 58, 183, 0.5) !important;
    color: #673ab7 !important;
}

    .btn-outline-primary:hover[b-vvkfbtxy1e] {
        background: rgba(103, 58, 183, 0.1) !important;
        border-color: rgba(103, 58, 183, 0.8) !important;
    }

.alert-success[b-vvkfbtxy1e] {
    background: rgba(76, 175, 80, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(76, 175, 80, 0.3);
    border-radius: 10px;
    color: #2e7d32;
}

.alert-danger[b-vvkfbtxy1e] {
    background: rgba(244, 67, 54, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(244, 67, 54, 0.3);
    border-radius: 10px;
    color: #c62828;
}

.body-bg[b-vvkfbtxy1e] {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    padding: 2rem;
}

.day-name[b-vvkfbtxy1e] {
    color: #5a189a;
    font-weight: 600;
}

.status-open[b-vvkfbtxy1e] {
    color: #2e7d32;
    font-weight: 500;
}

.status-closed[b-vvkfbtxy1e] {
    color: #757575;
}

.time-input[b-vvkfbtxy1e] {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 0.5rem;
    color: #333;
}

    .time-input:disabled[b-vvkfbtxy1e] {
        background: rgba(255, 255, 255, 0.05);
        color: rgba(0, 0, 0, 0.4);
    }

.form-check-label[b-vvkfbtxy1e] {
    color: #333;
    font-weight: 500;
}

.text-danger[b-vvkfbtxy1e] {
    color: #d32f2f !important;
    font-weight: 500;
}

.text-success[b-vvkfbtxy1e] {
    color: #2e7d32 !important;
    font-weight: 500;
}

</style[b-vvkfbtxy1e] >
/* _content/ZenZonApp/Components/Pages/Communications.razor.rz.scp.css */
/* Communications Tab Styles */
.communications-container[b-sodiftms7o] {
    padding: 1.5rem;
}

.feature-preview-card[b-sodiftms7o] {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    padding: 1.5rem;
    text-align: center;
    height: 100%;
    transition: all 0.3s ease;
}

    .feature-preview-card:hover[b-sodiftms7o] {
        transform: translateY(-5px);
        border-color: var(--primary-color);
        box-shadow: var(--card-shadow-hover);
    }

.feature-icon[b-sodiftms7o] {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    margin: 0 auto 1rem;
    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.2);
}

.feature-preview-card h6[b-sodiftms7o] {
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: var(--dark-color);
}

.card.border-dashed[b-sodiftms7o] {
    border: 2px dashed var(--border-color);
    background: rgba(255, 255, 255, 0.5);
}

    .card.border-dashed .card-header[b-sodiftms7o] {
        background: rgba(248, 249, 250, 0.8);
        border-bottom: 2px dashed var(--border-color);
    }
/* _content/ZenZonApp/Components/Pages/Invoice.razor.rz.scp.css */
.invoice-view-stage[b-ae7vm12x3l] {
    padding: 24px 16px;
    background: #f5f6fa; /* soft light gray, matches modal backdrop */
    min-height: calc(100vh - 250px);
    border-radius: 12px;
    margin-bottom: 16px;
}

.invoice-view-panel[b-ae7vm12x3l] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px;
    background: #ffffff; /* clean white card */
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(99, 102, 241, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
}

    /* Force dark text on the light card, matching the modal */
    .invoice-view-panel[b-ae7vm12x3l]  h1,
    .invoice-view-panel[b-ae7vm12x3l]  h2,
    .invoice-view-panel[b-ae7vm12x3l]  h3,
    .invoice-view-panel[b-ae7vm12x3l]  h4 {
        color: #1f2937; /* near-black for headings */
    }

    .invoice-view-panel[b-ae7vm12x3l]  p,
    .invoice-view-panel[b-ae7vm12x3l]  span,
    .invoice-view-panel[b-ae7vm12x3l]  label,
    .invoice-view-panel[b-ae7vm12x3l]  .info-label,
    .invoice-view-panel[b-ae7vm12x3l]  .info-value,
    .invoice-view-panel[b-ae7vm12x3l]  .meta-label,
    .invoice-view-panel[b-ae7vm12x3l]  .label,
    .invoice-view-panel[b-ae7vm12x3l]  .value {
        color: #374151; /* dark gray for body text */
    }

    /* INVOICE banner: keep the brand color */
    .invoice-view-panel[b-ae7vm12x3l]  h1 {
        color: #4f46e5 !important; /* indigo, matches modal */
    }

    /* Inputs: light background with subtle border */
    .invoice-view-panel[b-ae7vm12x3l]  .edit-input,
    .invoice-view-panel[b-ae7vm12x3l]  .adjustment-input {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        color: #1f2937;
    }

        .invoice-view-panel[b-ae7vm12x3l]  .edit-input:focus,
        .invoice-view-panel[b-ae7vm12x3l]  .adjustment-input:focus {
            background: #ffffff;
            border-color: #6366f1;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
        }

    /* Section labels (Bill To, Additional Customer Info) — keep the brand purple from modal */
    .invoice-view-panel[b-ae7vm12x3l]  .bill-to h4,
    .invoice-view-panel[b-ae7vm12x3l]  .additional-info h4 {
        color: #4f46e5;
    }

    /* Subtotal / Invoice Total / Balance Due rows */
    .invoice-view-panel[b-ae7vm12x3l]  .subtotal-row .label,
    .invoice-view-panel[b-ae7vm12x3l]  .total-row .label,
    .invoice-view-panel[b-ae7vm12x3l]  .balance-row .label {
        color: #6b7280;
    }

    .invoice-view-panel[b-ae7vm12x3l]  .subtotal-row .value,
    .invoice-view-panel[b-ae7vm12x3l]  .total-row .value {
        color: #1f2937;
    }

    /* Balance Due red/green semantic colors stay as-is from inner component */

    /* Practitioner Information header keeps its teal/cyan banner from inner CSS */

    /* Clinic Policy header */
    .invoice-view-panel[b-ae7vm12x3l]  .policy-header,
    .invoice-view-panel[b-ae7vm12x3l]  .practitioner-header {
        /* Inner component already styles these — leave alone */
    }
.invoices-page-wrap .table-responsive[b-ae7vm12x3l],
.invoices-page-wrap .card[b-ae7vm12x3l],
.invoices-page-wrap .card-body[b-ae7vm12x3l],
.invoices-page-wrap table[b-ae7vm12x3l],
.invoices-page-wrap tbody[b-ae7vm12x3l],
.invoices-page-wrap tr[b-ae7vm12x3l],
.invoices-page-wrap td[b-ae7vm12x3l] {
    overflow: visible !important;
}

.invoice-row-menu-wrap[b-ae7vm12x3l] {
    position: relative;
    display: inline-block;
    overflow: visible !important;
    z-index: 1000;
}

.invoice-row-menu[b-ae7vm12x3l] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 210px;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.16);
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
    z-index: 999999;
}

    .invoice-row-menu .dropdown-item[b-ae7vm12x3l] {
        width: 100%;
        border: 0;
        background: transparent;
        border-radius: 9px;
        padding: 8px 10px;
        font-size: 0.9rem;
        color: #1f2937;
        text-align: left;
        cursor: pointer;
    }

        .invoice-row-menu .dropdown-item:hover[b-ae7vm12x3l] {
            background: rgba(37, 99, 235, 0.10);
            color: #0b3a75;
        }
/* _content/ZenZonApp/Components/Pages/InvoiceModal.razor.rz.scp.css */
.invoice-modal-overlay[b-rhjtfn3e2u] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(6px);
    display: none;
    align-items: flex-start;
    justify-content: center;
    z-index: 9999;
    padding: 24px 16px;
    overflow-y: auto;
}

    .invoice-modal-overlay.show[b-rhjtfn3e2u] {
        display: flex;
    }

.invoice-modal-box[b-rhjtfn3e2u] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.25);
    width: 100%;
    max-width: 1100px;
    min-width: 0;
    margin: auto;
    display: flex;
    flex-direction: column;
    position: relative;
}

.inv-topbar[b-rhjtfn3e2u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px 16px 0 0;
}

.inv-topbar-title[b-rhjtfn3e2u] {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.3px;
}

.inv-topbar-close[b-rhjtfn3e2u] {
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 8px;
    color: #fff;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 1rem;
}

    .inv-topbar-close:hover[b-rhjtfn3e2u] {
        background: rgba(255,255,255,0.35);
    }

.inv-body[b-rhjtfn3e2u] {
    padding: 36px 40px 28px 40px;
}

.inv-header-row[b-rhjtfn3e2u] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 32px;
}

.inv-clinic-block[b-rhjtfn3e2u] {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    flex: 1;
}

.inv-logo[b-rhjtfn3e2u] {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    flex-shrink: 0;
}

.inv-clinic-details h2[b-rhjtfn3e2u] {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1a202c;
    margin: 0 0 6px 0;
}

.inv-clinic-details p[b-rhjtfn3e2u] {
    font-size: 0.875rem;
    color: #4a5568;
    margin: 0 0 3px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.inv-meta-block[b-rhjtfn3e2u] {
    text-align: right;
    flex-shrink: 0;
}

    .inv-meta-block h1[b-rhjtfn3e2u] {
        font-size: 2.2rem;
        font-weight: 800;
        color: #2d3748;
        margin: 0 0 16px 0;
        letter-spacing: 2px;
    }

.inv-meta-row[b-rhjtfn3e2u] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 8px;
}

.inv-meta-label[b-rhjtfn3e2u] {
    font-size: 0.82rem;
    color: #718096;
    font-weight: 600;
    white-space: nowrap;
}

.invoice-edit-input[b-rhjtfn3e2u] {
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    padding: 5px 10px;
    font-size: 0.875rem;
    color: #2d3748;
    background: #f7f9fc;
    text-align: right;
    width: 160px;
    transition: border-color 0.15s;
    font-weight: 500;
}

    .invoice-edit-input:focus[b-rhjtfn3e2u] {
        outline: none;
        border-color: #667eea;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(102,126,234,0.12);
    }

.inv-divider[b-rhjtfn3e2u] {
    height: 1px;
    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
    margin: 0 0 28px 0;
    border: none;
}

.inv-patient-row[b-rhjtfn3e2u] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 32px;
}

.inv-section-title[b-rhjtfn3e2u] {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #667eea;
    margin: 0 0 12px 0;
    padding-bottom: 6px;
    border-bottom: 2px solid rgba(102,126,234,0.2);
}

.inv-info-row[b-rhjtfn3e2u] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.inv-info-label[b-rhjtfn3e2u] {
    font-size: 0.8rem;
    color: #718096;
    font-weight: 600;
    white-space: nowrap;
    min-width: 90px;
    flex-shrink: 0;
}

.inv-info-value[b-rhjtfn3e2u] {
    font-size: 0.9rem;
    color: #1a202c;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.inv-table[b-rhjtfn3e2u] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
    border-radius: 10px;
    overflow: hidden;
}

    .inv-table thead tr[b-rhjtfn3e2u] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .inv-table thead th[b-rhjtfn3e2u] {
        color: #fff;
        font-size: 0.8rem;
        font-weight: 600;
        padding: 12px 14px;
        text-align: left;
        white-space: nowrap;
        letter-spacing: 0.3px;
    }

        .inv-table thead th.r[b-rhjtfn3e2u] {
            text-align: right;
        }

        .inv-table thead th.c[b-rhjtfn3e2u] {
            text-align: center;
        }

    .inv-table tbody tr[b-rhjtfn3e2u] {
        border-bottom: 1px solid #f0f4f8;
        transition: background 0.1s;
    }

        .inv-table tbody tr:hover[b-rhjtfn3e2u] {
            background: #f7f9ff;
        }

    .inv-table tbody td[b-rhjtfn3e2u] {
        padding: 11px 14px;
        font-size: 0.875rem;
        color: #2d3748;
        vertical-align: middle;
    }

        .inv-table tbody td.r[b-rhjtfn3e2u] {
            text-align: right;
        }

        .inv-table tbody td.c[b-rhjtfn3e2u] {
            text-align: center;
        }

.service-date-input[b-rhjtfn3e2u] {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.82rem;
    background: #f7f9fc;
    width: 130px;
    color: #2d3748;
}

    .service-date-input:focus[b-rhjtfn3e2u] {
        outline: none;
        border-color: #667eea;
    }

.inv-subtotal-wrap[b-rhjtfn3e2u] {
    display: flex;
    justify-content: flex-end;
    padding: 12px 0 0 0;
}

.inv-subtotal-row[b-rhjtfn3e2u] {
    width: 320px;
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: #4a5568;
    font-weight: 600;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
}

.inv-totals-wrap[b-rhjtfn3e2u] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0;
}

.inv-totals-card[b-rhjtfn3e2u] {
    width: 320px;
    background: #f7f9fc;
    border-radius: 12px;
    padding: 18px 20px;
    border: 1px solid #e2e8f0;
}

.inv-total-row[b-rhjtfn3e2u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 0.875rem;
    color: #4a5568;
}

    .inv-total-row.main[b-rhjtfn3e2u] {
        font-size: 1rem;
        font-weight: 700;
        color: #1a202c;
        border-bottom: 2px solid #e2e8f0;
        padding-bottom: 10px;
        margin-bottom: 4px;
    }

    .inv-total-row.balance[b-rhjtfn3e2u] {
        font-size: 1.05rem;
        font-weight: 800;
        border-top: 2px solid #e2e8f0;
        margin-top: 4px;
        padding-top: 10px;
    }

        .inv-total-row.balance .unpaid[b-rhjtfn3e2u] {
            color: #e53e3e;
        }

        .inv-total-row.balance .paid[b-rhjtfn3e2u] {
            color: #38a169;
        }

.adj-input-wrap[b-rhjtfn3e2u] {
    display: flex;
    align-items: center;
    gap: 4px;
}

    .adj-input-wrap span[b-rhjtfn3e2u] {
        color: #718096;
        font-size: 0.85rem;
    }

.adj-input[b-rhjtfn3e2u] {
    width: 90px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.85rem;
    text-align: right;
    background: #fff;
    color: #2d3748;
}

    .adj-input:focus[b-rhjtfn3e2u] {
        outline: none;
        border-color: #667eea;
    }

.inv-prac-section[b-rhjtfn3e2u] {
    margin-top: 28px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.inv-prac-header[b-rhjtfn3e2u] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: #fff;
    padding: 11px 18px;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.3px;
}

.inv-prac-table[b-rhjtfn3e2u] {
    width: 100%;
    border-collapse: collapse;
}

    .inv-prac-table th[b-rhjtfn3e2u] {
        background: #f7f9fc;
        font-size: 0.78rem;
        font-weight: 700;
        color: #4a5568;
        padding: 10px 14px;
        text-align: left;
        border-bottom: 1px solid #e2e8f0;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .inv-prac-table td[b-rhjtfn3e2u] {
        padding: 11px 14px;
        font-size: 0.875rem;
        color: #2d3748;
        border-bottom: 1px solid #f0f4f8;
    }

.inv-prac-tag[b-rhjtfn3e2u] {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.82rem;
}

.inv-policy-section[b-rhjtfn3e2u] {
    margin-top: 24px;
    background: #fffbf0;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 16px 18px;
}

.inv-policy-label[b-rhjtfn3e2u] {
    font-size: 0.78rem;
    font-weight: 700;
    color: #92400e;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.inv-policy-textarea[b-rhjtfn3e2u] {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 0.85rem;
    color: #4a5568;
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
    line-height: 1.5;
}

    .inv-policy-textarea:focus[b-rhjtfn3e2u] {
        outline: none;
    }

.inv-footer[b-rhjtfn3e2u] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 18px 28px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    border-radius: 0 0 16px 16px;
}

.inv-btn-cancel[b-rhjtfn3e2u] {
    padding: 9px 22px;
    border-radius: 9px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #4a5568;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.15s;
}

    .inv-btn-cancel:hover[b-rhjtfn3e2u] {
        background: #f1f5f9;
        border-color: #cbd5e0;
    }

.inv-btn-save[b-rhjtfn3e2u] {
    padding: 9px 28px;
    border-radius: 9px;
    border: none;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(102,126,234,0.4);
    transition: all 0.15s;
}

    .inv-btn-save:hover[b-rhjtfn3e2u] {
        opacity: 0.9;
        transform: translateY(-1px);
    }
/* _content/ZenZonApp/Components/Pages/Overview.razor.rz.scp.css */
/* ===== SHARED GAUGE STYLES (from DonutStats) ===== */

/* 1. MAIN CONTAINER */
.gauge-wrapper[b-k724tqxw9p] {
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    position: relative;
}

/* 2. SVG AREA (ARC + NEEDLE) */
.gauge-container[b-k724tqxw9p] {
    position: relative;
    width: 100%;
}

.gauge-svg[b-k724tqxw9p] {
    width: 100%;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.1));
}

/* 3. ARC STYLES */
.gauge-track[b-k724tqxw9p] {
    fill: none;
    stroke: rgba(0, 0, 0, 0.08);
    stroke-width: 3;
}

.gauge-progress[b-k724tqxw9p] {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 125.66;
    transition: stroke-dashoffset 1.5s ease-in-out, stroke 0.5s ease;
}

/* 4. NEEDLE & ANIMATIONS */
.needle-group[b-k724tqxw9p] {
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.needle-path[b-k724tqxw9p] {
    fill: #333;
    stroke: #ff4500;
    stroke-width: 0.5;
    filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.3));
    transition: fill 0.5s ease;
}

.needle-center[b-k724tqxw9p] {
    fill: #222;
    stroke: #444;
    stroke-width: 1;
}

/* 5. LABELS & TEXT */
.gauge-labels-overlay[b-k724tqxw9p] {
    position: absolute;
    top: 48%;
    width: 82%;
    left: 9%;
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: 800;
    color: #94a3b8;
    pointer-events: none;
    z-index: 1;
}

.label-e[b-k724tqxw9p], .label-f[b-k724tqxw9p] {
    background: rgba(255, 255, 255, 0.5);
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 0.7rem;
    backdrop-filter: blur(2px);
}

.gauge-info[b-k724tqxw9p] {
    text-align: center;
    margin-top: 10px;
    width: 100%;
}

.gauge-value[b-k724tqxw9p] {
    display: inline-block;
    font-size: 1.65rem;
    font-weight: 900;
    color: #1e293b;
    line-height: 1;
}

.gauge-label[b-k724tqxw9p] {
    display: inline-block;
    font-size: 0.7rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-left: 4px;
}

/* Low Fuel Shake Animation */
@keyframes shiver-b-k724tqxw9p {
    0% {
        transform: rotate(var(--rotation)) translate(0, 0);
    }

    25% {
        transform: rotate(calc(var(--rotation) - 0.6deg));
    }

    75% {
        transform: rotate(calc(var(--rotation) + 0.6deg));
    }

    100% {
        transform: rotate(var(--rotation));
    }
}

.needle-low[b-k724tqxw9p] {
    animation: shiver-b-k724tqxw9p 0.15s infinite;
    filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.4));
}

/* Warning State */
.warning-text[b-k724tqxw9p] {
    color: #ef4444 !important;
    animation: pulse-b-k724tqxw9p 1.5s infinite;
}

@keyframes pulse-b-k724tqxw9p {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}

/* ===== OVERVIEW PAGE SPECIFIC STYLES ===== */

.overview-page[b-k724tqxw9p] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #e9ecf2 100%);
    padding: 20px 0;
}

/* Card Styles */
.glass-card[b-k724tqxw9p] {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

    .glass-card:hover[b-k724tqxw9p] {
        transform: translateY(-5px);
        box-shadow: 0 25px 45px rgba(0, 0, 0, 0.15), 0 10px 20px rgba(0, 0, 0, 0.05);
        background: rgba(255, 255, 255, 0.85);
    }

/* Card Animations */
.animate-card[b-k724tqxw9p] {
    animation: cardAppear-b-k724tqxw9p 0.6s ease-out forwards;
    opacity: 0;
}

@keyframes cardAppear-b-k724tqxw9p {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Button Styles */
.btn-group .btn[b-k724tqxw9p] {
    border: none;
    padding: 8px 20px;
    font-weight: 600;
    color: #1a3a5a;
    transition: all 0.2s ease;
}

    .btn-group .btn.active[b-k724tqxw9p] {
        background: rgba(26, 58, 90, 0.8);
        color: white;
        box-shadow: 0 5px 15px rgba(26, 58, 90, 0.3);
    }

    .btn-group .btn:first-child[b-k724tqxw9p] {
        border-radius: 20px 0 0 20px;
    }

    .btn-group .btn:last-child[b-k724tqxw9p] {
        border-radius: 0 20px 20px 0;
    }

/* Text Utilities */
.text-darkblue[b-k724tqxw9p] {
    color: #1a3a5a !important;
}

.uppercase[b-k724tqxw9p] {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.75rem;
    font-weight: 600;
}

.bold[b-k724tqxw9p] {
    font-weight: 700;
}

/* Card Body Adjustments */
.card-body[b-k724tqxw9p] {
    padding: 1.25rem !important;
}

/* Card Title */
.card-subtitle[b-k724tqxw9p] {
    font-size: 0.8rem;
    margin-bottom: 1rem !important;
    color: #2c4b6b;
}

/* Card Text */
.card-text[b-k724tqxw9p] {
    font-size: 0.8rem;
    margin-top: 0.75rem !important;
    opacity: 0.8;
}

/* ===== COLOR GRADIENTS FOR DIFFERENT CARDS ===== */

/* Card 1 - Revenue (Orange) */
.card-1 .gauge-progress[b-k724tqxw9p] {
    stroke: url(#gradient-card-1);
}

.card-1 .needle-path[b-k724tqxw9p] {
    stroke: #ff4500;
}

/* Card 2 - Patients (Blue) */
.card-2 .gauge-progress[b-k724tqxw9p] {
    stroke: url(#gradient-card-2);
}

.card-2 .needle-path[b-k724tqxw9p] {
    stroke: #4169e1;
}

/* Card 3 - Appointments (Green) */
.card-3 .gauge-progress[b-k724tqxw9p] {
    stroke: url(#gradient-card-3);
}

.card-3 .needle-path[b-k724tqxw9p] {
    stroke: #32cd32;
}

/* Card 4 - Insurance Claims (Purple) */
.card-4 .gauge-progress[b-k724tqxw9p] {
    stroke: url(#gradient-card-4);
}

.card-4 .needle-path[b-k724tqxw9p] {
    stroke: #9370db;
}

/* Card 5 - New Patients (Teal) */
.card-5 .gauge-progress[b-k724tqxw9p] {
    stroke: url(#gradient-card-5);
}

.card-5 .needle-path[b-k724tqxw9p] {
    stroke: #20b2aa;
}

/* Card 6 - Follow-ups (Coral) */
.card-6 .gauge-progress[b-k724tqxw9p] {
    stroke: url(#gradient-card-6);
}

.card-6 .needle-path[b-k724tqxw9p] {
    stroke: #ff7f50;
}

/* Card 7 - Lab Tests (Yellow) */
.card-7 .gauge-progress[b-k724tqxw9p] {
    stroke: url(#gradient-card-7);
}

.card-7 .needle-path[b-k724tqxw9p] {
    stroke: #daa520;
}

/* Card 8 - Prescriptions (Pink) */
.card-8 .gauge-progress[b-k724tqxw9p] {
    stroke: url(#gradient-card-8);
}

.card-8 .needle-path[b-k724tqxw9p] {
    stroke: #ff69b4;
}

/* ===== MODAL STYLES ===== */

.modal-backdrop[b-k724tqxw9p] {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
}

.modal-content.glass-card[b-k724tqxw9p] {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    border-radius: 32px;
}

.modal-header[b-k724tqxw9p] {
    padding-bottom: 0;
}

.modal-title[b-k724tqxw9p] {
    font-size: 1.4rem;
    font-weight: 700;
}

.modal-body[b-k724tqxw9p] {
    padding: 1.5rem;
}

/* Form Controls */
.form-control[b-k724tqxw9p] {
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #1a3a5a !important;
    font-weight: 600;
    border-radius: 16px !important;
    padding: 10px 15px !important;
    backdrop-filter: blur(5px);
    transition: all 0.2s ease;
}

    .form-control:focus[b-k724tqxw9p] {
        background: rgba(255, 255, 255, 0.8) !important;
        border-color: #1a3a5a !important;
        box-shadow: 0 0 0 3px rgba(26, 58, 90, 0.1) !important;
    }

    .form-control[b-k724tqxw9p]::placeholder {
        color: #94a3b8;
        font-weight: 400;
    }

/* Modal Footer */
.modal-footer[b-k724tqxw9p] {
    padding-top: 0;
}

.btn-primary[b-k724tqxw9p] {
    background: linear-gradient(135deg, #1a3a5a, #2c4b6b);
    border: none;
    padding: 10px 30px;
    border-radius: 25px;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 5px 15px rgba(26, 58, 90, 0.3);
    transition: all 0.2s ease;
}

    .btn-primary:hover[b-k724tqxw9p] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(26, 58, 90, 0.4);
        background: linear-gradient(135deg, #2c4b6b, #1a3a5a);
    }

.btn-close[b-k724tqxw9p] {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    padding: 8px;
    opacity: 0.8;
    transition: all 0.2s ease;
}

    .btn-close:hover[b-k724tqxw9p] {
        opacity: 1;
        background: rgba(0, 0, 0, 0.2);
    }

/* ===== RESPONSIVE ADJUSTMENTS ===== */

@media (max-width: 768px) {
    .gauge-wrapper[b-k724tqxw9p] {
        max-width: 180px;
    }

    .gauge-value[b-k724tqxw9p] {
        font-size: 1.4rem;
    }

    .btn-group .btn[b-k724tqxw9p] {
        padding: 6px 15px;
        font-size: 0.9rem;
    }

    .modal-dialog[b-k724tqxw9p] {
        margin: 0.5rem;
    }
}

@media (max-width: 576px) {
    .gauge-wrapper[b-k724tqxw9p] {
        max-width: 160px;
    }

    .gauge-labels-overlay[b-k724tqxw9p] {
        font-size: 0.65rem;
    }

    .card-body[b-k724tqxw9p] {
        padding: 1rem !important;
    }
}
/* _content/ZenZonApp/Components/Pages/PatientAccounting.razor.rz.scp.css */
<style >
.patient-accounting-container[b-76jttmh3uk] {
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
}

h3[b-76jttmh3uk] {
    color: white;
    margin-bottom: 24px;
    font-weight: 600;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.zenx-logo[b-76jttmh3uk] {
    background: white;
    color: #667eea;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 800;
    font-size: 1.2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Tab Navigation */
.tab-nav[b-76jttmh3uk] {
    display: flex;
    background: white;
    border-radius: 12px;
    padding: 6px;
    margin-bottom: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.tab-button[b-76jttmh3uk] {
    flex: 1;
    padding: 14px 16px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
    position: relative;
}

    .tab-button:hover[b-76jttmh3uk] {
        background-color: #f8f9fa;
        color: #495057;
        transform: translateY(-2px);
    }

    .tab-button.active[b-76jttmh3uk] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }

.tab-icon[b-76jttmh3uk] {
    font-size: 16px;
}

.tab-badge[b-76jttmh3uk] {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ff4757;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

/* Tab Content */
.tab-content[b-76jttmh3uk] {
    background: white;
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    min-height: 500px;
    overflow: hidden;
}

/* Status Bar */
.status-bar[b-76jttmh3uk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
}

.status-left[b-76jttmh3uk] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.btn[b-76jttmh3uk] {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-refresh[b-76jttmh3uk] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

    .btn-refresh:hover[b-76jttmh3uk] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    }

.btn-icon[b-76jttmh3uk] {
    font-size: 14px;
}

.view-options[b-76jttmh3uk] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.view-label[b-76jttmh3uk] {
    color: #6c757d;
    font-size: 14px;
}

.view-select[b-76jttmh3uk] {
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: white;
    color: #495057;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

    .view-select:focus[b-76jttmh3uk] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

.status-info[b-76jttmh3uk] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.last-updated[b-76jttmh3uk] {
    font-size: 14px;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 6px;
}

.update-icon[b-76jttmh3uk] {
    font-size: 14px;
    animation: pulse 2s infinite;
}

@@keyframes pulse {
    0%[b-76jttmh3uk] {
        opacity: 1;
    }

    50%[b-76jttmh3uk] {
        opacity: 0.5;
    }

    100%[b-76jttmh3uk] {
        opacity: 1;
    }
}

</style[b-76jttmh3uk] >
/* _content/ZenZonApp/Components/Pages/PatientAccountingTab.razor.rz.scp.css */
<style >
.patient-accounting-embedded[b-270x4o6enf] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-top: 20px;
}

.accounting-tab-nav[b-270x4o6enf] {
    display: flex;
    border-bottom: 2px solid #eef2f7;
    margin-bottom: 20px;
}

.accounting-tab[b-270x4o6enf] {
    padding: 12px 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    border-bottom: 3px solid transparent;
    transition: all 0.3s;
}

    .accounting-tab:hover[b-270x4o6enf] {
        color: #495057;
        background-color: #f8f9fa;
    }

    .accounting-tab.active[b-270x4o6enf] {
        color: #667eea;
        border-bottom: 3px solid #667eea;
        font-weight: 600;
    }

.tab-badge[b-270x4o6enf] {
    background: #ff4757;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.accounting-tab-content[b-270x4o6enf] {
    min-height: 400px;
}

</style[b-270x4o6enf] >
/* _content/ZenZonApp/Components/Pages/PatientBillingTab.razor.rz.scp.css */
/* =========================
   PatientBillingTab.razor.css
   FULL CLEAN VERSION
   ========================= */

/* ZenZonApp Theme - Same as Charges tab */
.zenx-billing-tab[b-yqc5j0nlx7] {
    padding: 24px;
    background: #f8f9fc;
    min-height: 100%;
    width: 100%;
    max-width: none; /* important if something is limiting it */
}

    .zenx-billing-tab *[b-yqc5j0nlx7] {
        box-sizing: border-box;
    }

/* Header */
.zenx-header[b-yqc5j0nlx7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    gap: 16px;
}
.zenx-billing-tab .table-container[b-yqc5j0nlx7] {
    width: 100%;
    max-width: none;
    margin: 0; /* remove centering gaps */
}

.zenx-billing-tab .table-wrapper[b-yqc5j0nlx7] {
    width: 100%;
    max-width: none;
    overflow-x: auto; /* keep safe if columns exceed screen */
}

/* Let the table actually expand */
.zenx-billing-tab .zenx-table[b-yqc5j0nlx7] {
    width: 100%;
    min-width: 1050px; /* adjust to your real columns */
    table-layout: auto; /* size by content */
}
.header-title h4[b-yqc5j0nlx7] {
    margin: 0;
    color: #2c3e50;
    font-size: 1.5rem;
    font-weight: 700;
}

.header-subtitle[b-yqc5j0nlx7] {
    margin: 4px 0 0 0;
    color: #6c757d;
    font-size: 0.875rem;
}

.header-actions[b-yqc5j0nlx7] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Summary Cards */
.summary-cards[b-yqc5j0nlx7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.summary-card[b-yqc5j0nlx7] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #eef2f7;
}

    .summary-card:hover[b-yqc5j0nlx7] {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    }

.card-icon[b-yqc5j0nlx7] {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.total-billings[b-yqc5j0nlx7] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.pending-billings[b-yqc5j0nlx7] {
    background: linear-gradient(135deg, #ffd166 0%, #ffb347 100%);
    color: white;
}

.paid-billings[b-yqc5j0nlx7] {
    background: linear-gradient(135deg, #06d6a0 0%, #1b9aaa 100%);
    color: white;
}

.overdue-billings[b-yqc5j0nlx7] {
    background: linear-gradient(135deg, #ef476f 0%, #ff6b6b 100%);
    color: white;
}

.card-content[b-yqc5j0nlx7] {
    display: flex;
    flex-direction: column;
}

.card-label[b-yqc5j0nlx7] {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 4px;
}

.card-value[b-yqc5j0nlx7] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c3e50;
}

/* Controls Section */
.controls-section[b-yqc5j0nlx7] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.search-container[b-yqc5j0nlx7] {
    margin-bottom: 16px;
}

.search-input[b-yqc5j0nlx7] {
    position: relative;
    display: flex;
    align-items: center;
}

    .search-input input[b-yqc5j0nlx7] {
        width: 100%;
        padding: 12px 48px 12px 48px;
        border: 2px solid #eef2f7;
        border-radius: 8px;
        font-size: 0.9375rem;
        transition: all 0.3s ease;
    }

        .search-input input:focus[b-yqc5j0nlx7] {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

.search-icon[b-yqc5j0nlx7] {
    position: absolute;
    left: 16px;
    color: #6c757d;
    font-size: 16px;
}

.clear-search[b-yqc5j0nlx7] {
    position: absolute;
    right: 16px;
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
}

    .clear-search:hover[b-yqc5j0nlx7] {
        background: #f8f9fa;
        color: #dc3545;
    }

.filter-controls[b-yqc5j0nlx7] {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.filter-group[b-yqc5j0nlx7] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-label[b-yqc5j0nlx7] {
    color: #6c757d;
    font-size: 0.875rem;
    white-space: nowrap;
}

.filter-select[b-yqc5j0nlx7] {
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: white;
    color: #495057;
    font-size: 0.875rem;
    cursor: pointer;
    min-width: 150px;
}

/* =========================
   Table
   KEY FIX: allow dropdowns/menus to overflow
   ========================= */
.table-container[b-yqc5j0nlx7] {
    background: white;
    border-radius: 12px;
    overflow: visible; /* was hidden -> CLIPS dropdown menus */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #eef2f7;
}

.table-wrapper[b-yqc5j0nlx7] {
    overflow-x: auto;
    overflow-y: visible; /* prevent menu clipping vertically */
    -webkit-overflow-scrolling: touch;
    position: relative;
    border-radius: 12px;
}

/* Table */
.zenx-table[b-yqc5j0nlx7] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 1400px;
    table-layout: fixed; /* keeps header/columns aligned */
}

    .zenx-table thead[b-yqc5j0nlx7] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .zenx-table th[b-yqc5j0nlx7] {
        padding: 16px 12px;
        color: white;
        font-weight: 600;
        font-size: 0.875rem;
        text-align: left;
        border-bottom: none;
        white-space: nowrap;
        vertical-align: middle;
    }

    .zenx-table tbody tr[b-yqc5j0nlx7] {
        transition: all 0.2s ease;
    }

        .zenx-table tbody tr:hover[b-yqc5j0nlx7] {
            background-color: #f8f9fc;
            transform: scale(1.002);
        }

    .zenx-table td[b-yqc5j0nlx7] {
        padding: 16px 12px;
        color: #495057;
        font-size: 0.875rem;
        vertical-align: middle;
        border-bottom: 1px solid #eef2f7;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* Cell Styles */
.text-right[b-yqc5j0nlx7] {
    text-align: right;
}

.text-center[b-yqc5j0nlx7] {
    text-align: center;
}

/* If your table has action/menu columns, keep them from being clipped */
.actions-cell[b-yqc5j0nlx7],
.actions-header[b-yqc5j0nlx7],
.table-actions[b-yqc5j0nlx7] {
    overflow: visible !important;
}

/* Billing number pill */
.billing-number[b-yqc5j0nlx7] {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #2c3e50;
    background: #f8f9fa;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.875rem;
    display: inline-block;
}

.date-cell[b-yqc5j0nlx7] {
    padding: 6px 10px;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    display: inline-block;
}

    .date-cell.overdue[b-yqc5j0nlx7] {
        background: #ffebee;
        color: #dc3545;
        font-weight: 600;
    }

.patient-info[b-yqc5j0nlx7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.patient-name[b-yqc5j0nlx7] {
    font-weight: 500;
    color: #2c3e50;
}

.patient-id[b-yqc5j0nlx7] {
    font-size: 0.75rem;
    color: #6c757d;
    background: #f8f9fa;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    width: fit-content;
}

.insurance-badge[b-yqc5j0nlx7] {
    padding: 4px 8px;
    background: #e3f2fd;
    color: #1976d2;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-block;
}

.no-insurance[b-yqc5j0nlx7] {
    padding: 4px 8px;
    background: #f5f5f5;
    color: #757575;
    border-radius: 12px;
    font-size: 0.75rem;
    font-style: italic;
    display: inline-block;
}

.amount-cell[b-yqc5j0nlx7],
.paid-cell[b-yqc5j0nlx7] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
}

.balance-cell[b-yqc5j0nlx7] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
}

    .balance-cell.unpaid[b-yqc5j0nlx7] {
        color: #dc3545;
    }

    .balance-cell.paid[b-yqc5j0nlx7] {
        color: #28a745;
    }

/* Status badge */
.status-badge[b-yqc5j0nlx7] {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
}

    .status-badge.pending[b-yqc5j0nlx7] {
        background: #fff3cd;
        color: #856404;
        border: 1px solid #ffeaa7;
    }

    .status-badge.paid[b-yqc5j0nlx7] {
        background: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }

    .status-badge.overdue[b-yqc5j0nlx7] {
        background: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }

    .status-badge.cancelled[b-yqc5j0nlx7] {
        background: #e2e3e5;
        color: #383d41;
        border: 1px solid #d6d8db;
    }

.payment-method[b-yqc5j0nlx7] {
    font-size: 0.8125rem;
    color: #6c757d;
    font-style: italic;
}

/* Table Actions */
.table-actions[b-yqc5j0nlx7] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.action-btn[b-yqc5j0nlx7] {
    width: 32px;
    height: 32px;
    border: 1px solid #eef2f7;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.view-btn:hover[b-yqc5j0nlx7] {
    background: #e3f2fd;
    color: #1976d2;
    border-color: #1976d2;
}

.edit-btn:hover[b-yqc5j0nlx7] {
    background: #fff3cd;
    color: #ffc107;
    border-color: #ffc107;
}

.payment-btn:hover[b-yqc5j0nlx7] {
    background: #d4edda;
    color: #28a745;
    border-color: #28a745;
}

.print-btn:hover[b-yqc5j0nlx7] {
    background: #e2e3e5;
    color: #6c757d;
    border-color: #6c757d;
}

/* Empty State */
.empty-state-cell[b-yqc5j0nlx7] {
    text-align: center;
    padding: 60px 20px !important;
}

.empty-state[b-yqc5j0nlx7] {
    max-width: 300px;
    margin: 0 auto;
}

.empty-icon[b-yqc5j0nlx7] {
    font-size: 48px;
    color: #adb5bd;
    margin-bottom: 16px;
    display: block;
}

.empty-state h5[b-yqc5j0nlx7] {
    color: #495057;
    margin-bottom: 8px;
    font-size: 1.125rem;
}

.empty-state p[b-yqc5j0nlx7] {
    color: #6c757d;
    margin-bottom: 20px;
    font-size: 0.875rem;
}

/* Pagination Footer */
.pagination-footer[b-yqc5j0nlx7] {
    background: white;
    padding: 20px 24px;
    border-top: 1px solid #eef2f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pagination-info[b-yqc5j0nlx7] {
    color: #6c757d;
    font-size: 0.875rem;
}

    .pagination-info strong[b-yqc5j0nlx7] {
        color: #2c3e50;
    }

.pagination-buttons[b-yqc5j0nlx7] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination-btn[b-yqc5j0nlx7] {
    padding: 8px 16px;
    border: 1px solid #e0e0e0;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: #495057;
    transition: all 0.3s ease;
    min-width: 80px;
}

    .pagination-btn:hover:not(:disabled)[b-yqc5j0nlx7] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-color: #667eea;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .pagination-btn:disabled[b-yqc5j0nlx7] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.page-numbers[b-yqc5j0nlx7] {
    display: flex;
    gap: 4px;
}

.page-number[b-yqc5j0nlx7] {
    width: 36px;
    height: 36px;
    border: 1px solid #e0e0e0;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: #495057;
    transition: all 0.3s ease;
}

    .page-number:hover[b-yqc5j0nlx7] {
        background: #f8f9fa;
        border-color: #667eea;
    }

    .page-number.active[b-yqc5j0nlx7] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-color: #667eea;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    }

.page-dots[b-yqc5j0nlx7] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
}

.page-size-info[b-yqc5j0nlx7] {
    color: #6c757d;
    font-size: 0.875rem;
}

/* Button Styles */
.btn[b-yqc5j0nlx7] {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-gradient[b-yqc5j0nlx7] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

    .btn-gradient:hover[b-yqc5j0nlx7] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    }

.btn-outline[b-yqc5j0nlx7] {
    background: white;
    color: #667eea;
    border: 2px solid #667eea;
}

    .btn-outline:hover[b-yqc5j0nlx7] {
        background: #667eea;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }
.zenx-grid-wrap[b-yqc5j0nlx7] {
    width: 100%;
    overflow-x: auto;
}

.zenx-grid[b-yqc5j0nlx7] {
    width: 100%;
    table-layout: fixed; /* KEY: header and rows align */
    border-collapse: separate;
    border-spacing: 0;
}

    .zenx-grid thead th[b-yqc5j0nlx7],
    .zenx-grid tbody td[b-yqc5j0nlx7] {
        padding: 12px 12px; /* must match */
        white-space: nowrap;
    }

    .zenx-grid tbody td[b-yqc5j0nlx7] {
        overflow: hidden;
        text-overflow: ellipsis;
    }
.totals-row[b-yqc5j0nlx7] {
    background-color: #f8f9fa;
    border-top: 2px solid #dee2e6;
}

    .totals-row td[b-yqc5j0nlx7] {
        padding: 12px 8px;
        border-top: 2px solid #dee2e6;
    }

.total-balance.highlight[b-yqc5j0nlx7] {
    background-color: #fff3cd;
    border-radius: 4px;
    font-size: 1.1em;
}

.total-label[b-yqc5j0nlx7] {
    font-size: 0.8em;
    color: #6c757d;
    margin-top: 2px;
}

.summary-subtext[b-yqc5j0nlx7] {
    font-size: 0.85em;
    color: #6c757d;
    margin-top: 4px;
}
/* _content/ZenZonApp/Components/Pages/PatientChargeTab.razor.rz.scp.css */
.charges-container[b-8473baonl8] {
    padding: 20px;
    background: white;
    border-radius: 8px;
}

.charges-header[b-8473baonl8] {
    margin-bottom: 20px;
}

    .charges-header h4[b-8473baonl8] {
        margin: 0;
        color: #2c3e50;
        font-size: 1.25rem;
    }

.subtitle[b-8473baonl8] {
    margin: 4px 0 0 0;
    color: #6c757d;
    font-size: 0.875rem;
}

.search-section[b-8473baonl8] {
    margin-bottom: 20px;
}

.search-box[b-8473baonl8] {
    position: relative;
    max-width: 300px;
}

    .search-box input[b-8473baonl8] {
        width: 100%;
        padding: 8px 12px 8px 36px;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        font-size: 14px;
    }

.search-icon[b-8473baonl8] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
}

.table-container[b-8473baonl8] {
    overflow-x: auto;
}

.charges-table[b-8473baonl8] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .charges-table th[b-8473baonl8] {
        background-color: #f8f9fa;
        padding: 12px 8px;
        text-align: left;
        font-weight: 600;
        color: #495057;
        border-bottom: 2px solid #dee2e6;
        white-space: nowrap;
    }

    .charges-table td[b-8473baonl8] {
        padding: 12px 8px;
        border-bottom: 1px solid #e9ecef;
        vertical-align: middle;
    }

    .charges-table tbody tr:hover[b-8473baonl8] {
        background-color: #f8f9fa;
    }

.text-right[b-8473baonl8] {
    text-align: right;
}

.text-center[b-8473baonl8] {
    text-align: center;
}

.service-info[b-8473baonl8], .provider-info[b-8473baonl8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.service-name[b-8473baonl8], .provider-name[b-8473baonl8] {
    font-weight: 500;
}

.service-code[b-8473baonl8], .provider-id[b-8473baonl8] {
    font-size: 12px;
    color: #6c757d;
}

.badge[b-8473baonl8] {
    padding: 4px 8px;
    background: #e9ecef;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    color: #495057;
    display: inline-block;
}

    .badge.unit[b-8473baonl8] {
        background: #e7f3ff;
        color: #007bff;
    }

.total[b-8473baonl8] {
    font-weight: 600;
    color: #28a745;
}

.actions[b-8473baonl8] {
    min-width: 100px;
}

.btn-edit[b-8473baonl8], .btn-delete[b-8473baonl8] {
    width: 32px;
    height: 32px;
    border: 1px solid #dee2e6;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    margin: 0 2px;
    font-size: 14px;
    transition: all 0.2s;
}

    .btn-edit:hover[b-8473baonl8] {
        background: #e3f2fd;
        border-color: #2196f3;
        color: #2196f3;
    }

    .btn-delete:hover[b-8473baonl8] {
        background: #ffebee;
        border-color: #f44336;
        color: #f44336;
    }

.no-data[b-8473baonl8] {
    text-align: center;
    padding: 40px !important;
}

.empty-state[b-8473baonl8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.empty-icon[b-8473baonl8] {
    font-size: 48px;
    color: #adb5bd;
}

.empty-state p[b-8473baonl8] {
    margin: 0;
    color: #6c757d;
}

.empty-note[b-8473baonl8] {
    font-size: 13px;
    color: #868e96;
}

.simple-pagination[b-8473baonl8] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #dee2e6;
}

.pagination-btn[b-8473baonl8] {
    padding: 8px 16px;
    border: 1px solid #dee2e6;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

    .pagination-btn:hover:not(:disabled)[b-8473baonl8] {
        background: #007bff;
        color: white;
        border-color: #007bff;
    }

    .pagination-btn:disabled[b-8473baonl8] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.page-info[b-8473baonl8] {
    color: #6c757d;
    font-size: 14px;
}
.table thead th[b-8473baonl8],
.table tbody td[b-8473baonl8] {
    vertical-align: middle;
}

.col-v[b-8473baonl8] {
    width: 36px;
}

.col-date[b-8473baonl8] {
    width: 120px;
}

.col-service[b-8473baonl8] {
    width: 160px;
}

/* Give provider more room */
.col-provider[b-8473baonl8] {
    width: 240px;
}

.col-num[b-8473baonl8] {
    width: 80px;
    white-space: nowrap;
}

.col-money[b-8473baonl8] {
    width: 110px;
    white-space: nowrap;
}

.col-actions[b-8473baonl8] {
    width: 110px;
    white-space: nowrap;
}

.col-service[b-8473baonl8] {
    white-space: normal;
}

.col-provider[b-8473baonl8] {
    white-space: normal;
}
/* Dense / compact table rows */
.table.table-compact thead th[b-8473baonl8],
.table.table-compact tbody td[b-8473baonl8] {
    padding: 0.35rem 0.5rem; /* default bootstrap is ~0.75rem */
    line-height: 1.15;
}

/* Slightly smaller font for the grid */
.table.table-compact[b-8473baonl8] {
    font-size: 0.92rem;
}

    /* Reduce vertical space inside Provider cell */
    .table.table-compact .provider-info[b-8473baonl8] {
        line-height: 1.1;
    }

    .table.table-compact .provider-name[b-8473baonl8] {
        margin: 0;
    }

    .table.table-compact .provider-id[b-8473baonl8] {
        margin-top: 0.05rem;
        font-size: 0.8em;
        opacity: 0.75;
    }

    /* Make action buttons more compact */
    .table.table-compact .btn-edit[b-8473baonl8],
    .table.table-compact .btn-delete[b-8473baonl8] {
        padding: 0.15rem 0.35rem;
    }
/* Charges Container */
.charges-container[b-8473baonl8] {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header Styles */
.charges-header[b-8473baonl8] {
    margin-bottom: 24px;
}

.header-content[b-8473baonl8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.header-text h4[b-8473baonl8] {
    margin: 0;
    color: #1a237e;
    font-size: 24px;
    font-weight: 600;
}

.header-text .subtitle[b-8473baonl8] {
    margin: 4px 0 0 0;
    color: #666;
    font-size: 14px;
}

/* Gradient Button Styles */
.btn-gradient[b-8473baonl8] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 6px rgba(102, 126, 234, 0.2);
    position: relative;
    overflow: hidden;
}

    .btn-gradient[b-8473baonl8]:before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: 0.5s;
    }

    .btn-gradient:hover[b-8473baonl8]:before {
        left: 100%;
    }

    .btn-gradient:hover[b-8473baonl8] {
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(102, 126, 234, 0.3);
    }

    .btn-gradient:active[b-8473baonl8] {
        transform: translateY(0);
        box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
    }

    .btn-gradient:disabled[b-8473baonl8] {
        background: linear-gradient(135deg, #cccccc 0%, #999999 100%);
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

        .btn-gradient:disabled[b-8473baonl8]:before {
            display: none;
        }

        .btn-gradient:disabled:hover[b-8473baonl8] {
            transform: none;
            box-shadow: none;
        }

.btn-icon[b-8473baonl8] {
    font-size: 16px;
}

/* Search Section */
.search-section[b-8473baonl8] {
    margin-bottom: 20px;
}

.search-box[b-8473baonl8] {
    position: relative;
    max-width: 400px;
}

    .search-box input[b-8473baonl8] {
        width: 100%;
        padding: 10px 16px 10px 40px;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 14px;
        transition: border-color 0.3s ease;
    }

        .search-box input:focus[b-8473baonl8] {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
        }

.search-icon[b-8473baonl8] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 16px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .header-content[b-8473baonl8] {
        flex-direction: column;
        align-items: flex-start;
    }

    .btn-gradient[b-8473baonl8] {
        width: 100%;
        justify-content: center;
    }

    .search-box[b-8473baonl8] {
        max-width: 100%;
    }
}

/* Animation for button state change */
@keyframes pulse-b-8473baonl8 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.btn-gradient:not(:disabled)[b-8473baonl8] {
    animation: pulse-b-8473baonl8 2s infinite;
}
/* _content/ZenZonApp/Components/Pages/PatientCommunicationsTab.razor.rz.scp.css */
/* Red Forest Glassmorphism Base Styles */
.glassmorphism-overlay[b-jskebcys47] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 10, 8, 0.85);
    backdrop-filter: blur(12px) saturate(180%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    animation: fadeIn-b-jskebcys47 0.3s ease;
}

.glassmorphism-modal[b-jskebcys47] {
    background: linear-gradient( 145deg, rgba(204, 51, 0, 0.08) 0%, rgba(102, 26, 0, 0.15) 100% );
    backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(204, 51, 0, 0.15);
    border-top: 1px solid rgba(255, 102, 51, 0.2);
    border-bottom: 1px solid rgba(102, 26, 0, 0.3);
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(102, 26, 0, 0.4), 0 0 0 1px rgba(204, 51, 0, 0.1), inset 0 1px 0 rgba(255, 153, 102, 0.1), inset 0 -1px 0 rgba(77, 19, 0, 0.2);
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    overflow: hidden;
    animation: slideUp-b-jskebcys47 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Header */
.glassmorphism-header[b-jskebcys47] {
    background: linear-gradient( to bottom, rgba(204, 51, 0, 0.1) 0%, rgba(153, 38, 0, 0.05) 100% );
    border-bottom: 1px solid rgba(204, 51, 0, 0.15);
    border-top: 1px solid rgba(255, 102, 51, 0.1);
    padding: 1.5rem 2rem;
    position: relative;
}

    .glassmorphism-header[b-jskebcys47]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(255, 102, 51, 0.3), transparent );
    }

.header-content[b-jskebcys47] {
    flex: 1;
}

.title-section[b-jskebcys47] {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.modal-icon[b-jskebcys47] {
    font-size: 1.5rem;
    background: linear-gradient(135deg, #CC3300 0%, #FF6633 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 2px 4px rgba(204, 51, 0, 0.3);
}

.modal-title[b-jskebcys47] {
    color: #FFE6E6;
    font-weight: 600;
    letter-spacing: -0.025em;
    text-shadow: 0 1px 3px rgba(102, 26, 0, 0.4);
}

.patient-info[b-jskebcys47] {
    color: rgba(255, 230, 230, 0.8);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    background: rgba(153, 38, 0, 0.2);
    padding: 0.375rem 0.75rem;
    border-radius: 8px;
    border: 1px solid rgba(204, 51, 0, 0.2);
    display: inline-flex;
}

    .patient-info i[b-jskebcys47] {
        color: #FF9966;
        margin-right: 0.375rem;
    }

.glassmorphism-close[b-jskebcys47] {
    background: linear-gradient( 145deg, rgba(204, 51, 0, 0.2), rgba(153, 38, 0, 0.15) );
    border: 1px solid rgba(255, 102, 51, 0.25);
    border-radius: 12px;
    color: rgba(255, 230, 230, 0.9);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: inset 0 1px 0 rgba(255, 204, 153, 0.15), 0 2px 8px rgba(204, 51, 0, 0.3);
}

    .glassmorphism-close:hover[b-jskebcys47] {
        background: linear-gradient( 145deg, rgba(255, 102, 51, 0.3), rgba(204, 51, 0, 0.25) );
        border-color: rgba(255, 153, 102, 0.4);
        color: #FFFFFF;
        transform: rotate(90deg);
        box-shadow: inset 0 1px 0 rgba(255, 230, 204, 0.2), 0 4px 16px rgba(204, 51, 0, 0.4);
    }

/* Modal Body */
.modal-body[b-jskebcys47] {
    padding: 2rem;
    overflow-y: auto;
    max-height: calc(90vh - 140px);
    background: linear-gradient( 180deg, rgba(102, 26, 0, 0.15) 0%, rgba(128, 32, 0, 0.08) 100% );
}

/* Sections */
.glassmorphism-section[b-jskebcys47] {
    background: linear-gradient( 145deg, rgba(204, 51, 0, 0.08) 0%, rgba(153, 38, 0, 0.12) 100% );
    border: 1px solid rgba(204, 51, 0, 0.2);
    border-bottom: 1px solid rgba(102, 26, 0, 0.3);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(204, 51, 0, 0.2), inset 0 1px 0 rgba(255, 153, 102, 0.1);
}

    .glassmorphism-section:hover[b-jskebcys47] {
        border-color: rgba(255, 102, 51, 0.3);
        box-shadow: 0 8px 32px rgba(204, 51, 0, 0.3), inset 0 1px 0 rgba(255, 204, 153, 0.15);
        transform: translateY(-2px);
    }

.section-header[b-jskebcys47] {
    background: linear-gradient( 90deg, rgba(204, 51, 0, 0.15) 0%, rgba(153, 38, 0, 0.08) 100% );
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(204, 51, 0, 0.15);
    border-top: 1px solid rgba(255, 153, 102, 0.1);
    display: flex;
    align-items: center;
    position: relative;
}

.header-icon[b-jskebcys47] {
    background: linear-gradient(135deg, rgba(204, 51, 0, 0.2), rgba(153, 38, 0, 0.15));
    border: 1px solid rgba(255, 102, 51, 0.3);
    border-radius: 12px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    box-shadow: inset 0 1px 0 rgba(255, 204, 153, 0.15), 0 2px 8px rgba(204, 51, 0, 0.25);
}

    .header-icon i[b-jskebcys47] {
        color: #FF9966;
        font-size: 1.1rem;
        filter: drop-shadow(0 1px 2px rgba(204, 51, 0, 0.3));
    }

.section-title[b-jskebcys47] {
    color: #FFE6E6;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.025em;
    text-shadow: 0 1px 2px rgba(102, 26, 0, 0.3);
}

.section-content[b-jskebcys47] {
    padding: 1.5rem;
}

/* Form Elements */
.form-label[b-jskebcys47] {
    color: rgba(255, 240, 240, 0.95);
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: block;
    letter-spacing: -0.025em;
    text-shadow: 0 1px 2px rgba(102, 26, 0, 0.2);
}

    .form-label.required[b-jskebcys47]::after {
        content: " *";
        color: #FF9966;
        filter: drop-shadow(0 1px 2px rgba(204, 51, 0, 0.3));
    }

    .form-label i[b-jskebcys47] {
        color: #FF9966;
        opacity: 0.9;
        margin-right: 0.375rem;
    }

/* Input Wrappers */
.glassmorphism-input-wrapper[b-jskebcys47],
.glassmorphism-select-wrapper[b-jskebcys47],
.glassmorphism-textarea-wrapper[b-jskebcys47] {
    position: relative;
}

.glassmorphism-input[b-jskebcys47],
.glassmorphism-select[b-jskebcys47],
.glassmorphism-textarea[b-jskebcys47] {
    background: linear-gradient( 145deg, rgba(204, 51, 0, 0.08), rgba(153, 38, 0, 0.12) );
    border: 1px solid rgba(204, 51, 0, 0.25);
    border-bottom: 1px solid rgba(102, 26, 0, 0.35);
    border-radius: 12px;
    color: #FFF0F0;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    width: 100%;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 8px rgba(102, 26, 0, 0.2), 0 1px 0 rgba(255, 153, 102, 0.1);
}

.glassmorphism-textarea[b-jskebcys47] {
    padding: 1rem 1rem 1rem 2.5rem;
    resize: vertical;
}

    .glassmorphism-input:focus[b-jskebcys47],
    .glassmorphism-select:focus[b-jskebcys47],
    .glassmorphism-textarea:focus[b-jskebcys47] {
        outline: none;
        border-color: rgba(255, 102, 51, 0.6);
        background: linear-gradient( 145deg, rgba(204, 51, 0, 0.15), rgba(153, 38, 0, 0.2) );
        box-shadow: 0 0 0 3px rgba(204, 51, 0, 0.25), inset 0 2px 8px rgba(102, 26, 0, 0.25), 0 1px 0 rgba(255, 204, 153, 0.15);
    }

    .glassmorphism-input[b-jskebcys47]::placeholder,
    .glassmorphism-textarea[b-jskebcys47]::placeholder {
        color: rgba(255, 153, 153, 0.7);
        font-weight: 400;
    }

.input-icon[b-jskebcys47],
.textarea-icon[b-jskebcys47],
.select-arrow[b-jskebcys47] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 102, 51, 0.9);
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(204, 51, 0, 0.3));
}

.textarea-icon[b-jskebcys47] {
    top: 1.5rem;
    transform: none;
}

.select-arrow[b-jskebcys47] {
    left: auto;
    right: 1rem;
    color: rgba(255, 102, 51, 0.8);
}

/* Select Styling */
.glassmorphism-select[b-jskebcys47] {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FF6633' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px;
}

    .glassmorphism-select option[b-jskebcys47] {
        background: #662600;
        color: #FFE6E6;
        padding: 0.5rem;
    }

        .glassmorphism-select option:hover[b-jskebcys47] {
            background: #CC3300;
        }

/* Switches */
.glassmorphism-switch[b-jskebcys47] {
    background: linear-gradient( 145deg, rgba(204, 51, 0, 0.1), rgba(153, 38, 0, 0.15) );
    border: 1px solid rgba(204, 51, 0, 0.25);
    border-radius: 12px;
    padding: 1rem;
    transition: all 0.3s ease;
    box-shadow: inset 0 1px 0 rgba(255, 153, 102, 0.15), 0 2px 8px rgba(204, 51, 0, 0.25);
}

    .glassmorphism-switch.switch-active[b-jskebcys47] {
        border-color: rgba(255, 102, 51, 0.4);
        background: linear-gradient( 145deg, rgba(204, 51, 0, 0.2), rgba(153, 38, 0, 0.25) );
    }

.switch-label[b-jskebcys47] {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
}

.switch-input[b-jskebcys47] {
    display: none;
}

.switch-slider[b-jskebcys47] {
    position: relative;
    width: 44px;
    height: 24px;
    background: linear-gradient( 145deg, rgba(204, 51, 0, 0.25), rgba(153, 38, 0, 0.2) );
    border-radius: 12px;
    margin-right: 1rem;
    transition: all 0.3s ease;
    border: 1px solid rgba(102, 26, 0, 0.3);
    box-shadow: inset 0 2px 8px rgba(102, 26, 0, 0.3), 0 1px 0 rgba(255, 153, 102, 0.15);
}

    .switch-slider[b-jskebcys47]::before {
        content: '';
        position: absolute;
        width: 18px;
        height: 18px;
        background: linear-gradient(145deg, #FFE6E6, #FFCCCC);
        border-radius: 50%;
        top: 2px;
        left: 2px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 2px 6px rgba(102, 26, 0, 0.4), 0 1px 0 rgba(255, 204, 204, 0.2);
    }

.switch-input:checked + .switch-slider[b-jskebcys47] {
    background: linear-gradient(135deg, #CC3300, #FF6633);
    border-color: rgba(153, 38, 0, 0.4);
}

    .switch-input:checked + .switch-slider[b-jskebcys47]::before {
        transform: translateX(20px);
        background: linear-gradient(145deg, #FFFFFF, #FFE6E6);
        box-shadow: 0 2px 6px rgba(102, 26, 0, 0.5), 0 1px 0 rgba(255, 230, 230, 0.3);
    }

.switch-text[b-jskebcys47] {
    color: rgba(255, 240, 240, 0.95);
    font-weight: 500;
    transition: all 0.3s ease;
    letter-spacing: -0.025em;
    text-shadow: 0 1px 2px rgba(102, 26, 0, 0.2);
}

    .switch-text i[b-jskebcys47] {
        width: 20px;
        color: #FF9966;
        transition: color 0.3s ease;
    }

    .switch-text.text-danger[b-jskebcys47] {
        color: #FF9966;
    }

        .switch-text.text-danger i[b-jskebcys47] {
            color: #FF9966;
        }

    .switch-text.text-warning[b-jskebcys47] {
        color: #FFCC33;
    }

        .switch-text.text-warning i[b-jskebcys47] {
            color: #FFCC33;
        }

    .switch-text.text-primary[b-jskebcys47] {
        color: #FF9966;
    }

        .switch-text.text-primary i[b-jskebcys47] {
            color: #FF9966;
        }

/* Checkboxes */
.glassmorphism-checkbox[b-jskebcys47] {
    background: linear-gradient( 145deg, rgba(204, 51, 0, 0.1), rgba(153, 38, 0, 0.15) );
    border: 1px solid rgba(204, 51, 0, 0.25);
    border-radius: 12px;
    padding: 1rem;
    margin-top: 1.5rem;
    box-shadow: inset 0 1px 0 rgba(255, 153, 102, 0.15), 0 2px 8px rgba(204, 51, 0, 0.25);
}

.checkbox-label[b-jskebcys47] {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
}

.checkbox-input[b-jskebcys47] {
    display: none;
}

.checkbox-custom[b-jskebcys47] {
    width: 20px;
    height: 20px;
    background: linear-gradient( 145deg, rgba(204, 51, 0, 0.15), rgba(153, 38, 0, 0.2) );
    border: 2px solid rgba(255, 102, 51, 0.5);
    border-radius: 6px;
    margin-right: 1rem;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: inset 0 1px 4px rgba(102, 26, 0, 0.3), 0 1px 0 rgba(255, 153, 102, 0.1);
}

.checkbox-input:checked + .checkbox-custom[b-jskebcys47] {
    background: linear-gradient(135deg, #CC3300, #FF6633);
    border-color: transparent;
    box-shadow: inset 0 1px 4px rgba(102, 26, 0, 0.4), 0 2px 8px rgba(204, 51, 0, 0.3);
}

    .checkbox-input:checked + .checkbox-custom[b-jskebcys47]::after {
        content: '✓';
        position: absolute;
        color: white;
        font-size: 12px;
        font-weight: bold;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-shadow: 0 1px 3px rgba(102, 26, 0, 0.5);
    }

.checkbox-text[b-jskebcys47] {
    color: rgba(255, 240, 240, 0.95);
    font-weight: 500;
    letter-spacing: -0.025em;
    text-shadow: 0 1px 2px rgba(102, 26, 0, 0.2);
}

    .checkbox-text.text-success[b-jskebcys47] {
        color: #66CC66;
    }

        .checkbox-text.text-success i[b-jskebcys47] {
            color: #66CC66;
        }

/* Follow-up Section */
.followup-section[b-jskebcys47] {
    background: linear-gradient( 145deg, rgba(204, 51, 0, 0.08), rgba(153, 38, 0, 0.12) );
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px dashed rgba(255, 102, 51, 0.3);
    border-top: 1px dashed rgba(255, 153, 102, 0.2);
    box-shadow: inset 0 2px 12px rgba(102, 26, 0, 0.2), 0 1px 0 rgba(255, 153, 102, 0.1);
}

/* Character Counter */
.character-counter[b-jskebcys47] {
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 153, 153, 0.9);
    text-shadow: 0 1px 2px rgba(102, 26, 0, 0.3);
}

    .character-counter.text-warning[b-jskebcys47] {
        color: #FFCC33;
    }

/* Footer */
.glassmorphism-footer[b-jskebcys47] {
    background: linear-gradient( to bottom, rgba(204, 51, 0, 0.15) 0%, rgba(153, 38, 0, 0.1) 100% );
    border-top: 1px solid rgba(204, 51, 0, 0.2);
    border-bottom: 1px solid rgba(102, 26, 0, 0.3);
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    position: relative;
}

    .glassmorphism-footer[b-jskebcys47]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(255, 102, 51, 0.3), transparent );
    }

.glassmorphism-btn[b-jskebcys47] {
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    letter-spacing: -0.025em;
    text-shadow: 0 1px 3px rgba(102, 26, 0, 0.4);
    box-shadow: 0 4px 16px rgba(204, 51, 0, 0.3), inset 0 1px 0 rgba(255, 204, 153, 0.15);
}

    .glassmorphism-btn.primary[b-jskebcys47] {
        background: linear-gradient( 145deg, #CC3300, #993300 );
        color: #FFFFFF;
        border: 1px solid rgba(255, 102, 51, 0.4);
        border-bottom: 1px solid rgba(102, 26, 0, 0.5);
    }

        .glassmorphism-btn.primary:hover[b-jskebcys47] {
            background: linear-gradient( 145deg, #FF6633, #CC3300 );
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(204, 51, 0, 0.5), inset 0 1px 0 rgba(255, 230, 204, 0.25);
            border-color: rgba(255, 153, 102, 0.6);
        }

        .glassmorphism-btn.primary:active[b-jskebcys47] {
            transform: translateY(0);
            box-shadow: 0 2px 12px rgba(204, 51, 0, 0.3), inset 0 1px 0 rgba(255, 153, 102, 0.2);
        }

    .glassmorphism-btn.secondary[b-jskebcys47] {
        background: linear-gradient( 145deg, rgba(204, 51, 0, 0.2), rgba(153, 38, 0, 0.15) );
        color: rgba(255, 240, 240, 0.95);
        border: 1px solid rgba(204, 51, 0, 0.3);
        border-bottom: 1px solid rgba(102, 26, 0, 0.4);
    }

        .glassmorphism-btn.secondary:hover[b-jskebcys47] {
            background: linear-gradient( 145deg, rgba(255, 102, 51, 0.3), rgba(204, 51, 0, 0.25) );
            color: #FFFFFF;
            border-color: rgba(255, 153, 102, 0.5);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(204, 51, 0, 0.4), inset 0 1px 0 rgba(255, 204, 153, 0.2);
        }

/* Invalid States */
.glassmorphism-input.is-invalid[b-jskebcys47],
.glassmorphism-textarea.is-invalid[b-jskebcys47] {
    border-color: #FF6666;
    background: linear-gradient( 145deg, rgba(255, 102, 102, 0.15), rgba(204, 51, 51, 0.1) );
    box-shadow: inset 0 2px 8px rgba(153, 51, 51, 0.3), 0 0 0 2px rgba(255, 102, 102, 0.2);
}

.invalid-feedback[b-jskebcys47] {
    color: #FF9966;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(204, 51, 0, 0.3);
}

/* Animations */
@keyframes fadeIn-b-jskebcys47 {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
        background: rgba(15, 10, 8, 0);
    }

    to {
        opacity: 1;
        backdrop-filter: blur(12px);
        background: rgba(15, 10, 8, 0.85);
    }
}

@keyframes slideUp-b-jskebcys47 {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
        box-shadow: 0 0 0 rgba(204, 51, 0, 0);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        box-shadow: 0 25px 50px -12px rgba(204, 51, 0, 0.4), 0 0 0 1px rgba(204, 51, 0, 0.1);
    }
}

/* Scrollbar Styling */
.modal-body[b-jskebcys47]::-webkit-scrollbar {
    width: 10px;
}

.modal-body[b-jskebcys47]::-webkit-scrollbar-track {
    background: linear-gradient( to bottom, rgba(153, 38, 0, 0.2), rgba(128, 32, 0, 0.15) );
    border-radius: 6px;
    border: 1px solid rgba(204, 51, 0, 0.2);
}

.modal-body[b-jskebcys47]::-webkit-scrollbar-thumb {
    background: linear-gradient( to bottom, #FF6633, #CC3300 );
    border-radius: 6px;
    border: 1px solid rgba(255, 153, 102, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 204, 153, 0.2), 0 1px 4px rgba(102, 26, 0, 0.4);
}

    .modal-body[b-jskebcys47]::-webkit-scrollbar-thumb:hover {
        background: linear-gradient( to bottom, #FF9966, #FF6633 );
    }

/* Responsive Adjustments */
@media (max-width: 768px) {
    .glassmorphism-modal[b-jskebcys47] {
        width: 95%;
        margin: 1rem;
        border-radius: 16px;
    }

    .modal-body[b-jskebcys47],
    .glassmorphism-header[b-jskebcys47],
    .glassmorphism-footer[b-jskebcys47] {
        padding: 1.25rem;
    }

    .glassmorphism-btn[b-jskebcys47] {
        padding: 0.625rem 1.25rem;
        font-size: 0.9rem;
    }

    .glassmorphism-section[b-jskebcys47] {
        margin-bottom: 1rem;
    }
}

/* Forest Red Glow Effect */
.glassmorphism-modal[b-jskebcys47]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient( 90deg, transparent, rgba(255, 102, 51, 0.4), rgba(255, 153, 102, 0.3), rgba(255, 102, 51, 0.4), transparent );
    z-index: 1;
    pointer-events: none;
}

/* Autumn Leaves Background Effect */
.glassmorphism-modal[b-jskebcys47]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 80%, rgba(204, 51, 0, 0.03) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(153, 38, 0, 0.03) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(255, 102, 51, 0.02) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

/* Input Glow Effect */
.glassmorphism-input:focus ~ .input-icon[b-jskebcys47],
.glassmorphism-textarea:focus ~ .textarea-icon[b-jskebcys47] {
    color: #FF6633;
    filter: drop-shadow(0 0 6px rgba(255, 102, 51, 0.6));
    animation: pulseGlow-b-jskebcys47 1.5s infinite alternate;
}

@keyframes pulseGlow-b-jskebcys47 {
    from {
        filter: drop-shadow(0 0 4px rgba(255, 102, 51, 0.4));
    }

    to {
        filter: drop-shadow(0 0 8px rgba(255, 102, 51, 0.7));
    }
}

/* Hover Effects for Section Headers */
.section-header:hover .header-icon[b-jskebcys47] {
    transform: rotate(10deg);
    transition: transform 0.3s ease;
    background: linear-gradient(135deg, rgba(204, 51, 0, 0.25), rgba(255, 102, 51, 0.2));
}
/* _content/ZenZonApp/Components/Pages/PatientDocuments.razor.rz.scp.css */
.docs-toolbar[b-cj9v68fsfs] {
    margin: 10px 0 16px 0;
}

.docs-error[b-cj9v68fsfs] {
    color: #b00020;
    margin-bottom: 10px;
}

.docs-grid[b-cj9v68fsfs] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    align-items: start;
}

.doc-card[b-cj9v68fsfs] {
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    padding: 10px;
    background: #fff;
}

.doc-preview[b-cj9v68fsfs] {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 8px;
    background: #f5f6f8;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .doc-preview img[b-cj9v68fsfs] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.doc-name[b-cj9v68fsfs] {
    margin-top: 8px;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-actions[b-cj9v68fsfs] {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.icon-btn[b-cj9v68fsfs] {
    border: 1px solid #dcdcdc;
    background: #ffffff;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
}

    .icon-btn:hover[b-cj9v68fsfs] {
        background: #f3f4f6;
    }

    .icon-btn.danger:hover[b-cj9v68fsfs] {
        background: #ffecec;
        border-color: #ffb3b3;
    }
.action-icon-btn.danger[b-cj9v68fsfs] {
    color: #991b1b; /* dark red */
    border-color: #fecaca; /* light red border */
}

    .action-icon-btn.danger:hover[b-cj9v68fsfs] {
        background: #fee2e2; /* light red hover */
    }
.action-icon-btn.primary[b-cj9v68fsfs] {
    color: #2563eb; /* blue */
    border-color: #bfdbfe; /* light blue border */
}

    .action-icon-btn.primary:hover[b-cj9v68fsfs] {
        background: #eff6ff; /* light blue hover */
    }
/* _content/ZenZonApp/Components/Pages/PatientInsuranceTab.razor.rz.scp.css */
.donut-value[b-9t3py39gc0] {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: #1e40af; /* Dark blue instead of gradient */
    line-height: 1.2;
}

.glassmorphism-card[b-9t3py39gc0] {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.1);
    transition: all 0.3s ease;
}

    .glassmorphism-card:hover[b-9t3py39gc0] {
        transform: translateY(-5px);
        box-shadow: 0 12px 40px rgba(59, 130, 246, 0.15);
    }

.animate-card[b-9t3py39gc0] {
    animation: slideUpFade-b-9t3py39gc0 0.5s ease-out forwards;
    opacity: 0;
}

@keyframes slideUpFade-b-9t3py39gc0 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.glassmorphism-badge[b-9t3py39gc0] {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: #1e40af;
    font-weight: 500;
    border-radius: 20px;
}

.glassmorphism-badge-sm[b-9t3py39gc0] {
    background: rgba(156, 163, 175, 0.1);
    border: 1px solid rgba(156, 163, 175, 0.2);
    color: #6b7280;
    font-size: 0.75rem;
    border-radius: 12px;
}

.glassmorphism-progress[b-9t3py39gc0] {
    background: rgba(226, 232, 240, 0.3);
    border-radius: 10px;
    overflow: hidden;
}

    .glassmorphism-progress .progress-bar[b-9t3py39gc0] {
        border-radius: 10px;
    }

.glassmorphism-border[b-9t3py39gc0] {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
}

.glassmorphism-donut[b-9t3py39gc0] {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

.donut-canvas[b-9t3py39gc0] {
    width: 100% !important;
    height: 100% !important;
    filter: drop-shadow(0 8px 24px rgba(59, 130, 246, 0.15));
}

.glassmorphism-donut-center[b-9t3py39gc0] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
}

.donut-label[b-9t3py39gc0] {
    font-size: 0.875rem;
    color: #4b5563; /* Darker gray for better visibility */
    font-weight: 500;
    margin-top: 0.25rem;
}

/* Better date inputs in modal */
.glassmorphism-modal input[type="date"].glass-date[b-9t3py39gc0] {
    height: 42px;
    padding: 8px 10px;
    font-size: 0.95rem;
}

    /* Make the calendar icon easier to click in Chromium */
    .glassmorphism-modal input[type="date"].glass-date[b-9t3py39gc0]::-webkit-calendar-picker-indicator {
        cursor: pointer;
        padding: 6px;
        opacity: 0.9;
    }

/* Optional: reduce “too wide” look inside rows */
.glassmorphism-modal .form-control[b-9t3py39gc0],
.glassmorphism-modal .form-select[b-9t3py39gc0] {
    min-height: 42px;
}
/* _content/ZenZonApp/Components/Pages/PatientInvoiceTab.razor.rz.scp.css */
/* =========================
   PatientInvoiceTab.razor.css
   FULL CLEAN VERSION
   ========================= */

/* Base wrapper (keep identical look across tabs by using same rules) */
.zenx-invoice-tab[b-pg7hm9l8ec],
.zenx-billing-tab[b-pg7hm9l8ec] {
    padding: 24px;
    background: #f8f9fc;
    min-height: 100%;
}

    .zenx-invoice-tab *[b-pg7hm9l8ec],
    .zenx-billing-tab *[b-pg7hm9l8ec] {
        box-sizing: border-box;
    }

/* =========================
   Header
   ========================= */
.zenx-header[b-pg7hm9l8ec] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    gap: 16px;
}

.header-title h4[b-pg7hm9l8ec] {
    margin: 0;
    color: #2c3e50;
    font-size: 1.5rem;
    font-weight: 700;
}

.header-subtitle[b-pg7hm9l8ec] {
    margin: 4px 0 0 0;
    color: #6c757d;
    font-size: 0.875rem;
}

.header-actions[b-pg7hm9l8ec] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* =========================
   Summary Cards
   ========================= */
.summary-cards[b-pg7hm9l8ec] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.summary-card[b-pg7hm9l8ec] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #eef2f7;
}

    .summary-card:hover[b-pg7hm9l8ec] {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
    }

.card-icon[b-pg7hm9l8ec] {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.total-billings[b-pg7hm9l8ec] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.pending-billings[b-pg7hm9l8ec] {
    background: linear-gradient(135deg, #ffd166 0%, #ffb347 100%);
    color: white;
}

.paid-billings[b-pg7hm9l8ec] {
    background: linear-gradient(135deg, #06d6a0 0%, #1b9aaa 100%);
    color: white;
}

.overdue-billings[b-pg7hm9l8ec] {
    background: linear-gradient(135deg, #ef476f 0%, #ff6b6b 100%);
    color: white;
}

.card-content[b-pg7hm9l8ec] {
    display: flex;
    flex-direction: column;
}

.card-label[b-pg7hm9l8ec] {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 4px;
}

.card-value[b-pg7hm9l8ec] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2c3e50;
}

.card-subtext[b-pg7hm9l8ec] {
    margin-top: 4px;
    font-size: 0.78rem;
    color: #6c757d;
}

/* =========================
   Controls Section
   ========================= */
.controls-section[b-pg7hm9l8ec] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.search-container[b-pg7hm9l8ec] {
    margin-bottom: 0;
}

.search-input[b-pg7hm9l8ec] {
    position: relative;
    display: flex;
    align-items: center;
}

    .search-input input[b-pg7hm9l8ec] {
        width: 100%;
        padding: 12px 44px 12px 44px;
        border: 2px solid #eef2f7;
        border-radius: 8px;
        font-size: 0.9375rem;
        transition: all 0.2s ease;
    }

        .search-input input:focus[b-pg7hm9l8ec] {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

.search-icon[b-pg7hm9l8ec] {
    position: absolute;
    left: 14px;
    color: #6c757d;
    font-size: 16px;
}

.clear-search[b-pg7hm9l8ec] {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
}

    .clear-search:hover[b-pg7hm9l8ec] {
        background: #f8f9fa;
        color: #dc3545;
    }

/* =========================
   Table Container + Wrapper
   Key fix: allow menu overflow while keeping horizontal scroll
   ========================= */
.table-container[b-pg7hm9l8ec] {
    background: white;
    border-radius: 12px;
    overflow: visible; /* allow dropdowns */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #eef2f7;
}

.table-wrapper[b-pg7hm9l8ec] {
    overflow-x: auto; /* horizontal scroll */
    overflow-y: visible; /* do NOT clip dropdown vertically */
    -webkit-overflow-scrolling: touch;
    position: relative;
    border-radius: 12px;
}

/* =========================
   ZenZonApp Table
   ========================= */
.zenx-table[b-pg7hm9l8ec] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 1200px;
    table-layout: fixed; /* makes header/columns align perfectly */
}

    .zenx-table thead[b-pg7hm9l8ec] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .zenx-table th[b-pg7hm9l8ec] {
        padding: 8px 8px !important; /* tighter header height */
        color: white;
        font-weight: 600;
        font-size: 0.8125rem;
        text-align: left;
        border-bottom: none;
        white-space: nowrap;
        line-height: 1.05;
        vertical-align: middle;
    }

    .zenx-table td[b-pg7hm9l8ec] {
        padding: 8px 8px !important; /* tighter row height */
        color: #495057;
        font-size: 0.8125rem;
        vertical-align: middle;
        border-bottom: 1px solid #eef2f7;
        line-height: 1.15;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .zenx-table tbody tr[b-pg7hm9l8ec] {
        transition: all 0.2s ease;
    }

        .zenx-table tbody tr:hover[b-pg7hm9l8ec] {
            background-color: #f8f9fc;
        }

.text-right[b-pg7hm9l8ec] {
    text-align: right;
}

.text-end[b-pg7hm9l8ec] {
    text-align: right;
}

.text-center[b-pg7hm9l8ec] {
    text-align: center;
}

/* Keep certain cells from ellipsis clipping (menus/buttons) */
.checkbox-cell[b-pg7hm9l8ec],
.checkbox-header[b-pg7hm9l8ec],
.eye-col[b-pg7hm9l8ec],
.actions-cell[b-pg7hm9l8ec],
.actions-header[b-pg7hm9l8ec] {
    overflow: visible !important;
    text-overflow: unset !important;
}

/* Header checkbox alignment helper */
.th-flex[b-pg7hm9l8ec] {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================
   Cells formatting
   ========================= */
.billing-number[b-pg7hm9l8ec] {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #2c3e50;
    background: #f8f9fa;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 0.8125rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
}

.date-cell[b-pg7hm9l8ec] {
    padding: 4px 8px;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-block;
}

    .date-cell.overdue[b-pg7hm9l8ec] {
        background: #ffebee;
        color: #dc3545;
        font-weight: 600;
    }

.amount-cell[b-pg7hm9l8ec],
.paid-cell[b-pg7hm9l8ec],
.discount-cell[b-pg7hm9l8ec] {
    font-weight: 600;
    font-size: 0.8125rem;
}

.balance-cell[b-pg7hm9l8ec] {
    font-weight: 700;
    font-size: 0.8125rem;
}

    .balance-cell.unpaid[b-pg7hm9l8ec] {
        color: #dc3545;
    }

    .balance-cell.paid[b-pg7hm9l8ec] {
        color: #28a745;
    }

/* Checkbox column */
.checkbox-cell[b-pg7hm9l8ec],
.checkbox-header[b-pg7hm9l8ec] {
    width: 44px;
    text-align: center;
}

.bulk-checkbox[b-pg7hm9l8ec],
.row-checkbox[b-pg7hm9l8ec] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #667eea;
    margin: 0;
}

/* Status badge */
.status-badge[b-pg7hm9l8ec] {
    padding: 4px 8px;
    border-radius: 16px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: inline-block;
    line-height: 1;
}

    .status-badge.draft[b-pg7hm9l8ec] {
        background: #f8f9fa;
        color: #6c757d;
        border: 1px solid #dee2e6;
    }

    .status-badge.sent[b-pg7hm9l8ec],
    .status-badge.pending[b-pg7hm9l8ec] {
        background: #fff3cd;
        color: #856404;
        border: 1px solid #ffeaa7;
    }

    .status-badge.partial[b-pg7hm9l8ec] {
        background: #cce5ff;
        color: #004085;
        border: 1px solid #b8daff;
    }

    .status-badge.paid[b-pg7hm9l8ec] {
        background: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }

    .status-badge.overdue[b-pg7hm9l8ec] {
        background: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }

    .status-badge.cancelled[b-pg7hm9l8ec],
    .status-badge.void[b-pg7hm9l8ec] {
        background: #e2e3e5;
        color: #383d41;
        border: 1px solid #d6d8db;
    }

/* =========================
   Table Actions (icons column)
   ========================= */
.table-actions[b-pg7hm9l8ec] {
    display: flex;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

.action-btn[b-pg7hm9l8ec] {
    width: 28px;
    height: 28px;
    border: 1px solid #eef2f7;
    border-radius: 4px;
    background: white;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.view-btn:hover[b-pg7hm9l8ec] {
    background: #e3f2fd;
    color: #1976d2;
    border-color: #1976d2;
}

.edit-btn:hover[b-pg7hm9l8ec] {
    background: #fff3cd;
    color: #ffc107;
    border-color: #ffc107;
}

.payment-btn:hover[b-pg7hm9l8ec] {
    background: #d4edda;
    color: #28a745;
    border-color: #28a745;
}

/* =========================
   3-dot Menu (kebab) column
   Fix: keep INSIDE card, not clipped, aligned under dots
   ========================= */
.actions-header[b-pg7hm9l8ec],
.actions-cell[b-pg7hm9l8ec] {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    text-align: center;
    position: relative;
}

.actions-menu-wrapper[b-pg7hm9l8ec] {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.actions-dot-btn[b-pg7hm9l8ec] {
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    transition: all 0.15s ease;
    padding: 0;
}

    .actions-dot-btn:hover[b-pg7hm9l8ec] {
        background: #f8f9fa;
        border-color: #eef2f7;
        color: #2c3e50;
    }

    .actions-dot-btn .dots[b-pg7hm9l8ec] {
        font-size: 18px;
        line-height: 1;
        font-weight: 800;
        display: inline-block;
    }

/* The dropdown itself */
.actions-menu[b-pg7hm9l8ec] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0; /* anchor to right edge of the cell */
    left: auto;
    min-width: 210px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
    z-index: 5000; /* below modal overlay (6000) */
    padding: 6px 0;
    text-align: left;
    overflow: hidden;
}

    .actions-menu[b-pg7hm9l8ec]::before {
        content: "";
        position: absolute;
        top: -6px;
        right: 14px;
        width: 12px;
        height: 12px;
        background: #ffffff;
        border-left: 1px solid #e5e7eb;
        border-top: 1px solid #e5e7eb;
        transform: rotate(45deg);
    }

    .actions-menu button[b-pg7hm9l8ec] {
        width: 100%;
        background: none;
        border: none;
        padding: 10px 14px;
        text-align: left;
        font-size: 0.86rem;
        color: #2c3e50;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .actions-menu button:hover[b-pg7hm9l8ec] {
            background: #f8f9fc;
        }

    /* Optional: open upwards when near bottom */
    .actions-menu.menu-up[b-pg7hm9l8ec] {
        top: auto;
        bottom: calc(100% + 8px);
    }

        .actions-menu.menu-up[b-pg7hm9l8ec]::before {
            top: auto;
            bottom: -6px;
            transform: rotate(225deg);
        }

/* =========================
   Tooltip (status + eye)
   ========================= */
.zenx-status-tooltip[b-pg7hm9l8ec] {
    position: relative;
    display: inline-block;
    align-items: center;
    justify-content: center;
    outline: none;
}

.zenx-status-tooltip-box[b-pg7hm9l8ec] {
    position: absolute;
    /* Pop UP above the badge, centered horizontally */
    bottom: calc(100% + 8px);
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    /* Visibility — show only on hover/focus */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    /* Make sure it floats above everything */
    z-index: 9999;
    /* Existing look-and-feel */
    background: #1a1f2e;
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    font-size: 0.85rem;
    min-width: 220px;
}

.zenx-status-tooltip:hover .zenx-status-tooltip-box[b-pg7hm9l8ec],
.zenx-status-tooltip:focus .zenx-status-tooltip-box[b-pg7hm9l8ec],
.zenx-status-tooltip:focus-within .zenx-status-tooltip-box[b-pg7hm9l8ec] {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}


/* Downward-pointing arrow attached to bottom of tooltip */
.zenx-status-tooltip-box[b-pg7hm9l8ec]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1a1f2e;
}
.zenx-tip-row[b-pg7hm9l8ec] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    line-height: 1.35;
    padding: 2px 0;
}

.zenx-tip-label[b-pg7hm9l8ec] {
    opacity: 0.85;
}

.zenx-tip-value[b-pg7hm9l8ec] {
    font-weight: 700;
}

.zenx-tip-divider[b-pg7hm9l8ec] {
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    margin: 8px 0;
}

.zenx-tip-balance .zenx-tip-value[b-pg7hm9l8ec] {
    font-size: 14px;
}

/* Eye column */
.eye-col[b-pg7hm9l8ec] {
    width: 46px;
    text-align: center;
    white-space: nowrap;
}

/* =========================
   Expand Button (invoice number)
   ========================= */
.expand-btn[b-pg7hm9l8ec] {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 3px;
    transition: all 0.2s;
}

    .expand-btn:hover[b-pg7hm9l8ec] {
        background: #f8f9fa;
        color: #495057;
    }

/* =========================
   Expandable Lines Panel
   ========================= */
.invoice-lines-panel[b-pg7hm9l8ec] {
    background: #f8f9fc;
    border-top: 1px solid #dee2e6;
    border-bottom: 2px solid #667eea;
    margin: 0;
    animation: slideDown-b-pg7hm9l8ec 0.25s ease-out;
}

.details-row[b-pg7hm9l8ec] {
    background: #f8f9fc !important;
}

.lines-panel-header[b-pg7hm9l8ec] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: white;
    border-bottom: 1px solid #eef2f7;
}

    .lines-panel-header .header-title[b-pg7hm9l8ec] {
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .lines-panel-header .header-title h6[b-pg7hm9l8ec] {
            margin: 0;
            color: #2c3e50;
            font-size: 0.95rem;
            font-weight: 600;
        }

.btn-close-panel[b-pg7hm9l8ec] {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

    .btn-close-panel:hover[b-pg7hm9l8ec] {
        background: #f8f9fa;
        color: #dc3545;
    }

.lines-table-container[b-pg7hm9l8ec] {
    padding: 16px;
    overflow-x: auto;
}

.lines-table[b-pg7hm9l8ec] {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

    .lines-table thead[b-pg7hm9l8ec] {
        background: #f8f9fa;
    }

    .lines-table th[b-pg7hm9l8ec] {
        padding: 10px 12px;
        text-align: left;
        font-weight: 600;
        font-size: 0.8rem;
        color: #495057;
        border-bottom: 2px solid #dee2e6;
        white-space: nowrap;
    }

    .lines-table td[b-pg7hm9l8ec] {
        padding: 10px 12px;
        border-bottom: 1px solid #eef2f7;
        font-size: 0.85rem;
        color: #495057;
        white-space: nowrap;
    }

    .lines-table tbody tr:hover[b-pg7hm9l8ec] {
        background-color: #f8f9fc;
    }

.total-cell[b-pg7hm9l8ec] {
    font-weight: 600;
    color: #2c3e50;
}

.subtotal-amount[b-pg7hm9l8ec] {
    color: #495057;
    font-weight: 500;
}

.tax-total[b-pg7hm9l8ec] {
    color: #dc3545;
    font-weight: 500;
}

.grand-total[b-pg7hm9l8ec] {
    color: #2c3e50;
    font-weight: 700;
    font-size: 1.1rem;
}

.lines-total-row[b-pg7hm9l8ec] {
    background: #f8f9fa;
    font-weight: 600;
}

    .lines-total-row td[b-pg7hm9l8ec] {
        padding-top: 12px;
        padding-bottom: 12px;
        border-top: 2px solid #dee2e6;
    }

/* Loading spinner block */
.loading-spinner[b-pg7hm9l8ec] {
    padding: 40px;
    text-align: center;
    color: #6c757d;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* =========================
   Glass Modals (kept from your original)
   ========================= */
.glass-overlay[b-pg7hm9l8ec] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6000; /* must be above menu */
    animation: fadeIn-b-pg7hm9l8ec 0.2s ease-out;
}

.glass-modal[b-pg7hm9l8ec] {
    width: 90%;
    max-width: 480px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    overflow: visible;
    animation: slideUp-b-pg7hm9l8ec 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
}

.glass-header[b-pg7hm9l8ec] {
    padding: 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    position: relative;
}

.modal-header-content[b-pg7hm9l8ec] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-icon[b-pg7hm9l8ec] {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

    .modal-icon svg[b-pg7hm9l8ec] {
        stroke: white;
    }

.modal-title[b-pg7hm9l8ec] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.modal-subtitle[b-pg7hm9l8ec] {
    margin: 4px 0 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

.btn-close-glass[b-pg7hm9l8ec] {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: white;
}

    .btn-close-glass:hover[b-pg7hm9l8ec] {
        background: rgba(255, 255, 255, 0.3);
        transform: rotate(90deg);
    }

/* Scrollable Modal */
.scrollable-modal[b-pg7hm9l8ec] {
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    height: auto;
}

.modal-scroll-content[b-pg7hm9l8ec] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(85vh - 140px);
    padding: 0;
}

    /* Custom Scrollbar */
    .modal-scroll-content[b-pg7hm9l8ec]::-webkit-scrollbar {
        width: 6px;
    }

    .modal-scroll-content[b-pg7hm9l8ec]::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05);
        border-radius: 3px;
    }

    .modal-scroll-content[b-pg7hm9l8ec]::-webkit-scrollbar-thumb {
        background: rgba(102, 126, 234, 0.3);
        border-radius: 3px;
    }

        .modal-scroll-content[b-pg7hm9l8ec]::-webkit-scrollbar-thumb:hover {
            background: rgba(102, 126, 234, 0.5);
        }

/* Body */
.glass-body[b-pg7hm9l8ec] {
    padding: 0 24px 24px;
    min-height: min-content;
}

/* Invoice Summary Card */
.invoice-summary-card[b-pg7hm9l8ec] {
    margin: 20px;
    padding: 20px;
    background: linear-gradient(135deg, #f6f9ff 0%, #f0f4ff 100%);
    border-radius: 16px;
    border: 1px solid rgba(102, 126, 234, 0.1);
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.1);
}

.summary-row[b-pg7hm9l8ec] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.summary-label[b-pg7hm9l8ec] {
    color: #6b7280;
    font-size: 0.9rem;
}

.summary-value[b-pg7hm9l8ec] {
    font-weight: 500;
    color: #374151;
}

.summary-divider[b-pg7hm9l8ec] {
    height: 1px;
    background: rgba(102, 126, 234, 0.1);
    margin: 12px 0;
}

.total-row[b-pg7hm9l8ec] {
    padding-top: 12px;
    border-top: 2px solid rgba(102, 126, 234, 0.2);
}

    .total-row .summary-label[b-pg7hm9l8ec] {
        font-weight: 600;
        color: #374151;
    }

.highlight[b-pg7hm9l8ec] {
    color: #10b981;
    font-weight: 700;
    font-size: 1.2rem;
}

/* Form */
.form-group-glass[b-pg7hm9l8ec] {
    margin-bottom: 24px;
}

.form-label-glass[b-pg7hm9l8ec] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #4b5563;
    font-weight: 500;
    font-size: 0.95rem;
}

.label-icon[b-pg7hm9l8ec] {
    opacity: 0.7;
}

/* Amount input group */
.amount-input-group[b-pg7hm9l8ec] {
    display: flex;
    align-items: center;
    position: relative;
}

.currency-symbol[b-pg7hm9l8ec] {
    position: absolute;
    left: 16px;
    color: #6b7280;
    font-weight: 500;
    z-index: 1;
}

.amount-input[b-pg7hm9l8ec] {
    width: 100%;
    padding: 16px 16px 16px 30px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 500;
    color: #1f2937;
    outline: none;
    transition: all 0.2s;
}

    .amount-input:focus[b-pg7hm9l8ec] {
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

.amount-actions[b-pg7hm9l8ec] {
    display: flex;
    gap: 8px;
    margin-left: 12px;
}

.amount-quick-btn[b-pg7hm9l8ec] {
    padding: 8px 12px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.2s;
}

    .amount-quick-btn:hover[b-pg7hm9l8ec] {
        background: #e5e7eb;
        transform: translateY(-1px);
    }

    .amount-quick-btn.full-btn[b-pg7hm9l8ec] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
    }

        .amount-quick-btn.full-btn:hover[b-pg7hm9l8ec] {
            opacity: 0.9;
        }

.amount-hint[b-pg7hm9l8ec] {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 4px;
}

.validation-error[b-pg7hm9l8ec] {
    color: #dc3545;
    font-size: 0.85rem;
    margin-top: 4px;
}

/* Notes textarea */
.notes-textarea[b-pg7hm9l8ec] {
    width: 100%;
    padding: 16px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1rem;
    color: #1f2937;
    outline: none;
    resize: vertical;
    transition: all 0.2s;
    font-family: inherit;
}

    .notes-textarea:focus[b-pg7hm9l8ec] {
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

.notes-counter[b-pg7hm9l8ec] {
    text-align: right;
    font-size: 0.85rem;
    color: #9ca3af;
    margin-top: 4px;
}

/* Payment methods grid */
.payment-methods-grid[b-pg7hm9l8ec] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.method-option[b-pg7hm9l8ec] {
    padding: 16px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

    .method-option:hover[b-pg7hm9l8ec] {
        border-color: #667eea;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
    }

    .method-option.selected[b-pg7hm9l8ec] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-color: #667eea;
        color: white;
    }

.method-icon[b-pg7hm9l8ec] {
    font-size: 1.5rem;
    transition: transform 0.2s;
}

.method-option.selected .method-icon[b-pg7hm9l8ec] {
    transform: scale(1.1);
}

.method-label[b-pg7hm9l8ec] {
    font-size: 0.9rem;
    font-weight: 500;
}

/* Status preview */
.status-preview[b-pg7hm9l8ec] {
    margin-top: 24px;
    padding: 20px;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.status-label[b-pg7hm9l8ec] {
    color: #6b7280;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.status-display[b-pg7hm9l8ec] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.status-badge.success[b-pg7hm9l8ec] {
    background: #d1fae5;
    color: #065f46;
}

.status-badge.warning[b-pg7hm9l8ec] {
    background: #fef3c7;
    color: #92400e;
}

.status-detail[b-pg7hm9l8ec] {
    color: #4b5563;
    font-size: 0.9rem;
}

/* Footer */
.glass-footer[b-pg7hm9l8ec] {
    padding: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: rgba(255, 255, 255, 0.95);
    position: sticky;
    bottom: 0;
    z-index: 2;
}

/* Footer Buttons */
.btn-glass-outline[b-pg7hm9l8ec] {
    padding: 12px 24px;
    background: transparent;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    color: #4b5563;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-glass-outline:hover[b-pg7hm9l8ec] {
        background: #f9fafb;
        border-color: #d1d5db;
    }

.btn-glass-primary[b-pg7hm9l8ec] {
    padding: 12px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 12px;
    color: white;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
    -webkit-appearance: none;
    appearance: none;
}

    .btn-glass-primary:hover[b-pg7hm9l8ec] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
    }

    .btn-glass-primary:disabled[b-pg7hm9l8ec],
    .btn-glass-primary.disabled[b-pg7hm9l8ec] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Prevent body scroll when modal is open */
body.modal-open[b-pg7hm9l8ec] {
    overflow: hidden;
}

/* =========================
   Animations
   ========================= */
@keyframes fadeIn-b-pg7hm9l8ec {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp-b-pg7hm9l8ec {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown-b-pg7hm9l8ec {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================
   Responsive
   ========================= */
@media (max-height: 700px) {
    .scrollable-modal[b-pg7hm9l8ec] {
        max-height: 90vh;
    }

    .modal-scroll-content[b-pg7hm9l8ec] {
        max-height: calc(90vh - 140px);
    }

    .glass-body[b-pg7hm9l8ec] {
        padding: 0 20px 20px;
    }
}

@media (max-width: 640px) {
    .glass-modal[b-pg7hm9l8ec] {
        width: 95%;
        max-width: 95%;
        margin: 10px;
    }

    .payment-methods-grid[b-pg7hm9l8ec] {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .method-option[b-pg7hm9l8ec] {
        padding: 12px;
    }
}

@media (max-width: 768px) {
    .lines-table-container[b-pg7hm9l8ec] {
        padding: 8px;
    }

    .lines-table th[b-pg7hm9l8ec],
    .lines-table td[b-pg7hm9l8ec] {
        padding: 6px 8px;
    }

    /* keep dropdown inside on small screens */
    .actions-menu[b-pg7hm9l8ec] {
        right: 0;
        left: auto;
        min-width: 190px;
    }
}
.payment-date-wrap[b-pg7hm9l8ec] {
    position: relative;
}

    /* Make sure nothing in the glass UI blocks clicks */
    .payment-date-wrap[b-pg7hm9l8ec],
    .payment-date-wrap *[b-pg7hm9l8ec] {
        pointer-events: auto;
    }

.glass-date[b-pg7hm9l8ec] {
    width: 100%;
    padding-right: 44px; /* room for custom icon */
}

/* Your custom icon (NOT clickable; click goes to the input) */
.payment-date-wrap .date-icon[b-pg7hm9l8ec] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: .75;
}

/* Hide default browser calendar icon but keep click-area working */
.payment-date-wrap input[type="date"][b-pg7hm9l8ec]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 0;
    top: 0;
    width: 44px;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
/* Payment Amount Specific Styles */
.form-group-glass[b-pg7hm9l8ec] {
    margin-bottom: 1.5rem;
}

.form-label-glass[b-pg7hm9l8ec] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.75rem;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.label-icon[b-pg7hm9l8ec] {
    font-size: 1.1rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.amount-input-group[b-pg7hm9l8ec] {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

    .amount-input-group:focus-within[b-pg7hm9l8ec] {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(86, 124, 254, 0.5);
        box-shadow: 0 0 0 3px rgba(86, 124, 254, 0.1);
    }

.currency-symbol[b-pg7hm9l8ec] {
    padding: 0 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
}

.glassmorphism-input[b-pg7hm9l8ec] {
    flex: 1;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 500;
    color: #2d3748;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

    .glassmorphism-input:focus[b-pg7hm9l8ec] {
        background: rgba(255, 255, 255, 0.95);
        outline: none;
        box-shadow: 0 0 0 2px rgba(86, 124, 254, 0.3);
    }

    .glassmorphism-input[b-pg7hm9l8ec]::-webkit-inner-spin-button,
    .glassmorphism-input[b-pg7hm9l8ec]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

.glassmorphism-input[b-pg7hm9l8ec] {
    -moz-appearance: textfield;
    font-variant-numeric: tabular-nums;
}

    .glassmorphism-input[b-pg7hm9l8ec]::placeholder {
        color: rgba(45, 55, 72, 0.4);
    }

.amount-actions[b-pg7hm9l8ec] {
    margin-left: 0.5rem;
}

.glassmorphism-btn[b-pg7hm9l8ec] {
    background: linear-gradient(135deg, rgba(86, 124, 254, 0.9), rgba(58, 97, 233, 0.9));
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .glassmorphism-btn:hover[b-pg7hm9l8ec] {
        background: linear-gradient(135deg, rgba(86, 124, 254, 1), rgba(58, 97, 233, 1));
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(86, 124, 254, 0.3);
    }

    .glassmorphism-btn:active[b-pg7hm9l8ec] {
        transform: translateY(0);
    }

.amount-hint[b-pg7hm9l8ec] {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.hint-icon[b-pg7hm9l8ec] {
    font-size: 0.9rem;
}

.validation-error[b-pg7hm9l8ec] {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.2);
    border-radius: 8px;
    color: #ff6b6b;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: slideIn-b-pg7hm9l8ec 0.3s ease;
}

@keyframes slideIn-b-pg7hm9l8ec {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.error-icon[b-pg7hm9l8ec] {
    font-size: 1rem;
}

/* Custom scrollbar for input if needed */
.glassmorphism-input[b-pg7hm9l8ec] {
    flex: 1;
    background: rgba(255, 255, 255, 0.98); /* More opaque for better text clarity */
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600; /* Make font bolder */
    color: #1a202c; /* Darker color for better contrast */
    backdrop-filter: blur(2px); /* Very subtle blur instead of 5px */
    -webkit-backdrop-filter: blur(2px);
    transition: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8); /* White text shadow */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.3px; /* Slight letter spacing for clarity */
}
.glassmorphism-input[b-pg7hm9l8ec]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.glassmorphism-input[b-pg7hm9l8ec]::-webkit-scrollbar-thumb {
    background: rgba(86, 124, 254, 0.3);
    border-radius: 3px;
}

/* Focus state for accessibility */
.glassmorphism-input:focus-visible[b-pg7hm9l8ec] {
    outline: 2px solid rgba(86, 124, 254, 0.5);
    outline-offset: 2px;
}
.btn-disabled[b-pg7hm9l8ec] {
    opacity: 0.5;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.btn-glass-primary[b-pg7hm9l8ec] {
    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

    .btn-glass-primary:hover:not(:disabled)[b-pg7hm9l8ec] {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    }
<style >
.btn-glass-primary[b-pg7hm9l8ec] {
    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1000;
}

.btn-glass-primary:hover:not(:disabled)[b-pg7hm9l8ec] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.btn-glass-primary:disabled[b-pg7hm9l8ec],
.btn-disabled[b-pg7hm9l8ec] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}



/* Ensure the action cell doesn't clip the menu */
.invoice-table td:last-child[b-pg7hm9l8ec] {
    overflow: visible !important;
    position: relative; /* Only if the menu is absolute positioned inside */
}

/* If you are using a dropdown menu */
.action-menu-dropdown[b-pg7hm9l8ec] {
    position: absolute;
    right: 0;
    top: 100%; /* Positions it directly below the dots */
    z-index: 1050; /* Ensure it stays above other rows */
}



.invoice-row:hover[b-pg7hm9l8ec] {
    z-index: 10;
    position: relative;
}
/* Cells containing a tooltip must not clip — overrides the generic td rule */
.zenx-table td:has(.zenx-status-tooltip)[b-pg7hm9l8ec] {
    overflow: visible !important;
    text-overflow: unset !important;
}
.table-container[b-pg7hm9l8ec] {
    max-height: 560px;
    overflow: hidden;
}

.table-wrapper[b-pg7hm9l8ec] {
    max-height: 520px;
    overflow-y: auto;
    overflow-x: auto;
    border-radius: 14px;
}

.zenx-table[b-pg7hm9l8ec] {
    width: 100%;
    min-width: 1100px;
}

    .zenx-table thead th[b-pg7hm9l8ec] {
        position: sticky;
        top: 0;
        z-index: 20;
    }

.sortable-header[b-pg7hm9l8ec] {
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.table-container[b-pg7hm9l8ec] {
    max-height: 560px;
    overflow: hidden;
}

.table-wrapper[b-pg7hm9l8ec] {
    max-height: 430px;
    overflow-y: auto;
    overflow-x: auto;
    border-radius: 14px;
}

    /* Chrome / Edge scrollbar */
    .table-wrapper[b-pg7hm9l8ec]::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    .table-wrapper[b-pg7hm9l8ec]::-webkit-scrollbar-track {
        background: #eef3fb;
        border-radius: 20px;
    }

    .table-wrapper[b-pg7hm9l8ec]::-webkit-scrollbar-thumb {
        background: #8b7cf6;
        border-radius: 20px;
    }

/* Firefox */
.table-wrapper[b-pg7hm9l8ec] {
    scrollbar-width: thin;
    scrollbar-color: #8b7cf6 #eef3fb;
}

.zenx-table[b-pg7hm9l8ec] {
    width: 100%;
    min-width: 1100px;
}

    .zenx-table thead th[b-pg7hm9l8ec] {
        position: sticky;
        top: 0;
        z-index: 30;
    }
/* _content/ZenZonApp/Components/Pages/Patients.razor.rz.scp.css */
/* Patients.razor - Light Glass Morphism Theme */
.container-fluid.crystal-glass[b-o31higiglx] {
    padding: 1.5rem;
    min-height: 100vh;
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f0fa 50%, #f0f7ff 100%);
    position: relative;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

    /* Subtle background pattern */
    .container-fluid.crystal-glass[b-o31higiglx]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.03) 0%, transparent 30%), radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.03) 0%, transparent 30%);
        pointer-events: none;
    }

/* Modern Header */
.glass-header[b-o31higiglx] {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 30px -10px rgba(0, 20, 40, 0.1);
    padding: 1.25rem 2rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .glass-header h3[b-o31higiglx] {
        color: #1A2B3C;
        font-weight: 600;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

        .glass-header h3 i[b-o31higiglx] {
            color: #3B82F6;
            font-size: 1.8rem;
        }

.glass-badge[b-o31higiglx] {
    background: rgba(255, 255, 255, 0.9);
    padding: 0.5rem 1rem;
    border-radius: 40px;
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: #2C3E50;
    font-size: 0.9rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Alert Messages */
.glass-alert[b-o31higiglx] {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 5px 15px -8px rgba(0, 0, 0, 0.1);
}

.glass-alert-danger[b-o31higiglx] {
    background: rgba(255, 235, 235, 0.9);
    border-left: 4px solid #EF4444;
    color: #B91C1C;
}

.glass-alert-success[b-o31higiglx] {
    background: rgba(235, 255, 235, 0.9);
    border-left: 4px solid #10B981;
    color: #065F46;
}

/* Frost Glass Panels */
.frost-glass[b-o31higiglx] {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 15px 35px -15px rgba(0, 30, 60, 0.1);
    overflow: hidden;
}

.info-glass[b-o31higiglx] {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    padding: 1.5rem;
    height: 100%;
    transition: all 0.2s ease;
    box-shadow: 0 5px 15px -8px rgba(0, 0, 0, 0.05);
}

    .info-glass:hover[b-o31higiglx] {
        background: rgba(255, 255, 255, 0.8);
        box-shadow: 0 10px 25px -12px rgba(0, 50, 100, 0.15);
        transform: translateY(-2px);
    }

.info-glass-header[b-o31higiglx] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
}

.glass-icon[b-o31higiglx] {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3B82F6;
    font-size: 1.2rem;
    border: 1px solid rgba(59, 130, 246, 0.2);
    box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.05);
}

    .glass-icon.glass-purple[b-o31higiglx] {
        color: #8B5CF6;
    }

    .glass-icon.glass-blue[b-o31higiglx] {
        color: #3B82F6;
    }

    .glass-icon.glass-green[b-o31higiglx] {
        color: #10B981;
    }

/* Text Colors */
.text-glass[b-o31higiglx] {
    color: #1A2B3C;
    font-weight: 500;
}

.text-subtle[b-o31higiglx] {
    color: #5A6F84;
    font-size: 0.9rem;
}

.text-accent[b-o31higiglx] {
    color: #3B82F6;
}

/* Search Bar */
.liquid-search-container[b-o31higiglx] {
    position: relative;
    margin-bottom: 1rem;
}

    .liquid-search-container i[b-o31higiglx] {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: #8A9FB0;
        font-size: 1rem;
        z-index: 1;
    }

.liquid-search[b-o31higiglx] {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 40px;
    color: #1A2B3C;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

    .liquid-search:focus[b-o31higiglx] {
        outline: none;
        border-color: #3B82F6;
        background: white;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .liquid-search[b-o31higiglx]::placeholder {
        color: #8A9FB0;
    }

/* Patient List */
.patient-list-container[b-o31higiglx] {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding-right: 0.25rem;
}

.glass-patient-item[b-o31higiglx] {
    padding: 1rem;
    margin-bottom: 0.5rem;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .glass-patient-item:hover[b-o31higiglx] {
        background: rgba(255, 255, 255, 0.8);
        border-color: rgba(59, 130, 246, 0.3);
        transform: translateX(2px);
        box-shadow: 0 5px 15px -10px rgba(0, 0, 0, 0.1);
    }

    .glass-patient-item.active[b-o31higiglx] {
        background: rgba(59, 130, 246, 0.1);
        border-color: #3B82F6;
        box-shadow: 0 5px 15px -8px rgba(59, 130, 246, 0.2);
    }

/* Prism Avatar */
.prism-avatar[b-o31higiglx] {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #3B82F6, #8B5CF6);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 8px 15px -8px rgba(59, 130, 246, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.5);
}

    .prism-avatar.glow-effect[b-o31higiglx] {
        animation: softGlow-b-o31higiglx 2s ease-in-out infinite;
    }

@keyframes softGlow-b-o31higiglx {
    0%, 100% {
        box-shadow: 0 8px 15px -8px rgba(59, 130, 246, 0.4);
    }

    50% {
        box-shadow: 0 12px 25px -8px rgba(59, 130, 246, 0.6);
    }
}

/* Empty State */
.glass-empty[b-o31higiglx] {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    padding: 3rem 2rem;
    text-align: center;
    color: #5A6F84;
}

    .glass-empty i[b-o31higiglx] {
        font-size: 3rem;
        color: #8A9FB0;
        margin-bottom: 1rem;
    }

/* Crystal Profile Header */
.crystal-profile[b-o31higiglx] {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.1);
}

/* Glass Badge Variants */
.glass-badge.glass-purple[b-o31higiglx] {
    background: rgba(139, 92, 246, 0.1);
    color: #7C3AED;
    border-color: rgba(139, 92, 246, 0.2);
}

.glass-badge.glass-blue[b-o31higiglx] {
    background: rgba(59, 130, 246, 0.1);
    color: #2563EB;
    border-color: rgba(59, 130, 246, 0.2);
}

/* Glass Buttons */
.glass-btn[b-o31higiglx] {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 40px;
    padding: 0.6rem 1.2rem;
    color: #2C3E50;
    font-weight: 500;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

    .glass-btn:hover[b-o31higiglx] {
        background: white;
        border-color: #3B82F6;
        color: #2563EB;
        transform: translateY(-1px);
        box-shadow: 0 8px 15px -10px rgba(59, 130, 246, 0.3);
    }

    .glass-btn.glass-btn-primary[b-o31higiglx] {
        background: #3B82F6;
        border-color: #3B82F6;
        color: white;
    }

        .glass-btn.glass-btn-primary:hover[b-o31higiglx] {
            background: #2563EB;
            border-color: #2563EB;
            box-shadow: 0 10px 20px -12px #2563EB;
        }

    .glass-btn.btn-sm[b-o31higiglx] {
        padding: 0.4rem 1rem;
        font-size: 0.85rem;
    }

/* Etched Tabs */
.etched-tabs[b-o31higiglx] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    background: rgba(255, 255, 255, 0.5);
    padding: 0.5rem;
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.etched-tab[b-o31higiglx] {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    border-radius: 40px;
    color: #5A6F84;
    font-weight: 500;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

    .etched-tab:hover[b-o31higiglx] {
        background: rgba(255, 255, 255, 0.7);
        color: #1A2B3C;
    }

    .etched-tab.active[b-o31higiglx] {
        background: white;
        color: #2563EB;
        box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.1);
    }

    .etched-tab i[b-o31higiglx] {
        font-size: 1.1rem;
    }

/* Tab Content */
.tab-content[b-o31higiglx] {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    padding: 1.5rem;
}

/* Data Glass Items */
.data-glass-item[b-o31higiglx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
}

    .data-glass-item:last-child[b-o31higiglx] {
        border-bottom: none;
    }

.data-label[b-o31higiglx] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #5A6F84;
    font-size: 0.9rem;
}

    .data-label i[b-o31higiglx] {
        color: #3B82F6;
        width: 20px;
        font-size: 1rem;
    }

.data-value[b-o31higiglx] {
    color: #1A2B3C;
    font-weight: 500;
    text-align: right;
}

/* Form Elements */
.form-group[b-o31higiglx] {
    margin-bottom: 1rem;
}

.form-label[b-o31higiglx] {
    color: #2C3E50;
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: block;
}

    .form-label i[b-o31higiglx] {
        color: #3B82F6;
    }

.glass-input[b-o31higiglx] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 14px;
    color: #1A2B3C;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

    .glass-input:focus[b-o31higiglx] {
        outline: none;
        border-color: #3B82F6;
        background: white;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

    .glass-input.border-danger[b-o31higiglx] {
        border-color: #EF4444;
    }

/* Glass Modal Styles */
.floating-glass-modal[b-o31higiglx] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
    animation: modalFadeIn-b-o31higiglx 0.2s ease;
}

@keyframes modalFadeIn-b-o31higiglx {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-glass[b-o31higiglx] {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 32px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 30px 60px -20px rgba(0, 30, 60, 0.3);
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalSlideUp-b-o31higiglx 0.3s ease;
}

@keyframes modalSlideUp-b-o31higiglx {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-glass-header[b-o31higiglx] {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-body[b-o31higiglx] {
    padding: 2rem;
}

.modal-footer[b-o31higiglx] {
    border-top: 1px solid rgba(59, 130, 246, 0.15);
    padding: 1.5rem 2rem;
}

.glass-border[b-o31higiglx] {
    border: 1px solid rgba(59, 130, 246, 0.15);
}

/* File Upload Area */
.frost-glass[b-o31higiglx] {
    background: rgba(255, 255, 255, 0.5);
    border: 2px dashed rgba(59, 130, 246, 0.3);
    border-radius: 20px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .frost-glass:hover[b-o31higiglx] {
        border-color: #3B82F6;
        background: rgba(255, 255, 255, 0.7);
    }

.file-input[b-o31higiglx] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.upload-instructions[b-o31higiglx] {
    color: #5A6F84;
}

    .upload-instructions i[b-o31higiglx] {
        color: #3B82F6;
    }

/* Scrollbar Styling */
[b-o31higiglx]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[b-o31higiglx]::-webkit-scrollbar-track {
    background: rgba(59, 130, 246, 0.05);
    border-radius: 8px;
}

[b-o31higiglx]::-webkit-scrollbar-thumb {
    background: rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

    [b-o31higiglx]::-webkit-scrollbar-thumb:hover {
        background: rgba(59, 130, 246, 0.3);
    }

/* Responsive Design */
@media (max-width: 1200px) {
    .etched-tabs[b-o31higiglx] {
        flex-wrap: wrap;
    }

    .etched-tab[b-o31higiglx] {
        flex: 1 1 auto;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .container-fluid.crystal-glass[b-o31higiglx] {
        padding: 1rem;
    }

    .glass-header[b-o31higiglx] {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .etched-tabs[b-o31higiglx] {
        flex-direction: column;
        border-radius: 20px;
    }

    .etched-tab[b-o31higiglx] {
        width: 100%;
        justify-content: center;
    }

    .modal-glass[b-o31higiglx] {
        margin: 1rem;
    }

    .modal-glass-header[b-o31higiglx] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .data-glass-item[b-o31higiglx] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .data-value[b-o31higiglx] {
        text-align: left;
    }
}

/* Checkbox Styling */
.form-check-input[b-o31higiglx] {
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 0.5rem;
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-radius: 6px;
    background: white;
    cursor: pointer;
}

    .form-check-input:checked[b-o31higiglx] {
        background-color: #3B82F6;
        border-color: #3B82F6;
    }

.form-check-label[b-o31higiglx] {
    color: #2C3E50;
    font-size: 0.9rem;
}

/* Responsive Grid Gaps */
.row.g-4[b-o31higiglx] {
    --bs-gutter-y: 1.5rem;
}

/* Selection Styling */
[b-o31higiglx]::selection {
    background: rgba(59, 130, 246, 0.2);
    color: #1A2B3C;
}

/* Loading States */
.glass-btn:disabled[b-o31higiglx] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Tooltips */
[data-tooltip][b-o31higiglx] {
    position: relative;
}

    [data-tooltip]:hover[b-o31higiglx]::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        padding: 0.5rem 1rem;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(4px);
        border-radius: 8px;
        color: #1A2B3C;
        font-size: 0.85rem;
        white-space: nowrap;
        border: 1px solid rgba(59, 130, 246, 0.2);
        box-shadow: 0 5px 15px -8px rgba(0, 0, 0, 0.1);
        z-index: 1100;
    }

/* Patient Name in List */
.patient-list-name[b-o31higiglx] {
    font-weight: 600;
    color: #1A2B3C;
    margin-bottom: 0.25rem;
}

/* Additional Emoji-like Icon Styling */
.fa-user-injured.glow-effect[b-o31higiglx] {
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.3));
}

.fa-venus-mars[b-o31higiglx], .fa-birthday-cake[b-o31higiglx], .fa-id-card[b-o31higiglx] {
    color: #3B82F6;
}

/* Status Indicators */
.text-subtle i[b-o31higiglx] {
    color: #8A9FB0;
    margin-right: 0.25rem;
}

/* Modal Title */
.modal-title[b-o31higiglx] {
    color: #1A2B3C;
    font-weight: 600;
}

/* Age Badge */
.small.text-subtle .glass-badge[b-o31higiglx] {
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    background: rgba(59, 130, 246, 0.1);
}

/* Hover Effects */
.glass-icon:hover[b-o31higiglx] {
    transform: scale(1.05);
    background: white;
    border-color: #3B82F6;
}

/* Patient Count Badge Animation */
@keyframes subtlePulse-b-o31higiglx {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

.glass-badge i[b-o31higiglx] {
    animation: subtlePulse-b-o31higiglx 2s ease-in-out infinite;
}
/* Glass Button - Danger Variant (Delete) */
.glass-btn.glass-btn-danger[b-o31higiglx] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #DC2626;
}

    .glass-btn.glass-btn-danger:hover:not(:disabled)[b-o31higiglx] {
        background: #EF4444;
        border-color: #EF4444;
        color: white;
        box-shadow: 0 10px 20px -12px rgba(239, 68, 68, 0.5);
    }

    .glass-btn.glass-btn-danger:disabled[b-o31higiglx] {
        background: rgba(239, 68, 68, 0.05);
        border-color: rgba(239, 68, 68, 0.15);
        color: rgba(220, 38, 38, 0.5);
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

/* Delete-specific glass icon variant (used in delete modal header) */
.glass-icon.glass-danger[b-o31higiglx] {
    color: #DC2626;
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.25);
}

/* Danger variant for the alert inside delete modal — slight tweak from default */
.glass-alert.glass-alert-danger ul[b-o31higiglx] {
    padding-left: 1.25rem;
    margin-top: 0.5rem;
}

    .glass-alert.glass-alert-danger ul li[b-o31higiglx] {
        margin-bottom: 0.25rem;
    }
/* _content/ZenZonApp/Components/Pages/PatientSoap.razor.rz.scp.css */
/* Glassmorphism Base Styles */
.glass-tab.disabled[b-51z5yiv9kd] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.glass-container[b-51z5yiv9kd] {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
}

.glass-card[b-51z5yiv9kd] {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.glass-button[b-51z5yiv9kd] {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(135, 206, 250, 1.0);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    padding: 10px 20px;
    color: #146093;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

    .glass-button:hover[b-51z5yiv9kd] {
        background: rgba(0, 255, 255, 0.95);
        border-color: rgba(52, 152, 219, 0.3);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

.glass-back-button[b-51z5yiv9kd] {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(52, 152, 219, 0.3);
    border-radius: 8px;
    padding: 10px 20px;
    color: #3498db;
    font-weight: 500;
    transition: all 0.3s ease;
}

    .glass-back-button:hover[b-51z5yiv9kd] {
        background: rgba(52, 152, 219, 0.1);
        transform: translateY(-1px);
    }

/* Tab Styles */
.glass-tab[b-51z5yiv9kd] {
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    color: #555;
    padding: 12px 24px;
    margin: 0 2px;
    transition: all 0.3s ease;
}

    .glass-tab:hover[b-51z5yiv9kd] {
        background: rgba(255, 255, 255, 0.7);
        color: #0c5281;
    }

    .glass-tab.active[b-51z5yiv9kd] {
        background: rgba(255, 255, 255, 0.9);
        color: #0c5281;
        border-color: rgba(52, 152, 219, 0.3);
        font-weight: 600;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
    }

/* RMT Action Bar Components */
.rmt-action-bar.glass-card[b-51z5yiv9kd] {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.glass-icon[b-51z5yiv9kd] {
    width: 48px;
    height: 48px;
    background: rgba(52, 152, 219, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #146093;
    font-size: 1.2rem;
    backdrop-filter: blur(4px);
}

.glass-title[b-51z5yiv9kd] {
    color: #146093;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.glass-subtitle[b-51z5yiv9kd] {
    color: #146093;
    font-size: 0.9rem;
}

.glass-badge[b-51z5yiv9kd] {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(52, 152, 219, 0.2);
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 0.85rem;
    color: #146093;
    display: inline-flex;
    align-items: center;
}

.glass-practitioner-badge[b-51z5yiv9kd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.glass-avatar[b-51z5yiv9kd] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: #146093;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

    .glass-avatar img[b-51z5yiv9kd] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.glass-practitioner-info[b-51z5yiv9kd] {
    text-align: center;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    padding: 8px 12px;
    min-width: 120px;
}

.glass-practitioner-name[b-51z5yiv9kd] {
    display: block;
    font-weight: 600;
    color: #146093;
    font-size: 0.9rem;
}

.glass-practitioner-title[b-51z5yiv9kd] {
    display: block;
    color: #146093;
    font-size: 0.8rem;
}

/* Text Readability */
body[b-51z5yiv9kd] {
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e9f2 100%);
    color: #146093;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

h3[b-51z5yiv9kd] {
    color: #146093;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

h5[b-51z5yiv9kd] {
    color: #146093;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.text-primary[b-51z5yiv9kd] {
    color: #146093 !important;
}

/* Improved spacing */
.mb-4[b-51z5yiv9kd] {
    margin-bottom: 1.5rem !important;
}
.btn-gradient[b-51z5yiv9kd] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    gap: 8px;
    box-shadow: 0 4px 6px rgba(102, 126, 234, 0.2);
    overflow: hidden;
}

/* PT Action Bar Specific Styles */
.pt-action-bar[b-51z5yiv9kd] {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(41, 128, 185, 0.1));
    border-left: 4px solid rgba(52, 152, 219, 0.4);
}

    .pt-action-bar .glass-icon[b-51z5yiv9kd] {
        background: rgba(52, 152, 219, 0.2);
        color: #3498db;
        border-color: rgba(52, 152, 219, 0.4);
    }

    .pt-action-bar .glass-title[b-51z5yiv9kd] {
        color: #2c3e50;
        font-size: 1.25rem;
    }

    .pt-action-bar .glass-subtitle[b-51z5yiv9kd] {
        color: #3498db;
        font-size: 1rem;
    }

    /* PT Specific Badge Colors */
    .pt-action-bar .glass-badge[b-51z5yiv9kd] {
        background: rgba(52, 152, 219, 0.15);
        border-color: rgba(52, 152, 219, 0.3);
        color: #2c3e50;
    }

/* PT Button Colors */
.glass-button-primary[b-51z5yiv9kd] {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.9), rgba(41, 128, 185, 0.9));
    border-color: rgba(52, 152, 219, 0.5);
}

    .glass-button-primary:hover[b-51z5yiv9kd] {
        background: linear-gradient(135deg, rgba(52, 152, 219, 1), rgba(41, 128, 185, 1));
        border-color: rgba(52, 152, 219, 0.7);
    }

.glass-button-secondary[b-51z5yiv9kd] {
    background: rgba(52, 152, 219, 0.15);
    border-color: rgba(52, 152, 219, 0.3);
    color: #3498db;
}

    .glass-button-secondary:hover[b-51z5yiv9kd] {
        background: rgba(52, 152, 219, 0.25);
        border-color: rgba(52, 152, 219, 0.5);
    }

/* PT Practitioner Badge */
.pt-action-bar .glass-practitioner-badge[b-51z5yiv9kd] {
    border-left-color: #3498db;
}

/* ===== GLASS SHARING CONTROLS ===== */

/* Main container */
.tab-sharing-container[b-51z5yiv9kd] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(240, 248, 255, 0.8));
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 15px 20px;
    border: 1px solid rgba(30, 144, 255, 0.2);
    box-shadow: 0 8px 32px rgba(30, 144, 255, 0.08);
    margin-bottom: 24px;
}

/* Sharing controls panel - using existing glass-form-section */
.sharing-controls-panel[b-51z5yiv9kd] {
    backdrop-filter: blur(12px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(240, 248, 255, 0.75));
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(30, 144, 255, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.7);
    transition: all 0.35s ease;
    min-width: 500px;
}

/* Share indicator in tabs */
.glass-shared-indicator[b-51z5yiv9kd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, rgba(30, 144, 255, 0.2), rgba(65, 105, 225, 0.15));
    border-radius: 50%;
    color: #1e90ff;
    font-size: 0.7rem;
}

/* Checkbox group for sharing */
.glass-checkbox-group[b-51z5yiv9kd] {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

/* Inline checkbox items for sharing */
.sharing-controls-panel .glass-checkbox-item-inline[b-51z5yiv9kd] {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(240, 248, 255, 0.6)) !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.06) !important;
}

    .sharing-controls-panel .glass-checkbox-item-inline:hover[b-51z5yiv9kd] {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(240, 248, 255, 0.75)) !important;
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(30, 144, 255, 0.12) !important;
    }

    .sharing-controls-panel .glass-checkbox-item-inline.selected[b-51z5yiv9kd] {
        background: linear-gradient(135deg, rgba(30, 144, 255, 0.15), rgba(65, 105, 225, 0.1)) !important;
        border-color: rgba(30, 144, 255, 0.4) !important;
        box-shadow: 0 0 20px rgba(30, 144, 255, 0.15) !important;
    }

/* Main share checkbox */
.sharing-controls-panel .glass-checkbox-container[b-51z5yiv9kd] {
    padding: 8px 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(240, 248, 255, 0.6));
    border-radius: 12px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.06);
}

.sharing-controls-panel .glass-checkbox-label-large[b-51z5yiv9kd] {
    font-size: 1rem;
    color: rgba(25, 25, 112, 0.95);
}

/* Share status badge */
.share-status-badge[b-51z5yiv9kd] {
    background: linear-gradient(135deg, rgba(30, 144, 255, 0.2), rgba(65, 105, 225, 0.15)) !important;
    border: 1px solid rgba(30, 144, 255, 0.3) !important;
    color: #0047ab !important;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 20px;
    backdrop-filter: blur(5px);
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Responsive design */
@media (max-width: 1200px) {
    .tab-sharing-container[b-51z5yiv9kd] {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }

    .sharing-controls-panel[b-51z5yiv9kd] {
        min-width: 100%;
    }
}

@media (max-width: 768px) {
    .tab-sharing-container[b-51z5yiv9kd] {
        padding: 12px 15px;
        border-radius: 16px;
    }

    .sharing-controls-panel[b-51z5yiv9kd] {
        padding: 15px !important;
    }

    .glass-checkbox-group[b-51z5yiv9kd] {
        gap: 10px;
        justify-content: center;
    }

    .sharing-controls-panel .glass-checkbox-item-inline[b-51z5yiv9kd] {
        flex: 1 0 calc(50% - 10px);
        justify-content: center;
    }

    .sharing-controls-panel .glass-checkbox-container[b-51z5yiv9kd] {
        width: 100%;
        text-align: center;
    }
}

/* Animation for checkboxes appearing */
@keyframes slideInCheckboxes-b-51z5yiv9kd {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.glass-checkbox-group[b-51z5yiv9kd] {
    animation: slideInCheckboxes-b-51z5yiv9kd 0.3s ease-out;
}
/* ===== ENHANCED TAB STYLING - MATCHING PATIENT NAME ===== */

.glass-tab-container-enhanced[b-51z5yiv9kd] {
    position: relative;
    z-index: 1;
}

.enhanced-tab[b-51z5yiv9kd] {
    /* glass */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(235, 245, 255, 0.86)) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    /* stronger blue border like Px header */
    border: 2px solid rgba(0, 86, 179, 0.45) !important;
    border-bottom: none !important;
    /* Px name color */
    color: #0056b3 !important;
    /* bigger + slightly taller */
    font-weight: 800 !important;
    font-size: 1.02rem !important;
    padding: 16px 30px !important; /* wider + higher */
    min-width: 132px; /* wider */
    height: 54px; /* consistent height */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-right: 10px !important;
    border-radius: 18px 18px 0 0 !important;
    transition: all 0.35s ease !important;
    position: relative;
    overflow: hidden;
    text-align: center;
    /* strong blue glass shadow accent */
    box-shadow: 0 -10px 26px rgba(0, 86, 179, 0.22), 0 10px 28px rgba(0, 123, 255, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.70) inset, 0 0 24px rgba(0, 123, 255, 0.20) !important;
}
/* Ensure Bootstrap doesn't flatten the enhanced tabs */
.nav-tabs .nav-link.enhanced-tab[b-51z5yiv9kd] {
    border-bottom-color: transparent !important;
    margin-bottom: 0 !important;
}

    .nav-tabs .nav-link.enhanced-tab.active[b-51z5yiv9kd] {
        border-bottom-color: transparent !important;
    }

    /* inner glass sheen */
    .enhanced-tab[b-51z5yiv9kd]::before {
        content: '';
        position: absolute;
        top: 1px;
        left: 1px;
        right: 1px;
        bottom: 0;
        background: linear-gradient( to bottom, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.28) 55%, transparent 100% );
        border-radius: 16px 16px 0 0;
        pointer-events: none;
        z-index: 1;
    }

    /* hover: more pop + stronger blue */
    .enhanced-tab:hover:not(.disabled)[b-51z5yiv9kd] {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(235, 246, 255, 0.92)) !important;
        border-color: rgba(0, 86, 179, 0.70) !important;
        transform: translateY(-4px);
        box-shadow: 0 -14px 34px rgba(0, 86, 179, 0.30), 0 14px 36px rgba(0, 123, 255, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.78) inset, 0 0 34px rgba(0, 123, 255, 0.28) !important;
        color: #004085 !important;
    }

    /* active: strongest border + blue “neon” glass rim */
.enhanced-tab.active[b-51z5yiv9kd] {
    /* keep same geometry as inactive */
    transform: none !important;
    padding: 16px 30px !important;
    height: 54px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.985), rgba(246, 250, 255, 0.965)) !important;
    border-color: rgba(0, 86, 179, 0.92) !important;
    /* same color as "RMT Session Note #4" */
    color: #0c5281 !important;
    font-weight: 900 !important;
    /* strong accent but not “bigger” */
    box-shadow: 0 -14px 34px rgba(0, 86, 179, 0.30), 0 14px 36px rgba(0, 123, 255, 0.22), 0 0 0 2px rgba(255, 255, 255, 0.72) inset, 0 0 34px rgba(0, 123, 255, 0.28) !important;
    z-index: 10;
    position: relative;
}

        /* active top accent line (stronger + bluer) */
        .enhanced-tab.active[b-51z5yiv9kd]::after {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            height: 6px;
            background: linear-gradient(90deg, #0056b3, #00a3ff, #007bff, #0056b3);
            border-radius: 6px 6px 0 0;
            box-shadow: 0 0 26px rgba(0, 123, 255, 0.55);
            z-index: 2;
        }
    /* Make the shiny cap stronger on ACTIVE tab */
    .enhanced-tab.active[b-51z5yiv9kd]::after {
        opacity: 1 !important;
        height: 8px;
        background: linear-gradient( 90deg, rgba(0, 86, 179, 0.15), rgba(0, 123, 255, 0.70), rgba(0, 163, 255, 1.0), rgba(0, 123, 255, 0.70), rgba(0, 86, 179, 0.15) );
        box-shadow: 0 0 22px rgba(0, 123, 255, 0.55), 0 0 44px rgba(0, 163, 255, 0.28);
    }

.enhanced-tab.active i[b-51z5yiv9kd] {
    color: #0c5281 !important;
}

    /* icons match Px blue + a touch sharper */
.enhanced-tab i[b-51z5yiv9kd] {
    font-size: 0.95rem;
    color: #0c5281 !important;
    filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.55));
    transition: all 0.25s ease;
}

    .enhanced-tab:hover:not(.disabled) i[b-51z5yiv9kd] {
        transform: scale(1.08);
        color: #004085;
    }

    .enhanced-tab.active i[b-51z5yiv9kd] {
        color: #002752;
        filter: drop-shadow(0 2px 3px rgba(0, 86, 179, 0.18));
    }

    /* Glass effect inner glow */
    .enhanced-tab[b-51z5yiv9kd]::before {
        content: '';
        position: absolute;
        top: 1px;
        left: 1px;
        right: 1px;
        bottom: 0;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
        border-radius: 14px 14px 0 0;
        pointer-events: none;
        z-index: 1;
    }

    .enhanced-tab:hover:not(.disabled)[b-51z5yiv9kd] {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 248, 255, 0.92)) !important;
        border-color: rgba(0, 86, 179, 0.5) !important;
        transform: translateY(-4px);
        box-shadow: 0 -6px 24px rgba(0, 86, 179, 0.2), 0 6px 28px rgba(0, 86, 179, 0.18), inset 0 1px 1px rgba(255, 255, 255, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.8) !important;
        color: #004085 !important; /* Darker blue on hover */
    }

    .enhanced-tab.active[b-51z5yiv9kd] {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 255, 0.96)) !important;
        border-color: rgba(0, 86, 179, 0.7) !important;
        color: #002752 !important; /* Even darker blue for active */
        font-weight: 800 !important;
        box-shadow: 0 -8px 28px rgba(0, 86, 179, 0.25), 0 8px 32px rgba(0, 86, 179, 0.22), inset 0 2px 2px rgba(255, 255, 255, 0.95), 0 0 0 2px rgba(255, 255, 255, 0.7) !important;
        z-index: 10;
        position: relative;
    }

        /* Active tab top border effect */
        .enhanced-tab.active[b-51z5yiv9kd]::after {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            height: 5px;
            background: linear-gradient(90deg, rgba(0, 86, 179, 0.8), rgba(0, 123, 255, 0.9), rgba(0, 86, 179, 0.8));
            border-radius: 5px 5px 0 0;
            box-shadow: 0 0 20px rgba(0, 86, 179, 0.5);
            z-index: 2;
        }

        /* Blue border accent */
        .enhanced-tab.active .tab-border-accent[b-51z5yiv9kd] {
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #0056b3, #007bff, #0056b3);
            border-radius: 3px;
            box-shadow: 0 2px 8px rgba(0, 86, 179, 0.4);
        }

    .enhanced-tab.disabled[b-51z5yiv9kd] {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(240, 248, 255, 0.5)) !important;
        border-color: rgba(0, 86, 179, 0.2) !important;
        color: rgba(0, 86, 179, 0.4) !important;
        cursor: not-allowed;
        box-shadow: 0 -2px 10px rgba(0, 86, 179, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
    }

    /* Tab icons - matching patient name color */
    .enhanced-tab i[b-51z5yiv9kd] {
        font-size: 0.9rem;
        transition: all 0.3s ease;
        color: #0056b3;
    }

    .enhanced-tab:hover:not(.disabled) i[b-51z5yiv9kd] {
        transform: scale(1.1);
        color: #004085;
    }

    .enhanced-tab.active i[b-51z5yiv9kd] {
        color: #002752;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
    }

/* Share indicator in tabs - blue theme */
.glass-shared-indicator[b-51z5yiv9kd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, rgba(0, 86, 179, 0.2), rgba(0, 123, 255, 0.15));
    border: 1px solid rgba(0, 86, 179, 0.3);
    border-radius: 50%;
    color: #0056b3;
    font-size: 0.7rem;
    margin-left: 4px;
    animation: pulse-blue-b-51z5yiv9kd 2s infinite;
}

@keyframes pulse-blue-b-51z5yiv9kd {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(0, 86, 179, 0.4);
    }

    50% {
        box-shadow: 0 0 0 4px rgba(0, 86, 179, 0);
    }
}

/* SOAP Notes label styling - matching patient name */
.glass-title[b-51z5yiv9kd] {
    color: #0056b3; /* Same as patient name */
    font-weight: 700;
    font-size: 1.2rem;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
}

    .glass-title i[b-51z5yiv9kd] {
        color: #007bff; /* Lighter blue for icon */
        font-size: 1.1rem;
        margin-right: 8px;
    }

/* Tab container - enhanced glass effect */
.tab-sharing-container[b-51z5yiv9kd] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(240, 248, 255, 0.88));
    backdrop-filter: blur(15px);
    border-radius: 20px;
    padding: 20px 25px;
    border: 1px solid rgba(0, 86, 179, 0.2);
    box-shadow: 0 12px 40px rgba(0, 86, 179, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.6) !important;
    margin-bottom: 24px;
    position: relative;
}

/* Patient header styling */
.text-center.mb-0 h3.fw-bold.text-primary[b-51z5yiv9kd] {
    color: #0056b3 !important; /* Ensure patient name uses same color */
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.5);
    margin-bottom: 20px;
    font-size: 1.8rem;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .tab-sharing-container[b-51z5yiv9kd] {
        flex-direction: column;
        gap: 20px;
    }

    .d-flex.align-items-center.flex-grow-1[b-51z5yiv9kd] {
        flex-direction: column;
        align-items: stretch;
    }

    .glass-title[b-51z5yiv9kd] {
        margin-bottom: 15px;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .enhanced-tab[b-51z5yiv9kd] {
        padding: 12px 16px !important;
        font-size: 0.85rem !important;
        min-width: 80px;
        margin-bottom: 5px;
    }

        .enhanced-tab i[b-51z5yiv9kd] {
            font-size: 0.8rem;
            margin-right: 4px;
        }

    .tab-sharing-container[b-51z5yiv9kd] {
        padding: 15px 18px;
        border-radius: 16px;
    }

    .glass-title[b-51z5yiv9kd] {
        font-size: 1.1rem;
    }

    .text-center.mb-0 h3.fw-bold.text-primary[b-51z5yiv9kd] {
        font-size: 1.5rem;
    }
}
/* ===== Shiny blue cap on ALL tabs (like appointment accent) ===== */
.enhanced-tab[b-51z5yiv9kd] {
    /* match "RMT Session Note #4" title blue */
    color: #0c5281 !important;
}

    /* glossy top cap */
    .enhanced-tab[b-51z5yiv9kd]::after {
        content: "";
        position: absolute;
        left: 10px;
        right: 10px;
        top: 6px;
        height: 7px;
        border-radius: 999px;
        background: linear-gradient( 90deg, rgba(0, 86, 179, 0.10), rgba(0, 123, 255, 0.55), rgba(0, 163, 255, 0.85), rgba(0, 123, 255, 0.55), rgba(0, 86, 179, 0.10) );
        box-shadow: 0 0 18px rgba(0, 123, 255, 0.40), 0 0 34px rgba(0, 163, 255, 0.22);
        opacity: 0.85;
        pointer-events: none;
        z-index: 3;
    }
/* _content/ZenZonApp/Components/Pages/PatientSoapTab.razor.rz.scp.css */
.nav-tabs .nav-link.active[b-ahyxqxedys] {
    color: #8B0000 !important; /* Dark Red */
    font-weight: 600;
}
.btn-clear-filter[b-ahyxqxedys] {
    background-color: #198754; /* Bootstrap green */
    color: #ffffff;
    border-color: #198754;
}

    .btn-clear-filter:hover[b-ahyxqxedys] {
        background-color: #157347;
        border-color: #146c43;
        color: #ffffff;
    }
.lbl-search-date[b-ahyxqxedys] {
    color: #0d3b66; /* Dark blue */
    font-weight: 500;
}
<style >
/* FULL SCREEN MODAL STYLING */
.modal-fullscreen .modal-content[b-ahyxqxedys] {
    height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
}

.modal-body[b-ahyxqxedys] {
    flex: 1;
    overflow: hidden;
    padding: 0 !important;
}

/* Letter Format Styling - Full Height */
.letter-preview[b-ahyxqxedys] {
    background-color: white;
    min-height: 100%;
    padding: 2rem;
    font-family: 'Times New Roman', Times, serif;
    font-size: 12pt;
    line-height: 1.5;
    overflow-y: auto;
    height: 100%;
}

/* Responsive letter header */
.letter-header[b-ahyxqxedys] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    border-bottom: 2px solid #333;
    padding-bottom: 1rem;
    gap: 1rem;
}

.clinic-info[b-ahyxqxedys] {
    flex: 1;
    min-width: 300px;
}

    .clinic-info h3[b-ahyxqxedys] {
        font-size: 16pt;
        margin: 0;
        color: #2c3e50;
    }

    .clinic-info p[b-ahyxqxedys] {
        margin: 0.25rem 0;
        font-size: 10pt;
        color: #666;
    }

.patient-info[b-ahyxqxedys] {
    text-align: right;
    min-width: 200px;
}

    .patient-info h4[b-ahyxqxedys] {
        font-size: 14pt;
        margin: 0 0 0.5rem 0;
        color: #2c3e50;
    }

    .patient-info p[b-ahyxqxedys] {
        margin: 0.25rem 0;
        font-size: 10pt;
    }

/* Letter content - takes remaining space */
.letter-content[b-ahyxqxedys] {
    flex: 1;
    min-height: 0;
    margin: 2rem 0;
    overflow-y: auto;
}

/* SOAP content styling */
.soap-preview[b-ahyxqxedys] {
    min-height: 100%;
}

    .soap-preview h4[b-ahyxqxedys] {
        color: #2c3e50;
        border-bottom: 1px solid #3498db;
        padding-bottom: 0.5rem;
        margin-bottom: 1.5rem;
        font-size: 14pt;
    }

    .soap-preview h5[b-ahyxqxedys] {
        color: #34495e;
        margin-top: 1.5rem;
        margin-bottom: 0.5rem;
        font-size: 12pt;
        font-weight: bold;
    }

    .soap-preview p[b-ahyxqxedys] {
        margin-bottom: 1rem;
        white-space: pre-wrap;
        word-break: break-word;
    }

    .soap-preview ul[b-ahyxqxedys] {
        padding-left: 1.5rem;
        margin-bottom: 1rem;
    }

    .soap-preview li[b-ahyxqxedys] {
        margin-bottom: 0.25rem;
    }

    .soap-preview hr[b-ahyxqxedys] {
        margin: 1.5rem 0;
        border: none;
        border-top: 1px solid #ddd;
    }

/* Footer styling */
.letter-footer[b-ahyxqxedys] {
    margin-top: 2rem;
    border-top: 2px solid #333;
    padding-top: 1rem;
    flex-shrink: 0;
}

.signature-section[b-ahyxqxedys] {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 2rem 0;
    gap: 1rem;
}

.therapist-signature[b-ahyxqxedys],
.patient-signature[b-ahyxqxedys] {
    text-align: center;
    flex: 1;
    min-width: 200px;
}

    .therapist-signature p[b-ahyxqxedys],
    .patient-signature p[b-ahyxqxedys] {
        margin: 0.5rem 0;
    }

.footer-notes[b-ahyxqxedys] {
    text-align: center;
    font-size: 9pt;
    color: #666;
    margin-top: 2rem;
}

/* Scrollbar styling */
.letter-preview[b-ahyxqxedys]::-webkit-scrollbar {
    width: 8px;
}

.letter-preview[b-ahyxqxedys]::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.letter-preview[b-ahyxqxedys]::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

    .letter-preview[b-ahyxqxedys]::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

/* Print styles */
@@media print {
    body *[b-ahyxqxedys] {
        visibility: hidden;
    }

    #printArea[b-ahyxqxedys],
    #printArea *[b-ahyxqxedys] {
        visibility: visible;
    }

    #printArea[b-ahyxqxedys] {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    .letter-preview[b-ahyxqxedys] {
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: none !important;
        min-height: auto !important;
        height: auto !important;
    }

    .modal-header[b-ahyxqxedys],
    .modal-footer[b-ahyxqxedys],
    .btn-close[b-ahyxqxedys] {
        display: none !important;
    }

    .letter-header[b-ahyxqxedys] {
        page-break-after: avoid;
    }

    .letter-footer[b-ahyxqxedys] {
        page-break-before: avoid;
    }
}

/* Mobile responsive */
@@media (max-width: 768px) {
    .letter-header[b-ahyxqxedys] {
        flex-direction: column;
    }

    .patient-info[b-ahyxqxedys] {
        text-align: left;
    }

    .letter-preview[b-ahyxqxedys] {
        padding: 1rem;
        font-size: 11pt;
    }

    .signature-section[b-ahyxqxedys] {
        flex-direction: column;
    }

    .therapist-signature[b-ahyxqxedys],
    .patient-signature[b-ahyxqxedys] {
        min-width: 100%;
    }
}

</style[b-ahyxqxedys] >
/* _content/ZenZonApp/Components/Pages/Practitioners.razor.rz.scp.css */
.text-darkblue[b-gzwgy5ayro] {
    color: #003366 !important;
}

/* Make grid headers / labels DarkBlue for this page */
.page-practitioners th[b-gzwgy5ayro],
.page-practitioners td[b-gzwgy5ayro],
.page-practitioners label[b-gzwgy5ayro] {
    color: #003366;
}

/* Slightly lighter cells so the blue text is readable */
.page-practitioners tbody tr:nth-child(odd)[b-gzwgy5ayro] {
    background-color: #f9fbff;
}

/* Photo in grid + preview */
.practitioner-photo-grid[b-gzwgy5ayro] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.practitioner-photo-preview[b-gzwgy5ayro] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

/* Glassmorphism backdrop */
.glass-backdrop[b-gzwgy5ayro] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(173, 216, 230, 0.15); /* Changed from white to light blue */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1040;
}

/* Glass modal container */
.glass-modal[b-gzwgy5ayro] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

/* Glass dialog */
.glass-dialog[b-gzwgy5ayro] {
    width: 100%;
    max-width: 1140px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1), 0 4px 16px rgba(31, 38, 135, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    overflow: hidden;
}

/* Glass content */
.glass-content[b-gzwgy5ayro] {
    background: rgba(173, 216, 230, 0.05); /* Added light blue transparency */
    border: none;
}

/* Glass header */
.glass-header[b-gzwgy5ayro] {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    padding: 1.5rem 1.5rem 1rem;
}

.glass-title[b-gzwgy5ayro] {
    color: #2c3e50;
    font-weight: 600;
    font-size: 1.5rem;
    background: linear-gradient(135deg, #2c3e50, #3498db);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.glass-close-btn[b-gzwgy5ayro] {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

    .glass-close-btn:hover[b-gzwgy5ayro] {
        background: rgba(255, 255, 255, 0.9);
        border-color: rgba(52, 152, 219, 0.3);
        transform: scale(1.05);
    }

/* Glass body */
.glass-body[b-gzwgy5ayro] {
    background: rgba(255, 255, 255, 0.5);
    padding: 2rem 1.5rem;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Glass form inputs */
.glass-input[b-gzwgy5ayro] {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    color: #2c3e50;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04), 0 1px 0 rgba(255, 255, 255, 0.8);
}

    .glass-input:focus[b-gzwgy5ayro] {
        background: rgba(255, 255, 255, 0.95);
        border-color: rgba(52, 152, 219, 0.5);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(52, 152, 219, 0.15), 0 1px 0 rgba(255, 255, 255, 0.8);
        outline: none;
    }

.glass-label[b-gzwgy5ayro] {
    color: #5d6d7e;
    font-weight: 500;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Glass checkbox */
.glass-checkbox[b-gzwgy5ayro] {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: all 0.3s ease;
}

    .glass-checkbox:checked[b-gzwgy5ayro] {
        background-color: #3498db;
        border-color: #3498db;
    }

/* Glass preview containers */
.glass-preview[b-gzwgy5ayro] {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    padding: 1rem;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: all 0.3s ease;
}

    .glass-preview:hover[b-gzwgy5ayro] {
        background: rgba(255, 255, 255, 0.9);
        border-color: rgba(52, 152, 219, 0.3);
    }

/* Image preview */
.practitioner-photo-preview[b-gzwgy5ayro] {
    max-width: 150px;
    max-height: 150px;
    object-fit: cover;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Glass footer */
.glass-footer[b-gzwgy5ayro] {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    padding: 1rem 1.5rem 1.5rem;
}

/* Glass buttons */
.glass-btn[b-gzwgy5ayro] {
    border-radius: 12px;
    padding: 0.75rem 2rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.glass-btn-secondary[b-gzwgy5ayro] {
    background: rgba(236, 240, 241, 0.8);
    color: #7f8c8d;
}

    .glass-btn-secondary:hover[b-gzwgy5ayro] {
        background: rgba(236, 240, 241, 0.95);
        color: #5d6d7e;
        border-color: rgba(189, 195, 199, 0.6);
        transform: translateY(-1px);
    }

.glass-btn-primary[b-gzwgy5ayro] {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.9), rgba(41, 128, 185, 0.9));
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.2);
}

    .glass-btn-primary:hover[b-gzwgy5ayro] {
        background: linear-gradient(135deg, rgba(52, 152, 219, 1), rgba(41, 128, 185, 1));
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(52, 152, 219, 0.3);
    }

.glass-btn-outline-danger[b-gzwgy5ayro] {
    background: rgba(255, 255, 255, 0.6);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.3);
}

    .glass-btn-outline-danger:hover[b-gzwgy5ayro] {
        background: rgba(231, 76, 60, 0.1);
        color: #c0392b;
        border-color: rgba(231, 76, 60, 0.5);
    }

/* File upload styling */
.glass-file-input[b-gzwgy5ayro] {
    background: rgba(255, 255, 255, 0.8);
    border: 2px dashed rgba(52, 152, 219, 0.3);
    border-radius: 12px;
    padding: 1rem;
    transition: all 0.3s ease;
}

    .glass-file-input:hover[b-gzwgy5ayro] {
        background: rgba(255, 255, 255, 0.9);
        border-color: rgba(52, 152, 219, 0.5);
    }

/* Form row spacing */
.glass-row[b-gzwgy5ayro] {
    margin-bottom: 1.5rem;
}

    .glass-row:last-child[b-gzwgy5ayro] {
        margin-bottom: 0;
    }

/* Scrollable body for long content */
.glass-body-scroll[b-gzwgy5ayro] {
    max-height: 70vh;
    overflow-y: auto;
}
/* Glassmorphism Styles */
.glass-modal[b-gzwgy5ayro] {
    --glass-bg: rgba(255, 255, 255, 0.2);
    --glass-border: rgba(255, 255, 255, 0.3);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    --glass-blur: 20px;
    --glass-saturation: 180%;
    --glass-contrast: 120%;
}

    .glass-modal .modal-dialog[b-gzwgy5ayro] {
        animation: glassSlideIn-b-gzwgy5ayro 0.3s ease-out;
    }

    .glass-modal .modal-content[b-gzwgy5ayro] {
        background: var(--glass-bg);
        backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
        -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
        border: 1px solid var(--glass-border);
        box-shadow: var(--glass-shadow);
        border-radius: 20px;
        overflow: hidden;
    }

    .glass-modal .modal-header[b-gzwgy5ayro] {
        background: rgba(255, 255, 255, 0.1);
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        padding: 1.5rem 2rem;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .glass-modal .modal-title[b-gzwgy5ayro] {
        color: #333;
        font-weight: 600;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
    }

    .glass-modal .modal-body[b-gzwgy5ayro] {
        padding: 2rem;
        background: rgba(255, 255, 255, 0.05);
    }

    .glass-modal .form-control[b-gzwgy5ayro],
    .glass-modal .form-select[b-gzwgy5ayro] {
        background: rgba(255, 255, 255, 0.15);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 12px;
        color: #333;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        transition: all 0.3s ease;
    }

        .glass-modal .form-control:focus[b-gzwgy5ayro],
        .glass-modal .form-select:focus[b-gzwgy5ayro] {
            background: rgba(255, 255, 255, 0.25);
            border-color: rgba(255, 255, 255, 0.5);
            box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
            color: #333;
        }

        .glass-modal .form-control:disabled[b-gzwgy5ayro] {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.2);
            color: #666;
        }

    .glass-modal .form-label[b-gzwgy5ayro] {
        color: #444;
        font-weight: 500;
        margin-bottom: 0.5rem;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
    }

    .glass-modal .btn-close[b-gzwgy5ayro] {
        background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
        opacity: 0.8;
        filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.5));
    }

        .glass-modal .btn-close:hover[b-gzwgy5ayro] {
            opacity: 1;
            transform: scale(1.1);
            transition: all 0.2s ease;
        }

    .glass-modal .btn[b-gzwgy5ayro] {
        border-radius: 12px;
        padding: 0.75rem 1.5rem;
        font-weight: 500;
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .glass-modal .btn-primary[b-gzwgy5ayro] {
        background: linear-gradient(135deg, rgba(13, 110, 253, 0.85), rgba(13, 110, 253, 0.65));
        border: 1px solid rgba(13, 110, 253, 0.4);
        color: white;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    }

        .glass-modal .btn-primary:hover[b-gzwgy5ayro] {
            background: linear-gradient(135deg, rgba(13, 110, 253, 0.95), rgba(13, 110, 253, 0.75));
            border-color: rgba(13, 110, 253, 0.6);
            transform: translateY(-1px);
            box-shadow: 0 4px 15px rgba(13, 110, 253, 0.2);
        }

    .glass-modal .btn-secondary[b-gzwgy5ayro] {
        background: linear-gradient(135deg, rgba(108, 117, 125, 0.85), rgba(108, 117, 125, 0.65));
        border: 1px solid rgba(108, 117, 125, 0.4);
        color: white;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    }

        .glass-modal .btn-secondary:hover[b-gzwgy5ayro] {
            background: linear-gradient(135deg, rgba(108, 117, 125, 0.95), rgba(108, 117, 125, 0.75));
            border-color: rgba(108, 117, 125, 0.6);
            transform: translateY(-1px);
            box-shadow: 0 4px 15px rgba(108, 117, 125, 0.2);
        }

    .glass-modal .form-check-input[b-gzwgy5ayro] {
        background-color: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

        .glass-modal .form-check-input:checked[b-gzwgy5ayro] {
            background-color: rgba(13, 110, 253, 0.8);
            border-color: rgba(13, 110, 253, 0.6);
        }

    .glass-modal .validation-message[b-gzwgy5ayro] {
        color: #dc3545;
        font-size: 0.875rem;
        margin-top: 0.25rem;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
    }

    .glass-modal .validation-summary-errors[b-gzwgy5ayro] {
        background: rgba(220, 53, 69, 0.1);
        border: 1px solid rgba(220, 53, 69, 0.2);
        border-radius: 12px;
        padding: 1rem;
        margin-bottom: 1.5rem;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

.glass-backdrop[b-gzwgy5ayro] {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.2), rgba(155, 89, 182, 0.2));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

@keyframes glassSlideIn-b-gzwgy5ayro {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .glass-modal .modal-content[b-gzwgy5ayro] {
        margin: 1rem;
        border-radius: 16px;
    }
}
/* Glassmorphism Styles for Practitioners Component */
.glass-container[b-gzwgy5ayro] {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.glass-form-card[b-gzwgy5ayro] {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.glass-input[b-gzwgy5ayro] {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 123, 255, 0.2);
    border-radius: 8px;
    transition: all 0.3s ease;
}

    .glass-input:focus[b-gzwgy5ayro] {
        background: rgba(255, 255, 255, 1);
        border-color: rgba(0, 123, 255, 0.4);
        box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.1);
        outline: none;
    }

.glass-btn-primary[b-gzwgy5ayro] {
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.9), rgba(0, 86, 179, 0.9));
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

    .glass-btn-primary:hover[b-gzwgy5ayro] {
        background: linear-gradient(135deg, rgba(0, 123, 255, 1), rgba(0, 86, 179, 1));
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
    }

.glass-btn-outline[b-gzwgy5ayro] {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(0, 123, 255, 0.3);
    color: #0d6efd;
    border-radius: 8px;
    transition: all 0.3s ease;
}

    .glass-btn-outline:hover[b-gzwgy5ayro] {
        background: rgba(0, 123, 255, 0.1);
        border-color: rgba(0, 123, 255, 0.5);
    }

.glass-btn-danger[b-gzwgy5ayro] {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: #dc3545;
    border-radius: 8px;
    transition: all 0.3s ease;
}

    .glass-btn-danger:hover[b-gzwgy5ayro] {
        background: rgba(220, 53, 69, 0.2);
        border-color: rgba(220, 53, 69, 0.5);
    }

.glass-table-container[b-gzwgy5ayro] {
    background: rgba(255, 255, 255, 0.08);
}

.glass-table-header[b-gzwgy5ayro] {
    background: linear-gradient(90deg, rgba(0, 123, 255, 0.15), rgba(108, 117, 125, 0.15));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-table[b-gzwgy5ayro] {
    background: transparent;
    margin-bottom: 0;
}

.glass-table-head[b-gzwgy5ayro] {
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

    .glass-table-head th[b-gzwgy5ayro] {
        font-weight: 600;
        color: rgba(0, 0, 0, 0.8);
        border-color: rgba(255, 255, 255, 0.1);
        padding: 12px 16px;
    }

.glass-table-row[b-gzwgy5ayro] {
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

    .glass-table-row:hover[b-gzwgy5ayro] {
        background: rgba(255, 255, 255, 0.1);
        transform: translateY(-1px);
    }

.glass-table-row-inactive[b-gzwgy5ayro] {
    opacity: 0.7;
}

.glass-clickable-cell[b-gzwgy5ayro] {
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px;
    padding: 8px;
}

    .glass-clickable-cell:hover[b-gzwgy5ayro] {
        background: rgba(0, 123, 255, 0.1);
        color: #0d6efd;
    }

.glass-avatar-container[b-gzwgy5ayro] {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.glass-avatar[b-gzwgy5ayro] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.glass-avatar-overlay[b-gzwgy5ayro] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.glass-avatar-container:hover .glass-avatar-overlay[b-gzwgy5ayro] {
    opacity: 1;
}

.glass-avatar-placeholder[b-gzwgy5ayro] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 123, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(0, 123, 255, 0.6);
    border: 2px dashed rgba(0, 123, 255, 0.3);
}

.glass-badge[b-gzwgy5ayro] {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 500;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-badge-success[b-gzwgy5ayro] {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
    border-color: rgba(40, 167, 69, 0.3);
}

.glass-badge-info[b-gzwgy5ayro] {
    background: rgba(23, 162, 184, 0.15);
    color: #17a2b8;
    border-color: rgba(23, 162, 184, 0.3);
}

.glass-badge-secondary[b-gzwgy5ayro] {
    background: rgba(108, 117, 125, 0.15);
    color: #6c757d;
    border-color: rgba(108, 117, 125, 0.3);
}

.glass-badge-light[b-gzwgy5ayro] {
    background: rgba(248, 249, 250, 0.2);
    color: #495057;
}

.glass-code[b-gzwgy5ayro] {
    background: rgba(0, 0, 0, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.glass-empty-state[b-gzwgy5ayro] {
    background: rgba(255, 255, 255, 0.05);
    border: 2px dashed rgba(255, 255, 255, 0.2);
    color: rgba(0, 0, 0, 0.6);
}

.glass-title[b-gzwgy5ayro] {
    background: linear-gradient(90deg, rgba(0, 123, 255, 0.1), transparent);
    padding: 10px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    border-left: 4px solid #0d6efd;
    backdrop-filter: blur(5px);
}

.glass-card-header[b-gzwgy5ayro] {
    background: linear-gradient(90deg, rgba(0, 123, 255, 0.1), rgba(108, 117, 125, 0.1));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-day-badge[b-gzwgy5ayro] {
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(0, 123, 255, 0.1);
    border: 1px solid rgba(0, 123, 255, 0.2);
    font-weight: 500;
    font-size: 0.9em;
}

.glass-time[b-gzwgy5ayro] {
    font-family: 'Courier New', monospace;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.glass-time-break[b-gzwgy5ayro] {
    background: rgba(255, 193, 7, 0.1);
    border-color: rgba(255, 193, 7, 0.2);
    color: #856404;
}

.glass-table-sm[b-gzwgy5ayro] {
    font-size: 0.9em;
}

.glass-table-head-sm[b-gzwgy5ayro] {
    background: rgba(0, 0, 0, 0.05);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .glass-container[b-gzwgy5ayro] {
        border-radius: 12px;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    .glass-form-card .row[b-gzwgy5ayro] {
        margin-right: 0;
    }

    .glass-btn-primary[b-gzwgy5ayro] {
        width: 100%;
        margin-top: 10px;
    }
}
.glass-modal[b-gzwgy5ayro] {
    pointer-events: none;
}

    .glass-modal .glass-dialog[b-gzwgy5ayro],
    .glass-modal .modal-dialog[b-gzwgy5ayro],
    .glass-modal .modal-content[b-gzwgy5ayro] {
        pointer-events: auto;
    }
/* _content/ZenZonApp/Components/Pages/Public/Booking/BookingWizard.razor.rz.scp.css */
/* ----- GLOBAL DESIGN TOKENS (glassmorphism core) ----- */
*[b-irzwu76vqu] {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body[b-irzwu76vqu] {
    background: linear-gradient(145deg, #e6f0fa 0%, #cdddec 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    padding: 1.5rem;
    margin: 0;
}

/* main glass wrapper (outermost) */
.booking-wrapper[b-irzwu76vqu] {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

/* base glass background (used on cards, sidebar, progress) */
.glass-morph[b-irzwu76vqu] {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 24px;
    box-shadow: 0 20px 35px -8px rgba(0, 20, 40, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

/* consistent card style */
.glass-card[b-irzwu76vqu] {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(14px) saturate(200%);
    -webkit-backdrop-filter: blur(14px) saturate(200%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 28px;
    box-shadow: 0 20px 40px -12px rgba(0, 30, 50, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    color: #1a2639;
}

    .glass-card:hover[b-irzwu76vqu] {
        box-shadow: 0 24px 48px -12px rgba(0, 40, 70, 0.3);
    }

/* sidebar (extra compact) */
.sidebar-card[b-irzwu76vqu] {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(12px);
    border-radius: 22px;
    padding: 0.75rem 0.5rem;
    border: 1px solid rgba(255,255,255,0.45);
}

.glass-card-header[b-irzwu76vqu] {
    padding: 0.85rem 1.2rem 0.3rem 1.2rem;
    font-weight: 600;
    color: #0a1a2b;
}

.glass-card-body[b-irzwu76vqu] {
    padding: 0.5rem 1.2rem 1rem 1.2rem;
}

.glass-card-footer[b-irzwu76vqu] {
    padding: 0.8rem 1.2rem 1rem 1.2rem;
    border-top: 1px solid rgba(255,255,255,0.5);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

/* booking item rows (sidebar) */
.booking-item[b-irzwu76vqu] {
    font-size: 0.85rem;
    padding: 0.25rem 0.4rem;
    background: rgba(255,255,255,0.2);
    border-radius: 30px;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid rgba(255,255,255,0.2);
    color: #0b2a3e;
}

/* ---------- PROGRESS BAR (fully glass) ---------- */
.progress.glass-progress[b-irzwu76vqu] {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    border-radius: 40px;
    border: 1px solid rgba(255,255,255,0.4);
    height: 36px !important;
    overflow: hidden;
}

.progress-bar.glass-progress-bar[b-irzwu76vqu] {
    background: rgba(231, 241, 255, 0.6);
    color: #0d6efd;
    font-weight: 500;
    font-size: 0.9rem;
    transition: width 0.3s ease, background-color 0.2s;
    border-right: 1px solid rgba(255,255,255,0.6);
    backdrop-filter: blur(2px);
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(255,255,255,0.3);
}

    .progress-bar.glass-progress-bar:last-child[b-irzwu76vqu] {
        border-right: none;
    }

/* loading glass style */
.glass-loading[b-irzwu76vqu] {
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(6px);
    border-radius: 60px;
    padding: 0.8rem;
    border: 1px solid rgba(255,255,255,0.5);
    color: #1e293b;
}

.glass-spinner[b-irzwu76vqu] {
    filter: drop-shadow(0 2px 4px rgba(0,50,80,0.2));
}

/* ---------- STEP 1: service grid (glass) ---------- */
.services-grid[b-irzwu76vqu] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.service-column[b-irzwu76vqu] {
    flex: 1 1 180px;
    min-width: 150px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(4px);
    border-radius: 24px;
    padding: 0.5rem;
    border: 1px solid rgba(255,255,255,0.3);
}

.service-card[b-irzwu76vqu] {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 0.5rem 0.7rem;
    margin-bottom: 0.5rem;
    border: 1px solid rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 4px 8px rgba(0,0,0,0.02);
}

    .service-card.selected[b-irzwu76vqu] {
        background: rgba(13, 110, 253, 0.25);
        border: 1px solid rgba(13, 110, 253, 0.6);
        box-shadow: 0 8px 18px -8px rgba(13,110,253,0.3);
    }

.svc-row[b-irzwu76vqu] {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 500;
}

.svc-price[b-irzwu76vqu] {
    font-weight: 700;
    font-size: 0.95rem;
    color: #0a58ca;
}

/* ---------- STEP 2: practitioner list (glass) ---------- */
.glass-list[b-irzwu76vqu] {
    background: transparent;
    border-radius: 24px;
    overflow: hidden;
}

.glass-list-item[b-irzwu76vqu] {
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 40px !important;
    margin-bottom: 6px;
    color: #111827;
    transition: all 0.15s;
    padding: 0.5rem 0.8rem;
}

    .glass-list-item.active[b-irzwu76vqu] {
        background: rgba(13, 110, 253, 0.3);
        border-color: rgba(13,110,253,0.7);
        color: #0b2a4a;
    }

.glass-avatar[b-irzwu76vqu] {
    border: 2px solid rgba(255,255,255,0.6);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.glass-avatar-placeholder[b-irzwu76vqu] {
    background: rgba(255,255,255,0.4);
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.6);
}

.glass-badge-primary[b-irzwu76vqu] {
    background: rgba(13, 110, 253, 0.3);
    backdrop-filter: blur(2px);
    color: #0d3e7c;
    border: 1px solid rgba(255,255,255,0.4);
}

/* ---------- STEP 3: schedule (day pills + slots) ---------- */
.glass-day-pill[b-irzwu76vqu] {
    background: rgba(255,255,255,0.25);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 40px;
    color: #0f1c2f;
    font-weight: 500;
    transition: all 0.1s;
}

    .glass-day-pill.selected[b-irzwu76vqu] {
        background: rgba(13, 110, 253, 0.55);
        border-color: #0d6efd;
        color: white;
        box-shadow: 0 8px 16px -8px #0d6efd;
    }

    .glass-day-pill.past[b-irzwu76vqu] {
        opacity: 0.4;
        pointer-events: none;
        filter: grayscale(0.6);
    }

.time-slots-grid[b-irzwu76vqu] {
    padding: 0.2rem 0;
}

.glass-time-slot[b-irzwu76vqu] {
    background: rgba(255,255,255,0.3);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 30px;
    color: #102a41;
    font-weight: 500;
    transition: all 0.1s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}

    .glass-time-slot.available:hover[b-irzwu76vqu] {
        background: rgba(255,255,255,0.6);
        border-color: rgba(13,110,253,0.5);
    }

    .glass-time-slot.selected[b-irzwu76vqu] {
        background: rgba(13, 110, 253, 0.45);
        border-color: #0d6efd;
        color: #0c1f38;
        font-weight: 600;
    }

.legend-dot[b-irzwu76vqu] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 20px;
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(255,255,255,0.3);
    margin-right: 4px;
}

.glass-legend-available[b-irzwu76vqu] {
    background: rgba(72, 180, 100, 0.5);
}

.glass-legend-selected[b-irzwu76vqu] {
    background: rgba(13, 110, 253, 0.6);
}

.glass-selected-summary[b-irzwu76vqu] {
    background: rgba(13,110,253,0.15);
    border-radius: 50px;
}

/* ---------- STEP 4: forms (glass inputs) ---------- */
.glass-input[b-irzwu76vqu] {
    background: rgba(255,255,255,0.25);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 40px;
    padding: 0.5rem 1rem;
    color: #131f33;
    font-size: 0.95rem;
}

    .glass-input:focus[b-irzwu76vqu] {
        background: rgba(255,255,255,0.35);
        border-color: rgba(13,110,253,0.7);
        outline: none;
        box-shadow: 0 0 0 3px rgba(13,110,253,0.2);
    }

    .glass-input[b-irzwu76vqu]::placeholder {
        color: rgba(30, 40, 70, 0.5);
    }

/* alerts */
.glass-alert-danger[b-irzwu76vqu], .glass-alert-warning[b-irzwu76vqu] {
    background: rgba(220, 53, 69, 0.2);
    backdrop-filter: blur(4px);
    border-radius: 40px;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(220,53,69,0.3);
    color: #760d1d;
}

.glass-alert-warning[b-irzwu76vqu] {
    background: rgba(255, 193, 7, 0.15);
    border-color: rgba(255,193,7,0.3);
    color: #8e6100;
}
.dob-gender-row[b-irzwu76vqu] {
    display: flex;
    align-items: flex-start; /* or center */
    gap: 16px;
    flex-wrap: wrap;
}
/* ---------- BUTTONS (glass) ---------- */
.btn-glass-primary[b-irzwu76vqu], .btn-glass-secondary[b-irzwu76vqu], .btn-glass-outline[b-irzwu76vqu], .btn-glass-success[b-irzwu76vqu] {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 40px;
    padding: 0.4rem 1.3rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #1e293b;
    transition: all 0.15s;
    box-shadow: 0 6px 12px -8px rgba(0,0,0,0.2);
}

.btn-glass-primary[b-irzwu76vqu] {
    background: rgba(13, 110, 253, 0.3);
    border-color: rgba(13,110,253,0.5);
    color: #02428b;
}

    .btn-glass-primary:hover:not(:disabled)[b-irzwu76vqu] {
        background: rgba(13, 110, 253, 0.5);
        border-color: #0d6efd;
    }

.btn-glass-secondary[b-irzwu76vqu] {
    background: rgba(255,255,255,0.35);
}

.btn-glass-outline[b-irzwu76vqu] {
    background: transparent;
    border-color: rgba(255,255,255,0.5);
}

.btn-glass-success[b-irzwu76vqu] {
    background: rgba(25, 135, 84, 0.25);
    border-color: rgba(25,135,84,0.4);
    color: #0b5132;
}

    .btn-glass-success:hover:not(:disabled)[b-irzwu76vqu] {
        background: rgba(25, 135, 84, 0.4);
        border-color: #198754;
    }

button:disabled[b-irzwu76vqu] {
    opacity: 0.4;
    pointer-events: none;
    filter: grayscale(0.5);
}

/* step 5 table */
.glass-table[b-irzwu76vqu] {
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(4px);
    border-radius: 24px;
}

    .glass-table th[b-irzwu76vqu], .glass-table td[b-irzwu76vqu] {
        background: transparent;
        border-bottom: 1px solid rgba(255,255,255,0.3);
        padding: 0.5rem 0.75rem;
    }

.glass-table-total[b-irzwu76vqu] {
    border-top: 2px solid rgba(255,255,255,0.4);
}

/* success step */
.glass-card-success[b-irzwu76vqu] {
    background: rgba(210, 255, 220, 0.25);
}

.glass-success-header[b-irzwu76vqu] {
    background: rgba(25,135,84,0.3);
    border-radius: 28px 28px 0 0;
}

/* utilities */
.glass-divider[b-irzwu76vqu] {
    border-top: 1px solid rgba(255,255,255,0.5);
    opacity: 0.8;
    margin: 0.2rem 0;
}

.fw-semibold[b-irzwu76vqu] {
    font-weight: 600;
}

.text-dark[b-irzwu76vqu] {
    color: #13273e !important;
}

.text-secondary[b-irzwu76vqu] {
    color: #2c4058 !important;
}

.bg-transparent[b-irzwu76vqu] {
    background: transparent;
}

.backdrop-blur[b-irzwu76vqu] {
    backdrop-filter: blur(8px);
}

/* scrollbar thin (for lists) */
[b-irzwu76vqu]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

[b-irzwu76vqu]::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
}

[b-irzwu76vqu]::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.5);
    border-radius: 10px;
}
/* _content/ZenZonApp/Components/Pages/Public/Booking/PatientInfo.razor.rz.scp.css */
body[b-3senwxoprs] {
}
/* _content/ZenZonApp/Components/Pages/Public/ClinicLookup.razor.rz.scp.css */
html[b-6jzur79vg7], body[b-6jzur79vg7] {
    height: 100%;
}

.landing-root[b-6jzur79vg7] {
    min-height: 100vh;
}

.glass-home[b-6jzur79vg7] {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 4rem 1rem;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column; /* ADD THIS */
    justify-content: center; /* ADD THIS */
    align-items: center;
}

    .glass-home[b-6jzur79vg7]::before {
        content: '';
        position: absolute;
        top: -20%;
        right: -10%;
        width: 60%;
        height: 60%;
        background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
        border-radius: 50%;
        pointer-events: none;
        animation: float 20s ease-in-out infinite;
    }

    .glass-home[b-6jzur79vg7]::after {
        content: '';
        position: absolute;
        bottom: -20%;
        left: -10%;
        width: 70%;
        height: 70%;
        background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
        border-radius: 50%;
        pointer-events: none;
        animation: float 25s ease-in-out infinite reverse;
    }

@@keyframes float {
    0%[b-6jzur79vg7], 100%[b-6jzur79vg7] {
        transform: translate(0, 0) rotate(0deg);
    }

    33%[b-6jzur79vg7] {
        transform: translate(2%, 2%) rotate(2deg);
    }

    66%[b-6jzur79vg7] {
        transform: translate(-2%, -2%) rotate(-2deg);
    }
}

.glass-hero[b-6jzur79vg7] {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    z-index: 2;
    width: 100%; /* ADD THIS */
    display: block; /* ADD THIS */
}

    .glass-hero h1[b-6jzur79vg7] {
        font-size: 3.5rem;
        font-weight: 700;
        background: linear-gradient(135deg, #ffffff, #f0e9ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin-bottom: 1.5rem;
        text-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        animation: fadeInUp 0.8s ease-out;
    }

    .glass-hero .lead[b-6jzur79vg7] {
        font-size: 1.4rem;
        color: rgba(255, 255, 255, 0.95);
        max-width: 700px;
        margin: 0 auto;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        animation: fadeInUp 0.8s ease-out 0.2s both;
    }

@@keyframes fadeInUp {
    from[b-6jzur79vg7] {
        opacity: 0;
        transform: translateY(30px);
    }

    to[b-6jzur79vg7] {
        opacity: 1;
        transform: translateY(0);
    }
}

.glass-feature-card[b-6jzur79vg7] {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    padding: 2.5rem 1.5rem;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.8s ease-out;
    animation-fill-mode: both;
}

    .glass-feature-card:nth-child(1)[b-6jzur79vg7] {
        animation-delay: 0.3s;
    }

    .glass-feature-card:nth-child(2)[b-6jzur79vg7] {
        animation-delay: 0.4s;
    }

    .glass-feature-card:nth-child(3)[b-6jzur79vg7] {
        animation-delay: 0.5s;
    }

    .glass-feature-card[b-6jzur79vg7]::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.6s ease;
        pointer-events: none;
    }

    .glass-feature-card:hover[b-6jzur79vg7] {
        transform: translateY(-15px) scale(1.02);
        background: rgba(255, 255, 255, 0.25);
        border-color: rgba(255, 255, 255, 0.5);
        box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
    }

        .glass-feature-card:hover[b-6jzur79vg7]::before {
            opacity: 1;
        }

.feature-icon[b-6jzur79vg7] {
    width: 100px;
    height: 100px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2.8rem;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 2px solid rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
}

.glass-feature-card:hover .feature-icon[b-6jzur79vg7] {
    transform: scale(1.1) rotate(5deg);
    border-color: rgba(255, 255, 255, 0.8);
}

.glass-feature-card h5[b-6jzur79vg7] {
    color: white;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.glass-feature-card p[b-6jzur79vg7] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.glass-button[b-6jzur79vg7] {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50px;
    padding: 1rem 2.5rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.8s ease-out 0.6s both;
}

    .glass-button:hover[b-6jzur79vg7] {
        background: rgba(255, 255, 255, 0.35);
        border-color: rgba(255, 255, 255, 0.8);
        transform: translateY(-3px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        color: white;
    }

    .glass-button:active[b-6jzur79vg7] {
        transform: translateY(-1px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
    }

.glass-button-primary[b-6jzur79vg7] {
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    position: relative;
    z-index: 1;
}

    .glass-button-primary[b-6jzur79vg7]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, #764ba2, #667eea);
        border-radius: 50px;
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: -1;
    }

    .glass-button-primary:hover[b-6jzur79vg7]::before {
        opacity: 1;
    }

.glass-button-outline[b-6jzur79vg7] {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.8);
}

    .glass-button-outline:hover[b-6jzur79vg7] {
        background: rgba(255, 255, 255, 0.15);
        border-color: white;
    }

.button-group[b-6jzur79vg7] {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 3rem;
    flex-wrap: wrap;
}

.floating-shape[b-6jzur79vg7] {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

.shape-1[b-6jzur79vg7] {
    width: 300px;
    height: 300px;
    top: -150px;
    left: -150px;
    animation: float 18s ease-in-out infinite;
}

.shape-2[b-6jzur79vg7] {
    width: 200px;
    height: 200px;
    bottom: -100px;
    right: -100px;
    animation: float 22s ease-in-out infinite reverse;
}

.shape-3[b-6jzur79vg7] {
    width: 150px;
    height: 150px;
    top: 50%;
    left: 10%;
    animation: float 15s ease-in-out infinite;
}

@@media (max-width: 768px) {
    .glass-hero h1[b-6jzur79vg7] {
        font-size: 2.2rem;
    }

    .glass-hero .lead[b-6jzur79vg7] {
        font-size: 1.1rem;
    }

    .glass-feature-card[b-6jzur79vg7] {
        padding: 1.5rem;
    }

    .feature-icon[b-6jzur79vg7] {
        width: 70px;
        height: 70px;
        font-size: 2rem;
    }

    .button-group[b-6jzur79vg7] {
        flex-direction: column;
        gap: 1rem;
        padding: 0 2rem;
    }

    .glass-button[b-6jzur79vg7] {
        width: 100%;
    }
}

@@media (max-width: 480px) {
    .glass-hero h1[b-6jzur79vg7] {
        font-size: 1.8rem;
    }
}
/* --- 1. THE SEARCH INPUT BOX --- */
.search-box-input[b-6jzur79vg7],
input[type="text"][b-6jzur79vg7] {
    background-color: white;
    /* This keeps your fine white line visible at all times */
    border: 1px solid #ffffff !important;
    border-radius: 8px;
    padding: 12px;
    /* This kills the Blue Sky ring that appears when typing */
    outline: none !important;
    /* This kills the Blue Sky glow shadow */
    box-shadow: none !important;
}

    /* When you Hover or Click (Focus) to type */
    .search-box-input:hover[b-6jzur79vg7],
    .search-box-input:focus[b-6jzur79vg7],
    input[type="text"]:hover[b-6jzur79vg7],
    input[type="text"]:focus[b-6jzur79vg7] {
        /* We keep the white line, but replace any blue focus with the background color */
        border-color: #ffffff !important;
        outline: 2px solid transparent !important; /* This 'paints' the focus area with the background */
        box-shadow: none !important;
    }

/* --- 2. THE RADIO BUTTONS --- */
input[type="radio"][b-6jzur79vg7] {
    appearance: none;
    -webkit-appearance: none;
    /* Keep the fine white line for the outer ring */
    border: 1px solid #ffffff !important;
    background-color: transparent !important;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;
    /* Kill the Blue Sky outline on click */
    outline: none !important;
}

    /* When the Radio is Selected (The Dot) */
    input[type="radio"]:checked[b-6jzur79vg7] {
        /* We create a White Outer Ring with a Dot painted in the background color */
        background-color: transparent !important; /* Center is background color */
        border: 5px solid #ffffff !important; /* Thick white border makes it look like a white ring */
        /* This ensures the 'Blue Sky' dot never appears */
    }

    /* Ensure Hover stays white with background center */
    input[type="radio"]:hover[b-6jzur79vg7] {
        border-color: #ffffff !important;
        outline: none !important;
    }
/* --- THE SEARCH INPUT BOX --- */
.search-box-input[b-6jzur79vg7],
input[type="text"][b-6jzur79vg7] {
    /* 1. Keep the field white */
    background-color: #ffffff !important;
    /* 2. Keep the fine white line border (Static) */
    border: 1px solid #ffffff !important;
    border-radius: 8px !important;
    padding: 12px !important;
    color: #333 !important; /* Text color inside */
    /* 3. Remove ALL Blue Sky/Focus effects */
    outline: none !important;
    box-shadow: none !important;
    transition: none !important;
}

    /* Force Hover and Focus to look EXACTLY like the static state */
    .search-box-input:hover[b-6jzur79vg7],
    .search-box-input:focus[b-6jzur79vg7],
    input[type="text"]:hover[b-6jzur79vg7],
    input[type="text"]:focus[b-6jzur79vg7] {
        /* Re-paint with same white line so nothing changes */
        border: 1px solid #ffffff !important;
        background-color: #ffffff !important;
        outline: none !important;
        box-shadow: none !important;
    }

/* --- THE RADIO BUTTONS (Matching Style) --- */
input[type="radio"][b-6jzur79vg7] {
    appearance: none !important;
    -webkit-appearance: none !important;
    /* Fine white line border */
    border: 1px solid #ffffff !important;
    background-color: transparent !important;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    outline: none !important;
}

    /* Selected state: White ring with background-painted center */
    input[type="radio"]:checked[b-6jzur79vg7] {
        background-color: transparent !important;
        border: 5px solid #ffffff !important;
    }
.form-control[b-6jzur79vg7],
.form-control:hover[b-6jzur79vg7],
.form-control:focus[b-6jzur79vg7],
.form-control:active[b-6jzur79vg7] {
    border: none !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    outline: 3px solid rgba(255, 255, 255, 0.85) !important;
    outline-offset: 3px !important;
    box-shadow: none !important;
}
.location-chip[b-6jzur79vg7] {
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-size: 1.2rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    white-space: nowrap;
}

    .location-chip .material-symbols-outlined[b-6jzur79vg7] {
        font-size: 1.15rem;
    }

    .location-chip.selected[b-6jzur79vg7] {
        transform: translateY(-3px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    }

/* _content/ZenZonApp/Components/Pages/Public/Layout/PublicLayout.razor.rz.scp.css */
.public-layout[b-7yphjhqpcf] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.public-header[b-7yphjhqpcf] {
    padding: 16px 32px;
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
}

.public-header__brand[b-7yphjhqpcf] {
    display: flex;
    flex-direction: column;
}

.brand-name[b-7yphjhqpcf] {
    font-size: 1.6rem;
    font-weight: 700;
    color: white;
}

.brand-tagline[b-7yphjhqpcf] {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.public-main[b-7yphjhqpcf] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
}

.public-footer[b-7yphjhqpcf] {
    text-align: center;
    padding: 16px;
    color: rgba(255,255,255,0.5);
    font-size: 0.8rem;
}
/* _content/ZenZonApp/Components/Pages/PxSoapDC.razor.rz.scp.css */
/* ========================= */
/* GLASS FORM STYLES - BLUE LUMINOUS THEME */
/* ========================= */
.glass-form-container[b-7fpqg03nzw] {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 15px 50px rgba(30, 144, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 30px rgba(30, 144, 255, 0.08); /* Luminous blue glow */
}

.glass-form-section[b-7fpqg03nzw] {
    background: linear-gradient(135deg, rgba(240, 248, 255, 0.7), rgba(230, 240, 255, 0.5));
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(30, 144, 255, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.7);
    margin-bottom: 24px;
}

.glass-form-label[b-7fpqg03nzw] {
    color: rgba(25, 25, 112, 0.95);
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

    .glass-form-label.section-title[b-7fpqg03nzw] {
        color: rgba(0, 0, 139, 0.98);
        font-size: 1.2rem;
        font-weight: 700;
        margin-bottom: 20px;
        border-bottom: 3px solid rgba(30, 144, 255, 0.2);
        padding-bottom: 12px;
        background: linear-gradient(90deg, transparent, rgba(30, 144, 255, 0.05), transparent);
    }

/* ===== INPUT FIELDS ===== */
.glass-form-input[b-7fpqg03nzw] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 255, 0.9)) !important;
    backdrop-filter: blur(8px);
    border: 2px solid rgba(30, 144, 255, 0.2) !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    color: rgba(0, 0, 128, 0.9) !important;
    font-weight: 500;
    transition: all 0.35s ease !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.03), 0 4px 20px rgba(30, 144, 255, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.4) !important;
}

    .glass-form-input.small[b-7fpqg03nzw] {
        padding: 10px 14px !important;
        font-size: 0.95rem;
    }

    .glass-form-input.readonly[b-7fpqg03nzw] {
        background: linear-gradient(135deg, rgba(240, 245, 255, 0.7), rgba(230, 238, 255, 0.6)) !important;
        color: rgba(70, 130, 180, 0.8) !important;
        cursor: not-allowed;
    }

    .glass-form-input:focus[b-7fpqg03nzw] {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.95)) !important;
        border-color: rgba(65, 105, 225, 0.5) !important;
        box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.02), 0 8px 32px rgba(30, 144, 255, 0.15), 0 0 0 4px rgba(30, 144, 255, 0.1) !important;
        transform: translateY(-2px);
        outline: none !important;
    }

/* ===== ENHANCED CHECKBOXES ===== */
.glass-checkbox-container[b-7fpqg03nzw] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
}

.glass-checkbox-list[b-7fpqg03nzw] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.glass-checkbox-item-large[b-7fpqg03nzw] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(240, 248, 255, 0.6));
    border-radius: 14px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.06);
}

    .glass-checkbox-item-large:hover[b-7fpqg03nzw] {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(240, 248, 255, 0.75));
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(30, 144, 255, 0.12);
    }

.glass-checkbox-large[b-7fpqg03nzw] {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(30, 144, 255, 0.5) !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
    margin: 0 !important;
    position: relative;
}

    .glass-checkbox-large:checked[b-7fpqg03nzw] {
        background: linear-gradient(135deg, #1e90ff, #4169e1) !important;
        border-color: #1e90ff !important;
        box-shadow: 0 0 10px rgba(30, 144, 255, 0.4);
    }

        .glass-checkbox-large:checked[b-7fpqg03nzw]::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-weight: bold;
            font-size: 14px;
        }

.glass-checkbox-label-large[b-7fpqg03nzw] {
    color: rgba(25, 25, 112, 0.95);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    font-size: 1rem;
}

/* ===== RADIO BUTTONS ===== */
.glass-radio-group-inline[b-7fpqg03nzw] {
    display: flex !important;
    gap: 24px !important;
    align-items: center !important;
}

.glass-radio-item-inline[b-7fpqg03nzw] {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 20px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(240, 248, 255, 0.6)) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.06);
}

    .glass-radio-item-inline:hover[b-7fpqg03nzw] {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(240, 248, 255, 0.75)) !important;
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(30, 144, 255, 0.12);
    }

    .glass-radio-item-inline.selected[b-7fpqg03nzw] {
        background: linear-gradient(135deg, rgba(30, 144, 255, 0.15), rgba(65, 105, 225, 0.1)) !important;
        border-color: rgba(30, 144, 255, 0.4) !important;
        box-shadow: 0 0 20px rgba(30, 144, 255, 0.15);
    }

.glass-radio-large[b-7fpqg03nzw] {
    width: 22px !important;
    height: 22px !important;
    accent-color: #1e90ff !important;
    cursor: pointer !important;
    margin: 0 !important;
}

.glass-radio-label-inline[b-7fpqg03nzw] {
    color: rgba(25, 25, 112, 0.95) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-size: 1rem !important;
    margin: 0 !important;
}

/* ===== TEXTAREA CARDS ===== */
.textarea-card-container[b-7fpqg03nzw] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 28px;
}

.glass-textarea-card[b-7fpqg03nzw] {
    backdrop-filter: blur(12px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(240, 248, 255, 0.65));
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 10px 30px rgba(30, 144, 255, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.7);
    transition: all 0.35s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .glass-textarea-card:hover[b-7fpqg03nzw] {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(240, 248, 255, 0.75));
        transform: translateY(-4px);
        box-shadow: 0 15px 40px rgba(30, 144, 255, 0.15), 0 0 25px rgba(30, 144, 255, 0.05);
    }

.glass-textarea-card-header[b-7fpqg03nzw] {
    margin-bottom: 20px;
}

.glass-textarea-card-label[b-7fpqg03nzw] {
    color: rgba(25, 25, 112, 0.95);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 12px;
    display: block;
}

.glass-textarea-card .glass-textarea[b-7fpqg03nzw] {
    flex-grow: 1;
    min-height: 140px;
    resize: vertical;
    width: 100% !important;
}

/* ===== TEXTAREA STYLING ===== */
.glass-textarea[b-7fpqg03nzw] {
    backdrop-filter: blur(10px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 255, 0.85)) !important;
    border: 2px solid rgba(30, 144, 255, 0.25) !important;
    border-radius: 14px !important;
    padding: 18px !important;
    color: rgba(25, 25, 112, 0.9) !important;
    font-weight: 500;
    transition: all 0.35s ease !important;
    resize: vertical;
    min-height: 140px;
    width: 100% !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.02), 0 6px 24px rgba(30, 144, 255, 0.08) !important;
}

    .glass-textarea:focus[b-7fpqg03nzw] {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.95)) !important;
        border-color: rgba(65, 105, 225, 0.5) !important;
        box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.02), 0 10px 32px rgba(30, 144, 255, 0.15), 0 0 0 4px rgba(30, 144, 255, 0.1) !important;
        transform: translateY(-2px);
        outline: none !important;
    }

/* ===== SMALL INPUTS ===== */
.glass-small-input[b-7fpqg03nzw] {
    backdrop-filter: blur(8px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(240, 248, 255, 0.75)) !important;
    border: 2px solid rgba(30, 144, 255, 0.25) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    color: rgba(25, 25, 112, 0.9) !important;
    font-size: 0.95rem !important;
    width: 100% !important;
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.06) !important;
}

/* ===== SUBMIT BUTTON ===== */
.glass-submit-button[b-7fpqg03nzw] {
    backdrop-filter: blur(12px);
    background: linear-gradient(135deg, #1e90ff, #4169e1, #6495ed) !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 16px !important;
    padding: 16px 40px !important;
    color: white !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    transition: all 0.35s ease !important;
    box-shadow: 0 10px 30px rgba(30, 144, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 20px rgba(30, 144, 255, 0.3) !important; /* Luminous effect */
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
}

    .glass-submit-button:hover[b-7fpqg03nzw] {
        transform: translateY(-4px);
        box-shadow: 0 15px 40px rgba(30, 144, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 30px rgba(30, 144, 255, 0.4) !important;
        background: linear-gradient(135deg, #1c86ee, #3a5fcd, #5d8aa8) !important;
    }

    .glass-submit-button:active[b-7fpqg03nzw] {
        transform: translateY(-1px);
        box-shadow: 0 8px 25px rgba(30, 144, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    }

    .glass-submit-button[b-7fpqg03nzw]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.7s ease;
    }

    .glass-submit-button:hover[b-7fpqg03nzw]::before {
        left: 100%;
    }

    /* Button variants */
    /* Cancel variant: same glass + size, softer neutral gradient */
    .glass-submit-button.glass-btn-cancel[b-7fpqg03nzw] {
        color: rgba(20, 30, 55, 0.95);
        background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(235, 242, 255, 0.75));
        border: 1px solid rgba(120, 140, 180, 0.35);
    }

    .glass-submit-button.glass-btn-sign[b-7fpqg03nzw] {
        background: linear-gradient(135deg, #0066cc, #0047ab, #00308f) !important;
        box-shadow: 0 10px 30px rgba(0, 102, 204, 0.25), 0 0 20px rgba(0, 102, 204, 0.3) !important;
    }

/* ===== TABS ===== */
.glass-tab-container .nav-tabs[b-7fpqg03nzw] {
    border-bottom: 2px solid rgba(30, 144, 255, 0.2);
    padding-bottom: 2px;
}

.glass-tab-container .nav-link[b-7fpqg03nzw] {
    background: linear-gradient(135deg, rgba(240, 248, 255, 0.8), rgba(230, 240, 255, 0.7));
    border: 2px solid rgba(30, 144, 255, 0.2) !important;
    color: #1e90ff !important;
    border-bottom: none !important;
    font-weight: 600 !important;
    padding: 14px 28px !important;
    margin-right: 12px;
    border-radius: 14px 14px 0 0 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.08);
}

    .glass-tab-container .nav-link:hover[b-7fpqg03nzw] {
        background: linear-gradient(135deg, rgba(240, 248, 255, 0.95), rgba(230, 240, 255, 0.85)) !important;
        border-color: rgba(30, 144, 255, 0.4) !important;
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(30, 144, 255, 0.15);
    }

    .glass-tab-container .nav-link.active[b-7fpqg03nzw] {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 248, 255, 0.9)) !important;
        border-color: rgba(30, 144, 255, 0.4) !important;
        color: #0047ab !important;
        font-weight: 700 !important;
        box-shadow: 0 6px 20px rgba(30, 144, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7);
        position: relative;
    }

        .glass-tab-container .nav-link.active[b-7fpqg03nzw]::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #1e90ff, #4169e1, #6495ed);
            border-radius: 3px;
            box-shadow: 0 0 10px rgba(30, 144, 255, 0.4);
        }

/* ===== CALENDAR STYLING ===== */
.glass-calendar[b-7fpqg03nzw] {
    backdrop-filter: blur(12px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(240, 248, 255, 0.75)) !important;
    border: 2px solid rgba(30, 144, 255, 0.25) !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    width: 100% !important;
    color: rgba(25, 25, 112, 0.9) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    box-shadow: 0 6px 24px rgba(30, 144, 255, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
    transition: all 0.3s ease !important;
}

    .glass-calendar:hover[b-7fpqg03nzw] {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 248, 255, 0.85)) !important;
        border-color: rgba(30, 144, 255, 0.4) !important;
        box-shadow: 0 10px 32px rgba(30, 144, 255, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.7) !important;
    }

/* ===== ENHANCED INPUTS ===== */
.glass-enhanced-input[b-7fpqg03nzw] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 255, 0.9)) !important;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(30, 144, 255, 0.25) !important;
    border-radius: 14px !important;
    padding: 16px 20px !important;
    color: rgba(25, 25, 112, 0.95) !important;
    font-weight: 600;
    font-size: 1.05rem;
    transition: all 0.35s ease !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.02), 0 6px 24px rgba(30, 144, 255, 0.1) !important;
    height: 56px;
}

    .glass-enhanced-input:focus[b-7fpqg03nzw] {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.95)) !important;
        border-color: rgba(65, 105, 225, 0.5) !important;
        box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.02), 0 10px 32px rgba(30, 144, 255, 0.18), 0 0 0 4px rgba(30, 144, 255, 0.12) !important;
        transform: translateY(-2px);
        outline: none !important;
    }

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 992px) {
    .textarea-card-container[b-7fpqg03nzw] {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .glass-form-container[b-7fpqg03nzw] {
        padding: 24px;
        border-radius: 20px;
    }
}

@media (max-width: 768px) {
    .textarea-card-container[b-7fpqg03nzw] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .glass-radio-group-inline[b-7fpqg03nzw] {
        flex-direction: column;
        gap: 16px !important;
        align-items: flex-start !important;
    }

    .glass-radio-item-inline[b-7fpqg03nzw] {
        width: 100%;
    }

    .glass-form-container[b-7fpqg03nzw] {
        padding: 20px;
        border-radius: 18px;
    }

    .glass-form-section[b-7fpqg03nzw] {
        padding: 20px;
        border-radius: 16px;
    }

    .glass-submit-button[b-7fpqg03nzw] {
        padding: 14px 32px !important;
        font-size: 1rem !important;
    }
}

/* ===== ANIMATION ===== */
@keyframes glassGlow-b-7fpqg03nzw {
    0%, 100% {
        box-shadow: 0 15px 50px rgba(30, 144, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    50% {
        box-shadow: 0 15px 50px rgba(30, 144, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 40px rgba(30, 144, 255, 0.1);
    }
}

.glass-form-container[b-7fpqg03nzw] {
    animation: glassGlow-b-7fpqg03nzw 8s ease-in-out infinite;
}

/* ===== DC-SPECIFIC ADDITIONS ===== */
.dc-form-header[b-7fpqg03nzw] {
    background: linear-gradient(135deg, rgba(30, 144, 255, 0.1), rgba(65, 105, 225, 0.05));
    border-left: 5px solid #1e90ff;
    padding: 20px 24px;
    margin-bottom: 30px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(30, 144, 255, 0.08);
}

.dc-form-title[b-7fpqg03nzw] {
    color: #0047ab;
    font-weight: 800;
    font-size: 1.6rem;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.5);
}

.dc-form-subtitle[b-7fpqg03nzw] {
    color: #4169e1;
    font-size: 1rem;
    opacity: 0.9;
}

.dc-card[b-7fpqg03nzw] {
    border-top: 4px solid #1e90ff !important;
    box-shadow: 0 10px 30px rgba(30, 144, 255, 0.1) !important;
}

.dc-badge[b-7fpqg03nzw] {
    background: linear-gradient(135deg, rgba(30, 144, 255, 0.2), rgba(65, 105, 225, 0.15)) !important;
    color: #0047ab !important;
    border: 1px solid rgba(30, 144, 255, 0.3) !important;
    font-weight: 600;
    backdrop-filter: blur(5px);
}

.btn-dc-primary[b-7fpqg03nzw] {
    background: linear-gradient(135deg, #1e90ff, #4169e1) !important;
    border-color: #1e90ff !important;
    color: white !important;
    box-shadow: 0 8px 25px rgba(30, 144, 255, 0.25) !important;
}

.btn-dc-secondary[b-7fpqg03nzw] {
    background: linear-gradient(135deg, rgba(30, 144, 255, 0.15), rgba(65, 105, 225, 0.1)) !important;
    border-color: #1e90ff !important;
    color: #0047ab !important;
}

.dc-alert[b-7fpqg03nzw] {
    background: linear-gradient(135deg, rgba(30, 144, 255, 0.15), rgba(65, 105, 225, 0.1)) !important;
    border-left: 5px solid #1e90ff !important;
    color: #0047ab !important;
    backdrop-filter: blur(5px);
}

.dc-progress-bar[b-7fpqg03nzw] {
    background: linear-gradient(90deg, #1e90ff, #4169e1, #6495ed) !important;
    box-shadow: 0 0 10px rgba(30, 144, 255, 0.3);
}

.dc-icon[b-7fpqg03nzw] {
    color: #1e90ff !important;
    filter: drop-shadow(0 2px 4px rgba(30, 144, 255, 0.2));
}

.dc-icon-secondary[b-7fpqg03nzw] {
    color: #6495ed !important;
}

/* ===== READONLY STYLES ===== */
.glass-readonly-value[b-7fpqg03nzw] {
    font-weight: 600;
    color: rgba(70, 130, 180, 0.9);
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(240, 245, 255, 0.7), rgba(230, 238, 255, 0.6));
    border-radius: 10px;
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* ===== INPUT ICONS ===== */
.glass-input-icon[b-7fpqg03nzw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, rgba(30, 144, 255, 0.15), rgba(65, 105, 225, 0.1));
    backdrop-filter: blur(8px);
    border-radius: 10px;
    border: 1px solid rgba(30, 144, 255, 0.2);
    box-shadow: 0 4px 12px rgba(30, 144, 255, 0.1);
    color: #1e90ff;
    font-size: 1.1rem;
}
/* _content/ZenZonApp/Components/Pages/PxSoapPT.razor.rz.scp.css */
/* ========================= */
/* GLASS FORM STYLES - BLUE LUMINOUS THEME */
/* ========================= */
.glass-form-container[b-xv99nlx7f4] {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 15px 50px rgba(30, 144, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 30px rgba(30, 144, 255, 0.08); /* Luminous blue glow */
}

.glass-form-section[b-xv99nlx7f4] {
    background: linear-gradient(135deg, rgba(240, 248, 255, 0.7), rgba(230, 240, 255, 0.5));
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(30, 144, 255, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.7);
    margin-bottom: 24px;
}

.glass-form-label[b-xv99nlx7f4] {
    color: rgba(25, 25, 112, 0.95);
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

    .glass-form-label.section-title[b-xv99nlx7f4] {
        color: rgba(0, 0, 139, 0.98);
        font-size: 1.2rem;
        font-weight: 700;
        margin-bottom: 20px;
        border-bottom: 3px solid rgba(30, 144, 255, 0.2);
        padding-bottom: 12px;
        background: linear-gradient(90deg, transparent, rgba(30, 144, 255, 0.05), transparent);
    }

/* ===== INPUT FIELDS ===== */
.glass-form-input[b-xv99nlx7f4] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 255, 0.9)) !important;
    backdrop-filter: blur(8px);
    border: 2px solid rgba(30, 144, 255, 0.2) !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    color: rgba(0, 0, 128, 0.9) !important;
    font-weight: 500;
    transition: all 0.35s ease !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.03), 0 4px 20px rgba(30, 144, 255, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.4) !important;
}

    .glass-form-input.small[b-xv99nlx7f4] {
        padding: 10px 14px !important;
        font-size: 0.95rem;
    }

    .glass-form-input.readonly[b-xv99nlx7f4] {
        background: linear-gradient(135deg, rgba(240, 245, 255, 0.7), rgba(230, 238, 255, 0.6)) !important;
        color: rgba(70, 130, 180, 0.8) !important;
        cursor: not-allowed;
    }

    .glass-form-input:focus[b-xv99nlx7f4] {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.95)) !important;
        border-color: rgba(65, 105, 225, 0.5) !important;
        box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.02), 0 8px 32px rgba(30, 144, 255, 0.15), 0 0 0 4px rgba(30, 144, 255, 0.1) !important;
        transform: translateY(-2px);
        outline: none !important;
    }

/* ===== ENHANCED CHECKBOXES ===== */
.glass-checkbox-container[b-xv99nlx7f4] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
}

.glass-checkbox-list[b-xv99nlx7f4] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.glass-checkbox-item-large[b-xv99nlx7f4] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(240, 248, 255, 0.6));
    border-radius: 14px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.06);
}

    .glass-checkbox-item-large:hover[b-xv99nlx7f4] {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(240, 248, 255, 0.75));
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(30, 144, 255, 0.12);
    }

.glass-checkbox-large[b-xv99nlx7f4] {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(30, 144, 255, 0.5) !important;
    border-radius: 7px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
    margin: 0 !important;
    position: relative;
}

    .glass-checkbox-large:checked[b-xv99nlx7f4] {
        background: linear-gradient(135deg, #1e90ff, #4169e1) !important;
        border-color: #1e90ff !important;
        box-shadow: 0 0 10px rgba(30, 144, 255, 0.4);
    }

        .glass-checkbox-large:checked[b-xv99nlx7f4]::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-weight: bold;
            font-size: 14px;
        }

.glass-checkbox-label-large[b-xv99nlx7f4] {
    color: rgba(25, 25, 112, 0.95);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    font-size: 1rem;
}

/* ===== RADIO BUTTONS ===== */
.glass-radio-group-inline[b-xv99nlx7f4] {
    display: flex !important;
    gap: 24px !important;
    align-items: center !important;
}

.glass-radio-item-inline[b-xv99nlx7f4] {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 20px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(240, 248, 255, 0.6)) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.06);
}

    .glass-radio-item-inline:hover[b-xv99nlx7f4] {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(240, 248, 255, 0.75)) !important;
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(30, 144, 255, 0.12);
    }

    .glass-radio-item-inline.selected[b-xv99nlx7f4] {
        background: linear-gradient(135deg, rgba(30, 144, 255, 0.15), rgba(65, 105, 225, 0.1)) !important;
        border-color: rgba(30, 144, 255, 0.4) !important;
        box-shadow: 0 0 20px rgba(30, 144, 255, 0.15);
    }

.glass-radio-large[b-xv99nlx7f4] {
    width: 22px !important;
    height: 22px !important;
    accent-color: #1e90ff !important;
    cursor: pointer !important;
    margin: 0 !important;
}

.glass-radio-label-inline[b-xv99nlx7f4] {
    color: rgba(25, 25, 112, 0.95) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-size: 1rem !important;
    margin: 0 !important;
}

/* ===== TEXTAREA CARDS ===== */
.textarea-card-container[b-xv99nlx7f4] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 28px;
}

.glass-textarea-card[b-xv99nlx7f4] {
    backdrop-filter: blur(12px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(240, 248, 255, 0.65));
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 10px 30px rgba(30, 144, 255, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.7);
    transition: all 0.35s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .glass-textarea-card:hover[b-xv99nlx7f4] {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(240, 248, 255, 0.75));
        transform: translateY(-4px);
        box-shadow: 0 15px 40px rgba(30, 144, 255, 0.15), 0 0 25px rgba(30, 144, 255, 0.05);
    }

.glass-textarea-card-header[b-xv99nlx7f4] {
    margin-bottom: 20px;
}

.glass-textarea-card-label[b-xv99nlx7f4] {
    color: rgba(25, 25, 112, 0.95);
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 12px;
    display: block;
}

.glass-textarea-card .glass-textarea[b-xv99nlx7f4] {
    flex-grow: 1;
    min-height: 140px;
    resize: vertical;
    width: 100% !important;
}

/* ===== TEXTAREA STYLING ===== */
.glass-textarea[b-xv99nlx7f4] {
    backdrop-filter: blur(10px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 255, 0.85)) !important;
    border: 2px solid rgba(30, 144, 255, 0.25) !important;
    border-radius: 14px !important;
    padding: 18px !important;
    color: rgba(25, 25, 112, 0.9) !important;
    font-weight: 500;
    transition: all 0.35s ease !important;
    resize: vertical;
    min-height: 140px;
    width: 100% !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.02), 0 6px 24px rgba(30, 144, 255, 0.08) !important;
}

    .glass-textarea:focus[b-xv99nlx7f4] {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.95)) !important;
        border-color: rgba(65, 105, 225, 0.5) !important;
        box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.02), 0 10px 32px rgba(30, 144, 255, 0.15), 0 0 0 4px rgba(30, 144, 255, 0.1) !important;
        transform: translateY(-2px);
        outline: none !important;
    }

/* ===== SMALL INPUTS ===== */
.glass-small-input[b-xv99nlx7f4] {
    backdrop-filter: blur(8px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(240, 248, 255, 0.75)) !important;
    border: 2px solid rgba(30, 144, 255, 0.25) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    color: rgba(25, 25, 112, 0.9) !important;
    font-size: 0.95rem !important;
    width: 100% !important;
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.06) !important;
}

/* ===== SUBMIT BUTTON ===== */
.glass-submit-button[b-xv99nlx7f4] {
    backdrop-filter: blur(12px);
    background: linear-gradient(135deg, #1e90ff, #4169e1, #6495ed) !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 16px !important;
    padding: 16px 40px !important;
    color: white !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    transition: all 0.35s ease !important;
    box-shadow: 0 10px 30px rgba(30, 144, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 20px rgba(30, 144, 255, 0.3) !important; /* Luminous effect */
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
}

    .glass-submit-button:hover[b-xv99nlx7f4] {
        transform: translateY(-4px);
        box-shadow: 0 15px 40px rgba(30, 144, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 30px rgba(30, 144, 255, 0.4) !important;
        background: linear-gradient(135deg, #1c86ee, #3a5fcd, #5d8aa8) !important;
    }

    .glass-submit-button:active[b-xv99nlx7f4] {
        transform: translateY(-1px);
        box-shadow: 0 8px 25px rgba(30, 144, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    }

    .glass-submit-button[b-xv99nlx7f4]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.7s ease;
    }

    .glass-submit-button:hover[b-xv99nlx7f4]::before {
        left: 100%;
    }

    /* Button variants */
    /* Cancel variant: same glass + size, softer neutral gradient */
    .glass-submit-button.glass-btn-cancel[b-xv99nlx7f4] {
        color: rgba(20, 30, 55, 0.95);
        background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(235, 242, 255, 0.75));
        border: 1px solid rgba(120, 140, 180, 0.35);
    }

    .glass-submit-button.glass-btn-sign[b-xv99nlx7f4] {
        background: linear-gradient(135deg, #0066cc, #0047ab, #00308f) !important;
        box-shadow: 0 10px 30px rgba(0, 102, 204, 0.25), 0 0 20px rgba(0, 102, 204, 0.3) !important;
    }

/* ===== TABS ===== */
.glass-tab-container .nav-tabs[b-xv99nlx7f4] {
    border-bottom: 2px solid rgba(30, 144, 255, 0.2);
    padding-bottom: 2px;
}

.glass-tab-container .nav-link[b-xv99nlx7f4] {
    background: linear-gradient(135deg, rgba(240, 248, 255, 0.8), rgba(230, 240, 255, 0.7));
    border: 2px solid rgba(30, 144, 255, 0.2) !important;
    color: #1e90ff !important;
    border-bottom: none !important;
    font-weight: 600 !important;
    padding: 14px 28px !important;
    margin-right: 12px;
    border-radius: 14px 14px 0 0 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.08);
}

    .glass-tab-container .nav-link:hover[b-xv99nlx7f4] {
        background: linear-gradient(135deg, rgba(240, 248, 255, 0.95), rgba(230, 240, 255, 0.85)) !important;
        border-color: rgba(30, 144, 255, 0.4) !important;
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(30, 144, 255, 0.15);
    }

    .glass-tab-container .nav-link.active[b-xv99nlx7f4] {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 248, 255, 0.9)) !important;
        border-color: rgba(30, 144, 255, 0.4) !important;
        color: #0047ab !important;
        font-weight: 700 !important;
        box-shadow: 0 6px 20px rgba(30, 144, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7);
        position: relative;
    }

        .glass-tab-container .nav-link.active[b-xv99nlx7f4]::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #1e90ff, #4169e1, #6495ed);
            border-radius: 3px;
            box-shadow: 0 0 10px rgba(30, 144, 255, 0.4);
        }

/* ===== CALENDAR STYLING ===== */
.glass-calendar[b-xv99nlx7f4] {
    backdrop-filter: blur(12px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(240, 248, 255, 0.75)) !important;
    border: 2px solid rgba(30, 144, 255, 0.25) !important;
    border-radius: 12px !important;
    padding: 14px 20px !important;
    width: 100% !important;
    color: rgba(25, 25, 112, 0.9) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    box-shadow: 0 6px 24px rgba(30, 144, 255, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.6) !important;
    transition: all 0.3s ease !important;
}

    .glass-calendar:hover[b-xv99nlx7f4] {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(240, 248, 255, 0.85)) !important;
        border-color: rgba(30, 144, 255, 0.4) !important;
        box-shadow: 0 10px 32px rgba(30, 144, 255, 0.15), inset 0 1px 1px rgba(255, 255, 255, 0.7) !important;
    }

/* ===== ENHANCED INPUTS ===== */
.glass-enhanced-input[b-xv99nlx7f4] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 255, 0.9)) !important;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(30, 144, 255, 0.25) !important;
    border-radius: 14px !important;
    padding: 16px 20px !important;
    color: rgba(25, 25, 112, 0.95) !important;
    font-weight: 600;
    font-size: 1.05rem;
    transition: all 0.35s ease !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.02), 0 6px 24px rgba(30, 144, 255, 0.1) !important;
    height: 56px;
}

    .glass-enhanced-input:focus[b-xv99nlx7f4] {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.95)) !important;
        border-color: rgba(65, 105, 225, 0.5) !important;
        box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.02), 0 10px 32px rgba(30, 144, 255, 0.18), 0 0 0 4px rgba(30, 144, 255, 0.12) !important;
        transform: translateY(-2px);
        outline: none !important;
    }

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 992px) {
    .textarea-card-container[b-xv99nlx7f4] {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .glass-form-container[b-xv99nlx7f4] {
        padding: 24px;
        border-radius: 20px;
    }
}

@media (max-width: 768px) {
    .textarea-card-container[b-xv99nlx7f4] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .glass-radio-group-inline[b-xv99nlx7f4] {
        flex-direction: column;
        gap: 16px !important;
        align-items: flex-start !important;
    }

    .glass-radio-item-inline[b-xv99nlx7f4] {
        width: 100%;
    }

    .glass-form-container[b-xv99nlx7f4] {
        padding: 20px;
        border-radius: 18px;
    }

    .glass-form-section[b-xv99nlx7f4] {
        padding: 20px;
        border-radius: 16px;
    }

    .glass-submit-button[b-xv99nlx7f4] {
        padding: 14px 32px !important;
        font-size: 1rem !important;
    }
}

/* ===== ANIMATION ===== */
@keyframes glassGlow-b-xv99nlx7f4 {
    0%, 100% {
        box-shadow: 0 15px 50px rgba(30, 144, 255, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    50% {
        box-shadow: 0 15px 50px rgba(30, 144, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 40px rgba(30, 144, 255, 0.1);
    }
}

.glass-form-container[b-xv99nlx7f4] {
    animation: glassGlow-b-xv99nlx7f4 8s ease-in-out infinite;
}

/* ===== PT-SPECIFIC ADDITIONS ===== */
.pt-form-header[b-xv99nlx7f4] {
    background: linear-gradient(135deg, rgba(30, 144, 255, 0.1), rgba(65, 105, 225, 0.05));
    border-left: 5px solid #1e90ff;
    padding: 20px 24px;
    margin-bottom: 30px;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(30, 144, 255, 0.08);
}

.pt-form-title[b-xv99nlx7f4] {
    color: #0047ab;
    font-weight: 800;
    font-size: 1.6rem;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.5);
}

.pt-form-subtitle[b-xv99nlx7f4] {
    color: #4169e1;
    font-size: 1rem;
    opacity: 0.9;
}

.pt-card[b-xv99nlx7f4] {
    border-top: 4px solid #1e90ff !important;
    box-shadow: 0 10px 30px rgba(30, 144, 255, 0.1) !important;
}

.pt-badge[b-xv99nlx7f4] {
    background: linear-gradient(135deg, rgba(30, 144, 255, 0.2), rgba(65, 105, 225, 0.15)) !important;
    color: #0047ab !important;
    border: 1px solid rgba(30, 144, 255, 0.3) !important;
    font-weight: 600;
    backdrop-filter: blur(5px);
}

.btn-pt-primary[b-xv99nlx7f4] {
    background: linear-gradient(135deg, #1e90ff, #4169e1) !important;
    border-color: #1e90ff !important;
    color: white !important;
    box-shadow: 0 8px 25px rgba(30, 144, 255, 0.25) !important;
}

.btn-pt-secondary[b-xv99nlx7f4] {
    background: linear-gradient(135deg, rgba(30, 144, 255, 0.15), rgba(65, 105, 225, 0.1)) !important;
    border-color: #1e90ff !important;
    color: #0047ab !important;
}

.pt-alert[b-xv99nlx7f4] {
    background: linear-gradient(135deg, rgba(30, 144, 255, 0.15), rgba(65, 105, 225, 0.1)) !important;
    border-left: 5px solid #1e90ff !important;
    color: #0047ab !important;
    backdrop-filter: blur(5px);
}

.pt-progress-bar[b-xv99nlx7f4] {
    background: linear-gradient(90deg, #1e90ff, #4169e1, #6495ed) !important;
    box-shadow: 0 0 10px rgba(30, 144, 255, 0.3);
}

.pt-icon[b-xv99nlx7f4] {
    color: #1e90ff !important;
    filter: drop-shadow(0 2px 4px rgba(30, 144, 255, 0.2));
}

.pt-icon-secondary[b-xv99nlx7f4] {
    color: #6495ed !important;
}

/* ===== READONLY STYLES ===== */
.glass-readonly-value[b-xv99nlx7f4] {
    font-weight: 600;
    color: rgba(70, 130, 180, 0.9);
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(240, 245, 255, 0.7), rgba(230, 238, 255, 0.6));
    border-radius: 10px;
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* ===== INPUT ICONS ===== */
.glass-input-icon[b-xv99nlx7f4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, rgba(30, 144, 255, 0.15), rgba(65, 105, 225, 0.1));
    backdrop-filter: blur(8px);
    border-radius: 10px;
    border: 1px solid rgba(30, 144, 255, 0.2);
    box-shadow: 0 4px 12px rgba(30, 144, 255, 0.1);
    color: #1e90ff;
    font-size: 1.1rem;
}

/* ===== ACTION BAR (READ-ONLY TEXT + ICON) ===== */
.glass-action-bar[b-xv99nlx7f4] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: linear-gradient(135deg, rgba(240, 245, 255, 0.7), rgba(230, 238, 255, 0.6));
    border-radius: 12px;
    border: 1px solid rgba(30, 144, 255, 0.2);
    box-shadow: 0 4px 16px rgba(30, 144, 255, 0.06);
    color: rgba(70, 130, 180, 0.9);
    font-weight: 600;
    cursor: default;
    user-select: none;
    margin-bottom: 20px;
}

.glass-action-bar-icon[b-xv99nlx7f4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, rgba(30, 144, 255, 0.15), rgba(65, 105, 225, 0.1));
    backdrop-filter: blur(8px);
    border-radius: 8px;
    border: 1px solid rgba(30, 144, 255, 0.2);
    box-shadow: 0 4px 12px rgba(30, 144, 255, 0.1);
    color: #1e90ff;
    font-size: 1rem;
}

.glass-action-bar-text[b-xv99nlx7f4] {
    flex-grow: 1;
    color: rgba(25, 25, 112, 0.85);
    font-size: 1rem;
    font-weight: 600;
}
/* _content/ZenZonApp/Components/Pages/PxSoapRMT.razor.rz.scp.css */
/* ========================= */
/* GLASS FORM STYLES         */
/* ========================= */
.glass-form-container[b-ksk9egw6hm] {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 10px 40px rgba(0, 0, 139, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.glass-form-section[b-ksk9egw6hm] {
    background: rgba(248, 249, 250, 0.5);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.glass-form-label[b-ksk9egw6hm] {
    color: rgba(0, 0, 139, 0.9);
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

    .glass-form-label.section-title[b-ksk9egw6hm] {
        color: rgba(0, 0, 139, 0.95);
        font-size: 1.1rem;
        font-weight: 700;
        margin-bottom: 16px;
        border-bottom: 2px solid rgba(0, 0, 139, 0.1);
        padding-bottom: 8px;
    }

.glass-form-input[b-ksk9egw6hm] {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(0, 0, 139, 0.15) !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
    color: rgba(0, 0, 139, 0.9) !important;
    font-weight: 500;
    transition: all 0.3s ease !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 139, 0.05) !important;
}

    .glass-form-input.small[b-ksk9egw6hm] {
        padding: 6px 12px !important;
        font-size: 0.9rem;
    }

    .glass-form-input.readonly[b-ksk9egw6hm] {
        background: rgba(248, 249, 250, 0.7) !important;
        color: rgba(0, 0, 139, 0.7) !important;
        cursor: not-allowed;
    }

    .glass-form-input:focus[b-ksk9egw6hm] {
        background: rgba(255, 255, 255, 0.95) !important;
        border-color: rgba(0, 0, 139, 0.3) !important;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05), 0 0 0 3px rgba(0, 0, 139, 0.1) !important;
        outline: none !important;
    }

/* ===== ENHANCED GLASS COMPONENTS ===== */

/* Medium Sized Checkboxes */
.glass-checkbox-container[b-ksk9egw6hm] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

.glass-checkbox-list[b-ksk9egw6hm] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.glass-checkbox-item-large[b-ksk9egw6hm] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

    .glass-checkbox-item-large:hover[b-ksk9egw6hm] {
        background: rgba(255, 255, 255, 0.8);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

/* Medium Checkbox Size */
.glass-checkbox-large[b-ksk9egw6hm] {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(0, 0, 139, 0.4) !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
    margin: 0 !important;
}

    .glass-checkbox-large:checked[b-ksk9egw6hm] {
        background: rgba(0, 0, 139, 0.8) !important;
        border-color: rgba(0, 0, 139, 0.8) !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
    }

.glass-checkbox-label-large[b-ksk9egw6hm] {
    color: rgba(0, 0, 139, 0.9);
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    font-size: 0.95rem;
}

/* Inline Radio Buttons for Treatment/Assessment */
.glass-radio-group-inline[b-ksk9egw6hm] {
    display: flex !important;
    gap: 20px !important;
    align-items: center !important;
}

.glass-radio-item-inline[b-ksk9egw6hm] {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    background: rgba(255, 255, 255, 0.6) !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

    .glass-radio-item-inline:hover[b-ksk9egw6hm] {
        background: rgba(255, 255, 255, 0.8) !important;
        transform: translateY(-1px);
    }

    .glass-radio-item-inline.selected[b-ksk9egw6hm] {
        background: rgba(0, 0, 139, 0.1) !important;
        border-color: rgba(0, 0, 139, 0.3) !important;
    }

.glass-radio-large[b-ksk9egw6hm] {
    width: 20px !important;
    height: 20px !important;
    accent-color: rgba(0, 0, 139, 0.8) !important;
    cursor: pointer !important;
    margin: 0 !important;
}

.glass-radio-label-inline[b-ksk9egw6hm] {
    color: rgba(0, 0, 139, 0.9) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    font-size: 0.95rem !important;
    margin: 0 !important;
}

/* Textareas in 3 Card Layout */
.textarea-card-container[b-ksk9egw6hm] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.glass-textarea-card[b-ksk9egw6hm] {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .glass-textarea-card:hover[b-ksk9egw6hm] {
        background: rgba(255, 255, 255, 0.8);
        transform: translateY(-2px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    }

.glass-textarea-card-header[b-ksk9egw6hm] {
    margin-bottom: 16px;
}

.glass-textarea-card-label[b-ksk9egw6hm] {
    color: rgba(0, 0, 139, 0.9);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 8px;
    display: block;
}

.glass-textarea-card .glass-textarea[b-ksk9egw6hm] {
    flex-grow: 1;
    min-height: 120px;
    resize: vertical;
    width: 100% !important;
}

/* Textarea Styling */
.glass-textarea[b-ksk9egw6hm] {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.85) !important;
    border: 2px solid rgba(240, 248, 255, 1) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    color: rgba(0, 0, 139, 0.85) !important;
    font-weight: 500;
    transition: all 0.3s ease !important;
    resize: vertical;
    min-height: 120px;
    width: 100% !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

    .glass-textarea:focus[b-ksk9egw6hm] {
        background: rgba(255, 255, 255, 0.95) !important;
        border-color: #0d6efd !important;
        box-shadow: 0 0 0 3px rgba(0, 0, 139, 0.1) !important;
        outline: none !important;
    }

/* Small Input for Grade */
.glass-small-input[b-ksk9egw6hm] {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.7) !important;
    border: 2px solid rgba(240, 248, 255, 1) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    color: rgba(240, 248, 255, 1) !important;
    font-size: 0.9rem !important;
    width: 100% !important;
}


/* Responsive Design */
@media (max-width: 992px) {
    .textarea-card-container[b-ksk9egw6hm] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .textarea-card-container[b-ksk9egw6hm] {
        grid-template-columns: 1fr;
    }

    .glass-radio-group-inline[b-ksk9egw6hm] {
        flex-direction: column;
        gap: 12px !important;
        align-items: flex-start !important;
    }

    .glass-radio-item-inline[b-ksk9egw6hm] {
        width: 100%;
    }
}
/* Submit Button */
.glass-submit-button[b-ksk9egw6hm] {
    background: linear-gradient(135deg, rgba(0, 0, 139, 0.9), rgba(13, 110, 253, 0.9)) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: white !important;
    border-radius: 14px !important;
    padding: 12px 32px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 6px 20px rgba(0, 0, 139, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    position: relative;
    overflow: hidden;
}

    .glass-submit-button:hover[b-ksk9egw6hm] {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(0, 0, 139, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
    }

    .glass-submit-button:active[b-ksk9egw6hm] {
        transform: translateY(0);
        box-shadow: 0 4px 12px rgba(0, 0, 139, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    }

    .glass-submit-button[b-ksk9egw6hm]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.6s ease;
    }

    .glass-submit-button:hover[b-ksk9egw6hm]::before {
        left: 100%;
    }

/* Responsive adjustments */
@@media (max-width: 768px) {
    .glass-form-container[b-ksk9egw6hm] {
        padding: 20px;
        border-radius: 16px;
    }

    .glass-form-section[b-ksk9egw6hm] {
        padding: 16px;
        border-radius: 14px;
    }

    .glass-radio-group[b-ksk9egw6hm] {
        flex-direction: column;
        gap: 12px;
    }
}


/* Tab Styles */
.glass-tab-container .nav-tabs[b-ksk9egw6hm] {
    border-bottom: 2px solid rgba(0, 0, 139, 0.1);
    padding-bottom: 2px;
}

.glass-tab-container .nav-link[b-ksk9egw6hm] {
    background: rgba(248, 249, 250, 0.7);
    border: 2px solid rgba(0, 0, 139, 0.1) !important;
    border-bottom: none !important;
    color: #00008b !important;
    font-weight: 700 !important;
    padding: 12px 24px !important;
    margin-right: 8px;
    border-radius: 12px 12px 0 0 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 139, 0.05);
}

    .glass-tab-container .nav-link:hover[b-ksk9egw6hm] {
        background: rgba(240, 248, 255, 0.8) !important;
        border-color: rgba(0, 0, 139, 0.2) !important;
        transform: translateY(-2px);
    }

    .glass-tab-container .nav-link.active[b-ksk9egw6hm] {
        background: rgba(240, 248, 255, 0.95) !important;
        border-color: rgba(0, 0, 139, 0.3) !important;
        color: #00008b !important;
        font-weight: 800 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 139, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
        position: relative;
    }

        .glass-tab-container .nav-link.active[b-ksk9egw6hm]::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #00008b, #0d6efd);
            border-radius: 3px;
        }

/* Enhanced input fields */
.glass-enhanced-input[b-ksk9egw6hm] {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(8px);
    border: 2px solid rgba(0, 0, 139, 0.2) !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    color: rgba(0, 0, 139, 0.95) !important;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.03), 0 4px 12px rgba(0, 0, 139, 0.08) !important;
    height: 52px;
}

    .glass-enhanced-input:focus[b-ksk9egw6hm] {
        background: rgba(255, 255, 255, 0.98) !important;
        border-color: rgba(0, 0, 139, 0.4) !important;
        box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.03), 0 6px 16px rgba(0, 0, 139, 0.12), 0 0 0 4px rgba(0, 0, 139, 0.1) !important;
        transform: translateY(-1px);
        outline: none !important;
    }

    .glass-enhanced-input[b-ksk9egw6hm]::placeholder {
        color: rgba(0, 0, 139, 0.4) !important;
        font-weight: 500;
    }

/* Date picker specific */
.input-group.date .glass-enhanced-input[b-ksk9egw6hm] {
    border-right: none !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group.date .input-group-text[b-ksk9egw6hm] {
    background: rgba(0, 0, 139, 0.08) !important;
    border: 2px solid rgba(0, 0, 139, 0.2) !important;
    border-left: none !important;
    color: rgba(0, 0, 139, 0.7) !important;
    font-weight: 600;
    border-radius: 0 14px 14px 0 !important;
}

/* Larger Checkboxes */
.glass-checkbox-large[b-ksk9egw6hm] {
    width: 24px !important;
    height: 24px !important;
    border: 2px solid rgba(0, 0, 139, 0.3) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    cursor: pointer;
    transition: all 0.2s ease !important;
    position: relative;
}

    .glass-checkbox-large:checked[b-ksk9egw6hm] {
        background: rgba(0, 0, 139, 0.9) !important;
        border-color: rgba(0, 0, 139, 0.9) !important;
    }

        .glass-checkbox-large:checked[b-ksk9egw6hm]::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-weight: bold;
            font-size: 14px;
        }

/* Larger checkbox containers */
.glass-checkbox-item-medium[b-ksk9egw6hm] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    transition: all 0.2s ease;
    margin-bottom: 6px;
}
    .glass-checkbox-item-large:hover[b-ksk9egw6hm] {
        background: rgba(255, 255, 255, 0.9);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 139, 0.08);
    }

.glass-checkbox-label-large[b-ksk9egw6hm] {
    color: rgba(0, 0, 139, 0.9);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    user-select: none;
}
/* Full-width textareas */
.glass-textarea-wide[b-ksk9egw6hm] {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(8px);
    border: 2px solid rgba(0, 0, 139, 0.2) !important;
    border-radius: 16px !important;
    padding: 18px !important;
    color: rgba(0, 0, 139, 0.95) !important;
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.3s ease !important;
    box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.02), 0 4px 16px rgba(0, 0, 139, 0.06) !important;
    min-height: 120px;
    resize: vertical;
}

    .glass-textarea-wide:focus[b-ksk9egw6hm] {
        background: rgba(255, 255, 255, 0.98) !important;
        border-color: rgba(0, 0, 139, 0.4) !important;
        box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.02), 0 8px 24px rgba(0, 0, 139, 0.1), 0 0 0 4px rgba(0, 0, 139, 0.08) !important;
        outline: none !important;
    }

/* Make textarea sections full width */
.textarea-section[b-ksk9egw6hm] {
    grid-column: 1 / -1; /* Span all columns */
}
/* Small glass inputs for Grade/Other */
.glass-small-input[b-ksk9egw6hm] {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(6px);
    border: 2px solid rgba(0, 0, 139, 0.15) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    color: rgba(0, 0, 139, 0.9) !important;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.03), 0 3px 8px rgba(0, 0, 139, 0.05) !important;
}

    .glass-small-input:focus[b-ksk9egw6hm] {
        background: rgba(255, 255, 255, 0.95) !important;
        border-color: rgba(0, 0, 139, 0.3) !important;
        box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.03), 0 5px 12px rgba(0, 0, 139, 0.08), 0 0 0 3px rgba(0, 0, 139, 0.08) !important;
        outline: none !important;
    }
/* Light background theme */
body.light-theme[b-ksk9egw6hm] {
    background: linear-gradient(135deg, #f8fafc 0%, #e9ecef 100%) !important;
    min-height: 100vh;
}

/* Glass container with light theme */
.glass-light-container[b-ksk9egw6hm] {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 139, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Apply to your main container */
.main-content-container[b-ksk9egw6hm] {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 24px;
    padding: 32px;
    margin: 20px 0;
    box-shadow: 0 15px 50px rgba(0, 0, 139, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.glass-radio-item[b-ksk9egw6hm] {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.3);
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

    .glass-radio-item:hover[b-ksk9egw6hm] {
        background: rgba(255, 255, 255, 0.6);
    }

    .glass-radio-item.selected[b-ksk9egw6hm] {
        background: rgba(52, 152, 219, 0.1);
        border: 1px solid rgba(52, 152, 219, 0.3);
    }

input[type="radio"].glass-radio-large[b-ksk9egw6hm] {
    width: 20px;
    height: 20px;
    accent-color: #3498db;
    margin-right: 10px;
    cursor: pointer;
}

.glass-radio-label[b-ksk9egw6hm] {
    cursor: pointer;
    user-select: none;
    flex-grow: 1;
}
/* Enhanced Glass Input Styles */
.glass-input-group[b-ksk9egw6hm] {
    position: relative;
    margin-bottom: 1rem;
}

.glass-input-label[b-ksk9egw6hm] {
    display: flex;
    align-items: center;
    color: #2c3e50;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    letter-spacing: 0.3px;
}

    .glass-input-label i[b-ksk9egw6hm] {
        color: #3498db;
        font-size: 0.9rem;
    }

/* Calendar Styling */
.glass-calendar-wrapper[b-ksk9egw6hm] {
    position: relative;
}

.glass-calendar[b-ksk9egw6hm] {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.7) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 10px !important;
    padding: 12px 45px 12px 15px !important;
    width: 100% !important;
    color: #2c3e50 !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
}

    .glass-calendar:hover[b-ksk9egw6hm] {
        background: rgba(255, 255, 255, 0.85) !important;
        border-color: rgba(52, 152, 219, 0.4) !important;
        box-shadow: 0 6px 20px rgba(52, 152, 219, 0.1) !important;
    }

    .glass-calendar:focus[b-ksk9egw6hm] {
        background: rgba(255, 255, 255, 0.9) !important;
        border-color: #3498db !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2) !important;
    }

.glass-calendar-icon[b-ksk9egw6hm] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #3498db;
    font-size: 1rem;
    pointer-events: none;
}

/* General Input Wrapper */
.glass-input-wrapper[b-ksk9egw6hm] {
    position: relative;
}

.glass-time-input[b-ksk9egw6hm],
.glass-number-input[b-ksk9egw6hm],
.glass-currency-input[b-ksk9egw6hm],
.glass-enhanced-input[b-ksk9egw6hm] {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.7) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 10px !important;
    padding: 12px 45px 12px 15px !important;
    width: 100% !important;
    color: #2c3e50 !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
}

    .glass-time-input:hover[b-ksk9egw6hm],
    .glass-number-input:hover[b-ksk9egw6hm],
    .glass-currency-input:hover[b-ksk9egw6hm],
    .glass-enhanced-input:hover[b-ksk9egw6hm] {
        background: rgba(255, 255, 255, 0.85) !important;
        border-color: rgba(52, 152, 219, 0.4) !important;
        box-shadow: 0 6px 20px rgba(52, 152, 219, 0.1) !important;
    }

    .glass-time-input:focus[b-ksk9egw6hm],
    .glass-number-input:focus[b-ksk9egw6hm],
    .glass-currency-input:focus[b-ksk9egw6hm],
    .glass-enhanced-input:focus[b-ksk9egw6hm] {
        background: rgba(255, 255, 255, 0.9) !important;
        border-color: #3498db !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2) !important;
    }

/* Input Icons */
.glass-input-icon[b-ksk9egw6hm] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #3498db;
    font-size: 1rem;
    pointer-events: none;
}

/* Subtext */
.glass-input-subtext[b-ksk9egw6hm] {
    font-size: 0.75rem;
    color: #7f8c8d;
    margin-top: 0.25rem;
    font-weight: 500;
    text-align: right;
}

/* Placeholder Styling */
.glass-enhanced-input[b-ksk9egw6hm]::placeholder {
    color: #95a5a6 !important;
    opacity: 0.7 !important;
}

/* Number Input Specific */
input[type="number"].glass-number-input[b-ksk9egw6hm],
input[type="number"].glass-currency-input[b-ksk9egw6hm] {
    -moz-appearance: textfield;
}

    input[type="number"].glass-number-input[b-ksk9egw6hm]::-webkit-outer-spin-button,
    input[type="number"].glass-number-input[b-ksk9egw6hm]::-webkit-inner-spin-button,
    input[type="number"].glass-currency-input[b-ksk9egw6hm]::-webkit-outer-spin-button,
    input[type="number"].glass-currency-input[b-ksk9egw6hm]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

/* Container Enhancements */
.glass-light-container[b-ksk9egw6hm] {
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.08);
    padding: 1.5rem;
}

.glass-form-section[b-ksk9egw6hm] {
    padding: 1.5rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Blazor Input Override */
[b-ksk9egw6hm] input,
[b-ksk9egw6hm] .form-control {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Focus State Enhancement */
.glass-input-group:focus-within .glass-input-label[b-ksk9egw6hm] {
    color: #3498db;
}

    .glass-input-group:focus-within .glass-input-label i[b-ksk9egw6hm] {
        color: #2980b9;
    }

/* Responsive Adjustments */
@media (max-width: 768px) {
    .glass-input-group[b-ksk9egw6hm] {
        margin-bottom: 1.5rem;
    }

    .glass-calendar[b-ksk9egw6hm],
    .glass-time-input[b-ksk9egw6hm],
    .glass-number-input[b-ksk9egw6hm],
    .glass-currency-input[b-ksk9egw6hm] {
        padding: 10px 40px 10px 12px !important;
        font-size: 0.9rem !important;
    }
}
/* Glass Calendar Input */
.glass-calendar-input[b-ksk9egw6hm] {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.7) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 10px !important;
    padding: 12px 45px 12px 15px !important;
    width: 100% !important;
    color: #2c3e50 !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
}

/* Glass Calendar Popup/Dropdown */
[b-ksk9egw6hm] .blazor-datepicker__popup,
[b-ksk9egw6hm] .datepicker-dropdown,
[b-ksk9egw6hm] .dropdown-menu.show,
[b-ksk9egw6hm] .b-calendar-grid,
[b-ksk9egw6hm] .calendar-container {
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 16px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07) !important;
    padding: 20px !important;
    color: #2c3e50 !important;
    min-width: 300px !important;
}

/* Calendar Header */
[b-ksk9egw6hm] .datepicker-days th,
[b-ksk9egw6hm] .datepicker-header,
[b-ksk9egw6hm] .b-calendar-header,
[b-ksk9egw6hm] .calendar-header {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.7) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #2c3e50 !important;
    font-weight: 600 !important;
    padding: 10px 0 !important;
    margin-bottom: 10px !important;
}

/* Calendar Days */
[b-ksk9egw6hm] .datepicker-days td,
[b-ksk9egw6hm] .b-calendar-day,
[b-ksk9egw6hm] .calendar-day {
    backdrop-filter: blur(5px);
    background: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    color: #2c3e50 !important;
    margin: 2px !important;
    padding: 8px !important;
    min-width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    font-weight: 500 !important;
}

    [b-ksk9egw6hm] .datepicker-days td:hover,
    [b-ksk9egw6hm] .b-calendar-day:hover,
    [b-ksk9egw6hm] .calendar-day:hover {
        background: rgba(52, 152, 219, 0.2) !important;
        border-color: rgba(52, 152, 219, 0.3) !important;
        transform: translateY(-1px);
    }

    /* Today's Date */
    [b-ksk9egw6hm] .datepicker-days td.today,
    [b-ksk9egw6hm] .today .b-calendar-day,
    [b-ksk9egw6hm] .calendar-day.today {
        background: rgba(52, 152, 219, 0.3) !important;
        border: 1px solid #3498db !important;
        color: white !important;
        font-weight: 600 !important;
    }

    /* Selected Date */
    [b-ksk9egw6hm] .datepicker-days td.selected,
    [b-ksk9egw6hm] .selected .b-calendar-day,
    [b-ksk9egw6hm] .calendar-day.selected {
        background: #3498db !important;
        border-color: #2980b9 !important;
        color: white !important;
        font-weight: 600 !important;
        box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3) !important;
    }

/* Day Names (Monday, Tuesday, etc.) */
[b-ksk9egw6hm] .dow,
[b-ksk9egw6hm] .b-calendar-week-day,
[b-ksk9egw6hm] .calendar-week-day {
    color: #7f8c8d !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    padding: 8px 0 !important;
    text-align: center !important;
}

/* Navigation Arrows (Previous/Next Month) */
[b-ksk9egw6hm] .datepicker-switch,
[b-ksk9egw6hm] .prev,
[b-ksk9egw6hm] .next,
[b-ksk9egw6hm] .b-calendar-nav,
[b-ksk9egw6hm] .calendar-nav {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.6) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    color: #3498db !important;
    transition: all 0.2s ease !important;
    border: none !important;
    cursor: pointer !important;
}

    [b-ksk9egw6hm] .datepicker-switch:hover,
    [b-ksk9egw6hm] .prev:hover,
    [b-ksk9egw6hm] .next:hover,
    [b-ksk9egw6hm] .b-calendar-nav:hover,
    [b-ksk9egw6hm] .calendar-nav:hover {
        background: rgba(52, 152, 219, 0.1) !important;
        transform: translateY(-1px);
    }

/* Month/Year Select Dropdowns */
[b-ksk9egw6hm] .datepicker-months .month,
[b-ksk9egw6hm] .datepicker-years .year {
    backdrop-filter: blur(5px);
    background: rgba(255, 255, 255, 0.5) !important;
    border-radius: 8px !important;
    padding: 8px !important;
    margin: 2px !important;
    color: #2c3e50 !important;
    transition: all 0.2s ease !important;
}

    [b-ksk9egw6hm] .datepicker-months .month:hover,
    [b-ksk9egw6hm] .datepicker-years .year:hover {
        background: rgba(52, 152, 219, 0.2) !important;
    }

/* Disabled Days */
[b-ksk9egw6hm] .datepicker-days td.disabled,
[b-ksk9egw6hm] .disabled .b-calendar-day,
[b-ksk9egw6hm] .calendar-day.disabled {
    background: rgba(236, 240, 241, 0.3) !important;
    color: #bdc3c7 !important;
    cursor: not-allowed !important;
}

/* Add a backdrop blur to the entire page when calendar is open */
[b-ksk9egw6hm] .modal-backdrop {
    backdrop-filter: blur(3px) !important;
    background: rgba(0, 0, 0, 0.1) !important;
}

/* Calendar animation */
[b-ksk9egw6hm] .datepicker-dropdown {
    animation: glassSlideIn-b-ksk9egw6hm 0.3s ease-out !important;
}

@keyframes glassSlideIn-b-ksk9egw6hm {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Ensure the calendar appears above other elements */
[b-ksk9egw6hm] .dropdown-menu {
    z-index: 1050 !important;
}

/* For Blazor's specific InputDate component */
/* Blazor valid state -> BLUE (instead of green) */
/* Blazor Input Override (DO NOT kill glass styles) */
[b-ksk9egw6hm] input:not(.glass-form-input):not(.glass-enhanced-input):not(.glass-small-input):not(.glass-calendar):not(.glass-calendar-input),
[b-ksk9egw6hm] textarea:not(.glass-textarea):not(.glass-textarea-wide),
[b-ksk9egw6hm] .form-control:not(.glass-form-input):not(.glass-enhanced-input):not(.glass-small-input):not(.glass-textarea):not(.glass-textarea-wide):not(.glass-calendar):not(.glass-calendar-input) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

[b-ksk9egw6hm] .invalid {
    border-color: rgba(231, 76, 60, 0.4) !important;
}

/* Month/Year title */
[b-ksk9egw6hm] .datepicker-switch {
    font-weight: 600 !important;
    font-size: 1rem !important;
}

/* If using a specific date picker library, add its classes here */
[b-ksk9egw6hm] .mud-picker,
[b-ksk9egw6hm] .mud-calendar {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 16px !important;
}

/* Week numbers (if shown) */
[b-ksk9egw6hm] .week,
[b-ksk9egw6hm] .weeknumber {
    color: #95a5a6 !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
}

/* Range selection (if supported) */
[b-ksk9egw6hm] .range,
[b-ksk9egw6hm] .in-range {
    background: rgba(52, 152, 219, 0.1) !important;
    border-color: rgba(52, 152, 219, 0.2) !important;
}

/* Highlight weekends */
[b-ksk9egw6hm] .datepicker-days td:first-child,
[b-ksk9egw6hm] .datepicker-days td:last-child {
    color: #e74c3c !important;
}

[b-ksk9egw6hm] .weekend {
    background: rgba(231, 76, 60, 0.05) !important;
}
.glass-input-wrapper[b-ksk9egw6hm] {
    display: flex;
    align-items: center;
}

.glass-input-icon[b-ksk9egw6hm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: #0d6efd; /* Blue color */
}
.glass-readonly-value[b-ksk9egw6hm] {
    font-weight: 500;
    /* Keep the same font size as your original InputNumber had */
}
/* Base glass button: consistent size for all actions */
.glass-submit-button[b-ksk9egw6hm] {
    min-width: 180px; /* makes Cancel/Sign match Save width */
    height: 44px; /* consistent height */
    padding: 10px 18px;
    border-radius: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(255,255,255,0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 22px rgba(0,0,0,0.10);
    /* default gradient (Save) */
    color: #fff;
    background: linear-gradient(135deg, rgba(46, 110, 255, 0.95), rgba(19, 86, 220, 0.92));
}

    .glass-submit-button:disabled[b-ksk9egw6hm] {
        opacity: 0.55;
        cursor: not-allowed;
    }

    /* Cancel variant: same glass + size, softer neutral gradient */
    .glass-submit-button.glass-btn-cancel[b-ksk9egw6hm] {
        color: rgba(20, 30, 55, 0.95);
        background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(235, 242, 255, 0.75));
        border: 1px solid rgba(120, 140, 180, 0.35);
    }

    /* Sign variant: same glass + size, green gradient */
    .glass-submit-button.glass-btn-sign[b-ksk9egw6hm] {
        color: #fff;
        background: linear-gradient(135deg, rgba(36, 170, 98, 0.95), rgba(18, 132, 70, 0.92));
    }

    /* Optional hover polish */
    .glass-submit-button:not(:disabled):hover[b-ksk9egw6hm] {
        transform: translateY(-1px);
        filter: brightness(1.03);
    }
/* _content/ZenZonApp/Components/Pages/PxSoapTCMForm.razor.rz.scp.css */
/* === SOAP READ-ONLY STRIP: MATCH RMT INLINE STYLE === */

/* Force value rows to behave like RMT pills */
.glass-card .text-muted[b-5b3pdiq1is],
.glass-card .small[b-5b3pdiq1is] {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

    /* Icon first, blue, aligned */
    .glass-card .text-muted .bi[b-5b3pdiq1is],
    .glass-card .small .bi[b-5b3pdiq1is],
    .glass-card .text-muted i[b-5b3pdiq1is],
    .glass-card .small i[b-5b3pdiq1is],
    .glass-card .text-muted svg[b-5b3pdiq1is],
    .glass-card .small svg[b-5b3pdiq1is] {
        order: -1; /* icon before value */
        color: #146093 !important;
        fill: #146093 !important;
        opacity: 0.85;
        font-size: 0.9em;
        flex-shrink: 0;
    }

    /* Units like "minutes", "CAD" */
    .glass-card .text-muted small[b-5b3pdiq1is],
    .glass-card .small small[b-5b3pdiq1is] {
        margin-left: 4px;
        font-size: 0.75rem;
        opacity: 0.7;
    }
/* _content/ZenZonApp/Components/Pages/Services.razor.rz.scp.css */
/* Glass Modals */
.glass-modal-backdrop[b-rttf8aujxy] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.glass-modal[b-rttf8aujxy] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 20px 60px rgba(31, 38, 135, 0.15), 0 8px 32px rgba(31, 38, 135, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    max-width: 500px;
    width: 100%;
    animation: modalSlideIn 0.3s ease;
    overflow: hidden;
}

@@keyframes modalSlideIn {
    from[b-rttf8aujxy] {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

    to[b-rttf8aujxy] {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.glass-modal-header[b-rttf8aujxy] {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    padding: 1.5rem 2rem;
}

.glass-modal-title[b-rttf8aujxy] {
    color: #2c3e50;
    font-weight: 600;
    font-size: 1.25rem;
    margin: 0;
    background: linear-gradient(135deg, #2c3e50, #3498db);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.glass-modal-close[b-rttf8aujxy] {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #7f8c8d;
    font-size: 1.25rem;
    line-height: 1;
}

    .glass-modal-close:hover[b-rttf8aujxy] {
        background: rgba(255, 255, 255, 0.9);
        border-color: rgba(52, 152, 219, 0.3);
        color: #2c3e50;
        transform: rotate(90deg);
    }

.glass-modal-body[b-rttf8aujxy] {
    padding: 2rem;
    background: rgba(255, 255, 255, 0.5);
}

.glass-modal-footer[b-rttf8aujxy] {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    padding: 1.5rem 2rem;
}

/* Glass Form Inputs in Modals */
.glass-form-group[b-rttf8aujxy] {
    margin-bottom: 1.5rem;
}

.glass-form-label[b-rttf8aujxy] {
    color: #5a6c7d;
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: block;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.glass-form-control[b-rttf8aujxy] {
    width: 100%;
    padding: 0.875rem 1rem;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    color: #2c3e50;
    font-size: 1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04), 0 1px 0 rgba(255, 255, 255, 0.8);
}

    .glass-form-control:focus[b-rttf8aujxy] {
        outline: none;
        background: rgba(255, 255, 255, 0.95);
        border-color: rgba(52, 152, 219, 0.5);
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(52, 152, 219, 0.15), 0 1px 0 rgba(255, 255, 255, 0.8);
    }

.glass-form-check[b-rttf8aujxy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.glass-form-check-input[b-rttf8aujxy] {
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(52, 152, 219, 0.3);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

    .glass-form-check-input:checked[b-rttf8aujxy] {
        background: #3498db;
        border-color: #3498db;
    }

        .glass-form-check-input:checked[b-rttf8aujxy]::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 0.75rem;
            font-weight: bold;
        }

.glass-form-check-label[b-rttf8aujxy] {
    color: #5a6c7d;
    font-size: 0.95rem;
    cursor: pointer;
}

.glass-form-text[b-rttf8aujxy] {
    color: #95a5a6;
    font-size: 0.85rem;
    margin-top: 0.5rem;
}
.glass-icon-circle[b-rttf8aujxy] {
    width: 40px;
    height: 40px;
    background: rgba(52, 152, 219, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(52, 152, 219, 0.2);
}

.input-group-text[b-rttf8aujxy] {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 12px 0 0 12px;
    color: #95a5a6;
    backdrop-filter: blur(4px);
}

.bg-light[b-rttf8aujxy] {
    background: rgba(248, 249, 250, 0.7) !important;
    backdrop-filter: blur(4px);
}
/* Ensure main content buttons are always clickable */
.glass-btn[b-rttf8aujxy] {
    position: relative;
    z-index: 1;
}

/* Fix for modal backdrop */
.glass-modal-backdrop[b-rttf8aujxy] {
    z-index: 1050;
    pointer-events: auto;
}

/* Ensure main content is above when no modal is open */
.glass-page-container[b-rttf8aujxy] {
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Make sure buttons in the main content are clickable */
.glass-section-header[b-rttf8aujxy] {
    position: relative;
    z-index: 2;
}

/* Fix for button hover states */
.glass-btn:not(:disabled)[b-rttf8aujxy] {
    cursor: pointer;
    pointer-events: auto;
}

/* Ensure buttons are above modal backdrops */
.glass-btn-primary[b-rttf8aujxy],
.glass-btn-outline[b-rttf8aujxy] {
    position: relative;
    z-index: 10;
}
/* Improved Button Colors & Visibility */
/* Primary Add Button - More vibrant */
.glass-btn-primary[b-rttf8aujxy] {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    font-weight: 600;
    padding: 0.85rem 2rem;
}

.glass-btn-primary:hover[b-rttf8aujxy] {
    background: linear-gradient(135deg, #2e86c1, #2471a3);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Modal Cancel Button - More distinct */
.glass-modal-cancel[b-rttf8aujxy] {
    background: rgba(108, 117, 125, 0.2);
    color: #6c757d;
    border: 1px solid rgba(108, 117, 125, 0.3);
}

    .glass-modal-cancel:hover[b-rttf8aujxy] {
        background: rgba(108, 117, 125, 0.3);
        color: #495057;
        border-color: rgba(108, 117, 125, 0.4);
    }

/* Modal Save Button - Success color */
.glass-modal-save[b-rttf8aujxy] {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.2);
}

    .glass-modal-save:hover[b-rttf8aujxy] {
        background: linear-gradient(135deg, #27ae60, #229954);
        box-shadow: 0 6px 20px rgba(46, 204, 113, 0.3);
    }

/* Action Buttons - More colorful and visible */
.glass-btn-edit[b-rttf8aujxy] {
    background: rgba(52, 152, 219, 0.15);
    color: #2980b9;
    border: 1px solid rgba(52, 152, 219, 0.3);
}

    .glass-btn-edit:hover[b-rttf8aujxy] {
        background: rgba(52, 152, 219, 0.25);
        color: #1c6ea4;
        border-color: rgba(52, 152, 219, 0.4);
    }

.glass-btn-deactivate[b-rttf8aujxy] {
    background: rgba(243, 156, 18, 0.15);
    color: #d68910;
    border: 1px solid rgba(243, 156, 18, 0.3);
}

    .glass-btn-deactivate:hover[b-rttf8aujxy] {
        background: rgba(243, 156, 18, 0.25);
        color: #b9770e;
        border-color: rgba(243, 156, 18, 0.4);
    }

.glass-btn-activate[b-rttf8aujxy] {
    background: rgba(46, 204, 113, 0.15);
    color: #27ae60;
    border: 1px solid rgba(46, 204, 113, 0.3);
}

    .glass-btn-activate:hover[b-rttf8aujxy] {
        background: rgba(46, 204, 113, 0.25);
        color: #229954;
        border-color: rgba(46, 204, 113, 0.4);
    }

.glass-btn-delete[b-rttf8aujxy] {
    background: rgba(231, 76, 60, 0.15);
    color: #c0392b;
    border: 1px solid rgba(231, 76, 60, 0.3);
}

    .glass-btn-delete:hover[b-rttf8aujxy] {
        background: rgba(231, 76, 60, 0.25);
        color: #a93226;
        border-color: rgba(231, 76, 60, 0.4);
    }

/* Improved Icon Circle - More visible */
.glass-icon-circle[b-rttf8aujxy] {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #3498db, #2980b9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.2);
    margin-right: 12px;
}

    .glass-icon-circle i[b-rttf8aujxy] {
        color: white !important;
        font-size: 1.1rem;
        filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2));
    }

/* Button Group Spacing */
.glass-btn-group[b-rttf8aujxy] {
    gap: 6px;
}

    .glass-btn-group .glass-btn[b-rttf8aujxy] {
        padding: 0.5rem 0.75rem;
        min-width: 42px;
        font-size: 0.9rem;
    }

/* Hover effects for all buttons */
.glass-btn[b-rttf8aujxy] {
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

    .glass-btn:active[b-rttf8aujxy] {
        transform: translateY(0);
    }

/* Add glow effect to primary button */
.glass-btn-primary[b-rttf8aujxy]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.glass-btn-primary:hover[b-rttf8aujxy]::after {
    transform: translateX(100%);
}
.glass-page-title[b-rttf8aujxy],
.glass-section-title[b-rttf8aujxy],
.glass-section-subtitle[b-rttf8aujxy] {
    margin-left: 1rem;
}
.glass-section-header .glass-btn-primary[b-rttf8aujxy] {
    margin-right: 1rem;
}
.glass-table[b-rttf8aujxy] {
    width: 100%;
    table-layout: fixed;
}

    .glass-table .col-name[b-rttf8aujxy] {
        width: 36%;
    }

    .glass-table .col-price[b-rttf8aujxy] {
        width: 16%;
    }

    .glass-table .col-duration[b-rttf8aujxy] {
        width: 18%;
    }

    .glass-table .col-status[b-rttf8aujxy] {
        width: 15%;
    }

    .glass-table .col-actions[b-rttf8aujxy] {
        width: 15%;
    }

    .glass-table th[b-rttf8aujxy],
    .glass-table td[b-rttf8aujxy] {
        vertical-align: middle;
    }
/* _content/ZenZonApp/Components/Pages/Stats/DonutStat.razor.rz.scp.css */
/* 1. MAIN CONTAINER */
.gauge-wrapper[b-46rr4l6umc] {
    width: 220px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    position: relative;
}

/* 2. SVG AREA (ARC + BAR + NEEDLE) */
.gauge-container[b-46rr4l6umc] {
    position: relative;
    width: 100%;
}

.gauge-svg[b-46rr4l6umc] {
    width: 100%;
    height: auto;
    overflow: visible; /* Crucial to prevent clipping of the bottom bar */
    filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.1));
}

/* 3. ARC STYLES */
.gauge-track[b-46rr4l6umc] {
    fill: none;
    stroke: rgba(0, 0, 0, 0.08);
    stroke-width: 3;
}

.gauge-progress[b-46rr4l6umc] {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 125.66;
    transition: stroke-dashoffset 1.5s ease-in-out, stroke 0.5s ease;
}

/* 4. SEGMENTED BAR STYLES */
.bar-bg[b-46rr4l6umc] {
    fill: rgba(0, 0, 0, 0.05);
}

.bar-fill[b-46rr4l6umc] {
    transition: width 1.5s ease-in-out, fill 0.5s ease;
}

.bottom-bar-group[b-46rr4l6umc] {
    opacity: 0.9;
}

/* 5. NEEDLE & ANIMATIONS */
.needle-group[b-46rr4l6umc] {
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.needle-path[b-46rr4l6umc] {
    fill: #333;
    stroke: #ff4500;
    stroke-width: 0.5;
    transition: fill 0.5s ease;
}

.needle-center[b-46rr4l6umc] {
    fill: #222;
    stroke: #444;
    stroke-width: 1;
}

/* Low Fuel Shake */
@keyframes shiver-b-46rr4l6umc {
    0% {
        transform: rotate(var(--rotation)) translate(0, 0);
    }

    25% {
        transform: rotate(calc(var(--rotation) - 0.6deg));
    }

    75% {
        transform: rotate(calc(var(--rotation) + 0.6deg));
    }

    100% {
        transform: rotate(var(--rotation));
    }
}

.needle-low[b-46rr4l6umc] {
    animation: shiver-b-46rr4l6umc 0.15s infinite;
    filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.4));
}

/* 6. LABELS & TEXT (PREVENTS OVERLAY) */
.gauge-labels-overlay[b-46rr4l6umc] {
    position: absolute;
    top: 48%; /* Positioned relative to the arc baseline */
    width: 82%;
    left: 9%;
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: 800;
    color: #94a3b8;
    pointer-events: none;
    z-index: 1;
}

.gauge-info[b-46rr4l6umc] {
    text-align: center;
    margin-top: 15px; /* Pushes text down so it doesn't hit the bar */
    width: 100%;
}

.gauge-value[b-46rr4l6umc] {
    display: block;
    font-size: 1.65rem;
    font-weight: 900;
    color: #1e293b;
    line-height: 1;
}

.gauge-label[b-46rr4l6umc] {
    display: block;
    font-size: 0.7rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}

/* Warning State Pulse */
.warning-text[b-46rr4l6umc] {
    color: #ef4444 !important;
    animation: pulse-b-46rr4l6umc 1.5s infinite;
}

@keyframes pulse-b-46rr4l6umc {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 1;
    }
}
.glass-bar-group rect[b-46rr4l6umc] {
    backdrop-filter: blur(4px); /* Adds a subtle glass effect to the bar background */
}

.needle-path[b-46rr4l6umc] {
    filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.3)); /* Makes the needle pop slightly */
}
/* _content/ZenZonApp/Components/Pages/TcmHerbalSection.razor.rz.scp.css */
/* Herbal Modal Glass Styles */

/* Modal Structure */
.modal-overlay.glass-overlay[b-at4l2ck12f] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 20px;
}

.modal-container.glass-modal[b-at4l2ck12f] {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.modal-scroll-content[b-at4l2ck12f] {
    overflow-y: auto;
    flex: 1;
}

/* Header */
.modal-header.glass-header[b-at4l2ck12f] {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 20px 24px;
    border-radius: 20px 20px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header-content[b-at4l2ck12f] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-icon[b-at4l2ck12f] {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

.herbal-icon[b-at4l2ck12f], .history-icon[b-at4l2ck12f] {
    font-size: 24px;
}

.modal-title[b-at4l2ck12f] {
    font-weight: 600;
    color: #1a237e;
    margin: 0;
    font-size: 18px;
}

.modal-subtitle[b-at4l2ck12f] {
    font-size: 14px;
    color: #666;
    margin: 4px 0 0 0;
}

.glass-header-actions[b-at4l2ck12f] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-close-glass[b-at4l2ck12f] {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 8px;
    border-radius: 10px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .btn-close-glass:hover[b-at4l2ck12f] {
        background: rgba(0, 0, 0, 0.05);
        color: #333;
    }

/* Body */
.modal-body.glass-body[b-at4l2ck12f] {
    padding: 24px;
}

/* Glass Cards */
.glass-section-card[b-at4l2ck12f] {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.glass-action-card[b-at4l2ck12f] {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.action-title[b-at4l2ck12f] {
    font-weight: 600;
    color: #1a237e;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.action-icon[b-at4l2ck12f] {
    font-size: 18px;
}

.action-buttons[b-at4l2ck12f] {
    display: flex;
    gap: 12px;
}

.glass-table-card[b-at4l2ck12f] {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    padding: 24px;
    margin-top: 20px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

/* Form Controls */
.form-group-glass[b-at4l2ck12f] {
    margin-bottom: 20px;
}

.form-label-glass[b-at4l2ck12f] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
    font-size: 14px;
}

.label-icon[b-at4l2ck12f] {
    font-size: 16px;
}

.form-control-glass[b-at4l2ck12f] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    font-size: 14px;
    color: #333;
    transition: all 0.3s;
    backdrop-filter: blur(10px);
}

    .form-control-glass:focus[b-at4l2ck12f] {
        outline: none;
        border-color: #4CAF50;
        box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
    }

.form-control-glass-sm[b-at4l2ck12f] {
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    transition: all 0.3s;
    width: 100%;
}

    .form-control-glass-sm:focus[b-at4l2ck12f] {
        outline: none;
        border-color: #4CAF50;
        box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
    }

.form-text-glass[b-at4l2ck12f] {
    margin-top: 8px;
    font-size: 12px;
    color: #666;
}

/* Toggle Switch */
.toggle-switch-glass[b-at4l2ck12f] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toggle-input[b-at4l2ck12f] {
    display: none;
}

.toggle-label[b-at4l2ck12f] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    position: relative;
    padding-left: 40px;
}

    .toggle-label[b-at4l2ck12f]:before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 36px;
        height: 20px;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        transition: all 0.3s;
    }

    .toggle-label[b-at4l2ck12f]:after {
        content: '';
        position: absolute;
        left: 2px;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        background: white;
        border-radius: 50%;
        transition: all 0.3s;
    }

.toggle-input:checked + .toggle-label[b-at4l2ck12f]:before {
    background: #4CAF50;
}

.toggle-input:checked + .toggle-label[b-at4l2ck12f]:after {
    transform: translate(16px, -50%);
}

.toggle-icon[b-at4l2ck12f] {
    font-size: 16px;
}

/* Status Messages */
.status-message-glass[b-at4l2ck12f] {
    margin: 20px 0;
}

.status-loading[b-at4l2ck12f], .status-success[b-at4l2ck12f], .status-warning[b-at4l2ck12f] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    font-weight: 500;
}

.status-loading[b-at4l2ck12f] {
    background: rgba(33, 150, 243, 0.1);
    color: #2196F3;
}

.status-success[b-at4l2ck12f] {
    background: rgba(76, 175, 80, 0.1);
    color: #2E7D32;
}

.status-warning[b-at4l2ck12f] {
    background: rgba(255, 152, 0, 0.1);
    color: #F57C00;
}

.spinner-glass-small[b-at4l2ck12f] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(33, 150, 243, 0.3);
    border-top-color: #2196F3;
    border-radius: 50%;
    animation: spin-b-at4l2ck12f 1s linear infinite;
}

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

.status-icon[b-at4l2ck12f] {
    font-size: 18px;
}

/* Notes Textarea */
.notes-textarea-glass[b-at4l2ck12f] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    font-size: 14px;
    color: #333;
    transition: all 0.3s;
    resize: vertical;
    font-family: inherit;
    min-height: 120px;
}

    .notes-textarea-glass:focus[b-at4l2ck12f] {
        outline: none;
        border-color: #4CAF50;
        box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
    }

/* Table */
.table-header-glass[b-at4l2ck12f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.table-title[b-at4l2ck12f] {
    font-weight: 600;
    color: #1a237e;
    margin: 0;
}

.table-count[b-at4l2ck12f] {
    background: rgba(76, 175, 80, 0.1);
    color: #2E7D32;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.glass-table[b-at4l2ck12f] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .glass-table thead th[b-at4l2ck12f] {
        background: rgba(255, 255, 255, 0.8);
        padding: 16px;
        font-weight: 600;
        color: #666;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        text-align: left;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .glass-table tbody tr[b-at4l2ck12f] {
        transition: all 0.2s;
    }

        .glass-table tbody tr:hover[b-at4l2ck12f] {
            background: rgba(76, 175, 80, 0.05);
        }

    .glass-table tbody td[b-at4l2ck12f] {
        padding: 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        vertical-align: middle;
    }

/* Table Elements */
.order-badge[b-at4l2ck12f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
    color: white;
    border-radius: 8px;
    font-weight: 600;
    font-size: 12px;
}

.herb-id[b-at4l2ck12f] {
    font-size: 11px;
    color: #999;
    margin-top: 4px;
}

.rx-number[b-at4l2ck12f] {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #4CAF50;
    background: rgba(76, 175, 80, 0.1);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
}

/* Buttons */
.btn-glass-outline[b-at4l2ck12f] {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    color: #666;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .btn-glass-outline:hover[b-at4l2ck12f] {
        background: rgba(0, 0, 0, 0.05);
        border-color: rgba(0, 0, 0, 0.2);
    }

    .btn-glass-outline.btn-sm[b-at4l2ck12f] {
        padding: 6px 12px;
        font-size: 13px;
    }

.btn-glass-primary[b-at4l2ck12f] {
    padding: 10px 24px;
    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
    border: none;
    border-radius: 12px;
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .btn-glass-primary:hover:not(:disabled)[b-at4l2ck12f] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(76, 175, 80, 0.3);
    }

    .btn-glass-primary:disabled[b-at4l2ck12f] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.btn-glass-danger[b-at4l2ck12f] {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.2);
    color: #dc3545;
    border-radius: 8px;
    padding: 6px;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .btn-glass-danger:hover[b-at4l2ck12f] {
        background: rgba(220, 53, 69, 0.2);
    }

    .btn-glass-danger.btn-sm[b-at4l2ck12f] {
        padding: 4px;
    }

.btn-icon[b-at4l2ck12f] {
    font-size: 16px;
}

/* Empty States */
.empty-table-glass[b-at4l2ck12f], .empty-history-glass[b-at4l2ck12f] {
    text-align: center;
    padding: 40px 20px;
}

.empty-icon[b-at4l2ck12f] {
    font-size: 48px;
    color: rgba(0, 0, 0, 0.1);
    margin-bottom: 16px;
}

.empty-text[b-at4l2ck12f] {
    font-weight: 600;
    color: #666;
    margin: 0;
}

/* Footer */
.modal-footer.glass-footer[b-at4l2ck12f] {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding: 20px 24px;
    border-radius: 0 0 20px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Responsive */
@media (max-width: 768px) {
    .modal-container.glass-modal[b-at4l2ck12f] {
        margin: 10px;
        max-height: 95vh;
    }

    .modal-header.glass-header[b-at4l2ck12f] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .glass-header-actions[b-at4l2ck12f] {
        width: 100%;
        justify-content: space-between;
    }

    .glass-action-card[b-at4l2ck12f] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .action-buttons[b-at4l2ck12f] {
        width: 100%;
        flex-wrap: wrap;
    }

    .glass-table[b-at4l2ck12f] {
        font-size: 13px;
    }

        .glass-table thead th[b-at4l2ck12f],
        .glass-table tbody td[b-at4l2ck12f] {
            padding: 12px 8px;
        }
}
/* _content/ZenZonApp/Components/Pages/TcmPointsSection.razor.rz.scp.css */
/* Glass Modal Styles for TCM Points */
.modal-overlay.glass-overlay[b-rnpd34t27e] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 20px;
}

.modal-container.glass-modal[b-rnpd34t27e] {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-header.glass-header[b-rnpd34t27e] {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 20px 24px;
    border-radius: 16px 16px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header-content[b-rnpd34t27e] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-icon[b-rnpd34t27e] {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.modal-title[b-rnpd34t27e] {
    font-weight: 600;
    color: #1a237e;
    margin: 0;
}

.modal-subtitle[b-rnpd34t27e] {
    font-size: 14px;
    color: #666;
    margin: 0;
}

.btn-close-glass[b-rnpd34t27e] {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s;
}

    .btn-close-glass:hover[b-rnpd34t27e] {
        background: rgba(0, 0, 0, 0.05);
        color: #333;
    }

.modal-scroll-content[b-rnpd34t27e] {
    overflow-y: auto;
    flex: 1;
}

.modal-body.glass-body[b-rnpd34t27e] {
    padding: 24px;
}

/* Glass Cards */
.glass-card[b-rnpd34t27e] {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.selection-preview-card[b-rnpd34t27e] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.preview-header[b-rnpd34t27e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.preview-title[b-rnpd34t27e] {
    font-weight: 600;
    color: #1a237e;
    margin: 0;
}

.glass-badge[b-rnpd34t27e] {
    background: rgba(255, 255, 255, 0.9);
    color: #667eea;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(102, 126, 234, 0.3);
}

.points-preview.glass-text[b-rnpd34t27e] {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    white-space: pre-line;
}

/* Form Controls */
.form-group-glass[b-rnpd34t27e] {
    margin-bottom: 20px;
}

.form-label-glass[b-rnpd34t27e] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
    font-size: 14px;
}

.label-icon[b-rnpd34t27e] {
    font-size: 16px;
}

.form-control-glass[b-rnpd34t27e] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    font-size: 14px;
    color: #333;
    transition: all 0.3s;
    backdrop-filter: blur(10px);
}

    .form-control-glass:focus[b-rnpd34t27e] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

/* Points Grid */
.points-grid[b-rnpd34t27e] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 8px;
    max-height: 150px;
    overflow-y: auto;
    padding: 8px;
}

.point-btn[b-rnpd34t27e] {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.point-btn-inactive[b-rnpd34t27e] {
    background: rgba(255, 255, 255, 0.8);
    color: #666;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

    .point-btn-inactive:hover[b-rnpd34t27e] {
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
        border-color: rgba(102, 126, 234, 0.3);
    }

.point-btn-active[b-rnpd34t27e] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Techniques Grid */
.techniques-grid[b-rnpd34t27e] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tech-btn[b-rnpd34t27e] {
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.tech-btn-inactive[b-rnpd34t27e] {
    background: rgba(255, 255, 255, 0.8);
    color: #666;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

    .tech-btn-inactive:hover[b-rnpd34t27e] {
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
        border-color: rgba(102, 126, 234, 0.3);
    }

.tech-btn-active[b-rnpd34t27e] {
    background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

/* Notes Textarea */
.notes-textarea-glass[b-rnpd34t27e] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    font-size: 14px;
    color: #333;
    transition: all 0.3s;
    resize: vertical;
    backdrop-filter: blur(10px);
    font-family: inherit;
}

    .notes-textarea-glass:focus[b-rnpd34t27e] {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

.notes-counter[b-rnpd34t27e] {
    text-align: right;
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}

/* Table Styles */
.selected-points-table[b-rnpd34t27e] {
    margin-top: 20px;
}

.table-header[b-rnpd34t27e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.table-title[b-rnpd34t27e] {
    font-weight: 600;
    color: #1a237e;
    margin: 0;
}

.glass-table[b-rnpd34t27e] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

    .glass-table thead th[b-rnpd34t27e] {
        background: rgba(255, 255, 255, 0.8);
        padding: 12px 16px;
        font-weight: 600;
        color: #666;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        text-align: left;
    }

    .glass-table tbody tr[b-rnpd34t27e] {
        transition: all 0.2s;
    }

        .glass-table tbody tr:hover[b-rnpd34t27e] {
            background: rgba(102, 126, 234, 0.05);
        }

    .glass-table tbody td[b-rnpd34t27e] {
        padding: 12px 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        vertical-align: middle;
    }

/* Side Badges */
.side-badge[b-rnpd34t27e] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    color: white;
}

    .side-badge.right[b-rnpd34t27e] {
        background: linear-gradient(135deg, #FF6B6B 0%, #FF4757 100%);
    }

    .side-badge.left[b-rnpd34t27e] {
        background: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%);
    }

    .side-badge.both[b-rnpd34t27e] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

/* Point Code */
.point-code[b-rnpd34t27e] {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #1a237e;
    background: rgba(102, 126, 234, 0.1);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 14px;
}

/* Technique Tags */
.tech-tags[b-rnpd34t27e] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tech-tag[b-rnpd34t27e] {
    background: rgba(76, 175, 80, 0.1);
    color: #2E7D32;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

/* Point Notes */
.point-notes[b-rnpd34t27e] {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
}

/* Action Buttons */
.action-btn[b-rnpd34t27e] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    background: none;
}

    .action-btn:hover[b-rnpd34t27e] {
        transform: translateY(-2px);
    }

.danger-btn[b-rnpd34t27e] {
    color: #dc3545;
}

    .danger-btn:hover[b-rnpd34t27e] {
        background: rgba(220, 53, 69, 0.1);
    }

/* Empty State */
.empty-state[b-rnpd34t27e] {
    text-align: center;
    padding: 40px 20px;
}

.empty-icon[b-rnpd34t27e] {
    font-size: 48px;
    color: rgba(0, 0, 0, 0.1);
    margin-bottom: 16px;
}

.empty-text[b-rnpd34t27e] {
    font-weight: 600;
    color: #666;
    margin-bottom: 8px;
}

.empty-subtext[b-rnpd34t27e] {
    font-size: 14px;
    color: #999;
}

/* Modal Footer */
.modal-footer.glass-footer[b-rnpd34t27e] {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding: 20px 24px;
    border-radius: 0 0 16px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.btn-glass-outline[b-rnpd34t27e] {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    color: #666;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-glass-outline:hover[b-rnpd34t27e] {
        background: rgba(0, 0, 0, 0.05);
        border-color: rgba(0, 0, 0, 0.2);
    }

.btn-glass-primary[b-rnpd34t27e] {
    padding: 10px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 10px;
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-glass-primary:hover:not(:disabled)[b-rnpd34t27e] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
    }

    .btn-glass-primary:disabled[b-rnpd34t27e] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.btn-icon[b-rnpd34t27e] {
    font-size: 16px;
}

/* Responsive */
@media (max-width: 768px) {
    .modal-container.glass-modal[b-rnpd34t27e] {
        margin: 10px;
        max-height: 95vh;
    }

    .modal-body.glass-body[b-rnpd34t27e] {
        padding: 16px;
    }

    .points-grid[b-rnpd34t27e] {
        grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
    }

    .point-btn[b-rnpd34t27e] {
        width: 35px;
        height: 35px;
        font-size: 12px;
    }

    .techniques-grid[b-rnpd34t27e] {
        max-height: 120px;
        overflow-y: auto;
    }

    .tech-btn[b-rnpd34t27e] {
        padding: 6px 12px;
        font-size: 12px;
    }
}
/* _content/ZenZonApp/Components/Pages/TcmPulseSection.razor.rz.scp.css */
/* Glass Modal Styles for Pulse Modals - Light Theme */
.modal-overlay.glass-overlay[b-95i63ngpwo] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 20px;
}

.modal-container.glass-modal[b-95i63ngpwo] {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.modal-header.glass-header[b-95i63ngpwo] {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 20px 24px;
    border-radius: 16px 16px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header-content[b-95i63ngpwo] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-icon[b-95i63ngpwo] {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #FF6B6B 0%, #FF4757 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.pulse-icon[b-95i63ngpwo], .history-icon[b-95i63ngpwo] {
    font-size: 20px;
}

.modal-title[b-95i63ngpwo] {
    font-weight: 600;
    color: #1a237e;
    margin: 0;
}

.btn-close-glass[b-95i63ngpwo] {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

    .btn-close-glass:hover[b-95i63ngpwo] {
        background: rgba(0, 0, 0, 0.05);
        color: #333;
    }

.modal-body.glass-body[b-95i63ngpwo] {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    background: rgba(255, 255, 255, 0.6);
}

/* ADJUSTMENT 1: Side and Position aligned at same height */
.row.g-3.mb-4[b-95i63ngpwo] {
    display: flex;
    align-items: stretch; /* Ensure equal height */
}

    .row.g-3.mb-4 .col-md-6[b-95i63ngpwo] {
        display: flex;
        flex-direction: column;
    }

/* Side with finger icons layout */
.side-with-icons-container[b-95i63ngpwo] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.finger-icons[b-95i63ngpwo] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 18px;
}

.finger-icon[b-95i63ngpwo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    backdrop-filter: blur(5px);
}

    .finger-icon.right-hand[b-95i63ngpwo] {
        order: 1;
    }

.side-label-text[b-95i63ngpwo] {
    order: 2;
    font-weight: 500;
    color: #333;
    font-size: 14px;
}

.finger-icon.left-hand[b-95i63ngpwo] {
    order: 3;
}

/* Form Controls */
.form-group-glass[b-95i63ngpwo] {
    margin-bottom: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.form-label-glass[b-95i63ngpwo] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
    font-size: 14px;
    flex-shrink: 0;
}

/* For Position label (no icons) */
.position-label .label-icon[b-95i63ngpwo] {
    font-size: 16px;
    width: 24px;
}

.form-control-glass[b-95i63ngpwo] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    font-size: 14px;
    color: #333;
    transition: all 0.3s;
    backdrop-filter: blur(10px);
    flex: 1;
    min-height: 46px;
    display: flex;
    align-items: center;
}

    .form-control-glass:focus[b-95i63ngpwo] {
        outline: none;
        border-color: #FF6B6B;
        box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
    }

/* Pulse Quality Buttons */
.d-flex.flex-wrap.gap-2[b-95i63ngpwo] {
    gap: 8px !important;
    margin-bottom: 8px;
}

.btn.btn-sm[b-95i63ngpwo] {
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.btn-glass-outline[b-95i63ngpwo] {
    background: rgba(255, 255, 255, 0.8);
    color: #666;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

    .btn-glass-outline:hover[b-95i63ngpwo] {
        background: rgba(255, 107, 107, 0.1);
        color: #FF6B6B;
        border-color: rgba(255, 107, 107, 0.3);
    }

.btn-glass-primary[b-95i63ngpwo] {
    background: linear-gradient(135deg, #FF6B6B 0%, #FF4757 100%);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

    .btn-glass-primary:hover[b-95i63ngpwo] {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(255, 107, 107, 0.4);
    }

/* Selected Qualities Display */
.selected-qualities-display[b-95i63ngpwo] {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 12px 16px;
    margin-top: 12px;
    backdrop-filter: blur(10px);
}

    .selected-qualities-display small[b-95i63ngpwo] {
        font-size: 13px;
        color: #666;
        line-height: 1.4;
    }

/* Notes Textarea */
.notes-textarea-glass[b-95i63ngpwo] {
    width: 100%;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    font-size: 14px;
    color: #333;
    transition: all 0.3s;
    resize: vertical;
    backdrop-filter: blur(10px);
    font-family: inherit;
    min-height: 80px;
}

    .notes-textarea-glass:focus[b-95i63ngpwo] {
        outline: none;
        border-color: #FF6B6B;
        box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
    }

/* Preview Section */
.preview-section.glass-card[b-95i63ngpwo] {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.1) 0%, rgba(255, 71, 87, 0.1) 100%);
    border: 1px solid rgba(255, 107, 107, 0.2);
    border-radius: 12px;
    padding: 20px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.preview-section strong[b-95i63ngpwo] {
    display: block;
    margin-bottom: 12px;
    font-weight: 600;
    color: #1a237e;
    font-size: 15px;
}

.preview-section p[b-95i63ngpwo] {
    margin: 4px 0;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
}

/* Pulse History Table */
.glass-table[b-95i63ngpwo] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    overflow: hidden;
}

    .glass-table thead th[b-95i63ngpwo] {
        background: rgba(255, 255, 255, 0.9);
        padding: 12px 16px;
        font-weight: 600;
        color: #666;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        text-align: left;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .glass-table tbody tr[b-95i63ngpwo] {
        transition: all 0.2s;
    }

        .glass-table tbody tr:hover[b-95i63ngpwo] {
            background: rgba(255, 107, 107, 0.05);
        }

    .glass-table tbody td[b-95i63ngpwo] {
        padding: 12px 16px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        vertical-align: middle;
        font-size: 14px;
        color: #555;
    }

/* Badges */
.badge-glass[b-95i63ngpwo] {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    white-space: nowrap;
}

    .badge-glass.primary[b-95i63ngpwo] {
        background: linear-gradient(135deg, #FF6B6B 0%, #FF4757 100%);
        color: white;
    }

    .badge-glass.secondary[b-95i63ngpwo] {
        background: linear-gradient(135deg, #4ECDC4 0%, #44A08D 100%);
        color: white;
    }

    .badge-glass.info[b-95i63ngpwo] {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

/* History Action Buttons */
.btn-glass-outline.btn-sm[b-95i63ngpwo] {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 8px;
}

/* Empty State */
.text-center.py-5[b-95i63ngpwo] {
    text-align: center;
    padding: 40px 20px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.empty-pulse-icon[b-95i63ngpwo] {
    font-size: 48px;
    color: rgba(255, 107, 107, 0.3);
    margin-bottom: 16px;
}

.text-center.py-5 p[b-95i63ngpwo] {
    font-size: 15px;
    color: #666;
    margin: 0;
}

/* Modal Footer */
.modal-footer.glass-footer[b-95i63ngpwo] {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding: 20px 24px;
    border-radius: 0 0 16px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.btn-glass-outline[b-95i63ngpwo] {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    color: #666;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
}

    .btn-glass-outline:hover[b-95i63ngpwo] {
        background: rgba(0, 0, 0, 0.05);
        border-color: rgba(0, 0, 0, 0.2);
    }

.btn-glass-primary[b-95i63ngpwo] {
    padding: 10px 24px;
    background: linear-gradient(135deg, #FF6B6B 0%, #FF4757 100%);
    border: none;
    border-radius: 10px;
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

    .btn-glass-primary:hover:not(:disabled)[b-95i63ngpwo] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(255, 107, 107, 0.3);
    }

    .btn-glass-primary:disabled[b-95i63ngpwo] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Row and Column Layout */
.row.g-3[b-95i63ngpwo] {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

    .row.g-3 > .col-md-6[b-95i63ngpwo] {
        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);
        margin-top: var(--bs-gutter-y);
    }

/* Responsive Design */
@media (max-width: 768px) {
    .modal-container.glass-modal[b-95i63ngpwo] {
        margin: 10px;
        max-height: 95vh;
    }

    .modal-body.glass-body[b-95i63ngpwo] {
        padding: 16px;
    }

    .modal-header.glass-header[b-95i63ngpwo],
    .modal-footer.glass-footer[b-95i63ngpwo] {
        padding: 16px;
    }

    .glass-table[b-95i63ngpwo] {
        font-size: 13px;
    }

        .glass-table thead th[b-95i63ngpwo],
        .glass-table tbody td[b-95i63ngpwo] {
            padding: 8px 12px;
        }

    .d-flex.flex-wrap.gap-2[b-95i63ngpwo] {
        gap: 6px !important;
    }

    .btn.btn-sm[b-95i63ngpwo] {
        padding: 6px 12px;
        font-size: 12px;
    }

    .row.g-3[b-95i63ngpwo] {
        --bs-gutter-x: 0.75rem;
        --bs-gutter-y: 0.75rem;
    }

    .form-control-glass[b-95i63ngpwo],
    .notes-textarea-glass[b-95i63ngpwo] {
        padding: 10px 14px;
        font-size: 13px;
    }

    /* Adjust finger icons for mobile */
    .finger-icons[b-95i63ngpwo] {
        gap: 2px;
    }

    .finger-icon[b-95i63ngpwo] {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
}
/* _content/ZenZonApp/Components/Pages/TcmTongueSection.razor.rz.scp.css */
/* GLASS MORPHISM CSS */
.glass-modal-backdrop[b-o4pd4gyw4m] {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.glass-modal[b-o4pd4gyw4m] {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.glass-header[b-o4pd4gyw4m] {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px 20px 0 0;
    padding: 24px 32px;
}

.glass-icon-wrapper[b-o4pd4gyw4m] {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.glass-icon-primary[b-o4pd4gyw4m] {
    color: #3b82f6;
    font-size: 20px;
}

.glass-title[b-o4pd4gyw4m] {
    color: #1f2937;
    font-weight: 600;
    margin-bottom: 4px;
}

.glass-subtitle[b-o4pd4gyw4m] {
    color: #6b7280;
    font-size: 14px;
}

.glass-close[b-o4pd4gyw4m] {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    color: #6b7280;
    transition: all 0.2s ease;
}

    .glass-close:hover[b-o4pd4gyw4m] {
        background: rgba(255, 255, 255, 0.9);
        color: #374151;
    }

.glass-body[b-o4pd4gyw4m] {
    background: rgba(255, 255, 255, 0.3);
    padding: 32px;
}

/* Glass Tabs */
.glass-tabs-wrapper[b-o4pd4gyw4m] {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 24px;
}

.glass-tabs[b-o4pd4gyw4m] {
    display: flex;
    gap: 2px;
}

.glass-tab[b-o4pd4gyw4m] {
    flex: 1;
    background: transparent;
    border: none;
    padding: 12px 16px;
    border-radius: 8px;
    color: #6b7280;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.glass-tab-active[b-o4pd4gyw4m] {
    background: rgba(255, 255, 255, 0.9);
    color: #3b82f6;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Glass Form Controls */
.glass-select-wrapper[b-o4pd4gyw4m] {
    position: relative;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    overflow: hidden;
}

.glass-select[b-o4pd4gyw4m] {
    width: 100%;
    padding: 14px 16px;
    background: transparent;
    border: none;
    color: #374151;
    font-size: 14px;
    appearance: none;
    outline: none;
}

    .glass-select:focus[b-o4pd4gyw4m] {
        outline: 2px solid rgba(59, 130, 246, 0.3);
        outline-offset: -2px;
    }

.glass-select-arrow[b-o4pd4gyw4m] {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
}

.glass-form-label[b-o4pd4gyw4m] {
    color: #4b5563;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    display: block;
}

/* Glass Preview */
.glass-preview[b-o4pd4gyw4m] {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    padding: 24px;
    margin-top: 24px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 12px rgba(0, 0, 0, 0.05);
}

.glass-preview-header[b-o4pd4gyw4m] {
    color: #3b82f6;
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Glass Buttons */
.glass-footer[b-o4pd4gyw4m] {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 0 0 20px 20px;
    padding: 24px 32px;
}

.glass-btn[b-o4pd4gyw4m] {
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 14px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.glass-btn-primary[b-o4pd4gyw4m] {
    background: rgba(59, 130, 246, 0.9);
    color: white;
    border-color: rgba(59, 130, 246, 0.4);
}

    .glass-btn-primary:hover:not(:disabled)[b-o4pd4gyw4m] {
        background: rgba(59, 130, 246, 1);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
    }

.glass-btn-secondary[b-o4pd4gyw4m] {
    background: rgba(255, 255, 255, 0.8);
    color: #4b5563;
}

    .glass-btn-secondary:hover[b-o4pd4gyw4m] {
        background: rgba(255, 255, 255, 0.9);
    }

.glass-btn-outline[b-o4pd4gyw4m] {
    background: rgba(255, 255, 255, 0.6);
    color: #6b7280;
    border-color: rgba(156, 163, 175, 0.4);
}

/* Glass History Modal */
.glass-table-wrapper[b-o4pd4gyw4m] {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    overflow: hidden;
}

.glass-table[b-o4pd4gyw4m] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.glass-table-header[b-o4pd4gyw4m] {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    padding: 16px;
    color: #4b5563;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.glass-table-row[b-o4pd4gyw4m] {
    transition: all 0.2s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

    .glass-table-row:hover[b-o4pd4gyw4m] {
        background: rgba(255, 255, 255, 0.8);
    }

.glass-table-cell[b-o4pd4gyw4m] {
    padding: 16px;
    color: #4b5563;
    font-size: 14px;
}

/* Glass Badges/Tags */
.glass-badge[b-o4pd4gyw4m] {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #4b5563;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

/* Glass Empty State */
.glass-empty[b-o4pd4gyw4m] {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    padding: 48px 32px;
    text-align: center;
}

.glass-empty-icon[b-o4pd4gyw4m] {
    font-size: 48px;
    color: rgba(156, 163, 175, 0.5);
    margin-bottom: 16px;
}

/* Animation */
@keyframes glass-fade-in-b-o4pd4gyw4m {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.glass-modal[b-o4pd4gyw4m] {
    animation: glass-fade-in-b-o4pd4gyw4m 0.3s ease-out;
}

/* Responsive */
@media (max-width: 768px) {
    .glass-modal[b-o4pd4gyw4m] {
        margin: 16px;
        border-radius: 16px;
    }

    .glass-header[b-o4pd4gyw4m],
    .glass-body[b-o4pd4gyw4m],
    .glass-footer[b-o4pd4gyw4m] {
        padding: 20px;
    }
}
/* _content/ZenZonApp/Components/Pages/TeleHealthPage.razor.rz.scp.css */
/* Glassmorphism Base Styles */
.glass-card[b-ev5i8xvo5e] {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.glass-card:hover[b-ev5i8xvo5e] {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.glass-table[b-ev5i8xvo5e] {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-button[b-ev5i8xvo5e] {
    background: rgba(14, 165, 233, 0.2);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(14, 165, 233, 0.3);
    transition: all 0.2s ease;
}

    .glass-button:hover[b-ev5i8xvo5e] {
        background: rgba(14, 165, 233, 0.35);
        transform: scale(1.02);
        border-color: rgba(14, 165, 233, 0.5);
    }

.glass-tab[b-ev5i8xvo5e] {
    background: transparent;
    backdrop-filter: blur(8px);
    transition: all 0.2s ease;
}

    .glass-tab.active[b-ev5i8xvo5e] {
        background: rgba(14, 165, 233, 0.15);
        border-bottom: 2px solid #0ea5e9;
        color: #0ea5e9;
    }

.glass-input[b-ev5i8xvo5e] {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: all 0.2s ease;
}

    .glass-input:focus[b-ev5i8xvo5e] {
        background: rgba(255, 255, 255, 0.8);
        border-color: #0ea5e9;
        outline: none;
        box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
    }

.glass-modal-content[b-ev5i8xvo5e] {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.gradient-text[b-ev5i8xvo5e] {
    background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.status-badge[b-ev5i8xvo5e] {
    backdrop-filter: blur(4px);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
}

.chat-bubble-me[b-ev5i8xvo5e] {
    background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
    backdrop-filter: blur(4px);
    border-radius: 18px 18px 4px 18px;
}

.chat-bubble-other[b-ev5i8xvo5e] {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 18px 18px 18px 4px;
}

@keyframes fadeInUp-b-ev5i8xvo5e {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up[b-ev5i8xvo5e] {
    animation: fadeInUp-b-ev5i8xvo5e 0.5s ease-out;
}
/* _content/ZenZonApp/Components/Pages/ZenZonAppMasterSettings/PlanFeatureSwitchMatrix.razor.rz.scp.css */
/* Dark Blue Color Definition */
.dark-blue-text[b-37ed5stppy] {
    color: #00008B !important; /* DarkBlue */
}

/* Light Theme Glassmorphism Container */
.light-glass-container[b-37ed5stppy] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
    padding: 24px;
}

/* Light Glass Panels */
.light-glass-panel[b-37ed5stppy] {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 139, 0.08);
    padding: 24px;
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

    .light-glass-panel:hover[b-37ed5stppy] {
        background: rgba(255, 255, 255, 0.85);
        box-shadow: 0 12px 40px rgba(0, 0, 139, 0.12);
    }

/* Toolbar specific */
.pm-toolbar[b-37ed5stppy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pm-title[b-37ed5stppy] {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.pm-subtitle[b-37ed5stppy] {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Light Glass Toggle */
.light-glass-toggle[b-37ed5stppy] {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    border-radius: 40px;
    padding: 4px;
    display: inline-flex;
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.pm-toggle-btn[b-37ed5stppy] {
    background: transparent;
    border: none;
    color: #00008B;
    padding: 10px 28px;
    border-radius: 40px;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .pm-toggle-btn.active[b-37ed5stppy] {
        background: rgba(0, 0, 139, 0.12);
        backdrop-filter: blur(4px);
        color: #00008B;
        box-shadow: 0 4px 12px rgba(0, 0, 139, 0.15);
        border: 1px solid rgba(0, 0, 139, 0.2);
    }

/* Light Glass Select */
.light-glass-select[b-37ed5stppy] {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 139, 0.2);
    color: #00008B;
    border-radius: 12px;
    padding: 12px;
    width: 100%;
    transition: all 0.3s ease;
}

    .light-glass-select:hover[b-37ed5stppy] {
        background: rgba(255, 255, 255, 0.8);
        border-color: rgba(0, 0, 139, 0.3);
    }

    .light-glass-select:focus[b-37ed5stppy] {
        outline: none;
        background: rgba(255, 255, 255, 0.9);
        border-color: rgba(0, 0, 139, 0.4);
        box-shadow: 0 0 0 3px rgba(0, 0, 139, 0.1);
    }

    .light-glass-select option[b-37ed5stppy] {
        background: white;
        color: #00008B;
    }

/* Light Glass Alert */
.light-glass-alert[b-37ed5stppy] {
    background: rgba(255, 243, 205, 0.7);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: #00008B;
    border-radius: 12px;
    padding: 16px;
}

/* Light Glass Table */
.light-glass-table[b-37ed5stppy] {
    background: transparent;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

    .light-glass-table thead th[b-37ed5stppy] {
        background: rgba(0, 0, 139, 0.06);
        backdrop-filter: blur(4px);
        color: #00008B;
        font-weight: 600;
        padding: 16px;
        border-bottom: 2px solid rgba(0, 0, 139, 0.1);
    }

    .light-glass-table tbody tr[b-37ed5stppy] {
        background: rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(4px);
        transition: all 0.3s ease;
    }

        .light-glass-table tbody tr:hover[b-37ed5stppy] {
            background: rgba(255, 255, 255, 0.7);
        }

    .light-glass-table td[b-37ed5stppy] {
        padding: 14px 16px;
        border-bottom: 1px solid rgba(0, 0, 139, 0.05);
    }

/* Light Glass Credential Card */
.light-glass-credential[b-37ed5stppy] {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 16px rgba(0, 0, 139, 0.06);
}

.pm-credential-line[b-37ed5stppy] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 139, 0.08);
}

    .pm-credential-line:last-child[b-37ed5stppy] {
        border-bottom: none;
    }

    .pm-credential-line span[b-37ed5stppy] {
        color: #00008B;
        opacity: 0.8;
        font-weight: 500;
    }

    .pm-credential-line strong[b-37ed5stppy] {
        color: #00008B;
        font-weight: 600;
    }

/* Light Glass Plan Header */
.light-glass-plan-header[b-37ed5stppy] {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(0, 0, 139, 0.1);
    text-align: center;
    transition: all 0.3s ease;
}

    .light-glass-plan-header:hover[b-37ed5stppy] {
        background: rgba(255, 255, 255, 0.85);
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(0, 0, 139, 0.12);
    }

.pm-plan-name[b-37ed5stppy] {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.pm-plan-price[b-37ed5stppy] {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.2;
}

.pm-plan-cycle[b-37ed5stppy] {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 12px;
}

/* Light Glass Badge */
.light-glass-badge[b-37ed5stppy] {
    background: rgba(0, 128, 0, 0.15);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0, 128, 0, 0.3);
    color: #00008B;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-block;
    margin: 8px 0;
}

/* Light Glass Button */
.light-glass-btn[b-37ed5stppy] {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 139, 0.2);
    color: #00008B;
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 100%;
}

    .light-glass-btn:hover[b-37ed5stppy] {
        background: rgba(255, 255, 255, 0.8);
        border-color: rgba(0, 0, 139, 0.4);
        transform: translateY(-2px);
    }

    .light-glass-btn.selected[b-37ed5stppy] {
        background: rgba(0, 0, 139, 0.15);
        border-color: rgba(0, 0, 139, 0.4);
        font-weight: 600;
    }

/* Light Glass Chip */
.light-glass-chip[b-37ed5stppy] {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0, 0, 139, 0.15);
    color: #00008B;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 100%;
}

    .light-glass-chip:hover:not(:disabled)[b-37ed5stppy] {
        background: rgba(255, 255, 255, 0.8);
        border-color: rgba(0, 0, 139, 0.3);
    }

    .light-glass-chip.selected[b-37ed5stppy] {
        background: rgba(0, 0, 139, 0.15);
        border-color: rgba(0, 0, 139, 0.3);
        font-weight: 600;
    }

    .light-glass-chip:disabled[b-37ed5stppy] {
        opacity: 0.4;
        cursor: not-allowed;
    }

/* Light Glass Title */
.light-glass-title[b-37ed5stppy] {
    background: rgba(0, 0, 139, 0.04);
    backdrop-filter: blur(4px);
    padding: 10px 20px;
    border-radius: 12px;
    display: inline-block;
    margin-bottom: 20px;
    color: #00008B;
    font-weight: 600;
    font-size: 1.1rem;
    border: 1px solid rgba(0, 0, 139, 0.1);
}

/* Light Glass Summary */
.light-glass-summary[b-37ed5stppy] {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 24px;
}

.pm-summary-line[b-37ed5stppy] {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 139, 0.08);
}

    .pm-summary-line span[b-37ed5stppy] {
        color: #00008B;
        opacity: 0.8;
    }

    .pm-summary-line strong[b-37ed5stppy] {
        color: #00008B;
        font-weight: 700;
    }

.pm-summary-block-title[b-37ed5stppy] {
    font-size: 1rem;
    font-weight: 700;
    margin: 16px 0 8px 0;
    color: #00008B;
}

/* Light Glass Total */
.light-glass-total[b-37ed5stppy] {
    background: rgba(0, 0, 139, 0.06);
    backdrop-filter: blur(4px);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
    border: 1px solid rgba(0, 0, 139, 0.15);
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
}

/* Light Glass Note */
.light-glass-note[b-37ed5stppy] {
    background: rgba(255, 193, 7, 0.1);
    backdrop-filter: blur(4px);
    border-left: 4px solid rgba(255, 193, 7, 0.5);
    padding: 16px;
    border-radius: 8px;
    margin-top: 20px;
    color: #00008B;
}

/* Light Glass Primary Button */
.light-glass-primary-btn[b-37ed5stppy] {
    background: rgba(0, 0, 139, 0.1);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0, 0, 139, 0.25);
    color: #00008B;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .light-glass-primary-btn:hover[b-37ed5stppy] {
        background: rgba(0, 0, 139, 0.18);
        border-color: rgba(0, 0, 139, 0.4);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 139, 0.15);
    }

/* Light Glass Secondary Button */
.light-glass-secondary-btn[b-37ed5stppy] {
    background: rgba(108, 117, 125, 0.1);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(108, 117, 125, 0.2);
    color: #00008B;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .light-glass-secondary-btn:hover[b-37ed5stppy] {
        background: rgba(108, 117, 125, 0.18);
        border-color: rgba(108, 117, 125, 0.3);
        transform: translateY(-2px);
    }

/* Light Glass Message */
.light-glass-message[b-37ed5stppy] {
    background: rgba(40, 167, 69, 0.1);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(40, 167, 69, 0.2);
    color: #00008B;
    padding: 14px;
    border-radius: 12px;
    margin-top: 20px;
}

/* Light Glass Email Preview */
.light-glass-email[b-37ed5stppy] {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 24px;
    margin-top: 24px;
    border: 1px solid rgba(0, 0, 139, 0.1);
}

.pm-email-line[b-37ed5stppy] {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 139, 0.08);
}

/* Light Glass Textarea */
.light-glass-textarea[b-37ed5stppy] {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0, 0, 139, 0.15);
    color: #00008B;
    border-radius: 12px;
    padding: 16px;
    width: 100%;
    margin-top: 16px;
    resize: vertical;
}

    .light-glass-textarea:focus[b-37ed5stppy] {
        background: rgba(255, 255, 255, 0.8);
        outline: none;
        border-color: rgba(0, 0, 139, 0.3);
        box-shadow: 0 0 0 3px rgba(0, 0, 139, 0.1);
    }

/* Action Row */
.pm-action-row[b-37ed5stppy] {
    display: flex;
    gap: 16px;
    margin-top: 24px;
}

    .pm-action-row button[b-37ed5stppy] {
        flex: 1;
    }

/* Disabled Row */
.pm-addon-disabled-row[b-37ed5stppy] {
    opacity: 0.5;
    background: rgba(0, 0, 0, 0.02);
}

/* Responsive Design */
@media (max-width: 768px) {
    .light-glass-container[b-37ed5stppy] {
        padding: 16px;
    }

    .light-glass-panel[b-37ed5stppy] {
        padding: 18px;
    }

    .pm-toolbar[b-37ed5stppy] {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .light-glass-table[b-37ed5stppy] {
        font-size: 0.85rem;
    }

    .pm-action-row[b-37ed5stppy] {
        flex-direction: column;
    }

    .pm-credential-line[b-37ed5stppy] {
        flex-direction: column;
        gap: 4px;
    }
}
/* _content/ZenZonApp/Components/Pages/ZenZonAppMasterSettings/PlanMatrixCalculator.razor.rz.scp.css */
/* Dark Blue Color Definition */
.dark-blue-text[b-saqj6zp9i3] {
    color: #00008B !important; /* DarkBlue */
}

/* Light Theme Glassmorphism Container */
.light-glass-container[b-saqj6zp9i3] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
    padding: 24px;
}

/* Light Glass Panels */
.light-glass-panel[b-saqj6zp9i3] {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 139, 0.08);
    padding: 24px;
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

    .light-glass-panel:hover[b-saqj6zp9i3] {
        background: rgba(255, 255, 255, 0.85);
        box-shadow: 0 12px 40px rgba(0, 0, 139, 0.12);
    }

/* Toolbar specific */
.pm-toolbar[b-saqj6zp9i3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pm-title[b-saqj6zp9i3] {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.pm-subtitle[b-saqj6zp9i3] {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Light Glass Toggle */
.light-glass-toggle[b-saqj6zp9i3] {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    border-radius: 40px;
    padding: 4px;
    display: inline-flex;
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.pm-toggle-btn[b-saqj6zp9i3] {
    background: transparent;
    border: none;
    color: #00008B;
    padding: 10px 28px;
    border-radius: 40px;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .pm-toggle-btn.active[b-saqj6zp9i3] {
        background: rgba(0, 0, 139, 0.12);
        backdrop-filter: blur(4px);
        color: #00008B;
        box-shadow: 0 4px 12px rgba(0, 0, 139, 0.15);
        border: 1px solid rgba(0, 0, 139, 0.2);
    }

/* Light Glass Select */
.light-glass-select[b-saqj6zp9i3] {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 139, 0.2);
    color: #00008B;
    border-radius: 12px;
    padding: 12px;
    width: 100%;
    transition: all 0.3s ease;
}

    .light-glass-select:hover[b-saqj6zp9i3] {
        background: rgba(255, 255, 255, 0.8);
        border-color: rgba(0, 0, 139, 0.3);
    }

    .light-glass-select:focus[b-saqj6zp9i3] {
        outline: none;
        background: rgba(255, 255, 255, 0.9);
        border-color: rgba(0, 0, 139, 0.4);
        box-shadow: 0 0 0 3px rgba(0, 0, 139, 0.1);
    }

    .light-glass-select option[b-saqj6zp9i3] {
        background: white;
        color: #00008B;
    }

/* Light Glass Alert */
.light-glass-alert[b-saqj6zp9i3] {
    background: rgba(255, 243, 205, 0.7);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: #00008B;
    border-radius: 12px;
    padding: 16px;
}

/* Light Glass Table */
.light-glass-table[b-saqj6zp9i3] {
    background: transparent;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

    .light-glass-table thead th[b-saqj6zp9i3] {
        background: rgba(0, 0, 139, 0.06);
        backdrop-filter: blur(4px);
        color: #00008B;
        font-weight: 600;
        padding: 16px;
        border-bottom: 2px solid rgba(0, 0, 139, 0.1);
    }

    .light-glass-table tbody tr[b-saqj6zp9i3] {
        background: rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(4px);
        transition: all 0.3s ease;
    }

        .light-glass-table tbody tr:hover[b-saqj6zp9i3] {
            background: rgba(255, 255, 255, 0.7);
        }

    .light-glass-table td[b-saqj6zp9i3] {
        padding: 14px 16px;
        border-bottom: 1px solid rgba(0, 0, 139, 0.05);
    }

/* Light Glass Credential Card */
.light-glass-credential[b-saqj6zp9i3] {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 16px rgba(0, 0, 139, 0.06);
}

.pm-credential-line[b-saqj6zp9i3] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 139, 0.08);
}

    .pm-credential-line:last-child[b-saqj6zp9i3] {
        border-bottom: none;
    }

    .pm-credential-line span[b-saqj6zp9i3] {
        color: #00008B;
        opacity: 0.8;
        font-weight: 500;
    }

    .pm-credential-line strong[b-saqj6zp9i3] {
        color: #00008B;
        font-weight: 600;
    }

/* Light Glass Plan Header */
.light-glass-plan-header[b-saqj6zp9i3] {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(0, 0, 139, 0.1);
    text-align: center;
    transition: all 0.3s ease;
}

    .light-glass-plan-header:hover[b-saqj6zp9i3] {
        background: rgba(255, 255, 255, 0.85);
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(0, 0, 139, 0.12);
    }

.pm-plan-name[b-saqj6zp9i3] {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.pm-plan-price[b-saqj6zp9i3] {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.2;
}

.pm-plan-cycle[b-saqj6zp9i3] {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 12px;
}

/* Light Glass Badge */
.light-glass-badge[b-saqj6zp9i3] {
    background: rgba(0, 128, 0, 0.15);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0, 128, 0, 0.3);
    color: #00008B;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-block;
    margin: 8px 0;
}

/* Light Glass Button */
.light-glass-btn[b-saqj6zp9i3] {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 139, 0.2);
    color: #00008B;
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 100%;
}

    .light-glass-btn:hover[b-saqj6zp9i3] {
        background: rgba(255, 255, 255, 0.8);
        border-color: rgba(0, 0, 139, 0.4);
        transform: translateY(-2px);
    }

    .light-glass-btn.selected[b-saqj6zp9i3] {
        background: rgba(0, 0, 139, 0.15);
        border-color: rgba(0, 0, 139, 0.4);
        font-weight: 600;
    }

/* Light Glass Chip */
.light-glass-chip[b-saqj6zp9i3] {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0, 0, 139, 0.15);
    color: #00008B;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 100%;
}

    .light-glass-chip:hover:not(:disabled)[b-saqj6zp9i3] {
        background: rgba(255, 255, 255, 0.8);
        border-color: rgba(0, 0, 139, 0.3);
    }

    .light-glass-chip.selected[b-saqj6zp9i3] {
        background: rgba(0, 0, 139, 0.15);
        border-color: rgba(0, 0, 139, 0.3);
        font-weight: 600;
    }

    .light-glass-chip:disabled[b-saqj6zp9i3] {
        opacity: 0.4;
        cursor: not-allowed;
    }

/* Light Glass Title */
.light-glass-title[b-saqj6zp9i3] {
    background: rgba(0, 0, 139, 0.04);
    backdrop-filter: blur(4px);
    padding: 10px 20px;
    border-radius: 12px;
    display: inline-block;
    margin-bottom: 20px;
    color: #00008B;
    font-weight: 600;
    font-size: 1.1rem;
    border: 1px solid rgba(0, 0, 139, 0.1);
}

/* Light Glass Summary */
.light-glass-summary[b-saqj6zp9i3] {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 24px;
}

.pm-summary-line[b-saqj6zp9i3] {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 139, 0.08);
}

    .pm-summary-line span[b-saqj6zp9i3] {
        color: #00008B;
        opacity: 0.8;
    }

    .pm-summary-line strong[b-saqj6zp9i3] {
        color: #00008B;
        font-weight: 700;
    }

.pm-summary-block-title[b-saqj6zp9i3] {
    font-size: 1rem;
    font-weight: 700;
    margin: 16px 0 8px 0;
    color: #00008B;
}

/* Light Glass Total */
.light-glass-total[b-saqj6zp9i3] {
    background: rgba(0, 0, 139, 0.06);
    backdrop-filter: blur(4px);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
    border: 1px solid rgba(0, 0, 139, 0.15);
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
}

/* Light Glass Note */
.light-glass-note[b-saqj6zp9i3] {
    background: rgba(255, 193, 7, 0.1);
    backdrop-filter: blur(4px);
    border-left: 4px solid rgba(255, 193, 7, 0.5);
    padding: 16px;
    border-radius: 8px;
    margin-top: 20px;
    color: #00008B;
}

/* Light Glass Primary Button */
.light-glass-primary-btn[b-saqj6zp9i3] {
    background: rgba(0, 0, 139, 0.1);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0, 0, 139, 0.25);
    color: #00008B;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .light-glass-primary-btn:hover[b-saqj6zp9i3] {
        background: rgba(0, 0, 139, 0.18);
        border-color: rgba(0, 0, 139, 0.4);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 139, 0.15);
    }

/* Light Glass Secondary Button */
.light-glass-secondary-btn[b-saqj6zp9i3] {
    background: rgba(108, 117, 125, 0.1);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(108, 117, 125, 0.2);
    color: #00008B;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
}

    .light-glass-secondary-btn:hover[b-saqj6zp9i3] {
        background: rgba(108, 117, 125, 0.18);
        border-color: rgba(108, 117, 125, 0.3);
        transform: translateY(-2px);
    }

/* Light Glass Message */
.light-glass-message[b-saqj6zp9i3] {
    background: rgba(40, 167, 69, 0.1);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(40, 167, 69, 0.2);
    color: #00008B;
    padding: 14px;
    border-radius: 12px;
    margin-top: 20px;
}

/* Light Glass Email Preview */
.light-glass-email[b-saqj6zp9i3] {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: 24px;
    margin-top: 24px;
    border: 1px solid rgba(0, 0, 139, 0.1);
}

.pm-email-line[b-saqj6zp9i3] {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid rgba(0, 0, 139, 0.08);
}

/* Light Glass Textarea */
.light-glass-textarea[b-saqj6zp9i3] {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(0, 0, 139, 0.15);
    color: #00008B;
    border-radius: 12px;
    padding: 16px;
    width: 100%;
    margin-top: 16px;
    resize: vertical;
}

    .light-glass-textarea:focus[b-saqj6zp9i3] {
        background: rgba(255, 255, 255, 0.8);
        outline: none;
        border-color: rgba(0, 0, 139, 0.3);
        box-shadow: 0 0 0 3px rgba(0, 0, 139, 0.1);
    }

/* Action Row */
.pm-action-row[b-saqj6zp9i3] {
    display: flex;
    gap: 16px;
    margin-top: 24px;
}

    .pm-action-row button[b-saqj6zp9i3] {
        flex: 1;
    }

/* Disabled Row */
.pm-addon-disabled-row[b-saqj6zp9i3] {
    opacity: 0.5;
    background: rgba(0, 0, 0, 0.02);
}

/* Responsive Design */
@media (max-width: 768px) {
    .light-glass-container[b-saqj6zp9i3] {
        padding: 16px;
    }

    .light-glass-panel[b-saqj6zp9i3] {
        padding: 18px;
    }

    .pm-toolbar[b-saqj6zp9i3] {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .light-glass-table[b-saqj6zp9i3] {
        font-size: 0.85rem;
    }

    .pm-action-row[b-saqj6zp9i3] {
        flex-direction: column;
    }

    .pm-credential-line[b-saqj6zp9i3] {
        flex-direction: column;
        gap: 4px;
    }
}
/* _content/ZenZonApp/Components/Pages/_Shared/QuickDashboard.razor.rz.scp.css */
/* QuickDashboard - Glass Morphism Style */
.glass-nav-card[b-jm6hi2s2hk] {
    padding: 1rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1), 0 4px 16px rgba(31, 38, 135, 0.08);
    width: 100%;
    display: block;
    overflow: hidden;
}

.glass-nav-title[b-jm6hi2s2hk] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.glass-nav-title-text[b-jm6hi2s2hk] {
    font-weight: 700;
    font-size: 0.95rem;
    color: #2c3e50;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.glass-nav-subtitle[b-jm6hi2s2hk] {
    font-size: 0.8rem;
    color: #7f8c8d;
    font-weight: 500;
    opacity: 0.9;
}

/* FORCE VERTICAL LAYOUT */
.glass-nav-list[b-jm6hi2s2hk] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.glass-nav-btn[b-jm6hi2s2hk] {
    width: 100% !important;
    height: 44px;
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    flex-basis: auto !important;
    position: relative;
    overflow: hidden;
}

    .glass-nav-btn:hover[b-jm6hi2s2hk] {
        transform: translateY(-1px);
        background: rgba(255, 255, 255, 0.8);
        border-color: rgba(52, 152, 219, 0.3);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .glass-nav-btn:active[b-jm6hi2s2hk] {
        transform: translateY(0);
    }

    .glass-nav-btn .ico[b-jm6hi2s2hk] {
        width: 32px;
        height: 32px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        background: linear-gradient(135deg, rgba(52, 152, 219, 0.15), rgba(41, 128, 185, 0.15));
        border: 1px solid rgba(52, 152, 219, 0.2);
        font-size: 1rem;
        color: #3498db;
        flex-shrink: 0;
    }

    .glass-nav-btn .lbl[b-jm6hi2s2hk] {
        font-size: 0.9rem;
        font-weight: 600;
        color: #2c3e50;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Active state indicator */
    .glass-nav-btn.active[b-jm6hi2s2hk]::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 60%;
        background: #3498db;
        border-radius: 0 4px 4px 0;
    }

/* Mobile responsiveness */
@media (max-width: 768px) {
    .glass-nav-card[b-jm6hi2s2hk] {
        margin-bottom: 1rem;
    }

    .glass-nav-list[b-jm6hi2s2hk] {
        flex-direction: row !important;
        overflow-x: auto !important;
        padding-bottom: 0.5rem;
    }

    .glass-nav-btn[b-jm6hi2s2hk] {
        width: auto !important;
        min-width: 120px;
        flex-direction: column;
        height: auto;
        padding: 0.75rem;
        text-align: center;
        gap: 0.5rem;
    }

        .glass-nav-btn .lbl[b-jm6hi2s2hk] {
            font-size: 0.8rem;
        }

        .glass-nav-btn .ico[b-jm6hi2s2hk] {
            width: 36px;
            height: 36px;
            font-size: 1.1rem;
        }
}
/* _content/ZenZonApp/Components/Shared/BodyChartEditor.razor.rz.scp.css */
/* ----- MODERN GLASS OVERLAY ----- */
.glass-overlay[b-f17zldn4c8] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    animation: fadeIn-b-f17zldn4c8 0.25s ease-out;
}

/* ----- ELEVATED GLASS MODAL ----- */
.glass-modal[b-f17zldn4c8] {
    width: 90vw;
    height: 90vh;
    background: rgba(25, 25, 40, 0.75);
    backdrop-filter: blur(20px) saturate(180%);
    border-radius: 36px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: white;
    padding: 24px;
    animation: scaleIn-b-f17zldn4c8 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ----- HEADER WITH BOLDER TYPOGRAPHY ----- */
.bce-header[b-f17zldn4c8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

    .bce-header span:first-child[b-f17zldn4c8] {
        font-size: 1.9rem;
        font-weight: 700;
        background: linear-gradient(135deg, #fff, #c0c0e6);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        letter-spacing: -0.02em;
        line-height: 1.2;
    }

/* ----- ENHANCED MENU (pill container + refined buttons) ----- */
.bce-tools[b-f17zldn4c8] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);
    border-radius: 60px;
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Base tool button styling (applies to Draw, Undo, Redo, Eraser, Clear, etc.) */
.bce-tool-btn[b-f17zldn4c8] {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 48px;
    padding: 0.7rem 1.3rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: white;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    backdrop-filter: blur(4px);
    letter-spacing: 0.01em;
}

    .bce-tool-btn i[b-f17zldn4c8] {
        font-size: 1.05rem;
    }

    .bce-tool-btn:hover[b-f17zldn4c8] {
        background: rgba(255, 255, 255, 0.25);
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, 0.4);
    }

    /* Active state for any tool (e.g., Draw active, Eraser active) */
    .bce-tool-btn.active[b-f17zldn4c8] {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.15));
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2);
        transform: translateY(-1px);
    }

/* Eraser specific active style (more distinct) */
.bce-eraser.active[b-f17zldn4c8] {
    background: linear-gradient(135deg, rgba(255, 90, 90, 0.55), rgba(255, 110, 110, 0.35));
    box-shadow: 0 0 0 2px #ff9a9a;
}

/* Clear button style */
.bce-clear[b-f17zldn4c8] {
    background: rgba(200, 70, 70, 0.3);
}

    .bce-clear:hover[b-f17zldn4c8] {
        background: rgba(220, 85, 85, 0.55);
        transform: translateY(-2px);
    }

/* Undo & Redo can share the same base styles, but you may add subtle differences if needed */
/* .bce-undo, .bce-redo – they already inherit .bce-tool-btn styles */
/* Optional: differentiate undo/redo with a slightly muted background */
.bce-undo[b-f17zldn4c8], .bce-redo[b-f17zldn4c8] {
    background: rgba(255, 255, 255, 0.08);
}

    .bce-undo:hover[b-f17zldn4c8], .bce-redo:hover[b-f17zldn4c8] {
        background: rgba(255, 255, 255, 0.2);
    }

/* ----- CANVAS AREA (clean & spacious) ----- */
.bce-canvas-wrapper[b-f17zldn4c8] {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1.5rem;
    background: rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

    .bce-canvas-wrapper > div[b-f17zldn4c8] {
        position: relative;
        width: 100%;
        max-width: 100%; /* ← was 960px, now fills full width */
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 16px 48px rgba(0, 0, 0, 0.4);
    }

    .bce-canvas-wrapper img[b-f17zldn4c8] {
        width: 100%;
        height: auto;
        max-height: calc(94vh - 220px); /* ← ADD this */
        object-fit: contain; /* ← ADD this */
        display: block;
        border-radius: 16px;
        background: #f8f8f8;
    }
    .bce-canvas-wrapper svg[b-f17zldn4c8] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        cursor: crosshair;
        border-radius: 16px;
    }

/* ----- LEGEND REMOVED (no legend) ----- */
.bce-legend[b-f17zldn4c8] {
    display: none !important;
}

/* ----- FOOTER WITH LARGER ELEMENTS ----- */
.bce-footer[b-f17zldn4c8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 1rem;
}

.bce-mark-count[b-f17zldn4c8] {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    padding: 0.5rem 1.2rem;
    border-radius: 40px;
    font-size: 1rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.2);
    letter-spacing: 0.01em;
}

/* ----- MODERN BUTTONS (larger & gradient) ----- */
.glass-submit-button[b-f17zldn4c8] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    backdrop-filter: blur(4px);
    border: none;
    border-radius: 48px;
    padding: 0.75rem 1.8rem;
    font-weight: 600;
    font-size: 1rem;
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    transition: all 0.25s ease;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

    .glass-submit-button:hover[b-f17zldn4c8] {
        background: linear-gradient(135deg, #7c3aed, #a855f7);
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
    }

.glass-btn-cancel[b-f17zldn4c8] {
    background: rgba(100, 100, 130, 0.75);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .glass-btn-cancel:hover[b-f17zldn4c8] {
        background: rgba(130, 130, 160, 0.9);
        transform: translateY(-2px);
    }

/* ----- SMOOTH ANIMATIONS ----- */
@keyframes fadeIn-b-f17zldn4c8 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scaleIn-b-f17zldn4c8 {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ----- RESPONSIVE: bigger fonts & adjusted menu for mobile ----- */
@media (max-width: 768px) {
    .glass-modal[b-f17zldn4c8] {
        width: 95vw;
        height: 95vh;
        padding: 18px;
    }

    .bce-header span:first-child[b-f17zldn4c8] {
        font-size: 1.6rem;
    }

    .bce-tools[b-f17zldn4c8] {
        justify-content: center;
        border-radius: 48px;
        padding: 4px 6px;
        gap: 0.4rem;
    }

    .bce-tool-btn[b-f17zldn4c8] {
        padding: 0.55rem 1rem;
        font-size: 0.85rem;
    }

        .bce-tool-btn i[b-f17zldn4c8] {
            font-size: 0.9rem;
        }

    .glass-submit-button[b-f17zldn4c8],
    .glass-btn-cancel[b-f17zldn4c8] {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }

    .bce-mark-count[b-f17zldn4c8] {
        font-size: 0.9rem;
        padding: 0.4rem 1rem;
    }

    .bce-footer[b-f17zldn4c8] {
        font-size: 0.9rem;
    }
}
/* _content/ZenZonApp/Components/Shared/LandingLayout.razor.rz.scp.css */
.location-chip[b-syyo8b2tto] {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 50px !important;
    padding: 0.6rem 1.4rem !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #1e3a5f !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
}

.location-chip:hover[b-syyo8b2tto] {
    background: rgba(255, 255, 255, 0.35) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
    transform: translateY(-2px) !important;
}

.location-chip.selected[b-syyo8b2tto] {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

.glass-button-success[b-syyo8b2tto] {
    background: rgba(255, 255, 255, 0.25) !important;
    border: 2px solid rgba(255, 255, 255, 0.6) !important;
    color: #1e3a5f !important;
}

    .glass-button-success:hover[b-syyo8b2tto] {
        background: rgba(255, 255, 255, 0.4) !important;
        color: #1e3a5f !important;
    }
/* _content/ZenZonApp/Forms/Frontend/Pages/FormBuilder.razor.rz.scp.css */
/* ============================================================
   FORM BUILDER — MERGED STYLESHEET  v3
   Sections:
   1.  Glassmorphism Base
   2.  Top Bar
   3.  Buttons
   4.  Layout
   5.  Library Panel
   6.  Canvas Area
   7.  Settings Panel
   8.  Options Editor
   9.  Empty States
   10. Messages
   11. Responsive — general
   12. Body Diagram (zx-bd-*)
   13. Note Overlay
   14. Preview Field Widgets
   15. Responsive — body diagram
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. Glassmorphism Base
   ───────────────────────────────────────────────────────────── */
.gm-form-builder[b-i5ru94uvm5] {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 20px;
    color: #1e293b;
}

.gm-panel[b-i5ru94uvm5] {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    padding: 20px;
    transition: all 0.2s ease;
}


/* ─────────────────────────────────────────────────────────────
   2. Top Bar
   ───────────────────────────────────────────────────────────── */
.gm-topbar[b-i5ru94uvm5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding: 16px 24px;
}

.gm-topbar-left[b-i5ru94uvm5], .gm-topbar-right[b-i5ru94uvm5] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.gm-title-input[b-i5ru94uvm5] {
    font-size: 1.5rem;
    font-weight: 600;
    border: none;
    background: transparent;
    padding: 8px 0;
    width: 300px;
    color: #1e293b;
}

    .gm-title-input[b-i5ru94uvm5]::placeholder {
        color: rgba(30,41,59,0.4);
    }

.gm-status-badge[b-i5ru94uvm5] {
    background: rgba(255,255,255,0.3);
    border-radius: 100px;
    padding: 4px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,0.5);
}

.gm-save-status[b-i5ru94uvm5] {
    font-size: 0.9rem;
    color: rgba(30,41,59,0.7);
}


/* ─────────────────────────────────────────────────────────────
   3. Buttons
   ───────────────────────────────────────────────────────────── */
.gm-btn[b-i5ru94uvm5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.25);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 40px;
    padding: 10px 20px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #1e293b;
    cursor: pointer;
    transition: all 0.2s;
}

    .gm-btn:hover[b-i5ru94uvm5] {
        background: rgba(255,255,255,0.4);
        border-color: rgba(255,255,255,0.6);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

.gm-btn-primary[b-i5ru94uvm5] {
    background: rgba(99,102,241,0.4);
    border-color: rgba(99,102,241,0.6);
    color: white;
    font-weight: 600;
}

    .gm-btn-primary:hover[b-i5ru94uvm5] {
        background: rgba(99,102,241,0.6);
    }

.gm-btn:disabled[b-i5ru94uvm5] {
    opacity: 0.5;
    pointer-events: none;
}

.gm-btn-small[b-i5ru94uvm5] {
    padding: 6px 12px;
    font-size: 0.85rem;
}

.gm-icon-btn[b-i5ru94uvm5] {
    background: transparent;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1e293b;
    cursor: pointer;
    transition: all 0.2s;
}

    .gm-icon-btn:hover[b-i5ru94uvm5] {
        background: rgba(255,255,255,0.3);
    }

.gm-icon-btn-danger:hover[b-i5ru94uvm5] {
    background: rgba(239,68,68,0.3);
    color: #b91c1c;
}

.gm-icon-btn:disabled[b-i5ru94uvm5] {
    opacity: 0.2;
    pointer-events: none;
}


/* ─────────────────────────────────────────────────────────────
   4. Layout
   ───────────────────────────────────────────────────────────── */
.gm-layout[b-i5ru94uvm5] {
    display: grid;
    grid-template-columns: 280px 1fr 320px;
    gap: 24px;
    margin-top: 24px;
}


/* ─────────────────────────────────────────────────────────────
   5. Library Panel
   ───────────────────────────────────────────────────────────── */
.gm-library[b-i5ru94uvm5] {
    height: fit-content;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}

.gm-panel-header[b-i5ru94uvm5] {
    margin-bottom: 16px;
}

    .gm-panel-header h3[b-i5ru94uvm5] {
        font-size: 1.2rem;
        font-weight: 600;
        margin: 0;
    }

    .gm-panel-header p[b-i5ru94uvm5] {
        font-size: 0.85rem;
        color: rgba(30,41,59,0.7);
        margin: 4px 0 0;
    }

.gm-toolbox[b-i5ru94uvm5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gm-toolbox-item[b-i5ru94uvm5] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 16px;
    padding: 12px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
}

    .gm-toolbox-item:hover[b-i5ru94uvm5] {
        background: rgba(255,255,255,0.3);
        border-color: rgba(255,255,255,0.5);
        transform: translateX(4px);
    }

.gm-toolbox-text[b-i5ru94uvm5] {
    display: flex;
    flex-direction: column;
}

    .gm-toolbox-text strong[b-i5ru94uvm5] {
        font-size: 0.95rem;
    }

    .gm-toolbox-text small[b-i5ru94uvm5] {
        font-size: 0.8rem;
        color: rgba(30,41,59,0.6);
    }


/* ─────────────────────────────────────────────────────────────
   6. Canvas Area
   ───────────────────────────────────────────────────────────── */
.gm-canvas[b-i5ru94uvm5] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.gm-meta-card .gm-meta-grid[b-i5ru94uvm5] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.gm-meta-grid .gm-full[b-i5ru94uvm5] {
    grid-column: 1 / -1;
}

.gm-canvas-card[b-i5ru94uvm5] {
    background: rgba(255,255,255,0.15);
}

.gm-field-list[b-i5ru94uvm5] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gm-field-item[b-i5ru94uvm5] {
    background: rgba(255,255,255,0.25);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.3);
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

    .gm-field-item:hover[b-i5ru94uvm5] {
        background: rgba(255,255,255,0.35);
        border-color: rgba(255,255,255,0.6);
    }

.gm-field-selected[b-i5ru94uvm5] {
    background: rgba(255,255,255,0.4);
    border-color: rgba(99,102,241,0.8);
    box-shadow: 0 0 0 2px rgba(99,102,241,0.3);
}

.gm-field-header[b-i5ru94uvm5] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.gm-field-title[b-i5ru94uvm5] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.gm-field-type[b-i5ru94uvm5] {
    background: rgba(255,255,255,0.3);
    border-radius: 40px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gm-field-title h4[b-i5ru94uvm5] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.gm-required-badge[b-i5ru94uvm5] {
    background: rgba(239,68,68,0.3);
    color: #b91c1c;
    border-radius: 40px;
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 600;
}

.gm-field-actions[b-i5ru94uvm5] {
    display: flex;
    gap: 4px;
}
/* No overflow:hidden — body diagram overlay must not clip */
.gm-field-body[b-i5ru94uvm5] {
    padding-left: 8px;
}

.gm-field-help[b-i5ru94uvm5] {
    font-size: 0.85rem;
    color: rgba(30,41,59,0.7);
    margin-bottom: 8px;
}


/* ─────────────────────────────────────────────────────────────
   7. Settings Panel
   ───────────────────────────────────────────────────────────── */
.gm-settings[b-i5ru94uvm5] {
    height: fit-content;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}

.gm-settings-stack[b-i5ru94uvm5] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.gm-settings-section[b-i5ru94uvm5] {
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 20px;
}

    .gm-settings-section:last-child[b-i5ru94uvm5] {
        border-bottom: none;
    }

    .gm-settings-section h4[b-i5ru94uvm5] {
        font-size: 1rem;
        margin: 0 0 12px;
        font-weight: 600;
    }

.gm-settings-header-inline[b-i5ru94uvm5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.gm-input-group[b-i5ru94uvm5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

    .gm-input-group label[b-i5ru94uvm5] {
        font-size: 0.85rem;
        font-weight: 500;
        color: rgba(30,41,59,0.9);
    }

.gm-input[b-i5ru94uvm5] {
    background: rgba(255,255,255,0.3);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 0.95rem;
    color: #1e293b;
    outline: none;
    transition: all 0.2s;
    width: 100%;
    box-sizing: border-box;
}

    .gm-input:focus[b-i5ru94uvm5] {
        background: rgba(255,255,255,0.5);
        border-color: rgba(99,102,241,0.6);
    }

    .gm-input[b-i5ru94uvm5]::placeholder {
        color: rgba(30,41,59,0.4);
    }

textarea.gm-input[b-i5ru94uvm5] {
    resize: vertical;
    min-height: 60px;
}

.gm-toggle[b-i5ru94uvm5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
}

    .gm-toggle input[type="checkbox"][b-i5ru94uvm5], .gm-toggle input[type="radio"][b-i5ru94uvm5] {
        width: 20px;
        height: 20px;
        accent-color: #6366f1;
    }


/* ─────────────────────────────────────────────────────────────
   8. Options Editor
   ───────────────────────────────────────────────────────────── */
.gm-option-row[b-i5ru94uvm5] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

    .gm-option-row .gm-input[b-i5ru94uvm5] {
        flex: 1;
    }

.gm-empty-mini[b-i5ru94uvm5] {
    text-align: center;
    color: rgba(30,41,59,0.6);
    font-style: italic;
    padding: 8px;
}


/* ─────────────────────────────────────────────────────────────
   9. Empty States
   ───────────────────────────────────────────────────────────── */
.gm-empty-state[b-i5ru94uvm5] {
    text-align: center;
    padding: 40px 20px;
    color: rgba(30,41,59,0.7);
}

    .gm-empty-state .material-symbols-outlined[b-i5ru94uvm5] {
        font-size: 48px;
        color: rgba(255,255,255,0.5);
        margin-bottom: 16px;
    }

    .gm-empty-state h4[b-i5ru94uvm5] {
        margin: 8px 0 4px;
        font-weight: 600;
    }

    .gm-empty-state p[b-i5ru94uvm5] {
        margin: 0;
        font-size: 0.9rem;
    }


/* ─────────────────────────────────────────────────────────────
   10. Messages
   ───────────────────────────────────────────────────────────── */
.gm-message[b-i5ru94uvm5] {
    margin-bottom: 20px;
    padding: 16px 24px;
}

.gm-message-error[b-i5ru94uvm5] {
    background: rgba(239,68,68,0.25);
    border-color: rgba(239,68,68,0.5);
    color: #b91c1c;
}

.gm-message-success[b-i5ru94uvm5] {
    background: rgba(34,197,94,0.25);
    border-color: rgba(34,197,94,0.5);
    color: #166534;
}

.gm-loading[b-i5ru94uvm5] {
    text-align: center;
    padding: 40px;
    font-size: 1.1rem;
}


/* ─────────────────────────────────────────────────────────────
   11. Responsive — general
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .gm-layout[b-i5ru94uvm5] {
        grid-template-columns: 240px 1fr 280px;
        gap: 16px;
    }
}

@media (max-width: 900px) {
    .gm-layout[b-i5ru94uvm5] {
        grid-template-columns: 1fr;
    }

    .gm-library[b-i5ru94uvm5], .gm-settings[b-i5ru94uvm5] {
        display: none;
    }

    .gm-topbar[b-i5ru94uvm5] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .gm-topbar-left[b-i5ru94uvm5], .gm-topbar-right[b-i5ru94uvm5] {
        flex-wrap: wrap;
    }
}


/* ─────────────────────────────────────────────────────────────
   12. Body Diagram  (zx-bd-*)
   ───────────────────────────────────────────────────────────── */

/* Root */
.zx-bd-root[b-i5ru94uvm5] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-family: inherit;
}

/* ── Top Toolbar ────────────────────────────────────────────── */
.zx-bd-toolbar[b-i5ru94uvm5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.6rem 0.75rem;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.25);
}

.zx-bd-group[b-i5ru94uvm5] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.zx-bd-sep[b-i5ru94uvm5] {
    width: 1px;
    height: 32px;
    background: rgba(255,255,255,0.3);
    border-radius: 1px;
    margin: 0 0.25rem;
}

/* Tool buttons */
.zx-bd-btn[b-i5ru94uvm5] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(4px);
    color: rgba(30,41,59,0.85);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}

    .zx-bd-btn:hover:not(.is-locked)[b-i5ru94uvm5] {
        background: rgba(255,255,255,0.3);
        border-color: rgba(255,255,255,0.5);
        transform: translateY(-1px);
    }

    .zx-bd-btn.is-active[b-i5ru94uvm5] {
        background: rgba(99,102,241,0.25);
        border-color: rgba(99,102,241,0.55);
        color: #4338ca;
        box-shadow: 0 0 0 2px rgba(99,102,241,0.2);
    }

    .zx-bd-btn.is-locked[b-i5ru94uvm5] {
        opacity: 0.4;
        cursor: not-allowed;
    }

.zx-bd-btn--ghost[b-i5ru94uvm5] {
    background: transparent;
    border-color: transparent;
}

.zx-bd-btn .material-symbols-outlined[b-i5ru94uvm5] {
    font-size: 20px;
}

/* Color chips */
.zx-bd-chip[b-i5ru94uvm5] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2.5px solid transparent;
    background: var(--chip, #e05252);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
}

    .zx-bd-chip:hover:not(.is-locked)[b-i5ru94uvm5] {
        transform: scale(1.12);
    }

    .zx-bd-chip.is-active[b-i5ru94uvm5] {
        border-color: rgba(30,41,59,0.5);
        box-shadow: 0 0 0 3px rgba(99,102,241,0.25);
        transform: scale(1.1);
    }

    .zx-bd-chip.is-locked[b-i5ru94uvm5] {
        opacity: 0.4;
        cursor: not-allowed;
    }

/* Lock badge */
.zx-bd-lock-badge[b-i5ru94uvm5] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(30,41,59,0.75);
    white-space: nowrap;
}

/* ── Canvas row ──────────────────────────────────────────────── */
.zx-bd-row[b-i5ru94uvm5] {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 1rem;
    align-items: start;
}

/* Stage wrapper */
.zx-bd-stage-wrap[b-i5ru94uvm5] {
    position: relative;
    width: 100%;
}

/* Stage — position:relative is REQUIRED for SVG overlay + note overlay */
.zx-bd-stage[b-i5ru94uvm5] {
    position: relative;
    width: 100%;
    aspect-ratio: 760 / 520;
    border-radius: 16px;
    overflow: hidden; /* clips SVG marks to the box */
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    line-height: 0;
}

/* Locked variant: slight desaturate + no-cursor */
.zx-bd-stage--locked[b-i5ru94uvm5] {
    filter: grayscale(10%) opacity(0.92);
}

/* Body image — object-fit:fill ensures no letterbox dead zones */
.zx-bd-img[b-i5ru94uvm5] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    user-select: none;
    pointer-events: none;
    border-radius: 16px;
}

/* SVG overlay — positioned via inline style (position:absolute;inset:0) */
.zx-bd-svg[b-i5ru94uvm5] {
    overflow: hidden;
}

/* Locked overlay shown in template builder */
.zx-bd-locked-overlay[b-i5ru94uvm5] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 1rem;
    pointer-events: none;
    z-index: 10;
}

.zx-bd-locked-msg[b-i5ru94uvm5] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(8px);
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(30,41,59,0.7);
    border: 1px solid rgba(255,255,255,0.5);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* ── Legend sidebar ─────────────────────────────────────────── */
.zx-bd-legend[b-i5ru94uvm5] {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.22);
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    /* match stage height with scroll if needed */
    max-height: calc(760px * 520 / 760); /* same ratio as stage */
    overflow-y: auto;
}

.zx-bd-legend-title[b-i5ru94uvm5] {
    padding: 0.75rem 1rem;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(30,41,59,0.6);
    border-bottom: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.1);
    position: sticky;
    top: 0;
    z-index: 2;
}

.zx-bd-legend-row[b-i5ru94uvm5] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    background: transparent;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background 0.12s;
}

    .zx-bd-legend-row:last-child[b-i5ru94uvm5] {
        border-bottom: none;
    }

    .zx-bd-legend-row:hover:not(.is-readonly)[b-i5ru94uvm5] {
        background: rgba(255,255,255,0.18);
    }

    .zx-bd-legend-row.is-active[b-i5ru94uvm5] {
        background: rgba(99,102,241,0.12);
    }

    .zx-bd-legend-row.is-readonly[b-i5ru94uvm5] {
        cursor: default;
    }

/* Bootstrap icon badge */
.zx-bd-legend-icon[b-i5ru94uvm5] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    transition: transform 0.1s;
}

.zx-bd-legend-row:hover:not(.is-readonly) .zx-bd-legend-icon[b-i5ru94uvm5] {
    transform: scale(1.1);
}

.zx-bd-legend-row.is-active .zx-bd-legend-icon[b-i5ru94uvm5] {
    box-shadow: 0 0 0 2px rgba(99,102,241,0.35);
}

.zx-bd-legend-label[b-i5ru94uvm5] {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(30,41,59,0.88);
    flex: 1;
}

.zx-bd-legend-check[b-i5ru94uvm5] {
    font-size: 16px;
    color: #4338ca;
    margin-left: auto;
}

/* ── Hint ────────────────────────────────────────────────────── */
.zx-bd-hint[b-i5ru94uvm5] {
    font-size: 0.82rem;
    color: rgba(30,41,59,0.65);
    padding: 0 0.2rem;
    min-height: 1.1rem;
}


/* ─────────────────────────────────────────────────────────────
   13. Note Overlay
   ───────────────────────────────────────────────────────────── */
.zx-note-overlay[b-i5ru94uvm5] {
    position: absolute;
    transform: translate(-50%, calc(-100% - 12px));
    z-index: 200;
    background: rgba(255,255,255,0.97);
    border: 1.5px solid rgba(99,102,241,0.4);
    border-radius: 14px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.16);
    min-width: 190px;
    max-width: 250px;
    pointer-events: all;
    backdrop-filter: blur(12px);
}

.zx-note-pin[b-i5ru94uvm5] {
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e05252;
    border: 2.5px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.22);
}

.zx-note-input[b-i5ru94uvm5] {
    width: 100%;
    border: 1px solid rgba(99,102,241,0.3);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    font-family: inherit;
    color: #1e293b;
    background: rgba(255,255,255,0.9);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

    .zx-note-input:focus[b-i5ru94uvm5] {
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99,102,241,0.18);
    }

    .zx-note-input[b-i5ru94uvm5]::placeholder {
        color: rgba(30,41,59,0.35);
    }

.zx-note-actions[b-i5ru94uvm5] {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.zx-note-btn[b-i5ru94uvm5] {
    border: none;
    border-radius: 7px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.12s, transform 0.1s;
}

    .zx-note-btn:hover[b-i5ru94uvm5] {
        opacity: 0.85;
        transform: translateY(-1px);
    }

.zx-note-btn-confirm[b-i5ru94uvm5] {
    background: #6366f1;
    color: #fff;
}

.zx-note-btn-cancel[b-i5ru94uvm5] {
    background: rgba(30,41,59,0.09);
    color: #5b5b6a;
}


/* ─────────────────────────────────────────────────────────────
   14. Preview Field Widgets
   ───────────────────────────────────────────────────────────── */
.zx-preview-input[b-i5ru94uvm5] {
    width: 100%;
    background: rgba(255,255,255,0.3);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 0.93rem;
    color: #1e293b;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.15s;
}

    .zx-preview-input:focus[b-i5ru94uvm5] {
        border-color: rgba(99,102,241,0.6);
        background: rgba(255,255,255,0.45);
    }

.zx-preview-textarea[b-i5ru94uvm5] {
    resize: vertical;
    min-height: 70px;
}

.zx-preview-options[b-i5ru94uvm5] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.zx-preview-option[b-i5ru94uvm5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.93rem;
    cursor: pointer;
}

.zx-preview-file[b-i5ru94uvm5] {
    border: 2px dashed rgba(255,255,255,0.4);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    color: rgba(30,41,59,0.6);
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.2s;
}

    .zx-preview-file:hover[b-i5ru94uvm5] {
        border-color: rgba(99,102,241,0.5);
    }

.zx-preview-signature[b-i5ru94uvm5] {
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    color: rgba(30,41,59,0.5);
    font-size: 0.9rem;
    background: rgba(255,255,255,0.1);
    font-style: italic;
}

.zx-preview-scale-wrapper[b-i5ru94uvm5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0;
}

.zx-scale-track[b-i5ru94uvm5], .zx-preview-slider-track[b-i5ru94uvm5] {
    position: relative;
    height: 8px;
    background: rgba(255,255,255,0.3);
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.4);
}

.zx-scale-thumb[b-i5ru94uvm5] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #6366f1;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.zx-scale-labels[b-i5ru94uvm5] {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: rgba(30,41,59,0.65);
    padding: 0 2px;
}


/* ─────────────────────────────────────────────────────────────
   15. Responsive — body diagram
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .zx-bd-row[b-i5ru94uvm5] {
        grid-template-columns: 1fr;
    }

    .zx-bd-legend[b-i5ru94uvm5] {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        max-height: none;
        overflow-y: visible;
    }

    .zx-bd-legend-title[b-i5ru94uvm5] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .zx-bd-toolbar[b-i5ru94uvm5] {
        gap: 0.35rem;
    }

    .zx-bd-btn[b-i5ru94uvm5] {
        width: 36px;
        height: 36px;
    }

    .zx-bd-chip[b-i5ru94uvm5] {
        width: 26px;
        height: 26px;
    }

    .zx-bd-lock-badge[b-i5ru94uvm5] {
        display: none;
    }
}
/* _content/ZenZonApp/Forms/Frontend/Pages/FormFill.razor.rz.scp.css */
/* ============================================================
   FORM FILL PAGE  — formFill.css
   Uses ff- prefix to avoid collisions with form builder gm-/zx-
   Bootstrap Icons are expected to be loaded globally.
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   Root
   ───────────────────────────────────────────────────────────── */
.ff-root[b-z6bqnxrxye] {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: linear-gradient(145deg, #f0f4ff 0%, #faf5ff 100%);
    min-height: 100vh;
    padding: 0 0 60px;
    color: #1e293b;
}

/* ─────────────────────────────────────────────────────────────
   Loading
   ───────────────────────────────────────────────────────────── */
.ff-loading[b-z6bqnxrxye] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1rem;
    color: #64748b;
    font-size: 1rem;
}

.ff-spinner[b-z6bqnxrxye] {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(99,102,241,0.15);
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: ff-spin-b-z6bqnxrxye 0.75s linear infinite;
}

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

/* ─────────────────────────────────────────────────────────────
   Header
   ───────────────────────────────────────────────────────────── */
.ff-header[b-z6bqnxrxye] {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #ffffff;
    padding: 2rem max(24px, 5vw);
    margin-bottom: 2rem;
}

.ff-header-meta[b-z6bqnxrxye] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.ff-back-btn[b-z6bqnxrxye] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1.5px solid rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.15);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s;
}

    .ff-back-btn:hover[b-z6bqnxrxye] {
        background: rgba(255,255,255,0.28);
    }

.ff-header-text[b-z6bqnxrxye] {
    flex: 1;
}

.ff-form-title[b-z6bqnxrxye] {
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0 0 0.25rem;
    letter-spacing: -0.3px;
}

.ff-form-desc[b-z6bqnxrxye] {
    font-size: 0.93rem;
    opacity: 0.82;
    margin: 0;
    line-height: 1.5;
}

/* Context bar — patient / practitioner / date / time */
.ff-context-bar[b-z6bqnxrxye] {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.25);
    padding: 0.75rem 1.25rem;
    flex-wrap: wrap;
    row-gap: 0.75rem;
}

.ff-context-item[b-z6bqnxrxye] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 1.25rem 0 0;
}

    .ff-context-item > i[b-z6bqnxrxye] {
        font-size: 18px;
        opacity: 0.8;
        flex-shrink: 0;
    }

    .ff-context-item > div[b-z6bqnxrxye] {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

.ff-context-label[b-z6bqnxrxye] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    opacity: 0.7;
}

.ff-context-value[b-z6bqnxrxye] {
    font-size: 0.92rem;
    font-weight: 600;
}

.ff-context-tag[b-z6bqnxrxye] {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(255,255,255,0.25);
    border-radius: 999px;
    padding: 1px 7px;
    width: fit-content;
}

.ff-context-divider[b-z6bqnxrxye] {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,0.25);
    margin: 0 1.25rem 0 0;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────
   Error / success banners
   ───────────────────────────────────────────────────────────── */
.ff-error-banner[b-z6bqnxrxye] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 max(24px,5vw) 1.5rem;
    padding: 0.9rem 1.25rem;
    background: #fef2f2;
    border: 1.5px solid #fca5a5;
    border-radius: 12px;
    color: #b91c1c;
    font-size: 0.92rem;
    font-weight: 500;
}

.ff-error-full[b-z6bqnxrxye] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 0.75rem;
    color: #64748b;
    text-align: center;
    padding: 2rem;
}

    .ff-error-full > i[b-z6bqnxrxye] {
        font-size: 48px;
        color: #f87171;
    }

    .ff-error-full h3[b-z6bqnxrxye] {
        margin: 0;
        font-size: 1.2rem;
        color: #1e293b;
    }

    .ff-error-full p[b-z6bqnxrxye] {
        margin: 0;
        font-size: 0.92rem;
        max-width: 360px;
    }

/* ─────────────────────────────────────────────────────────────
   Success screen
   ───────────────────────────────────────────────────────────── */
.ff-success[b-z6bqnxrxye] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    gap: 1rem;
    padding: 2rem;
    text-align: center;
}

.ff-success-icon[b-z6bqnxrxye] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(99,102,241,0.35);
}

    .ff-success-icon i[b-z6bqnxrxye] {
        font-size: 40px;
        color: #ffffff;
    }

.ff-success h2[b-z6bqnxrxye] {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0;
    color: #1e293b;
}

.ff-success p[b-z6bqnxrxye] {
    font-size: 0.95rem;
    color: #64748b;
    margin: 0;
}

.ff-success-meta[b-z6bqnxrxye] {
    font-size: 0.82rem;
    color: #94a3b8;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.75rem 1.25rem;
    line-height: 1.8;
}

/* ─────────────────────────────────────────────────────────────
   Field list
   ───────────────────────────────────────────────────────────── */
.ff-field-list[b-z6bqnxrxye] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 0 max(24px, 5vw);
    max-width: 900px;
    margin: 0 auto;
}

.ff-field[b-z6bqnxrxye] {
    background: #ffffff;
    border-radius: 16px;
    border: 1.5px solid #e2e8f0;
    padding: 1.25rem 1.5rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .ff-field:focus-within[b-z6bqnxrxye] {
        border-color: rgba(99,102,241,0.5);
        box-shadow: 0 0 0 3px rgba(99,102,241,0.08);
    }

.ff-field--error[b-z6bqnxrxye] {
    border-color: #fca5a5;
    background: #fffafa;
}

.ff-field-label[b-z6bqnxrxye] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.35rem;
}

.ff-required[b-z6bqnxrxye] {
    color: #e05252;
    margin-left: 2px;
}

.ff-field-hint[b-z6bqnxrxye] {
    font-size: 0.83rem;
    color: #94a3b8;
    margin-bottom: 0.65rem;
    line-height: 1.45;
}

/* Body diagram label row */
.ff-bd-label-row[b-z6bqnxrxye] {
    margin-bottom: 0.5rem;
}

.ff-validation-msg[b-z6bqnxrxye] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    font-size: 0.82rem;
    color: #dc2626;
    font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────
   Input controls
   ───────────────────────────────────────────────────────────── */
.ff-input[b-z6bqnxrxye] {
    width: 100%;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 0.95rem;
    font-family: inherit;
    color: #1e293b;
    background: #f8fafc;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

    .ff-input:focus[b-z6bqnxrxye] {
        border-color: #6366f1;
        background: #ffffff;
        box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
    }

.ff-textarea[b-z6bqnxrxye] {
    resize: vertical;
    min-height: 90px;
}

.ff-select[b-z6bqnxrxye] {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.ff-readonly[b-z6bqnxrxye] {
    background: #f1f5f9;
    color: #64748b;
    cursor: default;
    display: flex;
    align-items: center;
    min-height: 44px;
    border-style: dashed;
}

/* ─────────────────────────────────────────────────────────────
   Radio / checkbox options
   ───────────────────────────────────────────────────────────── */
.ff-options[b-z6bqnxrxye] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ff-option[b-z6bqnxrxye] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    cursor: pointer;
    font-size: 0.93rem;
    transition: border-color 0.12s, background 0.12s;
}

    .ff-option:hover[b-z6bqnxrxye] {
        border-color: #c7d2fe;
        background: #eef2ff;
    }

    .ff-option.is-selected[b-z6bqnxrxye] {
        border-color: #6366f1;
        background: #eef2ff;
        font-weight: 600;
        color: #4338ca;
    }

    .ff-option input[b-z6bqnxrxye] {
        accent-color: #6366f1;
        width: 16px;
        height: 16px;
        cursor: pointer;
    }

/* ─────────────────────────────────────────────────────────────
   File upload
   ───────────────────────────────────────────────────────────── */
.ff-file-drop[b-z6bqnxrxye] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem;
    border: 2px dashed #c7d2fe;
    border-radius: 12px;
    background: #f5f3ff;
    color: #7c6ff7;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 500;
}

    .ff-file-drop > i[b-z6bqnxrxye] {
        font-size: 32px;
        opacity: 0.75;
    }

    .ff-file-drop:hover[b-z6bqnxrxye] {
        border-color: #6366f1;
        background: #ede9fe;
    }

/* ─────────────────────────────────────────────────────────────
   Signature
   ───────────────────────────────────────────────────────────── */
.ff-signature[b-z6bqnxrxye] {
    border: 1.5px dashed #c7d2fe;
    border-radius: 12px;
    padding: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafe;
    min-height: 100px;
}

.ff-signature-label[b-z6bqnxrxye] {
    font-size: 0.88rem;
    color: #94a3b8;
    font-style: italic;
}

/* ─────────────────────────────────────────────────────────────
   Scale / slider
   ───────────────────────────────────────────────────────────── */
.ff-scale[b-z6bqnxrxye] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ff-range[b-z6bqnxrxye] {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    accent-color: #6366f1;
    cursor: pointer;
}

.ff-scale-labels[b-z6bqnxrxye] {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #94a3b8;
}

.ff-scale-value[b-z6bqnxrxye] {
    font-weight: 700;
    color: #6366f1;
    font-size: 0.88rem;
}

/* ─────────────────────────────────────────────────────────────
   Action bar
   ───────────────────────────────────────────────────────────── */
.ff-actions[b-z6bqnxrxye] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.5rem max(24px, 5vw) 0;
    max-width: 900px;
    margin: 0 auto;
}

/* ─────────────────────────────────────────────────────────────
   Buttons
   ───────────────────────────────────────────────────────────── */
.ff-btn[b-z6bqnxrxye] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.4rem;
    border-radius: 10px;
    border: none;
    font-size: 0.93rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
}

    .ff-btn:disabled[b-z6bqnxrxye] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.ff-btn-primary[b-z6bqnxrxye] {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(99,102,241,0.3);
}

    .ff-btn-primary:hover:not(:disabled)[b-z6bqnxrxye] {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(99,102,241,0.4);
    }

.ff-btn-ghost[b-z6bqnxrxye] {
    background: #ffffff;
    color: #6366f1;
    border: 1.5px solid #c7d2fe;
}

    .ff-btn-ghost:hover:not(:disabled)[b-z6bqnxrxye] {
        background: #eef2ff;
        border-color: #6366f1;
    }

/* ─────────────────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
    .ff-header[b-z6bqnxrxye] {
        padding: 1.25rem 1rem;
    }

    .ff-context-bar[b-z6bqnxrxye] {
        gap: 0;
    }

    .ff-context-divider[b-z6bqnxrxye] {
        display: none;
    }

    .ff-context-item[b-z6bqnxrxye] {
        padding: 0.35rem 0.5rem 0.35rem 0;
        width: 50%;
    }

    .ff-field[b-z6bqnxrxye] {
        padding: 1rem;
    }

    .ff-actions[b-z6bqnxrxye] {
        flex-direction: column;
    }

    .ff-btn[b-z6bqnxrxye] {
        width: 100%;
        justify-content: center;
    }
}
/* ── Body diagram containment ── */
[b-z6bqnxrxye] .zx-bd-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 760 / 520;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255,255,255,0.08);
    border: 1px solid #e2e8f0;
    line-height: 0;
}

[b-z6bqnxrxye] .zx-bd-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    user-select: none;
    pointer-events: none;
    border-radius: 16px;
}

[b-z6bqnxrxye] .zx-bd-row {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 1rem;
    align-items: start;
}

[b-z6bqnxrxye] .zx-bd-stage-wrap {
    position: relative;
    width: 100%;
}

[b-z6bqnxrxye] .zx-bd-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.5rem 0;
}

[b-z6bqnxrxye] .zx-bd-legend {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

[b-z6bqnxrxye] .zx-bd-legend-title {
    padding: 0.6rem 0.85rem;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
    border-bottom: 1px solid #e2e8f0;
}

[b-z6bqnxrxye] .zx-bd-legend-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.85rem;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    background: transparent;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background 0.12s;
}

    [b-z6bqnxrxye] .zx-bd-legend-row:hover {
        background: #eef2ff;
    }

    [b-z6bqnxrxye] .zx-bd-legend-row.is-active {
        background: #eef2ff;
    }

    [b-z6bqnxrxye] .zx-bd-legend-row:last-child {
        border-bottom: none;
    }

[b-z6bqnxrxye] .zx-bd-legend-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

[b-z6bqnxrxye] .zx-bd-legend-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1e293b;
    flex: 1;
}

[b-z6bqnxrxye] .zx-bd-legend-check {
    font-size: 15px;
    color: #6366f1;
}

[b-z6bqnxrxye] .zx-bd-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.12s;
}

    [b-z6bqnxrxye] .zx-bd-btn:hover {
        background: #eef2ff;
        border-color: #c7d2fe;
    }

    [b-z6bqnxrxye] .zx-bd-btn.is-active {
        background: #eef2ff;
        border-color: #6366f1;
        color: #4338ca;
    }

[b-z6bqnxrxye] .zx-bd-btn--ghost {
    background: transparent;
    border-color: transparent;
}

[b-z6bqnxrxye] .zx-bd-chip {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: var(--chip, #e05252);
    cursor: pointer;
    transition: transform 0.12s;
}

    [b-z6bqnxrxye] .zx-bd-chip.is-active {
        border-color: #1e293b;
        transform: scale(1.12);
    }

[b-z6bqnxrxye] .zx-bd-sep {
    width: 1px;
    height: 28px;
    background: #e2e8f0;
    margin: 0 0.2rem;
}

[b-z6bqnxrxye] .zx-bd-hint {
    font-size: 0.8rem;
    color: #94a3b8;
    padding: 0.25rem 0;
}

[b-z6bqnxrxye] .zx-note-overlay {
    position: absolute;
    transform: translate(-50%, calc(-100% - 12px));
    z-index: 200;
    background: #ffffff;
    border: 1.5px solid rgba(99,102,241,0.4);
    border-radius: 14px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.16);
    min-width: 190px;
    pointer-events: all;
}

[b-z6bqnxrxye] .zx-note-pin {
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e05252;
    border: 2.5px solid #fff;
}

[b-z6bqnxrxye] .zx-note-input {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
}

    [b-z6bqnxrxye] .zx-note-input:focus {
        border-color: #6366f1;
    }

[b-z6bqnxrxye] .zx-note-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

[b-z6bqnxrxye] .zx-note-btn {
    border: none;
    border-radius: 7px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

[b-z6bqnxrxye] .zx-note-btn-confirm {
    background: #6366f1;
    color: #fff;
}

[b-z6bqnxrxye] .zx-note-btn-cancel {
    background: #f1f5f9;
    color: #5b5b6a;
}

@media (max-width: 1100px) {
    [b-z6bqnxrxye] .zx-bd-row {
        grid-template-columns: 1fr;
    }
}
/* _content/ZenZonApp/Forms/Frontend/Pages/Forms.razor.rz.scp.css */
.forms-page[b-vjb9lc4znh] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

.forms-header[b-vjb9lc4znh],
.forms-toolbar[b-vjb9lc4znh],
.form-card[b-vjb9lc4znh],
.loading-box[b-vjb9lc4znh],
.error-box[b-vjb9lc4znh],
.empty-box[b-vjb9lc4znh] {
    border-radius: 20px;
    padding: 1rem 1.25rem;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}

.forms-header[b-vjb9lc4znh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.forms-header-left h2[b-vjb9lc4znh] {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
}

.forms-header-left p[b-vjb9lc4znh] {
    margin: 0.35rem 0 0;
    opacity: 0.8;
}

.forms-toolbar[b-vjb9lc4znh] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.filter-btn[b-vjb9lc4znh],
.btn-primary[b-vjb9lc4znh],
.action-btn[b-vjb9lc4znh] {
    border: none;
    border-radius: 12px;
    padding: 0.65rem 1rem;
    cursor: pointer;
    font-weight: 600;
}

.btn-primary[b-vjb9lc4znh] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.filter-btn.active[b-vjb9lc4znh] {
    outline: 2px solid rgba(255,255,255,0.45);
}

.forms-grid[b-vjb9lc4znh] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

.form-card[b-vjb9lc4znh] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    cursor: pointer;
    transition: transform 0.18s ease;
}

    .form-card:hover[b-vjb9lc4znh] {
        transform: translateY(-2px);
    }

.form-card-top[b-vjb9lc4znh] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

    .form-card-top h3[b-vjb9lc4znh] {
        margin: 0;
        font-size: 1.1rem;
    }

    .form-card-top p[b-vjb9lc4znh] {
        margin: 0.4rem 0 0;
        opacity: 0.8;
        font-size: 0.92rem;
    }

.form-meta[b-vjb9lc4znh] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
    font-size: 0.92rem;
}

.form-actions[b-vjb9lc4znh] {
    display: flex;
    gap: 0.75rem;
    margin-top: auto;
}

.status-pill[b-vjb9lc4znh] {
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    height: fit-content;
}

    .status-pill.draft[b-vjb9lc4znh] {
        background: rgba(255, 193, 7, 0.18);
    }

    .status-pill.published[b-vjb9lc4znh] {
        background: rgba(25, 135, 84, 0.18);
    }

    .status-pill.archived[b-vjb9lc4znh] {
        background: rgba(108, 117, 125, 0.18);
    }