/* /Components/DocumentUpload.razor.rz.scp.css */
/* DocumentUpload Component Styles */
.document-upload-container[b-oajrz3s92f] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Upload Section */
.upload-section[b-oajrz3s92f] {
    margin-bottom: 2rem;
}

.upload-header[b-oajrz3s92f] {
    margin-bottom: 1rem;
}

    .upload-header h4[b-oajrz3s92f] {
        color: #1e293b;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

.upload-description[b-oajrz3s92f] {
    color: #64748b;
    margin-bottom: 0;
    font-size: 0.875rem;
}

.upload-area[b-oajrz3s92f] {
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #f8fafc;
}

    .upload-area:hover[b-oajrz3s92f] {
        border-color: #3b82f6;
        background-color: #eff6ff;
    }

    .upload-area.uploading[b-oajrz3s92f] {
        border-color: #3b82f6;
        background-color: #eff6ff;
        cursor: default;
    }

.upload-icon[b-oajrz3s92f] {
    font-size: 3rem;
    color: #94a3b8;
    margin-bottom: 1rem;
}

.upload-prompt h5[b-oajrz3s92f] {
    color: #334155;
    margin-bottom: 0.5rem;
}

.upload-prompt p[b-oajrz3s92f] {
    color: #64748b;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}

.file-limit[b-oajrz3s92f] {
    font-size: 0.75rem !important;
    color: #94a3b8 !important;
}

.upload-progress[b-oajrz3s92f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

    .upload-progress .spinner-border[b-oajrz3s92f] {
        color: #3b82f6;
    }

/* Filter Section */
.filter-section[b-oajrz3s92f] {
    margin-bottom: 1.5rem;
}

.filter-buttons[b-oajrz3s92f] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn-filter[b-oajrz3s92f] {
    padding: 0.5rem 1rem;
    border: 1px solid #e2e8f0;
    background-color: #ffffff;
    color: #64748b;
    border-radius: 20px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-filter:hover[b-oajrz3s92f] {
        border-color: #3b82f6;
        color: #3b82f6;
    }

    .btn-filter.active[b-oajrz3s92f] {
        background-color: #3b82f6;
        border-color: #3b82f6;
        color: white;
    }

/* Documents Grid */
.documents-grid[b-oajrz3s92f] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

.document-card[b-oajrz3s92f] {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1rem;
    background-color: #ffffff;
    transition: all 0.2s ease;
    position: relative;
}

    .document-card:hover[b-oajrz3s92f] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border-color: #cbd5e1;
    }

    .document-card.expired[b-oajrz3s92f] {
        border-color: #ef4444;
        background-color: #fef2f2;
    }

    .document-card.expiring[b-oajrz3s92f] {
        border-color: #f59e0b;
        background-color: #fffbeb;
    }

.document-header[b-oajrz3s92f] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.document-icon[b-oajrz3s92f] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f1f5f9;
    border-radius: 6px;
    font-size: 1.25rem;
    color: #3b82f6;
}

.document-info[b-oajrz3s92f] {
    flex: 1;
    min-width: 0;
}

.document-title[b-oajrz3s92f] {
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.document-type-badge[b-oajrz3s92f] {
    display: inline-block;
    background-color: #e2e8f0;
    color: #475569;
    padding: 0.125rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.document-actions[b-oajrz3s92f] {
    display: flex;
    gap: 0.25rem;
}

    .document-actions .btn[b-oajrz3s92f] {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

.document-description[b-oajrz3s92f] {
    margin-bottom: 0.75rem;
}

    .document-description p[b-oajrz3s92f] {
        color: #64748b;
        font-size: 0.875rem;
        margin: 0;
        line-height: 1.4;
    }

.document-footer[b-oajrz3s92f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: #94a3b8;
}

.document-meta[b-oajrz3s92f] {
    display: flex;
    gap: 0.5rem;
}

.expiry-info .badge[b-oajrz3s92f] {
    font-size: 0.625rem;
    padding: 0.25rem 0.5rem;
}

.badge-danger[b-oajrz3s92f] {
    background-color: #ef4444;
    color: white;
}

.badge-warning[b-oajrz3s92f] {
    background-color: #f59e0b;
    color: white;
}

.badge-info[b-oajrz3s92f] {
    background-color: #3b82f6;
    color: white;
}

/* No Documents State */
.no-documents[b-oajrz3s92f] {
    text-align: center;
    padding: 3rem 1rem;
    color: #64748b;
}

.empty-icon[b-oajrz3s92f] {
    font-size: 4rem;
    color: #cbd5e1;
    margin-bottom: 1rem;
}

.no-documents h5[b-oajrz3s92f] {
    color: #475569;
    margin-bottom: 0.5rem;
}

/* Modal Styles */
.modal-overlay[b-oajrz3s92f] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-oajrz3s92f] {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    max-height: 90vh;
    overflow-y: auto;
    width: 90%;
    max-width: 600px;
}

.document-upload-modal[b-oajrz3s92f] {
    max-width: 500px;
}

.document-viewer-modal[b-oajrz3s92f] {
    max-width: 800px;
    width: 95%;
}

.modal-header[b-oajrz3s92f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

    .modal-header h5[b-oajrz3s92f] {
        margin: 0;
        font-weight: 600;
        color: #1e293b;
    }

.close-button[b-oajrz3s92f] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .close-button:hover[b-oajrz3s92f] {
        color: #64748b;
    }

.modal-body[b-oajrz3s92f] {
    padding: 1.5rem;
}

.modal-footer[b-oajrz3s92f] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
}

/* Form Styles */
.form-group[b-oajrz3s92f] {
    margin-bottom: 1rem;
}

    .form-group label[b-oajrz3s92f] {
        display: block;
        margin-bottom: 0.25rem;
        font-weight: 500;
        color: #374151;
        font-size: 0.875rem;
    }

.form-control[b-oajrz3s92f] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    transition: border-color 0.2s ease;
}

    .form-control:focus[b-oajrz3s92f] {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

.form-text[b-oajrz3s92f] {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

/* Selected Files */
.selected-files[b-oajrz3s92f] {
    margin-top: 1rem;
    padding: 1rem;
    background-color: #f8fafc;
    border-radius: 6px;
}

    .selected-files h6[b-oajrz3s92f] {
        margin: 0 0 0.75rem 0;
        color: #374151;
        font-size: 0.875rem;
    }

.selected-file[b-oajrz3s92f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e5e7eb;
}

    .selected-file:last-child[b-oajrz3s92f] {
        border-bottom: none;
    }

    .selected-file i[b-oajrz3s92f] {
        color: #3b82f6;
        width: 16px;
    }

    .selected-file .file-size[b-oajrz3s92f] {
        color: #6b7280;
        font-size: 0.75rem;
        margin-left: auto;
    }

/* Document Viewer */
.image-viewer[b-oajrz3s92f] {
    text-align: center;
}

.document-image[b-oajrz3s92f] {
    max-width: 100%;
    max-height: 600px;
    border-radius: 6px;
}

.pdf-viewer iframe[b-oajrz3s92f] {
    border: none;
    border-radius: 6px;
}

.document-preview[b-oajrz3s92f] {
    text-align: center;
    padding: 2rem;
}

.preview-icon[b-oajrz3s92f] {
    font-size: 4rem;
    color: #3b82f6;
    margin-bottom: 1rem;
}

.document-preview h6[b-oajrz3s92f] {
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.document-preview p[b-oajrz3s92f] {
    color: #64748b;
    margin-bottom: 0.5rem;
}

.description[b-oajrz3s92f] {
    text-align: left;
    margin: 1rem 0;
    padding: 1rem;
    background-color: #f8fafc;
    border-radius: 6px;
}

    .description strong[b-oajrz3s92f] {
        color: #374151;
        display: block;
        margin-bottom: 0.5rem;
    }

/* Button Styles */
.btn[b-oajrz3s92f] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary[b-oajrz3s92f] {
    background-color: #3b82f6;
    border-color: #3b82f6;
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-oajrz3s92f] {
        background-color: #2563eb;
        border-color: #2563eb;
    }

    .btn-primary:disabled[b-oajrz3s92f] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.btn-outline-primary[b-oajrz3s92f] {
    border-color: #3b82f6;
    color: #3b82f6;
    background-color: transparent;
}

    .btn-outline-primary:hover[b-oajrz3s92f] {
        background-color: #3b82f6;
        color: white;
    }

.btn-outline-secondary[b-oajrz3s92f] {
    border-color: #6b7280;
    color: #6b7280;
    background-color: transparent;
}

    .btn-outline-secondary:hover[b-oajrz3s92f] {
        background-color: #6b7280;
        color: white;
    }

.btn-outline-danger[b-oajrz3s92f] {
    border-color: #ef4444;
    color: #ef4444;
    background-color: transparent;
}

    .btn-outline-danger:hover[b-oajrz3s92f] {
        background-color: #ef4444;
        color: white;
    }

.btn-sm[b-oajrz3s92f] {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .documents-grid[b-oajrz3s92f] {
        grid-template-columns: 1fr;
    }

    .modal-content[b-oajrz3s92f] {
        width: 95%;
        margin: 1rem;
    }

    .document-header[b-oajrz3s92f] {
        flex-wrap: wrap;
    }

    .document-actions[b-oajrz3s92f] {
        width: 100%;
        justify-content: flex-end;
        margin-top: 0.5rem;
    }

    .filter-buttons[b-oajrz3s92f] {
        justify-content: center;
    }

    .upload-area[b-oajrz3s92f] {
        padding: 1.5rem 1rem;
    }

    .upload-icon[b-oajrz3s92f] {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .modal-header[b-oajrz3s92f],
    .modal-body[b-oajrz3s92f],
    .modal-footer[b-oajrz3s92f] {
        padding: 1rem;
    }

    .documents-grid[b-oajrz3s92f] {
        gap: 0.75rem;
    }

    .document-card[b-oajrz3s92f] {
        padding: 0.75rem;
    }

    .filter-buttons[b-oajrz3s92f] {
        gap: 0.25rem;
    }

    .btn-filter[b-oajrz3s92f] {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }
}

/* Alert Styles */
.alert[b-oajrz3s92f] {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-danger[b-oajrz3s92f] {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

.alert i[b-oajrz3s92f] {
    font-size: 1rem;
}
/* /Components/DonorPetSelection.razor.rz.scp.css */
/* PetSelectionModal.razor.css */

.modal-overlay[b-k1uy87f16e] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    padding: 20px;
    animation: fadeIn-b-k1uy87f16e 0.3s ease;
}

    .modal-overlay.show[b-k1uy87f16e] {
        display: flex;
    }

@keyframes fadeIn-b-k1uy87f16e {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

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

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

.modal-content[b-k1uy87f16e] {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow: hidden;
    animation: slideUp-b-k1uy87f16e 0.3s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    position: relative;
}

/* Header with Purple Gradient */
.modal-header[b-k1uy87f16e] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 30px 24px 24px;
    color: white;
    position: relative;
}

.close-btn[b-k1uy87f16e] {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    color: white;
    line-height: 1;
    z-index: 10;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .close-btn:hover[b-k1uy87f16e] {
        background: rgba(255, 255, 255, 0.3);
    }

.modal-icon[b-k1uy87f16e] {
    font-size: 28px;
    margin-bottom: 8px;
}

.modal-title[b-k1uy87f16e] {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    opacity: 0.95;
}

.request-for[b-k1uy87f16e] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin-top: 8px;
}

.blood-type-badge[b-k1uy87f16e] {
    display: inline-block;
    background: #ef4444;
    color: white;
    padding: 4px 10px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.5px;
}

/* Modal Body */
.modal-body[b-k1uy87f16e] {
    padding: 24px;
    max-height: 50vh;
    overflow-y: auto;
}

    .modal-body[b-k1uy87f16e]::-webkit-scrollbar {
        width: 6px;
    }

    .modal-body[b-k1uy87f16e]::-webkit-scrollbar-track {
        background: #f3f4f6;
    }

    .modal-body[b-k1uy87f16e]::-webkit-scrollbar-thumb {
        background: #d1d5db;
        border-radius: 3px;
    }

        .modal-body[b-k1uy87f16e]::-webkit-scrollbar-thumb:hover {
            background: #9ca3af;
        }

.section-title[b-k1uy87f16e] {
    font-size: 12px;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 16px;
}

/* Pet Cards */
.pet-card[b-k1uy87f16e] {
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    gap: 14px;
    align-items: start;
    background: white;
}

    .pet-card:hover:not(.disabled)[b-k1uy87f16e] {
        border-color: #667eea;
        background: #f9fafb;
        transform: translateY(-1px);
    }

    .pet-card.selected[b-k1uy87f16e] {
        border-color: #667eea;
        background: #eef2ff;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
    }

    .pet-card.disabled[b-k1uy87f16e] {
        opacity: 0.6;
        cursor: not-allowed;
        background: #fafafa;
    }

        .pet-card.disabled:hover[b-k1uy87f16e] {
            border-color: #e5e7eb;
            background: #fafafa;
            transform: none;
        }
    /* Special styling for already offered pets */
    .pet-card.already-offered[b-k1uy87f16e] {
        background: #f0fdf4;
        border-color: #86efac;
        opacity: 0.8;
    }
        .pet-card.already-offered:hover[b-k1uy87f16e] {
            background: #f0fdf4;
            border-color: #86efac;
            transform: none;
        }

.pet-avatar[b-k1uy87f16e] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    overflow: hidden;
}

    .pet-avatar img[b-k1uy87f16e] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .pet-avatar .pet-icon[b-k1uy87f16e] {
        font-size: 32px;
    }

.pet-details[b-k1uy87f16e] {
    flex: 1;
    min-width: 0;
}

.pet-name-row[b-k1uy87f16e] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.pet-name[b-k1uy87f16e] {
    font-size: 17px;
    font-weight: 700;
    color: #1f2937;
}

.match-badge[b-k1uy87f16e] {
    font-size: 9px;
    padding: 3px 8px;
    border-radius: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #d1fae5;
    color: #065f46;
}

    /* Badge for already offered */
    .match-badge.offered[b-k1uy87f16e] {
        background: #4ade80;
        color: white;
    }
.pet-info[b-k1uy87f16e] {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.blood-icon[b-k1uy87f16e] {
    color: #ef4444;
    font-size: 14px;
}

.pet-status[b-k1uy87f16e] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
}

    .pet-status.eligible[b-k1uy87f16e] {
        color: #10b981;
    }

    .pet-status.waiting[b-k1uy87f16e] {
        color: #f59e0b;
    }

    .pet-status.ineligible[b-k1uy87f16e] {
        color: #ef4444;
    }
    /* Status for already offered pets */
    .pet-status.offered[b-k1uy87f16e] {
        color: #16a34a;
        font-weight: 600;
    }

.radio-button[b-k1uy87f16e] {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    margin-top: 4px;
    transition: all 0.2s;
}

.pet-card.selected .radio-button[b-k1uy87f16e] {
    border-color: #667eea;
    border-width: 2px;
}

    .pet-card.selected .radio-button[b-k1uy87f16e]::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        right: 3px;
        bottom: 3px;
        background: #667eea;
        border-radius: 50%;
        animation: radioFill-b-k1uy87f16e 0.2s ease;
    }

@keyframes radioFill-b-k1uy87f16e {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

/* No Pets State */
.no-pets[b-k1uy87f16e] {
    text-align: center;
    padding: 40px 20px;
}

.no-pets-icon[b-k1uy87f16e] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.no-pets p[b-k1uy87f16e] {
    color: #6b7280;
    margin-bottom: 20px;
    font-size: 15px;
}
/* All Pets Offered Message */
.all-pets-offered-message[b-k1uy87f16e] {
    text-align: center;
    padding: 30px 20px;
    margin-top: 20px;
    background: #f0fdf4;
    border-radius: 12px;
    border: 2px dashed #86efac;
}
.all-pets-offered-message .message-icon[b-k1uy87f16e] {
    font-size: 40px;
    margin-bottom: 12px;
}
.all-pets-offered-message p[b-k1uy87f16e] {
    color: #166534;
    font-size: 15px;
    font-weight: 500;
    margin: 0;
}

/* Modal Footer */
.modal-footer[b-k1uy87f16e] {
    padding: 20px 24px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 12px;
    background: #fafafa;
}

.btn[b-k1uy87f16e] {
    flex: 1;
    padding: 14px 24px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-cancel[b-k1uy87f16e] {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

    .btn-cancel:hover[b-k1uy87f16e] {
        background: #e5e7eb;
    }

.btn-primary[b-k1uy87f16e] {
    background: #667eea;
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-k1uy87f16e] {
        background: #5568d3;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }

    .btn-primary:disabled[b-k1uy87f16e] {
        background: #d1d5db;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

/* Responsive */
@media (max-width: 640px) {
    .modal-overlay[b-k1uy87f16e] {
        align-items: flex-end;
        padding: 0;
    }

    .modal-content[b-k1uy87f16e] {
        border-radius: 16px 16px 0 0;
        max-height: 85vh;
    }

    .modal-body[b-k1uy87f16e] {
        max-height: 60vh;
    }

    .pet-card[b-k1uy87f16e] {
        padding: 14px;
    }

    .pet-avatar[b-k1uy87f16e] {
        width: 50px;
        height: 50px;
        font-size: 26px;
    }

    .pet-name[b-k1uy87f16e] {
        font-size: 15px;
    }

    .pet-info[b-k1uy87f16e] {
        font-size: 13px;
    }

    .modal-footer[b-k1uy87f16e] {
        flex-direction: column-reverse;
        gap: 10px;
    }

    .btn[b-k1uy87f16e] {
        width: 100%;
    }
}
/* /Components/PetDetailsModal.razor.rz.scp.css */
/* Modal Overlay */
.modal-overlay[b-ohx4vxegql] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: flex-end;
    z-index: 1050;
    animation: fadeIn-b-ohx4vxegql 0.2s ease-out;
}

@keyframes fadeIn-b-ohx4vxegql {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Sheet Container */
.sheet-container[b-ohx4vxegql] {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    background: white;
    border-radius: 24px 24px 0 0;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideDown 0.3s ease-out;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

@keyframes slideUp-b-ohx4vxegql {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

/* Handle */
.sheet-handle[b-ohx4vxegql] {
    padding: 12px;
    text-align: center;
    cursor: grab;
}

    .sheet-handle:active[b-ohx4vxegql] {
        cursor: grabbing;
    }

.handle-bar[b-ohx4vxegql] {
    width: 40px;
    height: 4px;
    background: #d1d5db;
    border-radius: 2px;
    margin: 0 auto;
}

/* Header */
.sheet-header[b-ohx4vxegql] {
    padding: 0 24px 20px;
    border-bottom: 1px solid #f3f4f6;
}

.pet-header-row[b-ohx4vxegql] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    position: relative;
}

.pet-avatar-small[b-ohx4vxegql] {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s;
}

    .pet-avatar-small:hover[b-ohx4vxegql] {
        transform: scale(1.05);
    }

    .pet-avatar-small img[b-ohx4vxegql] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.close-btn[b-ohx4vxegql] {
    position: absolute;
    top: 0;
    right: 0;
    background: #f3f4f6;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    color: #6b7280;
}

    .close-btn:hover[b-ohx4vxegql] {
        background: #e5e7eb;
        color: #111827;
    }

.pet-title-info[b-ohx4vxegql] {
    flex: 1;
}

.pet-name-header[b-ohx4vxegql] {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #111827;
    margin: 0;
}

.pet-meta[b-ohx4vxegql] {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

/* Quick Stats */
.quick-stats[b-ohx4vxegql] {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 2px;
    margin-bottom: 16px;
    scrollbar-width: none;
}

    .quick-stats[b-ohx4vxegql]::-webkit-scrollbar {
        display: none;
    }

.stat-chip[b-ohx4vxegql] {
    flex-shrink: 0;
    padding: 8px 14px;
    background: #f9fafb;
    border-radius: 12px;
    font-size: 13px;
    color: #374151;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

    .stat-chip i[b-ohx4vxegql] {
        color: #9ca3af;
        font-size: 12px;
    }

/* Tabs Navigation */
.tabs-nav[b-ohx4vxegql] {
    /*display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 4px;
    scrollbar-width: none;*/
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 4px;
}

    .tabs-nav[b-ohx4vxegql]::-webkit-scrollbar {
        display: none;
    }

/*.tab-btn {
    flex-shrink: 0;
    padding: 5px 8px;
    border: none;
    background: transparent;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    white-space: nowrap;
}*/
.tab-btn[b-ohx4vxegql] {
    padding: 8px 10px;
    border: 1px solid #8080804a;
    background: transparent;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #6b7280;
    white-space: nowrap;
}

    .tab-btn:hover[b-ohx4vxegql] {
        background: #f9fafb;
    }

    .tab-btn.active[b-ohx4vxegql] {
        background: #eff6ff;
        border: 2px solid #2563eb;
        color: #2563eb;
        font-weight: 600;
    }

.tab-count[b-ohx4vxegql] {
    background: rgba(0, 0, 0, 0.08);
    padding: 2px 7px;
    border-radius: 10px;
    font-size: 12px;
    min-width: 20px;
    text-align: center;
}

.tab-btn.active .tab-count[b-ohx4vxegql] {
    background: #dbeafe;
    color: #2563eb;
}

/* Content Area */
.sheet-content[b-ohx4vxegql] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* Loading State */
.loading-state[b-ohx4vxegql] {
    text-align: center;
    padding: 48px 24px;
    color: #6b7280;
}

.spinner-border[b-ohx4vxegql] {
    width: 3rem;
    height: 3rem;
    border: 0.25rem solid #e5e7eb;
    border-right-color: #3b82f6;
    border-radius: 50%;
    animation: spinner-rotation-b-ohx4vxegql 0.75s linear infinite;
    margin-bottom: 16px;
}

@keyframes spinner-rotation-b-ohx4vxegql {
    to {
        transform: rotate(360deg);
    }
}

/* Medical Conditions Cards */
.condition-card[b-ohx4vxegql] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    transition: all 0.2s;
}

    .condition-card:hover[b-ohx4vxegql] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

.condition-header[b-ohx4vxegql] {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 12px;
}

.condition-description[b-ohx4vxegql] {
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 12px;
}

.condition-meta[b-ohx4vxegql] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #9ca3af;
    margin-bottom: 12px;
}

    .condition-meta i[b-ohx4vxegql] {
        font-size: 12px;
    }

.additional-details[b-ohx4vxegql] {
    background: #f9fafb;
    border-radius: 12px;
    padding: 14px;
    margin-top: 12px;
}

.additional-details-label[b-ohx4vxegql] {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.additional-details-text[b-ohx4vxegql] {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
}

/* Medication Cards */
.med-card[b-ohx4vxegql] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    transition: all 0.2s;
}

    .med-card:hover[b-ohx4vxegql] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

.med-header[b-ohx4vxegql] {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 10px;
}

.med-description[b-ohx4vxegql] {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 14px;
}

.med-details-grid[b-ohx4vxegql] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.med-detail-item[b-ohx4vxegql] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.med-detail-label[b-ohx4vxegql] {
    font-size: 12px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.med-detail-value[b-ohx4vxegql] {
    font-size: 14px;
    color: #374151;
    font-weight: 500;
}

/* Vaccination Cards */
.vacc-card[b-ohx4vxegql] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    transition: all 0.2s;
}

    .vacc-card:hover[b-ohx4vxegql] {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

.vacc-header[b-ohx4vxegql] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.vacc-name[b-ohx4vxegql] {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.vacc-description[b-ohx4vxegql] {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 14px;
}

.vacc-details[b-ohx4vxegql] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vacc-detail-row[b-ohx4vxegql] {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    align-items: center;
}

.vacc-detail-label[b-ohx4vxegql] {
    color: #9ca3af;
}

.vacc-detail-value[b-ohx4vxegql] {
    color: #374151;
    font-weight: 500;
}

.status-badge[b-ohx4vxegql] {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    margin-left: 8px;
}

.badge-success[b-ohx4vxegql] {
    background: #dcfce7;
    color: #16a34a;
}

.badge-warning[b-ohx4vxegql] {
    background: #fef3c7;
    color: #d97706;
}

.badge-danger[b-ohx4vxegql] {
    background: #fee2e2;
    color: #dc2626;
}

.additional-box[b-ohx4vxegql] {
    background: #f9fafb;
    border-radius: 12px;
    padding: 14px;
    margin-top: 12px;
}

.additional-label[b-ohx4vxegql] {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.additional-text[b-ohx4vxegql] {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
}

/* Allergen Cards */
.allergen-card[b-ohx4vxegql] {
    background: white;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #ef4444;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    transition: all 0.2s;
}

    .allergen-card:hover[b-ohx4vxegql] {
        box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
    }

.allergen-header[b-ohx4vxegql] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.allergen-name[b-ohx4vxegql] {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.severity-badge[b-ohx4vxegql] {
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: #fee2e2;
    color: #dc2626;
}

.allergen-description[b-ohx4vxegql] {
    color: #4b5563;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 14px;
}

.allergen-section[b-ohx4vxegql] {
    margin-bottom: 12px;
}

.section-label[b-ohx4vxegql] {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 4px;
}

.section-value[b-ohx4vxegql] {
    font-size: 14px;
    color: #374151;
    line-height: 1.5;
}

.emergency-alert[b-ohx4vxegql] {
    background: #fef3c7;
    border: 1px solid #fcd34d;
    border-radius: 12px;
    padding: 14px;
    margin-top: 12px;
    display: flex;
    gap: 10px;
}

.emergency-icon[b-ohx4vxegql] {
    color: #d97706;
    font-size: 16px;
    flex-shrink: 0;
}

.emergency-content[b-ohx4vxegql] {
    flex: 1;
}

.emergency-title[b-ohx4vxegql] {
    font-size: 13px;
    font-weight: 600;
    color: #92400e;
    margin-bottom: 4px;
}

.emergency-text[b-ohx4vxegql] {
    font-size: 13px;
    color: #78350f;
    line-height: 1.5;
}

.info-box[b-ohx4vxegql] {
    background: #f9fafb;
    border-radius: 12px;
    padding: 14px;
    margin-top: 12px;
}

.info-box-label[b-ohx4vxegql] {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.info-box-text[b-ohx4vxegql] {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
}

/* Empty State */
.empty-state[b-ohx4vxegql] {
    text-align: center;
    padding: 48px 24px;
    color: #9ca3af;
}

    .empty-state i[b-ohx4vxegql] {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.5;
    }

    .empty-state p[b-ohx4vxegql] {
        margin: 0;
    }

/* Photo Viewer Modal */
.photo-viewer-modal[b-ohx4vxegql] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1060;
    padding: 20px;
}

.photo-viewer-content[b-ohx4vxegql] {
    background: white;
    border-radius: 16px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.photo-viewer-header[b-ohx4vxegql] {
    padding: 20px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.photo-info h5[b-ohx4vxegql] {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.close-button[b-ohx4vxegql] {
    background: #f3f4f6;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: all 0.2s;
}

    .close-button:hover[b-ohx4vxegql] {
        background: #e5e7eb;
        color: #111827;
    }

.photo-viewer-body[b-ohx4vxegql] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.main-photo[b-ohx4vxegql] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: #f9fafb;
}

.modal-photo[b-ohx4vxegql] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.photo-navigation[b-ohx4vxegql] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: white;
    border-top: 1px solid #e5e7eb;
}

.nav-btn[b-ohx4vxegql] {
    background: #f3f4f6;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    transition: all 0.2s;
    flex-shrink: 0;
}

    .nav-btn:hover:not(:disabled)[b-ohx4vxegql] {
        background: #e5e7eb;
        color: #111827;
    }

    .nav-btn:disabled[b-ohx4vxegql] {
        opacity: 0.3;
        cursor: not-allowed;
    }

.photo-thumbnails[b-ohx4vxegql] {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    flex: 1;
    scrollbar-width: thin;
}

.thumb-nav[b-ohx4vxegql] {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
    flex-shrink: 0;
}

    .thumb-nav:hover[b-ohx4vxegql] {
        border-color: #d1d5db;
    }

    .thumb-nav.active[b-ohx4vxegql] {
        border-color: #3b82f6;
    }

    .thumb-nav img[b-ohx4vxegql] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.photo-viewer-footer[b-ohx4vxegql] {
    padding: 20px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

.photo-description[b-ohx4vxegql] {
    margin: 0 0 8px 0;
    color: #374151;
    line-height: 1.6;
}

.text-muted[b-ohx4vxegql] {
    color: #6b7280;
    font-size: 13px;
}

/* Responsive Design */
@media (min-width: 640px) {
    .modal-overlay[b-ohx4vxegql] {
        align-items: center;
        padding: 24px;
    }

    .sheet-container[b-ohx4vxegql] {
        border-radius: 24px;
        max-height: 85vh;
    }
}

@media (max-width: 480px) {
    .sheet-header[b-ohx4vxegql] {
        padding: 0 16px 16px;
    }

    .sheet-content[b-ohx4vxegql] {
        padding: 16px;
    }

    .pet-name-header[b-ohx4vxegql] {
        font-size: 20px;
    }

    .condition-card[b-ohx4vxegql],
    .med-card[b-ohx4vxegql],
    .vacc-card[b-ohx4vxegql],
    .allergen-card[b-ohx4vxegql] {
        padding: 16px;
    }

    .med-details-grid[b-ohx4vxegql] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .photo-viewer-modal[b-ohx4vxegql] {
        padding: 0;
    }

    .photo-viewer-content[b-ohx4vxegql] {
        border-radius: 0;
        max-height: 100vh;
    }

    .tabs-nav[b-ohx4vxegql] {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }

    .tab-btn[b-ohx4vxegql] {
        font-size: 11px;
        padding: 6px 8px;
        gap: 3px;
    }

        .tab-btn i[b-ohx4vxegql] {
            font-size: 10px;
        }
}
/* /Components/PhotoGallery.razor.rz.scp.css */
/* PhotoGallery Component Styles */
.photo-gallery-container[b-feyznkhmou] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Upload Section (adapted from DocumentUpload) */
.upload-section[b-feyznkhmou] {
    margin-bottom: 2rem;
}

.upload-header[b-feyznkhmou] {
    margin-bottom: 1rem;
}

    .upload-header h4[b-feyznkhmou] {
        color: #1e293b;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

.upload-description[b-feyznkhmou] {
    color: #64748b;
    margin-bottom: 0;
    font-size: 0.875rem;
}

.upload-area[b-feyznkhmou] {
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #f8fafc;
}

    .upload-area:hover[b-feyznkhmou] {
        border-color: #3b82f6;
        background-color: #eff6ff;
    }

    .upload-area.uploading[b-feyznkhmou] {
        border-color: #3b82f6;
        background-color: #eff6ff;
        cursor: default;
    }

.upload-icon[b-feyznkhmou] {
    font-size: 3rem;
    color: #94a3b8;
    margin-bottom: 1rem;
}

.upload-prompt h5[b-feyznkhmou] {
    color: #334155;
    margin-bottom: 0.5rem;
}

.upload-prompt p[b-feyznkhmou] {
    color: #64748b;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}

.file-limit[b-feyznkhmou] {
    font-size: 0.75rem !important;
    color: #94a3b8 !important;
}

.upload-progress[b-feyznkhmou] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

    .upload-progress .spinner-border[b-feyznkhmou] {
        color: #3b82f6;
    }

/* Photo Gallery */
.photo-gallery[b-feyznkhmou] {
    margin-top: 1rem;
}

    .photo-gallery h6[b-feyznkhmou] {
        font-size: 0.875rem;
        font-weight: 600;
        color: #374151;
        margin-bottom: 0.75rem;
    }

.photo-grid[b-feyznkhmou] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    max-height: none; /* Remove height limit for photos tab */
}

.photo-item[b-feyznkhmou] {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: #f8fafc;
    border: 2px solid #e2e8f0;
    transition: all 0.2s ease;
}

    .photo-item:hover[b-feyznkhmou] {
        border-color: #3b82f6;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

        .photo-item:hover .photo-controls[b-feyznkhmou] {
            opacity: 1;
        }

    .photo-item.profile-photo[b-feyznkhmou] {
        border-color: #10b981;
        background-color: #f0fdf4;
    }

.photo-thumbnail[b-feyznkhmou] {
    width: 100%;
    height: 120px; /* Slightly larger for gallery view */
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

    .photo-thumbnail img[b-feyznkhmou] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.2s ease;
    }

    .photo-thumbnail:hover img[b-feyznkhmou] {
        transform: scale(1.05);
    }

.profile-badge[b-feyznkhmou] {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    background-color: #10b981;
    color: white;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.photo-controls[b-feyznkhmou] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 0.25rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.btn-icon[b-feyznkhmou] {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.75rem;
    color: #374151;
}

    .btn-icon:hover[b-feyznkhmou] {
        background: white;
        transform: scale(1.1);
    }

    .btn-icon.delete[b-feyznkhmou] {
        color: #dc2626;
    }

        .btn-icon.delete:hover[b-feyznkhmou] {
            background-color: #dc2626;
            color: white;
        }

.photo-caption[b-feyznkhmou] {
    padding: 0.5rem;
    font-size: 0.75rem;
    color: #64748b;
    text-align: center;
    background-color: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

/* No Photos State */
.no-photos[b-feyznkhmou] {
    text-align: center;
    padding: 3rem 1rem;
    color: #64748b;
}

.empty-icon[b-feyznkhmou] {
    font-size: 4rem;
    color: #cbd5e1;
    margin-bottom: 1rem;
}

.no-photos h5[b-feyznkhmou] {
    color: #475569;
    margin-bottom: 0.5rem;
}

/* Photo Viewer Modal */
.photo-viewer-modal[b-feyznkhmou] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-feyznkhmou 0.3s ease;
}

.photo-viewer-content[b-feyznkhmou] {
    background-color: white;
    border-radius: 0.5rem;
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.photo-viewer-header[b-feyznkhmou] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

    .photo-viewer-header h5[b-feyznkhmou] {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: #1e293b;
    }

.photo-viewer-body[b-feyznkhmou] {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 70vh;
    overflow: hidden;
}

.modal-photo[b-feyznkhmou] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.photo-viewer-footer[b-feyznkhmou] {
    padding: 1rem;
    border-top: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

    .photo-viewer-footer p[b-feyznkhmou] {
        margin: 0;
        color: #64748b;
        text-align: center;
    }

/* Caption Edit Modal */
.caption-edit-modal[b-feyznkhmou] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-feyznkhmou 0.3s ease;
}

.caption-edit-content[b-feyznkhmou] {
    background-color: white;
    border-radius: 0.5rem;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.modal-header[b-feyznkhmou] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

    .modal-header h5[b-feyznkhmou] {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: #1e293b;
    }

.modal-body[b-feyznkhmou] {
    padding: 1.5rem;
}

.modal-footer[b-feyznkhmou] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

.close-button[b-feyznkhmou] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
}

    .close-button:hover[b-feyznkhmou] {
        color: #0f172a;
    }

/* Form Styles */
.form-group[b-feyznkhmou] {
    margin-bottom: 1rem;
}

    .form-group label[b-feyznkhmou] {
        display: block;
        font-weight: 500;
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
        color: #374151;
    }

.form-control[b-feyznkhmou] {
    width: 100%;
    padding: 0.625rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .form-control:focus[b-feyznkhmou] {
        outline: none;
        border-color: #93c5fd;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    }

textarea.form-control[b-feyznkhmou] {
    resize: vertical;
    min-height: 80px;
}

/* Button Styles */
.btn[b-feyznkhmou] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    text-decoration: none;
    gap: 0.5rem;
}

    .btn:disabled[b-feyznkhmou] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-primary[b-feyznkhmou] {
    background-color: #3b82f6;
    color: #ffffff;
}

    .btn-primary:hover:not(:disabled)[b-feyznkhmou] {
        background-color: #2563eb;
    }

.btn-outline-secondary[b-feyznkhmou] {
    background-color: #ffffff;
    color: #64748b;
    border: 1px solid #cbd5e1;
}

    .btn-outline-secondary:hover:not(:disabled)[b-feyznkhmou] {
        background-color: #f1f5f9;
    }

/* Alert Styles */
.alert[b-feyznkhmou] {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-danger[b-feyznkhmou] {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

.alert i[b-feyznkhmou] {
    font-size: 1rem;
}

/* Spinner */
.spinner-border[b-feyznkhmou] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: text-bottom;
    border: 0.125rem solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-feyznkhmou 0.75s linear infinite;
}

@keyframes spinner-border-b-feyznkhmou {
    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn-b-feyznkhmou {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .photo-grid[b-feyznkhmou] {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 0.75rem;
    }

    .photo-thumbnail[b-feyznkhmou] {
        height: 100px;
    }

    .upload-area[b-feyznkhmou] {
        padding: 1.5rem 1rem;
    }

    .upload-icon[b-feyznkhmou] {
        font-size: 2rem;
    }

    .photo-viewer-content[b-feyznkhmou] {
        max-width: 95vw;
        max-height: 95vh;
    }

    .caption-edit-content[b-feyznkhmou] {
        width: 95%;
    }
}

@media (max-width: 480px) {
    .photo-grid[b-feyznkhmou] {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }

    .photo-thumbnail[b-feyznkhmou] {
        height: 80px;
    }

    .btn-icon[b-feyznkhmou] {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.625rem;
    }

    .photo-controls[b-feyznkhmou] {
        gap: 0.125rem;
        padding: 0.25rem;
    }
}

/* Accessibility */
.photo-thumbnail:focus[b-feyznkhmou],
.btn:focus[b-feyznkhmou],
.btn-icon:focus[b-feyznkhmou] {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}
/* /Components/PhotoUpload.razor.rz.scp.css */
/* Enhanced Photo Upload Component Styles */
.photo-upload-container[b-hs0wwlywvt] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.main-photo-section[b-hs0wwlywvt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.pet-avatar[b-hs0wwlywvt] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    border: 3px solid #e2e8f0;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .pet-avatar:hover[b-hs0wwlywvt] {
        border-color: #3b82f6;
        transform: scale(1.02);
    }

        .pet-avatar:hover .photo-overlay[b-hs0wwlywvt] {
            opacity: 1;
        }

.pet-photo[b-hs0wwlywvt] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.photo-overlay[b-hs0wwlywvt] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: white;
    font-size: 1.5rem;
}

.photo-actions[b-hs0wwlywvt] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.photo-error[b-hs0wwlywvt] {
    margin-top: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.375rem;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    font-size: 0.875rem;
    text-align: center;
    max-width: 250px;
}

/* Photo Gallery */
/*.photo-gallery {
    margin-top: 1rem;
}

    .photo-gallery h6 {
        font-size: 0.875rem;
        font-weight: 600;
        color: #374151;
        margin-bottom: 0.75rem;
    }

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
    max-height: 300px;
    overflow-y: auto;
}

.photo-item {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
    background-color: #f8fafc;
    border: 2px solid #e2e8f0;
    transition: all 0.2s ease;
}

    .photo-item:hover {
        border-color: #3b82f6;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

        .photo-item:hover .photo-controls {
            opacity: 1;
        }

    .photo-item.profile-photo {
        border-color: #10b981;
        background-color: #f0fdf4;
    }

.photo-thumbnail {
    width: 100%;
    height: 100px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

    .photo-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.2s ease;
    }

    .photo-thumbnail:hover img {
        transform: scale(1.05);
    }

.profile-badge {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    background-color: #10b981;
    color: white;
    border-radius: 50%;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.photo-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 0.25rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.btn-icon {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.75rem;
    color: #374151;
}

    .btn-icon:hover {
        background: white;
        transform: scale(1.1);
    }

    .btn-icon.delete {
        color: #dc2626;
    }

        .btn-icon.delete:hover {
            background-color: #dc2626;
            color: white;
        }

.photo-caption {
    padding: 0.5rem;
    font-size: 0.75rem;
    color: #64748b;
    text-align: center;
    background-color: #f8fafc;
    border-top: 1px solid #e2e8f0;
}*/

/* Photo Viewer Modal */
/*.photo-viewer-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
}

.photo-viewer-content {
    background-color: white;
    border-radius: 0.5rem;
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.photo-viewer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

    .photo-viewer-header h5 {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: #1e293b;
    }

.photo-viewer-body {
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: 70vh;
    overflow: hidden;
}

.modal-photo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.photo-viewer-footer {
    padding: 1rem;
    border-top: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

    .photo-viewer-footer p {
        margin: 0;
        color: #64748b;
        text-align: center;
    }*/

/* Caption Edit Modal */
/*.caption-edit-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
}

.caption-edit-content {
    background-color: white;
    border-radius: 0.5rem;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}*/

.modal-header[b-hs0wwlywvt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

    .modal-header h5[b-hs0wwlywvt] {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: #1e293b;
    }

.modal-body[b-hs0wwlywvt] {
    padding: 1.5rem;
}

.modal-footer[b-hs0wwlywvt] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

.close-button[b-hs0wwlywvt] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
}

    .close-button:hover[b-hs0wwlywvt] {
        color: #0f172a;
    }

/* Form Styles */
.form-group[b-hs0wwlywvt] {
    margin-bottom: 1rem;
}

    .form-group label[b-hs0wwlywvt] {
        display: block;
        font-weight: 500;
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
        color: #374151;
    }

.form-control[b-hs0wwlywvt] {
    width: 100%;
    padding: 0.625rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .form-control:focus[b-hs0wwlywvt] {
        outline: none;
        border-color: #93c5fd;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    }

textarea.form-control[b-hs0wwlywvt] {
    resize: vertical;
    min-height: 80px;
}

/* Button Styles */
.btn[b-hs0wwlywvt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    text-decoration: none;
    gap: 0.5rem;
}

    .btn:disabled[b-hs0wwlywvt] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-small[b-hs0wwlywvt] {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

.btn-primary[b-hs0wwlywvt] {
    background-color: #3b82f6;
    color: #ffffff;
}

    .btn-primary:hover:not(:disabled)[b-hs0wwlywvt] {
        background-color: #2563eb;
    }

.btn-outline-primary[b-hs0wwlywvt] {
    background-color: #eff6ff;
    color: #3b82f6;
    border: 1px solid #bfdbfe;
}

    .btn-outline-primary:hover:not(:disabled)[b-hs0wwlywvt] {
        background-color: #dbeafe;
        border-color: #93c5fd;
    }

.btn-outline-secondary[b-hs0wwlywvt] {
    background-color: #ffffff;
    color: #64748b;
    border: 1px solid #cbd5e1;
}

    .btn-outline-secondary:hover:not(:disabled)[b-hs0wwlywvt] {
        background-color: #f1f5f9;
    }

/* Spinner */
.spinner-border[b-hs0wwlywvt] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: text-bottom;
    border: 0.125rem solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-hs0wwlywvt 0.75s linear infinite;
}

.spinner-border-sm[b-hs0wwlywvt] {
    width: 0.875rem;
    height: 0.875rem;
    border-width: 0.125rem;
}

@keyframes spinner-border-b-hs0wwlywvt {
    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn-b-hs0wwlywvt {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .photo-grid[b-hs0wwlywvt] {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 0.75rem;
    }

    .photo-thumbnail[b-hs0wwlywvt] {
        height: 80px;
    }

    .pet-avatar[b-hs0wwlywvt] {
        width: 100px;
        height: 100px;
        font-size: 2rem;
    }

    .photo-actions[b-hs0wwlywvt] {
        flex-direction: column;
        width: 100%;
        max-width: 200px;
    }

        .photo-actions .btn[b-hs0wwlywvt] {
            justify-content: center;
            width: 100%;
        }

    .photo-viewer-content[b-hs0wwlywvt] {
        max-width: 95vw;
        max-height: 95vh;
    }

    .caption-edit-content[b-hs0wwlywvt] {
        width: 95%;
    }
}

@media (max-width: 480px) {
    .pet-avatar[b-hs0wwlywvt] {
        width: 80px;
        height: 80px;
        font-size: 1.5rem;
    }

    .photo-grid[b-hs0wwlywvt] {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }

    .photo-thumbnail[b-hs0wwlywvt] {
        height: 60px;
    }

    .btn-icon[b-hs0wwlywvt] {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.625rem;
    }

    .photo-controls[b-hs0wwlywvt] {
        gap: 0.125rem;
        padding: 0.25rem;
    }
}

/* Accessibility */
.pet-avatar:focus[b-hs0wwlywvt],
.photo-thumbnail:focus[b-hs0wwlywvt],
.btn:focus[b-hs0wwlywvt],
.btn-icon:focus[b-hs0wwlywvt] {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Upload Progress Animation */
.pet-avatar.uploading[b-hs0wwlywvt] {
    position: relative;
}

    .pet-avatar.uploading[b-hs0wwlywvt]::after {
        content: '';
        position: absolute;
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        border: 3px solid transparent;
        border-top-color: #3b82f6;
        border-radius: 50%;
        animation: photoUploadSpin-b-hs0wwlywvt 1s linear infinite;
    }

@keyframes photoUploadSpin-b-hs0wwlywvt {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Enhanced Visual States */
.photo-item.uploading[b-hs0wwlywvt] {
    opacity: 0.7;
    pointer-events: none;
}

.photo-item.error[b-hs0wwlywvt] {
    border-color: #dc2626;
    background-color: #fef2f2;
}

/* Drag and Drop Styles (for future enhancement) */
.photo-upload-container.drag-over[b-hs0wwlywvt] {
    background-color: #eff6ff;
    border: 2px dashed #3b82f6;
    border-radius: 0.5rem;
    padding: 1rem;
}

/* Custom Scrollbar */
.photo-grid[b-hs0wwlywvt]::-webkit-scrollbar {
    width: 6px;
}

.photo-grid[b-hs0wwlywvt]::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.photo-grid[b-hs0wwlywvt]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

    .photo-grid[b-hs0wwlywvt]::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }
/* /Components/SyncOverlay.razor.rz.scp.css */
.sync-overlay[b-pxe2ykdv5v] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn-b-pxe2ykdv5v 0.3s ease;
}

.sync-modal[b-pxe2ykdv5v] {
    background: white;
    border-radius: 15px;
    padding: 40px 30px;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    text-align: center;
    animation: slideIn-b-pxe2ykdv5v 0.4s ease;
}

.sync-content[b-pxe2ykdv5v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.sync-spinner[b-pxe2ykdv5v] {
    margin-bottom: 10px;
}

.spinner-border-lg[b-pxe2ykdv5v] {
    width: 3.5rem;
    height: 3.5rem;
    border-width: 0.3rem;
    color: #2196f3;
}

.sync-title[b-pxe2ykdv5v] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.sync-message[b-pxe2ykdv5v] {
    font-size: 1rem;
    color: #64748b;
    margin: 0;
    min-height: 24px;
    font-weight: 500;
}

.sync-progress[b-pxe2ykdv5v] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.progress[b-pxe2ykdv5v] {
    height: 12px;
    background-color: #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}

.progress-bar[b-pxe2ykdv5v] {
    height: 100%;
    background: linear-gradient(90deg, #2196f3, #1976d2);
    transition: width 0.3s ease;
    border-radius: 6px;
}

.progress-details[b-pxe2ykdv5v] {
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 500;
}

.current-file[b-pxe2ykdv5v] {
    color: #64748b;
    font-size: 0.8rem;
    max-width: 100%;
    word-break: break-all;
}

.sync-note[b-pxe2ykdv5v] {
    font-size: 0.875rem;
    color: #94a3b8;
    margin: 0;
    font-style: italic;
}

@keyframes fadeIn-b-pxe2ykdv5v {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-pxe2ykdv5v {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* /Layout/LandingLayout.razor.rz.scp.css */
.page[b-17lep2t9n4] {
    /*background: linear-gradient( 135deg, #34425F, 0%, #2E4878 25%, #5D5972 50%, #8B6B76 75%, #627CBD 100%);*/
}

/*main {
    flex: 1;
}*/
.nav-link[b-17lep2t9n4] {
    color: orange !important;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-kbxx5e962m] {
    position: relative;
    display: flex;
    flex-direction: column;
    height:100%;
    /*background: linear-gradient( 135deg, #34425F, 0%, #2E4878 25%, #5D5972 50%, #8B6B76 75%, #627CBD 100%);*/
}

main[b-kbxx5e962m] {
    flex: 1;
    background-image: url(../img/background2.2.png)
}

/* Top Navigation Bar */
.top-row[b-kbxx5e962m] {
    /*background-color:#ffa750;*/
    /*background: linear-gradient( 135deg, #34425F, 0%, #2E4878 25%, #5D5972 50%, #8B6B76 75%, #627CBD 100%);*/
    /*background: rgba(255, 255, 255, 0.15);*/
    background: linear-gradient(135deg, #1e293b70 0%, #3341557d 100%);
    backdrop-filter: blur(10px);
    justify-content: space-between;
    height: 3.5rem;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    color: black;
    position: sticky;
    top: 0;
    z-index: 1000;
    color: whitesmoke;
}

.container-fluid[b-kbxx5e962m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Logo on left */
.navbar-brand[b-kbxx5e962m] {
    padding: 0;
    margin-right: 0;
    flex: 0 0 auto;
    color: #495057;
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
}

    .navbar-brand:hover[b-kbxx5e962m] {
        color: #495057;
        text-decoration: none;
    }

/* Navigation Links */
.nav-links[b-kbxx5e962m] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #f3d03c;
}

.nav-item[b-kbxx5e962m] {
    padding: 5px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.75rem;
    transition: all 0.2s ease;
    border-radius: 9999px;
    margin: 0 0.25rem;
}

    .nav-item:hover[b-kbxx5e962m] {
        color: #0f172a;
        background-color: rgba(255, 255, 255, 0.2);
        border: none; /* Remove the border */
        /* background-color: #93adc7;
        border: 2px solid #0f172a;*/
    }

    .nav-item.active[b-kbxx5e962m] {
        color: #0f172a;
        background-color: #deede6;
        font-weight: bold;
    }
/* Dropdown Navigation Styles */
.nav-dropdown[b-kbxx5e962m] {
    position: relative;
    display: inline-block;
}
    /* Prevent double hover effect on dropdown items */
    .nav-dropdown .nav-item:hover[b-kbxx5e962m] {
        border: none;
    }

.dropdown-content[b-kbxx5e962m] {
    /*   display: none;
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    min-width: 200px;
    border-radius: 12px;
    z-index: 1001;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;*/
    display: none;
    position: absolute;
    /*background: rgba(255, 255, 255, 0.8);*/
    /*background-color: #786374;*/
    background: linear-gradient(135deg, #1e293b70 0%, #3341557d 100%);
    backdrop-filter: blur(10px);
    min-width: max-content;
    width: max-content;
    border-radius: 12px;
    z-index: 1001;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
    /* Create an invisible bridge between nav item and dropdown */
    .dropdown-content[b-kbxx5e962m]::before {
        content: '';
        position: absolute;
        top: -8px;
        left: 0;
        right: 0;
        height: 8px;
        background: transparent;
    }
    /*.nav-dropdown:hover .dropdown-content,
    .dropdown-content:hover {*/
.nav-dropdown:hover .dropdown-content[b-kbxx5e962m] {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-2px);
    background-color: #786374;
}

.dropdown-content a[b-kbxx5e962m] {
    /*color: #374151;
    padding: 12px 20px;
    text-decoration: none;
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border-radius: 8px;
    margin: 0 8px;*/
    color: #e2e8f0;
    padding: 12px 20px;
    text-decoration: none;
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border-radius: 8px;
    margin: 0 8px;
    white-space: nowrap;
}

    .dropdown-content a:hover[b-kbxx5e962m] {
        /*background: linear-gradient(135deg, #f8fafc, #e2e8f0);
        color: #1f2937;
        transform: translateX(4px);*/
        background: rgba(255, 255, 255, 0.2);
        color: #ffffff;
        transform: translateX(4px);
    }

/* Improve nav item styling for dropdowns */
.nav-dropdown .nav-item[b-kbxx5e962m] {
    display: flex;
    align-items: center;
    cursor: pointer;
}

    .nav-dropdown .nav-item[b-kbxx5e962m]::after {
        content: '▼';
        font-size: 0.65rem;
        margin-left: 8px;
        opacity: 0.7;
        transition: all 0.2s ease;
    }

.nav-dropdown:hover .nav-item[b-kbxx5e962m]::after {
    transform: rotate(180deg);
    opacity: 1;
}

.nav-dropdown:hover .nav-item[b-kbxx5e962m] {
    color: #0f172a;
    background-color: rgba(255, 255, 255, 0.2);
}
.desktop-only[b-kbxx5e962m] {
    display: flex;
}
/* User Menu */
.user-menu[b-kbxx5e962m] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: auto;
}

    .user-menu .nav-item[b-kbxx5e962m] {
        position: relative;
        margin-left: 1rem;
        padding: 0;
        border: #3b82f6;
    }

.nav-link[b-kbxx5e962m] {
    color: darkgray;
    font-size: 1.25rem;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    position: relative;
}

    .nav-link:hover[b-kbxx5e962m] {
        color: #3b82f6;
    }

/* User Avatar */
.user-img[b-kbxx5e962m] {
    position: relative;
    display: inline-block;
}

    .user-img img[b-kbxx5e962m] {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, 0.3);
    }

.status[b-kbxx5e962m] {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 10px;
    height: 10px;
    border: 2px solid #ffffff;
    border-radius: 50%;
}

    .status.online[b-kbxx5e962m] {
        background-color: #16a34a;
    }
/* Facebook-Style Notification Panel */
.notifications[b-kbxx5e962m] {
    position: absolute;
    top: 100%;
    right: 0;
    width: 360px;
    /*background-color: #1c2733;
    color: #e4e6eb;*/
    color: black;
    border-radius: 8px;
    box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2);
    z-index: 1000;
    max-height: 80vh;
    overflow-y: hidden;
    display: none;
}

.notifications.show[b-kbxx5e962m] {
    display: block;
}

.notifications-header[b-kbxx5e962m] {
    padding: 12px 16px;
    border-bottom: 1px solid #3e4042;
}

    .notifications-header h3[b-kbxx5e962m] {
        font-size: 14px;
        font-weight: 700;
        margin: 0 0 12px 0;
    }

/*.nav-item {
    padding: 0.5rem 1rem;
    color: #64748b;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    border-radius: 9999px;
}

    .nav-item:hover {
        color: #0f172a;
        background-color: #f1f5f9;
    }

    .nav-item.active {
        color: #3b82f6;
        background-color: #eff6ff;
        border: 1px solid #bfdbfe;
        font-weight: 400;
    }*/
.notifications-tabs[b-kbxx5e962m] {
    display: flex;
    gap: 12px;
}

    .notifications-tabs .tab[b-kbxx5e962m] {
        padding: 4px 12px;
        border-radius: 16px;
        cursor: pointer;
        font-size: 12px;
    }

        .notifications-tabs .tab.active[b-kbxx5e962m] {
            /* background-color: #263850;
    color: #2d88ff;*/
            color: #3b82f6;
            background-color: #eff6ff;
            border: 1px solid #bfdbfe;
            font-weight: 400;
        }

.notifications-subheader[b-kbxx5e962m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
}

.see-all-link[b-kbxx5e962m] {
    color: #2d88ff;
    text-decoration: none;
}

.notifications-menu-options[b-kbxx5e962m] {
    position: absolute;
    top: 12px;
    right: 16px;
}
.menu-button[b-kbxx5e962m] {
    background: none;
    border: none;
    color: #e4e6eb;
    font-size: 16px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .menu-button:hover[b-kbxx5e962m] {
        background-color: #3a3b3c;
    }

.menu-dropdown[b-kbxx5e962m] {
    position: absolute;
    top: 40px;
    right: 0;
    background-color: #334155;
    border-radius: 8px;
    box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2);
    min-width: 200px;
    display: none;
}

    .menu-dropdown.show[b-kbxx5e962m] {
        display: block;
    }

.menu-item[b-kbxx5e962m] {
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 14px;
}

    .menu-item:hover[b-kbxx5e962m] {
        background-color: #3a3b3c;
    }

    .menu-item i[b-kbxx5e962m] {
        margin-right: 8px;
        width: 16px;
    }

.noti-content[b-kbxx5e962m] {
    max-height: calc(80vh - 180px);
    overflow-y: auto;
}

.notification-list[b-kbxx5e962m] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.notification-message[b-kbxx5e962m] {
    border-bottom: 1px solid #3e4042;
}

    .notification-message a[b-kbxx5e962m] {
        text-decoration: none;
        /*color: #e4e6eb;*/
        color: black;
        display: block;
    }

.notification-item[b-kbxx5e962m] {
    display: flex;
    align-items: flex-start;
    padding: 12px 16px;
    position: relative;
}

.notification-avatar[b-kbxx5e962m] {
    margin-right: 12px;
    position: relative;
}

    .notification-avatar img[b-kbxx5e962m] {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        object-fit: cover;
    }

.icon-overlay[b-kbxx5e962m] {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
}

.match-icon[b-kbxx5e962m] {
    background-color: #2d88ff;
}

.urgent-icon[b-kbxx5e962m] {
    background-color: #f42c30;
}

.status-icon[b-kbxx5e962m] {
    background-color: #7839d9;
}

.thanks-icon[b-kbxx5e962m] {
    background-color: #e94878;
}

.reminder-icon[b-kbxx5e962m] {
    background-color: #f7923b;
}

.expiring-icon[b-kbxx5e962m] {
    background-color: #f7b928;
}

.nearby-icon[b-kbxx5e962m] {
    background-color: #45bd62;
}

.notification-content[b-kbxx5e962m] {
    flex: 1;
}

.notification-text[b-kbxx5e962m] {
    margin: 0 0 4px 0;
    font-size: 14px;
    line-height: 1.25;
}

    .notification-text strong[b-kbxx5e962m] {
        font-weight: 600;
    }

.notification-time[b-kbxx5e962m] {
    margin: 0;
    font-size: 13px;
    color: #b0b3b8;
}

.notification-indicator[b-kbxx5e962m] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #2d88ff;
    margin-left: 12px;
    flex-shrink: 0;
}

.notification-actions[b-kbxx5e962m] {
    display: flex;
    gap: 8px;
    padding: 0 16px 12px 84px;
}
.dropdown-menu[b-kbxx5e962m] {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    z-index: 1000;
    min-width: 240px;
    padding: 0;
    margin: 0.125rem 0 0;
    /*background-color: #242526;*/
    border: 1px solid #3e4042;
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    display: none;
}

    .dropdown-menu.show[b-kbxx5e962m] {
        display: block;
    }

.userRolesMenu[b-kbxx5e962m] {
    /*background-color: #242526;*/
    width: 280px;
    padding: 0;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    border: none;
    color: #050505;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* User Profile Section */
.user-profile-section[b-kbxx5e962m] {
    padding: 10px;
    border-bottom: 1px solid #dddfe2;
}

.user-profile-info[b-kbxx5e962m] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

    .user-profile-info img[b-kbxx5e962m] {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 8px;
        border: none;
    }

.user-name[b-kbxx5e962m] {
    font-weight: 600;
    font-size: 15px;
    color: #050505;
}


/* Switch Profile Button - more compact */
.see-all-profiles[b-kbxx5e962m] {
    background-color: #e4e6eb;
    color: #050505;
    /*padding: 8px;*/
    padding: 6px 10px;
    border-radius: 6px;
    text-align: center;
    cursor: pointer;
    font-size: 20px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px; /* Reduced from 36px */
}

    .see-all-profiles:hover[b-kbxx5e962m] {
        background-color: #d8dadf;
    }

    .see-all-profiles i[b-kbxx5e962m] {
        margin-right: 6px;
        font-size: 14px;
    }




/* Role Selection View Inside Dropdown */
.role-selection-view[b-kbxx5e962m] {
    width: 100%;
}
.role-header[b-kbxx5e962m] {
    /* display: flex;
    align-items: center;
    padding: 16px;*/
    padding: 8px 10px;
    border-bottom: 1px solid #dddfe2;
}

    .role-header h2[b-kbxx5e962m] {
        font-size: 16px;
        font-weight: 700;
        margin: 0;
        color: #050505;
    }

.role-list[b-kbxx5e962m] {
    padding: 8px 0;
}

.role-item[b-kbxx5e962m], .create-role-item[b-kbxx5e962m] {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    cursor: pointer;
}

    .role-item:hover[b-kbxx5e962m], .create-role-item:hover[b-kbxx5e962m] {
        background-color: #f2f2f2;
    }

    .role-item img[b-kbxx5e962m] {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        margin-right: 8px;
    }

    .role-item.active[b-kbxx5e962m] {
        background-color: #e7f3ff;
    }

.role-name[b-kbxx5e962m] {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
}

.role-check[b-kbxx5e962m] {
    color: #1877f2;
    font-size: 16px;
}

/* Footer */
.menu-footer[b-kbxx5e962m] {
    padding: 8px 10px;
    border-top: 1px solid #dddfe2;
    color: #65676b;
    font-size: 10px;
    line-height: 1.4;
}

    .menu-footer span[b-kbxx5e962m] {
        cursor: pointer;
    }

        .menu-footer span:hover[b-kbxx5e962m] {
            text-decoration: underline;
        }


/* Menu Items */
.menu-items[b-kbxx5e962m] {
    padding: 4px 0;
}

.menu-item[b-kbxx5e962m] {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    text-decoration: none;
    color: #f3d03c;
    cursor: pointer;
}

    .menu-item:hover[b-kbxx5e962m] {
        background-color: #3b82f6;
    }

.menu-icon[b-kbxx5e962m] {
    width: 30px;
    height: 30px;
    background-color: #e4e6eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    font-size: 14px;
    color: #1877f2;
}

.menu-text[b-kbxx5e962m] {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #050505;
}

.menu-arrow[b-kbxx5e962m] {
    color: #65676b;
    font-size: 12px;
}

.menu-shortcut[b-kbxx5e962m] {
    color: #65676b;
    font-size: 12px;
}


/* Right side content */
.nav-right[b-kbxx5e962m] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: auto;
}

/* Mobile Navigation Toggle Button */
.navbar-toggler[b-kbxx5e962m] {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #495057;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    z-index: 1001; /* Higher than nav-right to ensure it's clickable */
}

    .navbar-toggler:hover[b-kbxx5e962m] {
        background-color: rgba(255, 255, 255, 0.2);
        transform: scale(1.05);
    }

    .navbar-toggler:focus[b-kbxx5e962m] {
        box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25);
        outline: none;
    }

    /* Toggle button active state */
    .navbar-toggler.active[b-kbxx5e962m] {
        background-color: rgba(255, 255, 255, 0.3);
        border-color: rgba(255, 255, 255, 0.4);
    }

        .navbar-toggler.active[b-kbxx5e962m]::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(147, 173, 199, 0.3);
            animation: pulse-b-kbxx5e962m 0.3s ease-out;
        }

@keyframes pulse-b-kbxx5e962m {
    0% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

/* Mobile Quick Action Bar */
.mobile-quick-actions[b-kbxx5e962m] {
    background: #f1f5f9;
    padding: 12px 15px;
    display: none; /* Hidden by default, shown only on mobile */
    gap: 10px;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 3.5rem; /* Below the top navigation */
    z-index: 999;
}

.quick-action-btn[b-kbxx5e962m] {
    flex: 1;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .quick-action-btn:hover[b-kbxx5e962m] {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        background: #79acff;
        color: white;
        border-color: #1e40af;
    }

    .quick-action-btn.primary[b-kbxx5e962m] {
        background: white;
        color: #475569;
        border: 1px solid #e2e8f0;
    }

        .quick-action-btn.primary:hover[b-kbxx5e962m] {
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            background: #79acff;
            color: white;
            border-color: #1e40af;
        }

    .quick-action-btn.active[b-kbxx5e962m] {
        background: #1e40af;
        color: white;
        border-color: #1e40af;
    }

    .quick-action-btn.primary.active[b-kbxx5e962m] {
        background: #1e40af;
        color: white;
        border-color: #1e40af;
    }
/* Mobile Navigation */
.mobile-nav[b-kbxx5e962m] {
    position: fixed;
    top: calc(3.5rem + 61px); /* Height of top-row + quick actions bar */
    left: 0;
    right: 0;
    background-color: #f8fafc;
    border-bottom: 1px solid #bfdbfe;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    z-index: 999;
    max-height: calc(100vh - 3.5rem - 61px);
    overflow-y: auto;
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
    padding: 0;
}

    .mobile-nav:not(.collapse)[b-kbxx5e962m] {
        transform: translateY(0);
    }

    .mobile-nav.collapse[b-kbxx5e962m] {
        transform: translateY(-100%);
    }

.mobile-nav-content[b-kbxx5e962m] {
    padding: 1rem;
}

.mobile-nav-item[b-kbxx5e962m] {
    padding: 0.75rem 1rem;
    color: #495057;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

    .mobile-nav-item:hover[b-kbxx5e962m] {
        background-color: #e2e8f0;
        color: #1e293b;
        transform: translateX(4px);
    }

    .mobile-nav-item:last-child[b-kbxx5e962m] {
        margin-bottom: 0;
    }

/* Add backdrop for mobile nav */
.mobile-nav-backdrop[b-kbxx5e962m] {
    position: fixed;
    top: calc(3.5rem + 61px); /* Adjust for quick actions bar */
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

    .mobile-nav-backdrop.show[b-kbxx5e962m] {
        opacity: 1;
        visibility: visible;
    }

/* Content area */
.content[b-kbxx5e962m] {
    padding: 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .desktop-only[b-kbxx5e962m] {
        display: none;
    }

    .nav-links[b-kbxx5e962m] {
        display: none;
    }

    .top-row[b-kbxx5e962m] {
        padding:0px 0px 0px 0px !important;
    }

    .container-fluid[b-kbxx5e962m] {
        position: relative;
        padding-left:0px !important;
    }

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

    .content[b-kbxx5e962m] {
        padding: 0.5rem;
    }

    /* Show mobile quick actions */
    .mobile-quick-actions[b-kbxx5e962m] {
        display: flex !important;
    }
    /* Adjust nav-right positioning to not overlap hamburger */
    .nav-right[b-kbxx5e962m] {
        position: relative;
        margin-right: 55px; /* Increased space for hamburger button */
        max-width: calc(100vw - 200px); /* Prevent overflow on small screens */
    }
        /* Ensure OfflineIndicator badges wrap properly on mobile */

        /*.nav-right .offline-indicator {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        justify-content: flex-end;
        align-items: center;
    }*/
        /* .nav-right .offline-indicator {
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-end !important;
            gap: 2px !important;
        }*/
        /* Make badges smaller on mobile if needed */
        .nav-right .badge[b-kbxx5e962m] {
            font-size: 10px !important;
            padding: 3px 6px !important;
            white-space: nowrap;
        }
    /* Prevent body scroll when mobile nav is open */
    body.mobile-nav-open[b-kbxx5e962m] {
        overflow: hidden;
    }
}

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

    .mobile-nav[b-kbxx5e962m] {
        display: none !important;
    }

    .mobile-nav-backdrop[b-kbxx5e962m] {
        display: none !important;
    }

    .mobile-quick-actions[b-kbxx5e962m] {
        display: none !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-0p10z0c0v3] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-0p10z0c0v3] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

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

.bi[b-0p10z0c0v3] {
    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-0p10z0c0v3] {
    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-0p10z0c0v3] {
    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-0p10z0c0v3] {
    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-0p10z0c0v3] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-0p10z0c0v3] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-0p10z0c0v3] {
        padding-bottom: 1rem;
    }

    .nav-item[b-0p10z0c0v3]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-0p10z0c0v3]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-0p10z0c0v3]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

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

    .collapse[b-0p10z0c0v3] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .nav-scrollable[b-0p10z0c0v3] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Pages/AboutUs.razor.rz.scp.css */
/* About Page Styles */
.about-container[b-416m8d8yfy] {
    /* background-color: #4a5e72a3;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 900px;
    margin: 0 auto;
    border-radius: 15px 15px 0 0;*/
    /*padding: 20px;*/
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 0;
    margin: 0 auto;
    color: #0f172a;
    max-width: 1200px;
    border-radius: 10px;
    background: #4a5e72a3;
    overflow: hidden;
}

/* Hero Section */
.hero-section[b-416m8d8yfy] {
    /*background: linear-gradient(135deg, #1e293b 0%, #334155 100%);*/
    /*background-color: #deede6;*/
    background: linear-gradient(135deg, #1e293b70 0%, #3341557d 100%);
    color: #f3d03c;
    padding: 20px;
    border-radius: 10px 10px 0 0;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
}

.brand-logo[b-416m8d8yfy] {
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 8px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

    .brand-logo img[b-416m8d8yfy] {
        width: 45px;
        height: 45px;
        object-fit: contain;
    }

.brand-placeholder[b-416m8d8yfy] {
    color: #06b6d4;
    font-weight: bold;
    font-size: 0.8rem;
    text-align: center;
    line-height: 1.2;
}

.hero-title[b-416m8d8yfy] {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: #334155;
}

.hero-subtitle[b-416m8d8yfy] {
    font-size: 1rem;
    margin-bottom: 10px;
}

.hero-description[b-416m8d8yfy] {
    font-size: 0.9rem;
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.5;
}

/* Main Content */
.main-content-card[b-416m8d8yfy] {
    background: white;
    /*border-radius: 0 0 15px 15px;*/
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.section-content[b-416m8d8yfy] {
    padding: 25px;
}

.section-header[b-416m8d8yfy] {
    color: #1e293b;
    font-size: 1.3rem;
    font-weight: 600;
    margin: 25px 0 15px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .section-header:first-child[b-416m8d8yfy] {
        margin-top: 0;
    }

/* Content Blocks */
.content-block[b-416m8d8yfy] {
    background: #f8fafc;
    padding: 20px;
    border-radius: 10px;
    margin: 15px 0;
    border-left: 4px solid #06b6d4;
}

.content-statement[b-416m8d8yfy] {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 10px;
}

.content-description[b-416m8d8yfy] {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
}

/* Features List */
.features-list[b-416m8d8yfy] {
    background: #f8fafc;
    padding: 20px;
    border-radius: 10px;
    margin: 15px 0;
    border-left: 4px solid #06b6d4;
}

.feature-item[b-416m8d8yfy] {
    padding: 8px 0;
    font-size: 0.95rem;
    color: #475569;
    /*border-bottom: 1px solid #e2e8f0;*/
    line-height: 1.5;
}

    .feature-item:last-child[b-416m8d8yfy] {
        border-bottom: none;
    }

.feature-title[b-416m8d8yfy] {
    font-weight: 600;
    color: #1e293b;
}

/* Statistics Grid */
.stats-grid[b-416m8d8yfy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.stat-item[b-416m8d8yfy] {
    background: #f8fafc;
    padding: 15px 10px;
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}

    .stat-item:hover[b-416m8d8yfy] {
        background: #06b6d4;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
    }

.stat-number[b-416m8d8yfy] {
    font-size: 1.5rem;
    font-weight: bold;
    color: #06b6d4;
    display: block;
    margin-bottom: 5px;
}

.stat-item:hover .stat-number[b-416m8d8yfy] {
    color: white;
}

.stat-label[b-416m8d8yfy] {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 500;
}

.stat-item:hover .stat-label[b-416m8d8yfy] {
    color: white;
}

/* Team Grid */
.team-grid[b-416m8d8yfy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.team-member[b-416m8d8yfy] {
    background: #f8fafc;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}

    .team-member:hover[b-416m8d8yfy] {
        background: #06b6d4;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
    }

.member-avatar[b-416m8d8yfy] {
    width: 50px;
    height: 50px;
    background: #06b6d4;
    border-radius: 50%;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.team-member:hover .member-avatar[b-416m8d8yfy] {
    background: white;
    color: #06b6d4;
}

.member-name[b-416m8d8yfy] {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 3px;
    font-size: 0.9rem;
}

.team-member:hover .member-name[b-416m8d8yfy] {
    color: white;
}

.member-role[b-416m8d8yfy] {
    color: #64748b;
    font-size: 0.8rem;
    line-height: 1.3;
}

.team-member:hover .member-role[b-416m8d8yfy] {
    color: #e0f7fa;
}

/* CTA Section */
.cta-section[b-416m8d8yfy] {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: #f3d03c;
    padding: 30px;
    /*border-radius: 15px;*/
    text-align: center;
    margin-top: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.cta-title[b-416m8d8yfy] {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 10px;
    /*color: white;*/
}

.cta-description[b-416m8d8yfy] {
    font-size: 1rem;
    color: #94a3b8;
    margin-bottom: 20px;
    line-height: 1.5;
}

.cta-buttons[b-416m8d8yfy] {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-button[b-416m8d8yfy] {
    background: #06b6d4;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-block;
}

    .cta-button:hover[b-416m8d8yfy] {
        background: #0891b2;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
        text-decoration: none;
        color: white;
    }

    .cta-button.secondary[b-416m8d8yfy] {
        background: transparent;
        border: 2px solid #06b6d4;
        color: #06b6d4;
    }

        .cta-button.secondary:hover[b-416m8d8yfy] {
            background: #06b6d4;
            color: white;
        }

/* Tablet Responsiveness (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .about-container[b-416m8d8yfy] {
        padding: 15px;
        max-width: 100%;
    }

    .hero-section[b-416m8d8yfy] {
        padding: 25px 20px;
    }

    .section-content[b-416m8d8yfy] {
        padding: 20px;
    }

    .stats-grid[b-416m8d8yfy] {
        grid-template-columns: repeat(3, 1fr);
    }

    .team-grid[b-416m8d8yfy] {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-title[b-416m8d8yfy] {
        font-size: 1.6rem;
    }

    .section-header[b-416m8d8yfy] {
        font-size: 1.2rem;
    }
}

/* Mobile Responsiveness (up to 768px) */
@media (max-width: 768px) {
    .about-container[b-416m8d8yfy] {
        padding: 10px;
        max-width: 100%;
    }

    .hero-section[b-416m8d8yfy] {
        padding: 20px 15px;
        border-radius: 10px 10px 0 0;
    }

    .main-content-card[b-416m8d8yfy] {
        border-radius: 0 0 10px 10px;
    }

    .brand-logo[b-416m8d8yfy] {
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
    }

    .brand-placeholder[b-416m8d8yfy] {
        font-size: 0.7rem;
    }

    .hero-title[b-416m8d8yfy] {
        font-size: 1.5rem;
        margin-bottom: 6px;
    }

    .hero-subtitle[b-416m8d8yfy] {
        font-size: 0.9rem;
        margin-bottom: 8px;
    }

    .hero-description[b-416m8d8yfy] {
        font-size: 0.85rem;
        max-width: 100%;
    }

    .section-content[b-416m8d8yfy] {
        padding: 15px;
    }

    .section-header[b-416m8d8yfy] {
        font-size: 1.1rem;
        margin: 20px 0 10px 0;
    }

    .content-block[b-416m8d8yfy] {
        padding: 15px;
        margin: 10px 0;
    }

    .features-list[b-416m8d8yfy] {
        padding: 15px;
        margin: 10px 0;
    }

    .content-statement[b-416m8d8yfy] {
        font-size: 1rem;
        margin-bottom: 8px;
    }

    .content-description[b-416m8d8yfy] {
        font-size: 0.9rem;
    }

    .feature-item[b-416m8d8yfy] {
        font-size: 0.9rem;
        padding: 6px 0;
    }

    .stats-grid[b-416m8d8yfy] {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin: 15px 0;
    }

    .stat-item[b-416m8d8yfy] {
        padding: 12px 8px;
    }

    .stat-number[b-416m8d8yfy] {
        font-size: 1.3rem;
        margin-bottom: 3px;
    }

    .stat-label[b-416m8d8yfy] {
        font-size: 0.75rem;
    }

    .team-grid[b-416m8d8yfy] {
        grid-template-columns: 1fr;
        gap: 10px;
        margin: 15px 0;
    }

    .team-member[b-416m8d8yfy] {
        padding: 12px;
    }

    .member-avatar[b-416m8d8yfy] {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
        margin-bottom: 8px;
    }

    .member-name[b-416m8d8yfy] {
        font-size: 0.85rem;
    }

    .member-role[b-416m8d8yfy] {
        font-size: 0.75rem;
    }

    .cta-section[b-416m8d8yfy] {
        padding: 20px 15px;
        margin-top: 20px;
        border-radius: 10px;
    }

    .cta-title[b-416m8d8yfy] {
        font-size: 1.5rem;
        margin-bottom: 8px;
    }

    .cta-description[b-416m8d8yfy] {
        font-size: 0.9rem;
        margin-bottom: 15px;
    }

    .cta-buttons[b-416m8d8yfy] {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .cta-button[b-416m8d8yfy] {
        width: 100%;
        max-width: 250px;
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}

/* Small Mobile (up to 480px) */
@media (max-width: 480px) {
    .about-container[b-416m8d8yfy] {
        padding: 5px;
    }

    .hero-section[b-416m8d8yfy] {
        padding: 15px 10px;
    }

    .section-content[b-416m8d8yfy] {
        padding: 12px;
    }

    .hero-title[b-416m8d8yfy] {
        font-size: 1.3rem;
    }

    .section-header[b-416m8d8yfy] {
        font-size: 1rem;
        margin: 15px 0 8px 0;
    }

    .content-block[b-416m8d8yfy],
    .features-list[b-416m8d8yfy] {
        padding: 12px;
        margin: 8px 0;
    }

    .stats-grid[b-416m8d8yfy] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .stat-item[b-416m8d8yfy] {
        padding: 10px;
    }

    .cta-section[b-416m8d8yfy] {
        padding: 15px 10px;
    }

    .cta-title[b-416m8d8yfy] {
        font-size: 1.3rem;
    }

    .cta-description[b-416m8d8yfy] {
        font-size: 0.85rem;
    }

    .cta-button[b-416m8d8yfy] {
        padding: 8px 15px;
        font-size: 0.85rem;
    }
}
/* /Pages/AccountPages/LoginPage.razor.rz.scp.css */
.disabled-section[b-z909z2l88z] {
    opacity: 0.5;
    pointer-events: none;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    border: 1px dashed #dee2e6;
}

.otp-input[b-z909z2l88z] {
    font-family: 'Courier New', monospace;
    text-align: center;
    letter-spacing: 0.5em;
    font-size: 1.5em;
    font-weight: bold;
    border: 2px solid #ced4da;
    border-radius: 8px;
    padding: 12px;
    transition: border-color 0.3s ease;
}

    .otp-input:focus[b-z909z2l88z] {
        border-color: #28a745;
        box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
    }

.btn-success:hover[b-z909z2l88z] {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.login-method-toggle[b-z909z2l88z] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.form-control:disabled[b-z909z2l88z] {
    background-color: #e9ecef;
    opacity: 0.65;
}

.input-group-text[b-z909z2l88z] {
    background-color: #e9ecef;
    border-color: #ced4da;
}

.card[b-z909z2l88z] {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 10px;
}

.card-header[b-z909z2l88z] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 10px 10px 0 0 !important;
}

@keyframes fadeIn-b-z909z2l88z {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

.alert[b-z909z2l88z] {
    animation: fadeIn-b-z909z2l88z 0.5s ease-out;
}
/* /Pages/AccountPages/RegisterUser.razor.rz.scp.css */
.error-page[b-mljgucbcwi] {
    /*display: flex;*/
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.error-box[b-mljgucbcwi] {
    text-align: center;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background: white;
}

.btn-custom[b-mljgucbcwi] {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    margin-top: 15px;
}

    .btn-custom:hover[b-mljgucbcwi] {
        background-color: #0056b3;
        border-color: #0056b3;
        color: white;
        text-decoration: none;
    }

.spinner-border-sm[b-mljgucbcwi] {
    width: 1rem;
    height: 1rem;
}

.card[b-mljgucbcwi] {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 10px;
}

.card-header[b-mljgucbcwi] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 10px 10px 0 0 !important;
}

/* User Type Selection Styles */
.user-type-selection[b-mljgucbcwi] {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    border: 1px solid #e9ecef;
}

    .user-type-selection .form-check[b-mljgucbcwi] {
        background: white;
        border: 2px solid #e9ecef;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 10px;
        transition: all 0.3s ease;
        cursor: pointer;
    }

        .user-type-selection .form-check:hover[b-mljgucbcwi] {
            border-color: #007bff;
            box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15);
        }

    .user-type-selection .form-check-input:checked + .form-check-label[b-mljgucbcwi] {
        color: #007bff;
    }

    .user-type-selection .form-check:has(.form-check-input:checked)[b-mljgucbcwi] {
        border-color: #007bff;
        background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
    }

    .user-type-selection .form-check-label[b-mljgucbcwi] {
        cursor: pointer;
        width: 100%;
        display: block;
    }

        .user-type-selection .form-check-label strong[b-mljgucbcwi] {
            font-size: 16px;
            color: #333;
        }

    .user-type-selection .form-check-input[b-mljgucbcwi] {
        margin-top: 0.25rem;
        margin-right: 10px;
        transform: scale(1.2);
    }

/* Individual Types Grid */
.individual-types-section[b-mljgucbcwi] {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    border: 1px solid #e9ecef;
    margin-top: 15px;
}

.individual-types-grid[b-mljgucbcwi] {
    display: grid;
    /*grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));*/
    grid-template-columns: auto;
    /*justify-items:start;*/
    gap: 15px;
    margin-top: 10px;
}

    .individual-types-grid .form-check[b-mljgucbcwi] {
        background: white;
        border: 1px solid #e9ecef;
        border-radius: 6px;
        padding: 12px;
        transition: all 0.3s ease;
        cursor: pointer;
    }

        .individual-types-grid .form-check:hover[b-mljgucbcwi] {
            border-color: #007bff;
            box-shadow: 0 2px 6px rgba(0, 123, 255, 0.15);
        }

        .individual-types-grid .form-check:has(.form-check-input:checked)[b-mljgucbcwi] {
            border-color: #007bff;
            background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
            box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
        }

    .individual-types-grid .form-check-label[b-mljgucbcwi] {
        cursor: pointer;
        font-weight: 500;
        color: #333;
        width: 100%;
        /*display: flex;*/
        align-items: center;
    }

    .individual-types-grid .form-check-input[b-mljgucbcwi] {
        margin-right: 8px;
        transform: scale(1.1);
    }

/* Organisation Section Styles */
.organisation-section[b-mljgucbcwi] {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    border: 1px solid #e9ecef;
    margin-top: 15px;
}

.organisation-search-container[b-mljgucbcwi] {
    position: relative;
}

.organisation-search-icon[b-mljgucbcwi] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    pointer-events: none;
}

.organisation-dropdown[b-mljgucbcwi] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 2px;
}

.organisation-option[b-mljgucbcwi] {
    padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f1f3f4;
    transition: background-color 0.2s ease;
}

    .organisation-option:hover[b-mljgucbcwi] {
        background-color: #f8f9fa;
    }

    .organisation-option:last-child[b-mljgucbcwi] {
        border-bottom: none;
    }

.org-name[b-mljgucbcwi] {
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.org-type[b-mljgucbcwi] {
    font-size: 12px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.no-results[b-mljgucbcwi] {
    padding: 20px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
}

/* Selected Organisation Card */
.selected-organisation[b-mljgucbcwi] {
    margin-top: 10px;
}

.selected-org-card[b-mljgucbcwi] {
    background: linear-gradient(135deg, #e8f5e8 0%, #f0f8f0 100%);
    border: 1px solid #28a745;
    border-radius: 8px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.selected-org-info[b-mljgucbcwi] {
    flex: 1;
}

.selected-org-name[b-mljgucbcwi] {
    font-weight: 600;
    color: #155724;
    margin-bottom: 2px;
}

.selected-org-type[b-mljgucbcwi] {
    font-size: 12px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-remove-org[b-mljgucbcwi] {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

    .btn-remove-org:hover[b-mljgucbcwi] {
        background-color: rgba(220, 53, 69, 0.1);
        color: #dc3545;
    }

/* Form Enhancements */
.form-label[b-mljgucbcwi] {
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.form-control:focus[b-mljgucbcwi],
.form-select:focus[b-mljgucbcwi] {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.password-section[b-mljgucbcwi] {
    border-left: 4px solid #007bff !important;
    background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%) !important;
}

.terms-and-policy .form-check-label[b-mljgucbcwi] {
    font-size: 14px;
    line-height: 1.5;
}

    .terms-and-policy .form-check-label a[b-mljgucbcwi] {
        color: #007bff;
        text-decoration: none;
        font-weight: 500;
    }

        .terms-and-policy .form-check-label a:hover[b-mljgucbcwi] {
            text-decoration: underline;
        }

/* Alert Enhancements */
.alert-info[b-mljgucbcwi] {
    border-left: 4px solid #17a2b8;
    background: linear-gradient(135deg, #e8f7f9 0%, #f0fbfc 100%);
}

.alert-danger[b-mljgucbcwi] {
    border-left: 4px solid #dc3545;
    background: linear-gradient(135deg, #fdf2f2 0%, #fef7f7 100%);
}

.alert-success[b-mljgucbcwi] {
    border-left: 4px solid #28a745;
    background: linear-gradient(135deg, #f2f9f2 0%, #f7fcf7 100%);
}

/* Button Enhancements */
.btn-primary[b-mljgucbcwi] {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    border: none;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

    .btn-primary:hover[b-mljgucbcwi] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
    }

    .btn-primary:disabled[b-mljgucbcwi] {
        transform: none;
        box-shadow: none;
        opacity: 0.6;
    }

/* Responsive Design */
@media (max-width: 768px) {
    .individual-types-grid[b-mljgucbcwi] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .user-type-selection .form-check[b-mljgucbcwi] {
        padding: 12px;
    }

    .organisation-section[b-mljgucbcwi],
    .individual-types-section[b-mljgucbcwi] {
        padding: 12px;
    }

    .selected-org-card[b-mljgucbcwi] {
        padding: 10px 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .btn-remove-org[b-mljgucbcwi] {
        align-self: flex-end;
        margin-top: -30px;
    }
}

@media (max-width: 480px) {
    .individual-types-grid .form-check-label[b-mljgucbcwi] {
        font-size: 14px;
    }

    .org-name[b-mljgucbcwi] {
        font-size: 14px;
    }

    .org-type[b-mljgucbcwi] {
        font-size: 11px;
    }

    .organisation-dropdown[b-mljgucbcwi] {
        max-height: 200px;
    }
}

/* Animation for smooth transitions */
.individual-types-section[b-mljgucbcwi],
.organisation-section[b-mljgucbcwi] {
    animation: slideIn-b-mljgucbcwi 0.3s ease-out;
}

@keyframes slideIn-b-mljgucbcwi {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* Focus states for accessibility */
.form-check-input:focus[b-mljgucbcwi] {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.organisation-option:focus[b-mljgucbcwi] {
    background-color: #e3f2fd;
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

/* Loading states */
.spinner-border[b-mljgucbcwi] {
    animation: spinner-border-b-mljgucbcwi 0.75s linear infinite;
}

@keyframes spinner-border-b-mljgucbcwi {
    to {
        transform: rotate(360deg);
    }
}
/* /Pages/BloodServices/BloodRequestDetails.razor.rz.scp.css */
/* Base Layout */
.blood-request-page[b-x67s5h2mt9] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
    color: #0f172a;
}

/* Back Link */
.back-link[b-x67s5h2mt9] {
    display: inline-flex;
    align-items: center;
    color: #64748b;
    text-decoration: none;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.back-icon[b-x67s5h2mt9] {
    margin-right: 0.5rem;
}

.back-link:hover[b-x67s5h2mt9] {
    color: #334155;
}

/* Header Section */
.header-section[b-x67s5h2mt9] {
    background-color: rgba(254, 226, 226, 0.3);
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
}

.header-content[b-x67s5h2mt9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page-title[b-x67s5h2mt9] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    margin-bottom: 0.25rem;
}

.request-info[b-x67s5h2mt9] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
}

.urgent-badge[b-x67s5h2mt9] {
    display: inline-block;
    background-color: #fee2e2;
    border: 1px solid #fecaca;
    color: #dc2626;
    font-weight: 600;
    font-size: 0.8125rem;
    padding: 0.125rem 0.5rem;
    border-radius: 0.75rem;
    margin-left: 0.5rem;
}

.header-actions[b-x67s5h2mt9] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Buttons */
.btn[b-x67s5h2mt9] {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.4375rem 0.75rem;
    border-radius: 1.125rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

    .btn:hover[b-x67s5h2mt9] {
        background-color: #f8fafc;
    }

.btn-icon[b-x67s5h2mt9] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 5.625rem;
}

.btn-icon-circle[b-x67s5h2mt9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background-color: #f1f5f9;
    font-size: 0.75rem;
}

.btn-edit[b-x67s5h2mt9] {
    color: #f97316;
    border-color: #f97316;
}

    .btn-edit .btn-icon-circle[b-x67s5h2mt9] {
        background-color: #fff7ed;
    }

.btn-cancel[b-x67s5h2mt9] {
    color: #dc2626;
    border-color: #dc2626;
}

    .btn-cancel .btn-icon-circle[b-x67s5h2mt9] {
        background-color: #fef2f2;
    }

.btn-close[b-x67s5h2mt9] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid #dc2626;
    color: #dc2626;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
}

/* Content Section */
.content-section[b-x67s5h2mt9] {
    display: grid;
    grid-template-columns: 330px 1fr;
    grid-template-rows: auto auto;
    gap: 1rem;
    margin-bottom: 1rem;
}

.card[b-x67s5h2mt9] {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
}

/* Pet Info Card - Fix to show details next to avatar */
.pet-info-card[b-x67s5h2mt9] {
    display: flex;
    flex-direction: row;
    /*align-items:;*/
    height: 5.625rem;
    padding: 1rem;
}

.pet-avatar[b-x67s5h2mt9] {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: #f9a8d4;
    border: 1px solid #f472b6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: #ffffff;
    margin-right: 1rem;
    flex-shrink: 0;
}

.pet-details[b-x67s5h2mt9] {
    display: flex;
    flex-direction: column;
}

.pet-name[b-x67s5h2mt9] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.pet-breed[b-x67s5h2mt9], .pet-diagnosis[b-x67s5h2mt9] {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0 0 0.25rem 0;
}
/* Request Info Card */
.request-info-card[b-x67s5h2mt9] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: 5.625rem;
    padding: 0;
}

.request-cell[b-x67s5h2mt9] {
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .request-cell:not(:last-child)[b-x67s5h2mt9] {
        border-right: 1px solid #e2e8f0;
    }

.cell-label[b-x67s5h2mt9] {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0;
    margin-bottom: 0.5rem;
}

.cell-value[b-x67s5h2mt9] {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
}

.blood-type-pill[b-x67s5h2mt9] {
    display: inline-block;
    /*background-color: #eff6ff;
    border: 1px solid #bfdbfe;*/
    color: #3b82f6;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.50rem;
}

.needed-by-value[b-x67s5h2mt9] {
    color: #ef4444;
    margin-bottom: 0.125rem;
}

.status-in-progress[b-x67s5h2mt9] {
    color: #16a34a;
}

/* Note Card */
.note-card[b-x67s5h2mt9] {
    background-color: #fef9c3;
    border-color: #fde68a;
    height: 5.625rem;
}

.note-label[b-x67s5h2mt9] {
    font-weight: 600;
    font-size: 0.8125rem;
    color: #854d0e;
    margin: 0;
    margin-bottom: 0.75rem;
}

.note-content[b-x67s5h2mt9] {
    font-size: 0.8125rem;
    color: #854d0e;
    margin: 0;
}

/* Contact Card */
.contact-card[b-x67s5h2mt9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 5.625rem;
    padding-top: 5px;
}

.clinic-info[b-x67s5h2mt9] {
    display: flex;
    align-items: flex-start;
    padding-right: 1rem;
    border-right: 1px solid #e2e8f0;
}

.owner-info[b-x67s5h2mt9] {
    display: flex;
    align-items: flex-start;
    padding-left: 1rem;
}

.icon-circle[b-x67s5h2mt9] {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    background-color: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    color: #3b82f6;
    margin-right: 0.625rem;
    flex-shrink: 0;
}

.contact-details[b-x67s5h2mt9] {
    display: flex;
    flex-direction: column;
}

.contact-name[b-x67s5h2mt9] {
    font-size: 0.8125rem;
    font-weight: 600;
    margin: 0;
    margin-bottom: 0.25rem;
}

.contact-address[b-x67s5h2mt9], .contact-phone[b-x67s5h2mt9] {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0;
    margin-bottom: 0.125rem;
}

.map-link[b-x67s5h2mt9] {
    font-size: 0.75rem;
    color: #3b82f6;
    text-decoration: underline;
    margin-top: 0.125rem;
}

/* Progress Section */
.progress-section[b-x67s5h2mt9] {
    margin-bottom: 1rem;
}

.section-header[b-x67s5h2mt9] {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.625rem 1.25rem;
    margin-bottom: 1rem;
}

    .section-header h2[b-x67s5h2mt9] {
        font-size: 0.875rem;
        font-weight: 600;
        color: #64748b;
        margin: 0;
    }

.progress-content[b-x67s5h2mt9] {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 1rem;
}

.timeline-container[b-x67s5h2mt9], .donor-queue-container[b-x67s5h2mt9] {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1.25rem;
}

.section-title[b-x67s5h2mt9] {
    /*font-size: 1.125rem;*/
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    margin-bottom: 1.25rem;
}

/* Timeline Styles */
.timeline-summary[b-x67s5h2mt9] {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1.25rem;
}

.summary-title[b-x67s5h2mt9] {
    font-size: 1rem;
    font-weight: 600;
    color: #dc2626;
    margin: 0;
    margin-bottom: 0.5rem;
}

.summary-details[b-x67s5h2mt9] {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0;
}

.timeline[b-x67s5h2mt9] {
    position: relative;
    margin-left: 1.25rem;
    margin-bottom: 1.25rem;
}

    .timeline[b-x67s5h2mt9]::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 2px;
        background-color: #e2e8f0;
    }

.timeline-event[b-x67s5h2mt9] {
    position: relative;
    padding-left: 1.875rem;
    padding-bottom: 1.25rem;
}

.timeline-dot[b-x67s5h2mt9] {
    position: absolute;
    left: -5px;
    top: 0.25rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #3b82f6;
}

.timeline-content[b-x67s5h2mt9] {
    background-color: #eff6ff;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}

.event-title[b-x67s5h2mt9] {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
    margin-bottom: 0.375rem;
    color: #3b82f6;
}

.event-description[b-x67s5h2mt9] {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0;
}

.event-date[b-x67s5h2mt9] {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    font-size: 0.75rem;
    color: #64748b;
    margin: 0;
}

/* Timeline Event Types */
.event-offer .timeline-dot[b-x67s5h2mt9],
.event-offer .event-title[b-x67s5h2mt9] {
    color: #3b82f6;
}

.event-offer .timeline-content[b-x67s5h2mt9] {
    background-color: #eff6ff;
}

.event-accept .timeline-dot[b-x67s5h2mt9],
.event-accept .event-title[b-x67s5h2mt9] {
    color: #eab308;
}

.event-accept .timeline-content[b-x67s5h2mt9] {
    background-color: #fefce8;
}

.event-error .timeline-dot[b-x67s5h2mt9],
.event-error .event-title[b-x67s5h2mt9] {
    color: #ef4444;
}

.event-error .timeline-content[b-x67s5h2mt9] {
    background-color: #fef2f2;
}

.event-success .timeline-dot[b-x67s5h2mt9],
.event-success .event-title[b-x67s5h2mt9] {
    color: #16a34a;
}

.event-success .timeline-content[b-x67s5h2mt9] {
    background-color: #f0fdf4;
}

.timeline-conclusion[b-x67s5h2mt9] {
    background-color: #f0fdf4;
    border: 2px solid #bbf7d0;
    border-radius: 0.5rem;
    padding: 1rem;
}

.conclusion-title[b-x67s5h2mt9] {
    font-size: 1rem;
    font-weight: 600;
    color: #16a34a;
    margin: 0;
    margin-bottom: 0.5rem;
}

.conclusion-details[b-x67s5h2mt9] {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0;
}

/* Donor Queue Styles */
.donor-card[b-x67s5h2mt9] {
    display: flex;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 0.625rem;
}

.donor-donating[b-x67s5h2mt9] {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
    border-width: 2px;
}

.donor-waiting[b-x67s5h2mt9] {
    background-color: #fff7ed;
    border-color: #fdba74;
}

.donor-queued[b-x67s5h2mt9] {
    background-color: #eff6ff;
    border-color: #bfdbfe;
}

.donor-avatar[b-x67s5h2mt9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 1.25rem;
}

    .donor-avatar span[b-x67s5h2mt9] {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        font-weight: bold;
        margin-bottom: 0.625rem;
    }

.donor-donating .donor-avatar span[b-x67s5h2mt9] {
    background-color: rgba(22, 163, 74, 0.1);
    color: #16a34a;
}

.donor-waiting .donor-avatar span[b-x67s5h2mt9] {
    background-color: rgba(249, 115, 22, 0.1);
    color: #f97316;
}

.donor-queued .donor-avatar span[b-x67s5h2mt9] {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.view-profile-link[b-x67s5h2mt9] {
    font-size: 0.625rem;
    color: #3b82f6;
    text-decoration: underline;
}

.donor-info[b-x67s5h2mt9] {
    flex: 1;
}

.donor-header[b-x67s5h2mt9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.375rem;
}

.donor-name[b-x67s5h2mt9] {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
}

.donor-status[b-x67s5h2mt9] {
    font-size: 0.8125rem;
    font-style: italic;
    font-weight: 600;
    margin: 0;
}

.donor-donating .donor-status[b-x67s5h2mt9] {
    color: #16a34a;
}

.donor-waiting .donor-status[b-x67s5h2mt9] {
    color: #f97316;
}

.donor-queued .donor-status[b-x67s5h2mt9] {
    color: #3b82f6;
}

.donor-breed[b-x67s5h2mt9], .donor-blood-type[b-x67s5h2mt9] {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0;
    margin-bottom: 0.25rem;
}

.donor-connector[b-x67s5h2mt9] {
    display: flex;
    justify-content: center;
    height: 1.25rem;
    margin-bottom: 0.625rem;
    position: relative;
}

.donor-arrow[b-x67s5h2mt9] {
    width: 0;
    height: 0;
    border-left: 0.5rem solid transparent;
    border-right: 0.5rem solid transparent;
    border-bottom: 0.5rem solid #cbd5e1;
}

/* Footer Section */
.footer-section[b-x67s5h2mt9] {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.copyright[b-x67s5h2mt9], .last-updated[b-x67s5h2mt9] {
    font-size: 0.75rem;
    color: #64748b;
}

.loading-container[b-x67s5h2mt9], .error-container[b-x67s5h2mt9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 2rem;
}

.error-message[b-x67s5h2mt9] {
    color: #dc2626;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.conclusion-pending[b-x67s5h2mt9] {
    background-color: #fef3c7;
    border-color: #fbbf24;
}

.conclusion-error[b-x67s5h2mt9] {
    background-color: #fef2f2;
    border-color: #fca5a5;
}

.status-active[b-x67s5h2mt9] {
    color: #3b82f6;
}

.status-cancelled[b-x67s5h2mt9] {
    color: #dc2626;
}

.status-completed[b-x67s5h2mt9] {
    color: #16a34a;
}

.status-unknown[b-x67s5h2mt9] {
    color: #64748b;
}
/* Responsive Styles */
@media (max-width: 1200px) {
    .blood-request-page[b-x67s5h2mt9] {
        padding: 0.75rem;
    }
}

@media (max-width: 992px) {
    .progress-content[b-x67s5h2mt9] {
        grid-template-columns: 1fr;
    }

    .timeline-container[b-x67s5h2mt9] {
        margin-bottom: 1rem;
    }
}

@media (max-width: 768px) {
    .header-content[b-x67s5h2mt9] {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-actions[b-x67s5h2mt9] {
        margin-top: 0.75rem;
        width: 100%;
        flex-wrap: wrap;
    }

    .content-section[b-x67s5h2mt9] {
        grid-template-columns: 1fr;
    }

    .request-info-card[b-x67s5h2mt9] {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        height: auto;
    }

    .request-cell[b-x67s5h2mt9] {
        padding: 0.75rem;
    }

        .request-cell:nth-child(1)[b-x67s5h2mt9],
        .request-cell:nth-child(3)[b-x67s5h2mt9] {
            border-right: 1px solid #e2e8f0;
        }

        .request-cell:nth-child(1)[b-x67s5h2mt9],
        .request-cell:nth-child(2)[b-x67s5h2mt9] {
            border-bottom: 1px solid #e2e8f0;
        }

    .contact-card[b-x67s5h2mt9] {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        height: auto;
    }

    .clinic-info[b-x67s5h2mt9] {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        padding-right: 0;
        padding-bottom: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .owner-info[b-x67s5h2mt9] {
        padding-left: 0;
    }

    .donor-card[b-x67s5h2mt9] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .donor-avatar[b-x67s5h2mt9] {
        margin-right: 0;
        margin-bottom: 0.75rem;
    }

    .donor-header[b-x67s5h2mt9] {
        flex-direction: column;
        gap: 0.25rem;
    }
}

@media (max-width: 576px) {
    .page-title[b-x67s5h2mt9] {
        font-size: 1.25rem;
    }

    .btn-icon[b-x67s5h2mt9] {
        min-width: auto;
    }

        .btn-icon span:not(.btn-icon-circle)[b-x67s5h2mt9] {
            display: none;
        }

    .request-info-card[b-x67s5h2mt9],
    .pet-info-card[b-x67s5h2mt9],
    .note-card[b-x67s5h2mt9],
    .contact-card[b-x67s5h2mt9] {
        padding: 0.75rem;
    }

    .timeline-content[b-x67s5h2mt9] {
        padding: 0.625rem;
    }

    .event-date[b-x67s5h2mt9] {
        position: static;
        margin-top: 0.25rem;
        text-align: right;
    }

    .timeline-event[b-x67s5h2mt9] {
        padding-left: 1.5rem;
    }

    .footer-section[b-x67s5h2mt9] {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
}

/* Print Styles */
@media print {
    .blood-request-page[b-x67s5h2mt9] {
        padding: 0;
    }

    .back-link[b-x67s5h2mt9],
    .header-actions[b-x67s5h2mt9],
    .btn[b-x67s5h2mt9],
    .view-profile-link[b-x67s5h2mt9],
    .map-link[b-x67s5h2mt9] {
        display: none;
    }

    .content-section[b-x67s5h2mt9],
    .progress-content[b-x67s5h2mt9] {
        grid-template-columns: 1fr;
    }

    .card[b-x67s5h2mt9],
    .timeline-container[b-x67s5h2mt9],
    .donor-queue-container[b-x67s5h2mt9],
    .timeline-summary[b-x67s5h2mt9],
    .timeline-conclusion[b-x67s5h2mt9],
    .timeline-content[b-x67s5h2mt9],
    .donor-card[b-x67s5h2mt9] {
        border: 1px solid #d1d5db;
        box-shadow: none;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .section-header[b-x67s5h2mt9] {
        background-color: #ffffff;
        border-bottom: 2px solid #d1d5db;
    }

    .footer-section[b-x67s5h2mt9] {
        margin-top: 1rem;
        border-top: 1px solid #d1d5db;
        text-align: center;
    }
}
/* /Pages/BloodServices/BloodServicesHub.razor.rz.scp.css */
/* Blood Requests Page Styles */
.blood-requests-page[b-z2zi440bat] {
    /*font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 0;
    margin: 0 auto;
    color: #0f172a;*/
    /*background-color: #f8fafc00;*/
    /*max-width: 1200px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: #4a5e72a3;*/

    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #1e293b70 0%, #3341557d 100%);
    overflow: hidden;
    /*min-height: 100vh;*/
}

/* Top Navigation Bar */
.top-nav[b-z2zi440bat] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.app-logo[b-z2zi440bat] {
    font-size: 1rem;
    font-weight: bold;
    color: #3b82f6;
}

.nav-items[b-z2zi440bat] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.nav-item[b-z2zi440bat] {
    font-size: 0.875rem;
    color: #64748b;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: 9999px;
}

    .nav-item.active[b-z2zi440bat] {
        background-color: #fee2e2;
        color: #dc2626;
        font-weight: bold;
    }

.user-menu[b-z2zi440bat] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-name[b-z2zi440bat] {
    font-size: 0.875rem;
    color: #64748b;
}

.user-avatar[b-z2zi440bat] {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    background-color: #cbd5e1;
}



.page-header[b-z2zi440bat] {
    /*display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;*/
    /*background-color: #deede6;*/
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 5px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: 1px solid #cdbc76;
}

.page-title[b-z2zi440bat] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #f3d03c;
    margin: 0 0 0.5rem 0;
}
.header-content[b-z2zi440bat] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*background-color: #ffffff;*/
    /*padding: 1.5rem;*/
    border-radius: 0.75rem;
    /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);*/
}
.header-left[b-z2zi440bat] {
    display: flex;
    flex-direction: column;
}
.back-button[b-z2zi440bat] {
    background: none;
    border: none;
    color: #2196f3;
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0.5rem;
}

    .back-button:hover[b-z2zi440bat] {
        color: #2196f3;
        font-weight:bolder;
        text-decoration: underline;
    }
/* Back Link */
.back-link[b-z2zi440bat] {
    color: #64748b;
    font-size: 0.875rem;
    /*margin-bottom: 1rem;*/
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

    .back-link:hover[b-z2zi440bat] {
        color: #475569;
        text-decoration: underline;
    }

/* Main Content */
.main-content[b-z2zi440bat] {
    /* max-width: 1024px; */
    /*margin-top: 2rem;*/
    padding: 20px;
    /* padding-right: 20px; */
    background-color: #f8fafceb;
    /*border-radius: 10px;*/
}

/* Blood Requests Header with Button */
.blood-requests-header[b-z2zi440bat] {
    padding: 1rem 1.5rem;
    background-color: rgba(254, 226, 226, 0.5);
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .blood-requests-header h1[b-z2zi440bat] {
        font-size: 1.5rem;
        font-weight: bold;
        color: #dc2626;
        margin: 0;
    }

.request-blood-btn[b-z2zi440bat] {
    background-color: #dc2626;
    color: #ffffff;
    border: 1px solid #b91c1c;
    padding: 0.625rem 1.25rem;
    border-radius: 9999px;
    font-weight: bold;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .request-blood-btn:hover[b-z2zi440bat] {
        background-color: #b91c1c;
    }
/* Updated Quick Action Cards Styles */
.quick-action-cards[b-z2zi440bat] {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.action-card[b-z2zi440bat] {
    flex: 1;
    min-width: 200px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    padding: 0.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    /*text-align: center;*/
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* lighter shadow by default */
}

    .action-card:hover[b-z2zi440bat] {
        transform: translateY(-5px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
        background-color: #f9fafb;
    }

        .action-card:hover .card-icon svg[b-z2zi440bat] {
            transform: scale(1.1);
            transition: transform 0.3s ease;
        }

    .action-card.standard[b-z2zi440bat] {
        border-left: 4px solid #009688;
        background: linear-gradient(135deg, #e0f2f1, #ffffff);
    }

    .action-card.emergency[b-z2zi440bat] {
        border-left: 4px solid #ef4444;
        background: linear-gradient(135deg, #fdecea, #ffffff);
    }

    .action-card.donors[b-z2zi440bat] {
        border-left: 4px solid #3b82f6;
        background: linear-gradient(135deg, #e3f2fd, #ffffff);
    }

.cta-text[b-z2zi440bat] {
    color: #2563eb !important; 
    font-weight: 500;
    margin-top: 0.5rem;
    display: inline-block;
    transition: all 0.2s ease;
}

    .cta-text.red-text[b-z2zi440bat] {
        color: #ef4444;
    }

.action-card:hover .cta-text[b-z2zi440bat] {
    text-decoration: underline;
    transform: translateX(4px);
}


.card-icon[b-z2zi440bat] {
    background-color: #f8fafc;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.action-card .card-icon[b-z2zi440bat] {
    color: #dc2626;
}

.action-card.emergency .card-icon[b-z2zi440bat] {
    color: #ef4444;
}

.action-card.donors .card-icon[b-z2zi440bat] {
    color: #3b82f6;
}

.card-icon svg[b-z2zi440bat] {
    width: 30px;
    height: 30px;
}

.card-content h3[b-z2zi440bat] {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #0f172a;
}

.card-content p[b-z2zi440bat] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}
/* Summary Stats */
.summary-stats[b-z2zi440bat] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.stat-card[b-z2zi440bat] {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.stat-label[b-z2zi440bat] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.stat-value[b-z2zi440bat] {
    font-size: 1.5rem;
    font-weight: bold;
    color: #0f172a;
}

    .stat-value.urgent[b-z2zi440bat] {
        color: #dc2626;
    }

    .stat-value.matches[b-z2zi440bat] {
        color: #16a34a;
    }

/* Tab Navigation */
.tab-navigation[b-z2zi440bat] {
    display: flex;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.tab[b-z2zi440bat] {
    flex: 1;
    padding: 0.75rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    color: #64748b;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .tab.active[b-z2zi440bat] {
        background-color: #eff6ff;
        color: #3b82f6;
        font-weight: bold;
    }

    .tab:hover:not(.active)[b-z2zi440bat] {
        background-color: #f1f5f9;
    }

/* Search and Filter Bar */
.search-filter-bar[b-z2zi440bat] {
    display: flex;
    gap: 0.75rem;
    /* margin-bottom: 0.75rem; */
    flex-wrap: wrap;
    justify-content: space-between;
}

.search-box[b-z2zi440bat] {
    flex: 2;
    min-width: 15rem;
}

    .search-box input[b-z2zi440bat] {
        width: 100%;
        padding: 0.625rem 1rem;
        border: none;
        border-radius: 9999px;
        background-color: #f1f5f9;
        font-size: 0.875rem;
        color: #0f172a;
    }

        .search-box input:focus[b-z2zi440bat] {
            outline: none;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
        }

.filter-box[b-z2zi440bat] {
    flex: 1;
    min-width: 8rem;
}

    .filter-box select[b-z2zi440bat] {
        width: 100%;
        padding: 0.625rem 1rem;
        border: 1px solid #e2e8f0;
        border-radius: 9999px;
        background-color: #ffffff;
        font-size: 0.875rem;
        color: #64748b;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 1rem;
    }

        .filter-box select:focus[b-z2zi440bat] {
            outline: none;
            border-color: #93c5fd;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
        }

/* Selected Blood Type Tags */
.selected-blood-types[b-z2zi440bat] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    /*margin-bottom: 1.25rem;*/
    padding:10px;
}

.blood-type-tag[b-z2zi440bat] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    background-color: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    font-size: 0.75rem;
    color: #0f172a;
}

.remove-tag[b-z2zi440bat] {
    margin-left: 0.375rem;
    width: 1rem;
    height: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    border-radius: 50%;
}

    .remove-tag:hover[b-z2zi440bat] {
        background-color: #e2e8f0;
        color: #dc2626;
    }


.request-section-columns[b-z2zi440bat] {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 1.25rem;
}
/* Blood Requests List */
.blood-requests-list[b-z2zi440bat] {
    display: flex;
    flex-direction: column;
    /* gap: 0.75rem;
    margin-bottom: 1.5rem;*/
    /*background-color: #ffffff;*/
}

.your-pets[b-z2zi440bat] {
    background-color: #ffffff;
    border-radius: 0.5rem;
    padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

    .your-pets h3[b-z2zi440bat] {
        font-size: 1rem;
        font-weight: 600;
        color: #0f172a;
        margin: 0 0 1rem 0;
    }

.pets-list[b-z2zi440bat] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.pet-item[b-z2zi440bat] {
    display: flex;
    align-items: center;
    padding: 1rem;
    background-color: #f9fafb;
    border-radius: 0.375rem;
}

.pet-card[b-z2zi440bat] {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #f9fafb;
}

    .pet-card:hover[b-z2zi440bat] {
        border-color: #cbd5e1;
        background-color: #f8fafc;
    }

    .pet-card.selected[b-z2zi440bat] {
        border-color: #ef4444;
        background-color: #fef2f2;
    }

.pet-avatar[b-z2zi440bat] {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: #d1d5db;
    margin-right: 1rem;
}

.pet-info[b-z2zi440bat] {
    flex-grow: 1;
}

    .pet-info h4[b-z2zi440bat] {
        font-size: 0.875rem;
        font-weight: 600;
        color: #0f172a;
        margin: 0 0 0.25rem 0;
    }

    .pet-info p[b-z2zi440bat] {
        font-size: 0.75rem;
        color: #64748b;
        margin: 0 0 0.5rem 0;
    }

.donation-status[b-z2zi440bat] {
    width: 100%;
    max-width: 8rem;
}

/*.status-bar {
    height: 0.5rem;
    background-color: #d1d5db;
    border-radius: 9999px;
    overflow: hidden;
}*/

/* Status Bar */
.status-bar[b-z2zi440bat] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*padding: 0.75rem 1rem;*/
    background-color: #f1f5f9;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    color: #64748b;
    /*margin-bottom: 1.5rem;*/
}

.status-progress[b-z2zi440bat] {
    height: 100%;
    border-radius: 9999px;
}

    .status-progress.ready[b-z2zi440bat] {
        background-color: #10b981;
    }

    .status-progress.recovery[b-z2zi440bat] {
        background-color: #ef4444;
    }

.request-card[b-z2zi440bat] {
    display: flex;
    align-items: stretch;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    height: 100px;
    padding: 0;
    position: relative;
    margin-bottom: 0.75rem;
}

    .request-card.emergency[b-z2zi440bat] {
        border-color: #dc2626;
    }

/* Blood Type Container */
.blood-type-container[b-z2zi440bat] {
    width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.75rem;
}

.blood-type[b-z2zi440bat] {
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
}

.red-font[b-z2zi440bat] {
    color: #dc2626;
}

.blue-font[b-z2zi440bat] {
    color: #3b82f6;
}

.green-font[b-z2zi440bat] {
    color: #16a34a;
}

.gold-font[b-z2zi440bat] {
    color: #ca8a04;
}

/* Request Details */
.request-details[b-z2zi440bat] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
}

.request-title[b-z2zi440bat] {
    font-size: 1rem;
    font-weight: bold;
    color: #0f172a;
    margin-bottom: 0.25rem;
}

.request-info[b-z2zi440bat] {
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.request-location[b-z2zi440bat] {
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.request-date[b-z2zi440bat] {
    font-size: 0.6875rem;
    color: #94a3b8;
}

/* Request Actions */
.request-actions[b-z2zi440bat] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem;
}

.action-btn[b-z2zi440bat] {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: bold;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    width: 70px;
    text-align: center;
}

.details-btn[b-z2zi440bat] {
    background-color: #3b82f6;
    color: #ffffff;
}

.edit-btn[b-z2zi440bat] {
    background-color: #eab308;
    color: #ffffff;
}

.delete-btn[b-z2zi440bat] {
    background-color: #ef4444;
    color: #ffffff;
}

.accept-btn[b-z2zi440bat], .confirm-btn[b-z2zi440bat] {
    background-color: #16a34a;
    color: #ffffff;
}

.action-btn:hover[b-z2zi440bat] {
    opacity: 0.9;
}

/* Empty State */
.empty-state[b-z2zi440bat] {
    padding: 2rem;
    text-align: center;
    background-color: #f8fafc;
    border: 1px dashed #e2e8f0;
    border-radius: 0.5rem;
    color: #64748b;
    margin-bottom: 1.5rem;
}

/* Pagination */
.pagination[b-z2zi440bat] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem 0;
}

.page-item[b-z2zi440bat] {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    background-color: #ffffff;
    color: #64748b;
}

    .page-item.active[b-z2zi440bat] {
        background-color: #eff6ff;
        border-color: #bfdbfe;
        color: #3b82f6;
        font-weight: bold;
    }

    .page-item:hover:not(.active)[b-z2zi440bat] {
        background-color: #f1f5f9;
    }


/* Modal for Delete Confirmation */
.modal-backdrop[b-z2zi440bat] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;
}

.modal-container[b-z2zi440bat] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
    width: 90%;
    max-width: 28rem;
}

.modal-content[b-z2zi440bat] {
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.modal-header[b-z2zi440bat] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .modal-header h3[b-z2zi440bat] {
        font-size: 1.25rem;
        font-weight: bold;
        margin: 0;
    }

.close-button[b-z2zi440bat] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
}

.modal-body[b-z2zi440bat] {
    padding: 1.5rem;
}

.modal-footer[b-z2zi440bat] {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    background-color: #f8fafc;
}

/* Button Styles */
.btn[b-z2zi440bat] {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-secondary[b-z2zi440bat] {
    background-color: #f1f5f9;
    color: #64748b;
    border: 1px solid #cbd5e1;
}

.btn-danger[b-z2zi440bat] {
    background-color: #ef4444;
    color: #ffffff;
    border: none;
}

.btn-secondary:hover[b-z2zi440bat] {
    background-color: #e2e8f0;
}

.btn-danger:hover[b-z2zi440bat] {
    background-color: #dc2626;
}

/* Add these new styles for clickable summary stats */
.stat-card.clickable[b-z2zi440bat] {
    cursor: pointer;
    transition: all 0.2s ease;
}

    .stat-card.clickable:hover[b-z2zi440bat] {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
    }

/* Styles for compact search box */
.search-box.compact[b-z2zi440bat] {
    flex: 1;
    width: 12rem; /* Half the size of the original search box */
}

/* My Requests checkbox styling */
.my-requests-filter[b-z2zi440bat] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
}

    .my-requests-filter input[type="checkbox"][b-z2zi440bat] {
        width: 1rem;
        height: 1rem;
        margin-right: 0.5rem;
        cursor: pointer;
        accent-color: #3b82f6;
    }

    .my-requests-filter label[b-z2zi440bat] {
        font-size: 0.875rem;
        color: #64748b;
        cursor: pointer;
    }

        .my-requests-filter label:hover[b-z2zi440bat] {
            color: #0f172a;
        }
.offered-btn[b-z2zi440bat] {
    background-color: #10b981;
    color: #ffffff;
    opacity: 0.7;
}
/* Responsive adjustments for the new layout */
@media (max-width: 768px) {
    .search-box.compact[b-z2zi440bat] {
        width: 100%;
    }

    .my-requests-filter[b-z2zi440bat] {
        width: 100%;
        padding: 0.5rem 0;
    }
}

@media (max-width: 480px) {
    .my-requests-filter[b-z2zi440bat] {
        padding: 0.25rem 0;
    }
}


/* Responsive Styles */
@media (max-width: 1024px) {
    .main-content[b-z2zi440bat] {
        padding: 1rem;
    }

    .request-actions[b-z2zi440bat] {
        gap: 0.25rem;
    }

    .action-btn[b-z2zi440bat] {
        width: auto;
        min-width: 70px;
    }
}

@media (max-width: 768px) {
    .top-nav[b-z2zi440bat] {
        padding: 0.5rem 1rem;
    }

    .nav-items[b-z2zi440bat] {
        display: none;
    }

    .main-content[b-z2zi440bat] {
        padding: 0.75rem;
    }

    .blood-requests-header[b-z2zi440bat] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem;
    }

    .request-blood-btn[b-z2zi440bat] {
        width: 100%;
    }

    .search-filter-bar[b-z2zi440bat] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .search-box[b-z2zi440bat], .filter-box[b-z2zi440bat] {
        width: 100%;
    }

    .request-card[b-z2zi440bat] {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        padding: 1rem;
    }

    .blood-type-container[b-z2zi440bat] {
        width: 100%;
        justify-content: flex-start;
        margin-bottom: 0.5rem;
        padding: 0;
    }

    .request-details[b-z2zi440bat] {
        width: 100%;
        padding: 0.5rem 0;
    }

    .request-actions[b-z2zi440bat] {
        width: 100%;
        justify-content: space-between;
        padding: 0;
        margin-top: 0.75rem;
    }

    .action-btn[b-z2zi440bat] {
        flex: 1;
    }

    .pagination[b-z2zi440bat] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .page-item[b-z2zi440bat] {
        width: 2rem;
        height: 2rem;
    }
}



@media (max-width: 480px) {
    .top-nav[b-z2zi440bat] {
        padding: 0.5rem;
    }

    .user-name[b-z2zi440bat] {
        display: none;
    }

    .blood-requests-header h1[b-z2zi440bat] {
        font-size: 1.25rem;
    }

    .blood-type-tag[b-z2zi440bat] {
        font-size: 0.6875rem;
    }

    .stat-card[b-z2zi440bat] {
        padding: 0.75rem;
    }

    .stat-value[b-z2zi440bat] {
        font-size: 1.25rem;
    }

    .action-btn[b-z2zi440bat] {
        padding: 0.375rem 0.5rem;
        font-size: 0.6875rem;
        min-width: auto;
    }

    .status-bar[b-z2zi440bat] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .modal-container[b-z2zi440bat] {
        width: 95%;
    }

    .request-title[b-z2zi440bat] {
        font-size: 0.8125rem;
    }

    .request-info[b-z2zi440bat], .request-location[b-z2zi440bat] {
        font-size: 0.6875rem;
    }

    .request-date[b-z2zi440bat] {
        font-size: 0.625rem;
    }
}
/* /Pages/BloodServices/CreateBloodRequest.razor.rz.scp.css */
/* Blood Request Creation Page Styles */

.blood-request-page[b-dkcdlpp60u] {
    /* padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #4a5e72a3;
    color: #0f172a;*/


    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #1e293b70 0%, #3341557d 100%);
    overflow: hidden;
}

.back-link[b-dkcdlpp60u] {
    display: inline-flex;
    align-items: center;
    color: #2196f3;
    cursor: pointer;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

    .back-link:hover[b-dkcdlpp60u] {
        color: #2196f3;
        font-weight: bolder;
        text-decoration: underline;
    }

.back-icon[b-dkcdlpp60u] {
    margin-right: 0.5rem;
}

/* Back Navigation Link */
/*.back-link {
    display: inline-flex;
    align-items: center;
    color: #55dfea;
    cursor: pointer;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

.back-icon {
    margin-right: 0.5rem;
}

.back-link:hover {
    color: #475569;
}*/


.back-text[b-dkcdlpp60u] {
    font-weight: 500;
}


/* Page Header */
.page-header[b-dkcdlpp60u] {
    /* display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;*/
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 5px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    /*margin-bottom: 20px;*/
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #cdbc76;
}

.page-title[b-dkcdlpp60u] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #f3d03c;
    margin: 0 0 0.5rem 0;
}
.header-content[b-dkcdlpp60u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius:10px;
}

.header-left[b-dkcdlpp60u] {
    display: flex;
    flex-direction: column;
}

.header-right[b-dkcdlpp60u] {
    display: flex;
    flex-direction: row;
    gap: 5px;
}
.action-buttons[b-dkcdlpp60u] {
    display: flex;
    gap: 0.75rem;
}

    .action-buttons button[b-dkcdlpp60u] {
        padding: 0.375rem 0.75rem;
        border-radius: 0.25rem;
        font-size: 0.75rem;
        font-weight: 600;
        cursor: pointer;
        border: none;
        transition: all 0.2s ease;
    }

/* Container for two-column layout */
.blood-request-container[b-dkcdlpp60u] {
    display: grid;
    grid-template-columns: 5fr 3fr;
    gap: 1.5rem;
    /*background: rgba(255, 255, 255, 0.15);*/
    margin-top: 2rem;
   padding: 20px;
    /*padding-right: 20px;*/
}

/* Card Styles */
.request-details-card[b-dkcdlpp60u],
.right-column-card[b-dkcdlpp60u] {
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.card-header[b-dkcdlpp60u] {
    padding: 1rem 1.5rem;
}

.request-details-card .card-header[b-dkcdlpp60u] {
    background-color: #ffd7d7;
}

    .request-details-card .card-header h2[b-dkcdlpp60u] {
        color: #b91c1c;
        font-size: 1.25rem;
        font-weight: 600;
        margin: 0;
    }

.right-column-card .card-header[b-dkcdlpp60u] {
    background-color: #d1efdb;
}

    .right-column-card .card-header h2[b-dkcdlpp60u] {
        color: #0f172a;
        font-size: 1.25rem;
        font-weight: 600;
        margin: 0;
    }

.card-body[b-dkcdlpp60u] {
    padding: 1.5rem;
}

/* Section Titles */
.section-title[b-dkcdlpp60u] {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

    .section-title h3[b-dkcdlpp60u] {
        font-size: 1.125rem;
        font-weight: 600;
        color: #0f172a;
        margin: 0;
    }

/* Form Styles */
.form-row[b-dkcdlpp60u] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-group[b-dkcdlpp60u] {
    margin-bottom: 1.25rem;
    width: 100%;
}

.half-width[b-dkcdlpp60u] {
    width: calc(50% - 0.5rem);
}

.athird-width[b-dkcdlpp60u] {
    width: calc(33.33% - 0.5rem);
}

label[b-dkcdlpp60u] {
    display: block;
    font-weight: 500;
    color: #0f172a;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.form-control[b-dkcdlpp60u] {
    width: 100%;
    padding: 0.625rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    color: #0f172a;
}

    .form-control:focus[b-dkcdlpp60u] {
        outline: none;
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

textarea.form-control[b-dkcdlpp60u] {
    resize: vertical;
    min-height: 100px;
}

.blood-type-dropdown[b-dkcdlpp60u] {
    width: 100%;
    padding: 0.625rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    color: #0f172a;
    cursor: pointer;
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    transition: all 0.2s ease;
}

    .blood-type-dropdown:hover[b-dkcdlpp60u] {
        border-color: #cbd5e1;
    }

.blood-type-summary[b-dkcdlpp60u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .blood-type-summary .placeholder[b-dkcdlpp60u] {
        color: #6b7280;
        background-color: transparent
    }

    .blood-type-summary .unknown-selected[b-dkcdlpp60u] {
        color: #f59e0b;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

.dropdown-arrow[b-dkcdlpp60u] {
    font-size: 0.75rem;
    color: #374151;
}
/* Quick Selection Section - NEW */
.quick-selection-section[b-dkcdlpp60u] {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: #f8fafc;
    border-radius: 0.5rem;
    border: 2px solid #e2e8f0;
}

    .quick-selection-section h4[b-dkcdlpp60u] {
        font-size: 1rem;
        font-weight: 600;
        color: #1e293b;
        margin: 0 0 1rem 0;
        text-align: center;
    }

.quick-selection-buttons[b-dkcdlpp60u] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.quick-select-btn[b-dkcdlpp60u] {
    padding: 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 0.5rem;
    background-color: #ffffff;
    color: #374151;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

    .quick-select-btn:hover[b-dkcdlpp60u] {
        border-color: #cbd5e1;
        background-color: #f8fafc;
    }

    .quick-select-btn.active[b-dkcdlpp60u] {
        border-color: #f59e0b;
        background-color: #fef3c7;
        color: #92400e;
        font-weight: 600;
    }

/* Unknown Explanation - NEW */
.unknown-explanation[b-dkcdlpp60u] {
    margin-top: 1rem;
}

.explanation-box[b-dkcdlpp60u] {
    background-color: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 0.5rem;
    padding: 1rem;
}

    .explanation-box p[b-dkcdlpp60u] {
        margin: 0 0 0.5rem 0;
        font-size: 0.875rem;
        color: #92400e;
        line-height: 1.5;
    }

        .explanation-box p:last-child[b-dkcdlpp60u] {
            margin-bottom: 0;
        }

    .explanation-box .tip[b-dkcdlpp60u] {
        font-style: italic;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
/* Blood Type Selection Expanded */
.blood-type-selection-expanded[b-dkcdlpp60u] {
    margin-top: 1rem;
    padding: 1.5rem;
    background-color: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.25rem;
    width: 100%;
}

.blood-type-section[b-dkcdlpp60u] {
    margin-bottom: 2rem;
}

    .blood-type-section:last-of-type[b-dkcdlpp60u] {
        margin-bottom: 1rem;
    }

    .blood-type-section h4[b-dkcdlpp60u] {
        font-size: 0.875rem;
        font-weight: 600;
        color: #1e293b;
        margin: 0 0 0.75rem 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

.section-help[b-dkcdlpp60u] {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 400;
    background-color: #f1f5f9;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

.blood-type-headers[b-dkcdlpp60u] {
    display: grid;
    grid-template-columns: 120px 80px 80px 80px;
    gap: 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #374151;
}

    .blood-type-headers span:first-child[b-dkcdlpp60u] {
        /* Empty for label column */
    }

.blood-type-row[b-dkcdlpp60u] {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.blood-type-label[b-dkcdlpp60u] {
    font-size: 0.75rem;
    color: #374151;
    font-weight: 500;
}

.blood-type-options[b-dkcdlpp60u] {
    display: grid;
    grid-template-columns: 80px 80px 80px;
    gap: 1rem;
    align-items: center;
}

    .blood-type-options input[type="radio"][b-dkcdlpp60u] {
        width: 16px;
        height: 16px;
        margin: 0;
        cursor: pointer;
    }

/* Bulk Actions Section - NEW */
.bulk-actions-section[b-dkcdlpp60u] {
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: #f8fafc;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
}

    .bulk-actions-section h5[b-dkcdlpp60u] {
        font-size: 0.875rem;
        font-weight: 600;
        color: #1e293b;
        margin: 0 0 0.75rem 0;
    }

.bulk-action-buttons[b-dkcdlpp60u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
}

.bulk-action-btn[b-dkcdlpp60u] {
    padding: 0.5rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.25rem;
    background-color: #ffffff;
    color: #374151;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .bulk-action-btn:hover[b-dkcdlpp60u] {
        border-color: #94a3b8;
        background-color: #f1f5f9;
    }
/* Blood Type Actions */
.blood-type-actions[b-dkcdlpp60u] {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.25rem;
    padding: 1rem;
    margin-top: 1rem;
}

.selected-summary[b-dkcdlpp60u] {
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
    color: #1e40af;
}

.unknown-summary[b-dkcdlpp60u] {
    color: #f59e0b !important;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Button Styles */
.btn[b-dkcdlpp60u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-danger[b-dkcdlpp60u] {
    background-color: #dc2626;
    color: #ffffff;
}

    .btn-danger:hover[b-dkcdlpp60u] {
        background-color: #b91c1c;
    }

.btn-outline-secondary[b-dkcdlpp60u] {
    background-color: #ffffff;
    color: #64748b;
    border: 1px solid #cbd5e1;
}

    .btn-outline-secondary:hover[b-dkcdlpp60u] {
        background-color: #f1f5f9;
    }

.btn-clear-all[b-dkcdlpp60u] {
    background-color: #dc2626;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    border: none;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-clear-all:hover[b-dkcdlpp60u] {
        background-color: #b91c1c;
    }

.btn-save-profile[b-dkcdlpp60u] {
    background-color: #10b981;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    border: none;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-save-profile:hover[b-dkcdlpp60u] {
        background-color: #059669;
    }

.btn-load-profile[b-dkcdlpp60u] {
    background-color: #3b82f6;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    border: none;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-load-profile:hover[b-dkcdlpp60u] {
        background-color: #2563eb;
    }

.btn-collapse[b-dkcdlpp60u] {
    background-color: #6b7280;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    border: none;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-collapse:hover[b-dkcdlpp60u] {
        background-color: #4b5563;
    }

/* Urgency Options */
.urgency-options[b-dkcdlpp60u] {
    display: flex;
    gap: 0.75rem;
}

.urgency-option[b-dkcdlpp60u] {
    flex: 1;
    padding: 0.625rem;
    text-align: center;
    border-radius: 9999px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

    .urgency-option:nth-child(1)[b-dkcdlpp60u] {
        background-color: #fff;
        border: 1px solid #ef4444;
        color: #ef4444;
    }

        .urgency-option:nth-child(1).active[b-dkcdlpp60u] {
            background-color: #ef4444;
            color: #ffffff;
        }

    .urgency-option:nth-child(2)[b-dkcdlpp60u] {
        background-color: #fff;
        border: 1px solid #f97316;
        color: #f97316;
    }

        .urgency-option:nth-child(2).active[b-dkcdlpp60u] {
            background-color: #f97316;
            color: #ffffff;
        }

    .urgency-option:nth-child(3)[b-dkcdlpp60u] {
        background-color: #fff;
        border: 1px solid #64748b;
        color: #64748b;
    }

        .urgency-option:nth-child(3).active[b-dkcdlpp60u] {
            background-color: #64748b;
            color: #ffffff;
        }

/* Request Type Options */
.request-type-options[b-dkcdlpp60u] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.request-type-option[b-dkcdlpp60u] {
    flex: 1;
    padding: 0.625rem;
    text-align: center;
    border-radius: 9999px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    background-color: #fff;
    border: 1px solid #e2e8f0;
    color: #64748b;
}

    .request-type-option:hover[b-dkcdlpp60u] {
        background-color: #f8fafc;
    }

    .request-type-option.active[b-dkcdlpp60u] {
        background-color: #eff6ff;
        border-color: #3b82f6;
        color: #3b82f6;
        font-weight: 600;
    }

/* Pet Selection Styles */
.pet-list[b-dkcdlpp60u] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.pet-card[b-dkcdlpp60u] {
    display: flex;
    align-items: center;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #f9fafb;
}

    .pet-card:hover[b-dkcdlpp60u] {
        border-color: #cbd5e1;
        background-color: #f8fafc;
    }

    .pet-card.selected[b-dkcdlpp60u] {
        border-color: #ef4444;
        background-color: #fef2f2;
    }

.pet-avatar[b-dkcdlpp60u] {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background-color: #e2e8f0;
    margin-right: 1rem;
}

.pet-info[b-dkcdlpp60u] {
    flex-grow: 1;
}

    .pet-info h3[b-dkcdlpp60u] {
        font-size: 1rem;
        font-weight: 600;
        color: #0f172a;
        margin: 0 0 0.25rem 0;
    }

.pet-breed[b-dkcdlpp60u] {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0 0 0.25rem 0;
}

.pet-blood-type[b-dkcdlpp60u] {
    font-size: 0.75rem;
    color: #ef4444;
    font-weight: 500;
    margin: 0;
}

.add-pet[b-dkcdlpp60u] {
    border-style: dashed;
    justify-content: center;
}

.add-pet-icon[b-dkcdlpp60u] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #64748b;
    margin-right: 1rem;
}

/* Donation Guidelines */
.donation-guidelines[b-dkcdlpp60u] {
    background-color: #d1efdb;
    border: 1px solid #dcfce7;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

    .donation-guidelines h3[b-dkcdlpp60u] {
        font-size: 0.875rem;
        font-weight: 600;
        color: #15803d;
        margin: 0 0 0.75rem 0;
    }

    .donation-guidelines ul[b-dkcdlpp60u] {
        margin: 0;
        padding-left: 1.5rem;
    }

    .donation-guidelines li[b-dkcdlpp60u] {
        font-size: 0.75rem;
        color: #0f172a;
        margin-bottom: 0.5rem;
        line-height: 1.4;
    }

        .donation-guidelines li:last-child[b-dkcdlpp60u] {
            margin-bottom: 0;
        }




/* Google Places Autocomplete Dropdown Styles */
.pac-container[b-dkcdlpp60u] {
    z-index: 1051;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 0.25rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
}

.pac-item[b-dkcdlpp60u] {
    padding: 8px 10px;
    cursor: pointer;
}

    .pac-item:hover[b-dkcdlpp60u] {
        background-color: #f1f5f9;
    }

.pac-item-query[b-dkcdlpp60u] {
    font-size: 14px;
    font-weight: 500;
}

#txtSearchHealthCareFacility[b-dkcdlpp60u] {
    background-color: #fff;
    width: 100%;
    font-size: 0.875rem;
}

    #txtSearchHealthCareFacility:focus[b-dkcdlpp60u] {
        border-color: #93c5fd;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }

/* Responsive Styles */
@media (max-width: 1024px) {
    .blood-request-container[b-dkcdlpp60u] {
        grid-template-columns: 3fr 2fr;
    }

    .quick-selection-buttons[b-dkcdlpp60u] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .bulk-action-buttons[b-dkcdlpp60u] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}

@media (max-width: 768px) {
    .blood-request-container[b-dkcdlpp60u] {
        grid-template-columns: 1fr;
    }

    .right-column-card[b-dkcdlpp60u] {
        order: -1; /* Move right column above request details on mobile */
    }

    .page-header[b-dkcdlpp60u] {
        flex-direction: column;
        align-items: flex-start;
    }

    .action-buttons[b-dkcdlpp60u] {
        margin-top: 1rem;
        width: 100%;
        flex-direction: column;
    }

        .action-buttons button[b-dkcdlpp60u] {
            width: 100%;
        }

    .btn[b-dkcdlpp60u] {
        flex: 1;
        justify-content: center;
    }

    .form-row[b-dkcdlpp60u] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .half-width[b-dkcdlpp60u],
    .athird-width[b-dkcdlpp60u] {
        width: 100%;
    }

    .urgency-options[b-dkcdlpp60u],
    .request-type-options[b-dkcdlpp60u] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .urgency-option[b-dkcdlpp60u],
    .request-type-option[b-dkcdlpp60u] {
        width: 100%;
    }

    .blood-type-headers[b-dkcdlpp60u] {
        grid-template-columns: 80px 60px 60px 60px;
        gap: 0.5rem;
    }

    .blood-type-row[b-dkcdlpp60u] {
        grid-template-columns: 80px 1fr;
        gap: 0.5rem;
    }

    .blood-type-options[b-dkcdlpp60u] {
        grid-template-columns: 60px 60px 60px;
        gap: 0.5rem;
    }

    .quick-selection-buttons[b-dkcdlpp60u] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .bulk-action-buttons[b-dkcdlpp60u] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .blood-request-page[b-dkcdlpp60u] {
        padding: 1rem;
    }

    .card-body[b-dkcdlpp60u] {
        padding: 1rem;
    }

    .quick-selection-section[b-dkcdlpp60u] {
        padding: 1rem;
    }

    .bulk-actions-section[b-dkcdlpp60u] {
        padding: 0.75rem;
    }
}

/* Tablet-specific adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
    .request-type-options[b-dkcdlpp60u] {
        flex-wrap: wrap;
    }

    .request-type-option[b-dkcdlpp60u] {
        flex-basis: calc(50% - 0.375rem);
    }

        .request-type-option:last-child[b-dkcdlpp60u] {
            flex-basis: 100%;
            margin-top: 0.5rem;
        }
}

/* Large screen optimizations */
@media (min-width: 1440px) {
    .blood-request-page[b-dkcdlpp60u] {
        max-width: 1200px;
    }

    .blood-request-container[b-dkcdlpp60u] {
        gap: 2rem;
    }

    .card-body[b-dkcdlpp60u] {
        padding: 2rem;
    }
}
/* Enhanced Visual Feedback */
.quick-select-btn.active[b-dkcdlpp60u]::before {
    content: "✓ ";
    font-weight: bold;
}

.unknown-selected[b-dkcdlpp60u]::before {
    content: "❓ ";
}
/* Animation for smooth transitions */
.blood-type-selection-expanded[b-dkcdlpp60u] {
    animation: slideDown-b-dkcdlpp60u 0.3s ease-out;
}

@keyframes slideDown-b-dkcdlpp60u {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

.explanation-box[b-dkcdlpp60u] {
    animation: fadeIn-b-dkcdlpp60u 0.3s ease-out;
}

@keyframes fadeIn-b-dkcdlpp60u {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* /Pages/CaptureRecords.razor.rz.scp.css */
/* Dog Records Timeline Design - Matching Image 2 */
.dog-records-container[b-psfov3b126] {
    background-color: #f8f9fa;
    min-height: 100vh;
    /*padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 70px;
    padding-right: 70px;*/
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 1024px;
    margin: 0 auto;
}

/*.form-card {
    background: white;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
}
.card-content {
    padding: 1rem;
}*/

/* Header Section - Centered Layout */
.header-card[b-psfov3b126] {
    background: #deede6;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    margin-bottom: 0px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-content[b-psfov3b126] {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*flex-wrap: wrap;*/
    gap: 20px;
}

.header-left[b-psfov3b126] {
    flex: 0 0 auto;
    min-width: auto ;
}

.header-title[b-psfov3b126] {
    font-size: 24px;
    font-weight: 600;
    color: #212529;
    margin: 0 0 5px 0;
}

.header-subtitle[b-psfov3b126] {
    font-size: 14px;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 8px;
}

.separator[b-psfov3b126] {
    color: #dee2e6;
}

/* NEW: Selected count styling */
.selected-count[b-psfov3b126] {
    color: #2196f3;
    font-weight: 600;
}
.connectivity-status[b-psfov3b126] {
    font-weight: 500;
}

    .connectivity-status.online[b-psfov3b126] {
        color: #198754;
    }

    .connectivity-status.offline[b-psfov3b126] {
        color: #ffc107;
    }

    .connectivity-status.checking[b-psfov3b126] {
        color: #6c757d;
    }

/* Health Stats - Prominently displayed in center */
.health-stats[b-psfov3b126] {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    flex: 1;
}

.health-stat[b-psfov3b126] {
    padding: 15px 20px;
    border-radius: 8px;
    text-align: center;
    min-width: 120px;
    border: 2px solid;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

    .health-stat.healthy[b-psfov3b126] {
        background-color: #e8f5e8;
        border-color: #198754;
    }

    .health-stat.injured[b-psfov3b126] {
        background-color: #fff3cd;
        border-color: #ffc107;
    }

    .health-stat.critical[b-psfov3b126] {
        background-color: #f8d7da;
        border-color: #dc3545;
    }

.stat-count[b-psfov3b126] {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 4px;
}

.health-stat.healthy .stat-count[b-psfov3b126] {
    color: #0f5132;
}

.health-stat.injured .stat-count[b-psfov3b126] {
    color: #856404;
}

.health-stat.critical .stat-count[b-psfov3b126] {
    color: #721c24;
}

.stat-percentage[b-psfov3b126] {
    font-size: 10px;
    font-weight: 600;
}

.health-stat.healthy .stat-percentage[b-psfov3b126] {
    color: #198754;
}

.health-stat.injured .stat-percentage[b-psfov3b126] {
    color: #ffc107;
}

.health-stat.critical .stat-percentage[b-psfov3b126] {
    color: #dc3545;
}

/* Header Actions */
.header-actions[b-psfov3b126] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.storage-indicator[b-psfov3b126] {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    border: 2px solid;
}

    .storage-indicator.online[b-psfov3b126] {
        background-color: #e3f2fd;
        border-color: #2196f3;
        color: #1976d2;
    }

    .storage-indicator.offline[b-psfov3b126] {
        background-color: #fff3cd;
        border-color: #ffc107;
        color: #856404;
    }

.btn-add-new[b-psfov3b126] {
    background-color: #198754;
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .btn-add-new:hover[b-psfov3b126] {
        background-color: #157347;
        color: white;
        text-decoration: none;
    }

/* Search/Filter Bar */
.search-filter-bar[b-psfov3b126] {
    background: white;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 0px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.search-input[b-psfov3b126] {
    flex: 1;
    /*min-width: 300px;*/
}

    .search-input input[b-psfov3b126] {
        width: 100%;
        padding: 12px 16px;
        border: 2px solid #e9ecef;
        border-radius: 6px;
        font-size: 14px;
        background-color: white;
        transition: border-color 0.2s;
    }

        .search-input input:focus[b-psfov3b126] {
            outline: none;
            border-color: #2196f3;
            background-color: white;
        }

.filter-select[b-psfov3b126] {
    padding: 12px 16px;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    font-size: 14px;
    background-color: white;
    color: #495057;
    min-width: 140px;
    cursor: pointer;
}

.sort-info[b-psfov3b126] {
    font-size: 14px;
    color: #6c757d;
    margin-left: auto;
    font-weight: 500;
}

/* NEW: Action Bar */
.action-bar[b-psfov3b126] {
    background: white;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.action-bar-content[b-psfov3b126] {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.selection-info[b-psfov3b126] {
    font-weight: 600;
    font-size: 14px;
    color: #495057;
    display: flex;
    align-items: center;
    gap: 8px;
}
.selection-info i[b-psfov3b126] {
    color: #2196f3;
}
.action-buttons[b-psfov3b126] {
    display: flex;
    gap: 8px;
}
.btn-action[b-psfov3b126] {
    background: white;
    color: #495057;
    border: 1px solid #e9ecef;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.btn-action:hover[b-psfov3b126] {
    background: #f8f9fa;
    border-color: #dee2e6;
    transform: translateY(-1px);
}
.btn-action.download[b-psfov3b126] {
    color: #2196f3;
    border-color: #2196f3;
}
.btn-action.download:hover[b-psfov3b126] {
    background: #e3f2fd;
}
.btn-action.email[b-psfov3b126] {
    color: #2196f3;
    border-color: #2196f3;
}
.btn-action.email:hover[b-psfov3b126] {
    background: #e3f2fd;
}
.btn-action.clear[b-psfov3b126] {
    color: #6c757d;
    border-color: #e9ecef;
}
.btn-action.clear:hover[b-psfov3b126] {
    background: #f8f9fa;
}
/* NEW: Select All Section */
.select-all-section[b-psfov3b126] {
    background: white;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.select-all-content[b-psfov3b126] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    
    /*justify-content: space-between;*/
    gap: 20px;
}
.select-all-checkbox[b-psfov3b126] {
    display: flex;
    align-items: center;
    gap: 12px;
}
.select-all-checkbox input[type="checkbox"][b-psfov3b126] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #2196f3;
}
.select-all-checkbox label[b-psfov3b126] {
    font-size: 14px;
    font-weight: 500;
    color: #495057;
    cursor: pointer;
    margin: 0;
}
.selection-actions[b-psfov3b126] {
    display: flex;
    align-items: center;
    gap: 20px;  
    margin-left: auto;
}
.selection-count[b-psfov3b126] {
    font-style: italic;
    font-weight: bold;
    color: #2196f3;
    font-size: 14px;
    white-space: nowrap;
}
.action-buttons[b-psfov3b126] {
    display: flex;
    gap: 8px;
}
.btn-action[b-psfov3b126] {
    background: white;
    color: #495057;
    border: 1px solid #e9ecef;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.btn-action:hover[b-psfov3b126] {
    background: #f8f9fa;
    border-color: #dee2e6;
    transform: translateY(-1px);
}
.btn-action.download[b-psfov3b126] {
    color: #2196f3;
    border-color: #2196f3;
}
.btn-action.download:hover[b-psfov3b126] {
    background: #e3f2fd;
}
.btn-action.email[b-psfov3b126] {
    color: #2196f3;
    border-color: #2196f3;
}
.btn-action.email:hover[b-psfov3b126] {
    background: #e3f2fd;
}
.btn-action.clear[b-psfov3b126] {
    color: #6c757d;
    border-color: #e9ecef;
}
.btn-action.clear:hover[b-psfov3b126] {
    background: #f8f9fa;
}
/* Timeline Container */
.timeline-container[b-psfov3b126] {
    position: relative;
    padding-left: 60px;
}

.timeline-line[b-psfov3b126] {
    position: absolute;
    left: 40px;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: #e9ecef;
    z-index: 1;
}

/* Day Markers */
.day-marker[b-psfov3b126] {
    position: relative;
    left: -50px;
    background-color: #6c757d;
    border: 2px solid #6c757d;
    border-radius: 20px;
    padding: 2px;
    font-size: 12px;
    color: white;
    text-align: center;
    margin: 25px 0 15px 0;
    width: 80px;
    z-index: 3;
    font-weight: 700;
}

    .day-marker.today[b-psfov3b126] {
        background-color: #2196f3;
        border-color: #2196f3;
        color: white;
    }

/* Timeline Dots - Fixed positioning */
/*.timeline-dot {
    position: absolute;
    left: 35px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #6c757d;
    z-index: 3;
    margin-top: 50px;
    border: 3px solid white;
    box-shadow: 0 0 0 1px #e9ecef;
}

    .timeline-dot.today {
        background-color: #2196f3;
    }*/
/* NEW: Timeline Checkboxes - Replacing timeline dots */
.timeline-checkbox[b-psfov3b126] {
    position: absolute;
    left: 32px;
    width: 22px;
    height: 22px;
    z-index: 3;
    margin-top: 50px;
}

    .timeline-checkbox input[type="checkbox"][b-psfov3b126] {
        width: 16px;
        height: 16px;
        margin: 0;
        cursor: pointer;
        /*opacity: 0;*/
        position: absolute;
        z-index: 2;
    }

.checkbox-label[b-psfov3b126] {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #6c757d;
    border: 3px solid white;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    box-shadow: 0 0 0 1px #e9ecef;
}

.checkbox-label.today[b-psfov3b126] {
    background-color: #2196f3;
}

.timeline-checkbox input[type="checkbox"]:checked + .checkbox-label[b-psfov3b126] {
    background-color: #2196f3;
    transform: scale(1.2);
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.3);
}

.timeline-checkbox input[type="checkbox"]:checked + .checkbox-label[b-psfov3b126]::after {
    content: '?';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 10px;
    font-weight: bold;
}
/* Record Cards - Horizontal Layout */
.record-card[b-psfov3b126] {
    background-color: #effdff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    margin-bottom: 15px;
    margin-right: 20px;
    padding: 20px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 80px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.2s;
}

    .record-card:hover[b-psfov3b126] {
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

/* NEW: Selected record styling */
.record-card.selected[b-psfov3b126] {
    border-color: #2196f3;
    background-color: #f8fbff;
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);
}

.priority-indicator[b-psfov3b126] {
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 100%;
    border-radius: 8px 0 0 8px;
}

    .priority-indicator.healthy[b-psfov3b126] {
        background-color: #198754;
    }

    .priority-indicator.injured[b-psfov3b126] {
        background-color: #ffc107;
    }

    .priority-indicator.critical[b-psfov3b126] {
        background-color: #dc3545;
    }

/* Photo Section */
.record-photo[b-psfov3b126] {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.photo-placeholder[b-psfov3b126] {
    width: 100%;
    height: 100%;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
}

    .photo-placeholder i[b-psfov3b126] {
        font-size: 16px;
        color: #dee2e6;
        margin-bottom: 4px;
    }

    .photo-placeholder span[b-psfov3b126] {
        font-size: 10px;
        color: #6c757d;
        font-weight: 500;
    }

.photo-with-image[b-psfov3b126] {
    width: 100%;
    height: 100%;
    border: 2px solid #198754;
    border-radius: 8px;
    background-color: #e8f5e8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dog-avatar[b-psfov3b126] {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #a3d9a3;
    position: relative;
}

    .dog-avatar[b-psfov3b126]::before {
        content: '';
        position: absolute;
        top: 10px;
        left: 8px;
        width: 5px;
        height: 5px;
        background-color: #4a7c59;
        border-radius: 50%;
    }

    .dog-avatar[b-psfov3b126]::after {
        content: '';
        position: absolute;
        top: 10px;
        right: 8px;
        width: 5px;
        height: 5px;
        background-color: #4a7c59;
        border-radius: 50%;
    }

/* Record Content - Main info section */
.record-content[b-psfov3b126] {
    flex: 1;
    min-width: 0;
    margin-right: 20px;
}
    .record-content:hover[b-psfov3b126] {
        cursor: pointer;
        transform: translateY(-2px);
    }
    .record-content:hover .record-id[b-psfov3b126]{
        text-decoration:underline;
        color: blue;
    }

.record-header[b-psfov3b126] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.record-id[b-psfov3b126] {
    font-size: 18px;
    font-weight: 500;
    color: #212529;
    margin: 0;
}

.image-type-badge[b-psfov3b126] {
    /*position: absolute;*/
    top: 4px;
    left: 4px;
    background-color: #1E88E5;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    z-index: 2;
}

.video-type-badge[b-psfov3b126] {
    /*position: absolute;*/
    top: 4px;
    left: 4px;
    background-color: #E53935;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    z-index: 2;
}
.health-badge[b-psfov3b126] {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    border: 1px solid;
    flex-shrink: 0;
    text-transform: uppercase;
}

    .health-badge.healthy[b-psfov3b126] {
        background-color: #d1e7dd;
        border-color: #198754;
        color: #0f5132;
    }

    .health-badge.injured[b-psfov3b126] {
        background-color: #fff3cd;
        border-color: #ffc107;
        color: #856404;
    }

    .health-badge.critical[b-psfov3b126] {
        background-color: #f8d7da;
        border-color: #dc3545;
        color: #721c24;
    }

    .health-badge.unknown[b-psfov3b126] {
        background-color: #e2e3e5;
        border-color: #6c757d;
        color: #495057;
    }

.record-details[b-psfov3b126] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.detail-line[b-psfov3b126] {
    font-size: 16px;
    line-height: 1.3;
    color: #495057;
    line-height: 1.5;
}

.time-location[b-psfov3b126] {
   /* color: #6c757d;
    font-weight: 500;*/
}

.team-info[b-psfov3b126] {
    /*color: #495057;
    font-weight: 600;*/
}

/* Shelter Info */
.shelter-info[b-psfov3b126] {
    width: 200px;
    flex-shrink: 0;
    margin-right: 15px;
}

.shelter-label[b-psfov3b126] {
    font-size: 10px;
    color: #6c757d;
    font-weight: 700;
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.shelter-name[b-psfov3b126] {
    font-size: 14px;
    color: #495057;
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.2;
}

.transfer-info[b-psfov3b126] {
    font-size: 12px;
    color: #6c757d;
    line-height: 1.2;
    font-weight: 500;
}

/* Sync Status - Adjusted width for horizontal actions */
.sync-status[b-psfov3b126] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
    flex-shrink: 0;
    margin-right: 15px;
}

.sync-icon[b-psfov3b126] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    border: 2px solid;
    margin-bottom: 6px;
}

.sync-status.synced .sync-icon[b-psfov3b126] {
    background-color: #d1e7dd;
    border-color: #198754;
    color: #0f5132;
}

.sync-status.pending .sync-icon[b-psfov3b126] {
    background-color: #fff3cd;
    border-color: #ffc107;
    color: #856404;
}

.sync-label[b-psfov3b126] {
    font-size: 11px;
    text-align: center;
    line-height: 1;
    font-weight: 600;
}

.sync-status.synced .sync-label[b-psfov3b126] {
    color: #198754;
}

.sync-status.pending .sync-label[b-psfov3b126] {
    color: #856404;
}

/* Hide mobile layout on desktop - ensure this is working */
.mobile-top-row[b-psfov3b126],
.mobile-content-column[b-psfov3b126],
.mobile-id-row[b-psfov3b126],
.mobile-status-row[b-psfov3b126],
.mobile-time-row[b-psfov3b126],
.mobile-location-row[b-psfov3b126],
.mobile-shelter-info[b-psfov3b126],
.mobile-shelter-row[b-psfov3b126]{
    display: none !important;
}

.action-icons[b-psfov3b126] {
    display: flex;
    flex-direction: row;
    gap: 6px;
    width: 240px;
    flex-shrink: 0;
    align-items: center;
}

.action-icon[b-psfov3b126] {
    width: 100px;
    height: 28px;
    border-radius: 12px;
    border: 1px solid #e9ecef;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 9px;
    color: #6c757d;
    padding: 3px 2px;
}

    .action-icon i[b-psfov3b126] {
        font-size: 10px;
        margin-bottom: 2px;
    }

    .action-icon .action-text[b-psfov3b126] {
        font-size: 7px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        line-height: 1;
    }

    .action-icon:hover[b-psfov3b126] {
        background-color: #f8f9fa;
        border-color: #dee2e6;
        transform: translateY(-1px);
    }

    .action-icon.view[b-psfov3b126] {
        color: #198754;
        border-color: #198754;
    }

        .action-icon.view:hover[b-psfov3b126] {
            background-color: #e8f5e8;
        }

    .action-icon.edit[b-psfov3b126] {
        color: #ffc107;
        border-color: #ffc107;
    }

        .action-icon.edit:hover[b-psfov3b126] {
            background-color: #fff3cd;
        }

    .action-icon.delete[b-psfov3b126] {
        color: #dc3545;
        border-color: #dc3545;
    }

        .action-icon.delete:hover[b-psfov3b126] {
            background-color: #f8d7da;
        }

    .action-icon.share[b-psfov3b126] {
        color: #2196f3;
        border-color: #2196f3;
    }

        .action-icon.share:hover[b-psfov3b126] {
            background-color: #e3f2fd;
        }

    .action-icon.download[b-psfov3b126] {
        color: #2196f3;
        border-color: #2196f3;
    }

        .action-icon.download:hover[b-psfov3b126] {
            background-color: #e3f2fd;
        }
/* Load More Section */
.load-more-container[b-psfov3b126] {
    margin: 30px 0;
    padding-left: 20px;
}

.load-more-btn[b-psfov3b126] {
    background-color: #f8f9fa;
    border: 2px solid #e1e5e9;
    border-radius: 12px;
    padding: 20px 40px;
    width: 100%;
    max-width: 720px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    color: #6c757d;
    font-weight: 600;
}

    .load-more-btn:hover[b-psfov3b126] {
        background-color: #e9ecef;
        border-color: #dee2e6;
    }

.load-more-icon[b-psfov3b126] {
    width: 24px;
    height: 24px;
    background-color: #2196f3;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: bold;
}

/* Pagination Footer */
.pagination-footer[b-psfov3b126] {
    background: white;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    padding: 20px;
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pagination-info[b-psfov3b126] {
    font-size: 14px;
    color: #6c757d;
    font-weight: 500;
}

.pagination-controls[b-psfov3b126] {
    display: flex;
    gap: 8px;
}

.page-btn[b-psfov3b126] {
    padding: 10px 16px;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    background: white;
    color: #495057;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
}

    .page-btn:hover:not(:disabled)[b-psfov3b126] {
        background-color: #f8f9fa;
        border-color: #dee2e6;
    }

    .page-btn:disabled[b-psfov3b126] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .page-btn.active[b-psfov3b126] {
        background-color: #2196f3;
        border-color: #2196f3;
        color: white;
    }

/* Status Alerts */
.status-alert[b-psfov3b126] {
    padding: 16px 24px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 500;
}

    .status-alert.info[b-psfov3b126] {
        background-color: #d1ecf1;
        border: 2px solid #bee5eb;
        color: #0c5460;
    }

    .status-alert.warning[b-psfov3b126] {
        background-color: #fff3cd;
        border: 2px solid #ffeaa7;
        color: #856404;
    }

/* Loading and Empty States */
.loading-container[b-psfov3b126] {
    text-align: center;
    padding: 80px 20px;
}

.spinner[b-psfov3b126] {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #2196f3;
    border-radius: 50%;
    animation: spin-b-psfov3b126 1s linear infinite;
    margin: 0 auto 30px;
}

@keyframes spin-b-psfov3b126 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.empty-state[b-psfov3b126] {
    text-align: center;
    padding: 80px 20px;
    background: white;
    border-radius: 12px;
    border: 2px solid #e1e5e9;
}

    .empty-state i[b-psfov3b126] {
        font-size: 64px;
        color: #dee2e6;
        margin-bottom: 30px;
    }

    .empty-state h4[b-psfov3b126] {
        color: #6c757d;
        margin-bottom: 15px;
        font-size: 24px;
    }

    .empty-state p[b-psfov3b126] {
        color: #6c757d;
        margin-bottom: 30px;
        font-size: 16px;
    }

.btn-primary[b-psfov3b126] {
    background-color: #2196f3;
    color: white;
    padding: 16px 32px;
    border-radius: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
}

    .btn-primary:hover[b-psfov3b126] {
        background-color: #1976d2;
        color: white;
        text-decoration: none;
    }
/* Empty State Enhancements */
.empty-state-actions[b-psfov3b126] {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

.offline-info[b-psfov3b126] {
    margin-top: 20px;
    padding: 15px;
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    color: #856404;
}
.getting-started-info[b-psfov3b126] {
    margin-top: 20px;
    padding: 15px;
    background: #e3f2fd;
    border: 1px solid #bbdefb;
    border-radius: 8px;
    color: #1565c0;
}
/* Mobile pagination info */
.mobile-pagination-info[b-psfov3b126] {
    padding: 15px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    margin-bottom: 20px;
}
/* Responsive Design */
/* Desktop and Large Tablets (769px and above) */
@media (min-width: 769px) {
    /* Hide mobile load more on desktop */
    .load-more-container[b-psfov3b126] {
        display: none !important;
    }

    /* Show desktop pagination */
    .pagination-footer[b-psfov3b126] {
        display: flex !important;
    }

    /* Desktop empty state keeps horizontal layout */
    .empty-state-actions[b-psfov3b126] {
        flex-direction: row;
    }

    .header-content[b-psfov3b126] {
        flex-direction: row;
        align-items: stretch;
        gap: 20px;
    }

    .health-stats[b-psfov3b126] {
        justify-content: center;
    }

    .action-icons[b-psfov3b126] {
        width: 240px;
    }
}

/* Mobile and Tablets (768px and below) */
@media (max-width: 768px) {
    /*.dog-records-container {
        padding: 15px;
    }*/

    .header-content[b-psfov3b126] {
        padding: 15px;
    }

    .header-title[b-psfov3b126] {
        font-size: 20px;
    }

    /* Health stats responsive */
    .health-stats[b-psfov3b126] {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 5px;
        width: 100%;
        -ms-flex-wrap: nowrap;
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }

    .health-stat[b-psfov3b126] {
        min-width: 85px;
        padding: 8px 12px;
        flex: 1;
        max-width: 110px;
    }

    .stat-count[b-psfov3b126] {
        font-size: 9px;
        line-height: 1.1;
        margin-bottom: 2px;
    }

    .stat-percentage[b-psfov3b126] {
        font-size: 8px;
    }

    /* Search filter responsive */
    .search-filter-bar[b-psfov3b126] {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .search-input[b-psfov3b126] {
        max-width: 100%;
    }

    .filter-row[b-psfov3b126] {
        display: flex;
        gap: 10px;
        align-items: center;
        max-width: 100%;
    }

    .filter-select[b-psfov3b126] {
        flex: 1;
        min-width: 120px;
        font-size: 13px;
        padding: 10px 12px;
    }

    .sort-info[b-psfov3b126] {
        margin-left: 0;
        text-align: center;
    }

    /* Mobile action bar styling */
    .action-bar-content[b-psfov3b126] {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .select-all-content[b-psfov3b126] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .selection-actions[b-psfov3b126] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .selection-count[b-psfov3b126] {
        text-align: center;
    }

    .action-buttons[b-psfov3b126] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .btn-action[b-psfov3b126] {
        font-size: 11px;
        padding: 6px 12px;
    }

    /* Timeline mobile adjustments */
    .timeline-container[b-psfov3b126] {
        padding-left: 40px;
    }

    .timeline-line[b-psfov3b126] {
        left: 25px;
    }

    .timeline-checkbox[b-psfov3b126] {
        left: 19px;
    }

    .day-marker[b-psfov3b126] {
        left: -35px;
    }

    /* CRITICAL: Mobile record card layout */
    .record-card[b-psfov3b126] {
        display: block !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 12px !important;
        min-height: auto !important;
        height: auto !important;
        margin-right: 0px !important;
    }

        /* HIDE ALL DESKTOP LAYOUT ELEMENTS ON MOBILE */
        .record-card > .record-photo[b-psfov3b126],
        .record-card > .record-content[b-psfov3b126],
        .record-card > .shelter-info[b-psfov3b126],
        .record-card > .sync-status[b-psfov3b126] {
            display: none !important;
        }

    /* SHOW mobile layout - force display */
    .mobile-top-row[b-psfov3b126],
    .mobile-content-column[b-psfov3b126],
    .mobile-id-row[b-psfov3b126],
    .mobile-status-row[b-psfov3b126],
    .mobile-time-row[b-psfov3b126],
    .mobile-location-row[b-psfov3b126] {
        display: flex !important;
    }

    .mobile-shelter-row[b-psfov3b126] {
        display: flex !important;
    }

    /* Mobile layout specifics */
    .mobile-top-row[b-psfov3b126] {
        display: flex !important;
        gap: 12px;
        align-items: flex-start;
        margin-bottom: 8px;
    }

        .mobile-top-row .record-photo[b-psfov3b126] {
            width: 50px;
            height: 50px;
            flex-shrink: 0;
        }

    .mobile-content-column[b-psfov3b126] {
        flex: 1;
        display: flex !important;
        flex-direction: column;
        gap: 6px;
    }

    .mobile-id-row[b-psfov3b126] {
        display: flex !important;
        gap: 12px;
    }

        .mobile-id-row .record-id[b-psfov3b126] {
            font-size: 16px;
            font-weight: 700;
            margin: 0;
        }

    .mobile-status-row[b-psfov3b126] {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }

        .mobile-status-row .health-badge[b-psfov3b126] {
            padding: 3px 8px;
            font-size: 8px;
            border-radius: 8px;
        }

    .mobile-time-row[b-psfov3b126] {
        display: flex !important;
        font-size: 14px;
        color: #6c757d;
        font-weight: 500;
    }

    .mobile-location-row[b-psfov3b126] {
        display: flex !important;
        font-size: 12px;
        color: #6c757d;
        font-weight: 500;
        margin-bottom: 8px;
        line-height: 1.3;
    }

    .mobile-shelter-info[b-psfov3b126] {
        display: block !important;
        width: auto;
        margin-right: 0;
    }

    .mobile-shelter-row[b-psfov3b126] {
        display: flex !important;
        justify-content: space-between;
        gap: 16px;
    }

    .mobile-shelter-col[b-psfov3b126] {
        flex: 1;
    }

    .shelter-label[b-psfov3b126] {
        font-weight: bold;
        margin-bottom: 4px;
    }

    .action-icons[b-psfov3b126] {
        flex-direction: row;
        width: auto;
        justify-content: center;
        gap: 8px;
    }

    /* Hide desktop pagination on mobile */
    .pagination-footer[b-psfov3b126] {
        display: none !important;
    }

    /* Show mobile load more */
    .load-more-container[b-psfov3b126] {
        display: block !important;
    }

    /* Mobile empty state adjustments */
    .empty-state-actions[b-psfov3b126] {
        flex-direction: column;
        align-items: stretch;
    }

        .empty-state-actions .btn[b-psfov3b126] {
            width: 100%;
            margin-bottom: 10px;
        }
}

/* Extra small phones (480px and below) */
@media (max-width: 480px) {
    /*.dog-records-container {
        padding: 10px;
    }*/

    .header-title[b-psfov3b126] {
        font-size: 18px;
    }

    .health-stat[b-psfov3b126] {
        min-width: 70px;
        padding: 6px 8px;
        flex: 1;
        max-width: 90px;
    }

    .stat-count[b-psfov3b126] {
        font-size: 8px;
    }

    .stat-percentage[b-psfov3b126] {
        font-size: 7px;
    }

    .mobile-id-row .record-id[b-psfov3b126] {
        font-size: 14px;
    }

    .mobile-time-row[b-psfov3b126] {
        font-size: 12px;
    }

    .mobile-location-row[b-psfov3b126] {
        font-size: 11px;
    }

    .action-icon[b-psfov3b126] {
        width: 50px;
        height: 32px;
        font-size: 10px;
    }
}
/* /Pages/CommunityDogDetails.razor.rz.scp.css */
/* Community Dog Details Page - Enhanced Responsive Design */
.form-container[b-nej1br1hgy] {
    background-color: #f8f9fa;
    min-height: 100vh;
    padding: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 1200px;
    margin: 0 auto;
}

/* Loading States */
.loading-container[b-nej1br1hgy],
.error-container[b-nej1br1hgy] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 2rem;
}

.loading-spinner[b-nej1br1hgy],
.error-card[b-nej1br1hgy] {
    text-align: center;
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.loading-text[b-nej1br1hgy] {
    margin-top: 1rem;
    color: #6c757d;
    font-size: 14px;
}

.error-icon[b-nej1br1hgy] {
    font-size: 3rem;
    color: #dc3545;
    margin-bottom: 1rem;
}

/* Header Section */
.header-card[b-nej1br1hgy] {
    background: linear-gradient(135deg, #deede6 0%, #c8e6c9 100%);
    border: 1px solid #e1e5e9;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    overflow: hidden;
}

.header-content[b-nej1br1hgy] {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.header-left[b-nej1br1hgy] {
    flex: 1;
}

.header-title[b-nej1br1hgy] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #212529;
    margin: 0 0 0.5rem 0;
}

.header-subtitle[b-nej1br1hgy] {
    font-size: 0.875rem;
    color: #6c757d;
    line-height: 1.4;
}

.header-right[b-nej1br1hgy] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Status Badges */
.status-badge[b-nej1br1hgy] {
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.status-inarea[b-nej1br1hgy] {
    background: #f8d7da;
    color: #721c24;
}

.status-scheduled[b-nej1br1hgy] {
    background: #fff3cd;
    color: #856404;
}

.status-pickedup[b-nej1br1hgy] {
    background: #d1ecf1;
    color: #0c5460;
}

.status-atshelter[b-nej1br1hgy] {
    background: #cce5ff;
    color: #004085;
}

.status-procedure[b-nej1br1hgy] {
    background: #e2e3e5;
    color: #383d41;
}

.status-recovery[b-nej1br1hgy] {
    background: #fff3cd;
    color: #856404;
}

.status-ready[b-nej1br1hgy] {
    background: #d4edda;
    color: #155724;
}

.status-released[b-nej1br1hgy] {
    background: #d1f2eb;
    color: #0e6245;
}

.status-deceased[b-nej1br1hgy] {
    background: #f8d7da;
    color: #721c24;
}

.status-missing[b-nej1br1hgy] {
    background: #e2e3e5;
    color: #383d41;
}

.status-unknown[b-nej1br1hgy] {
    background: #ffeaa7;
    color: #856404;
}

/* Form Cards */
.form-card[b-nej1br1hgy] {
    background: white;
    border: 1px solid #e1e5e9;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: all 0.3s ease;
}

    .form-card:hover[b-nej1br1hgy] {
        box-shadow: 0 4px 15px rgba(0,0,0,0.12);
        transform: translateY(-2px);
    }

.section-header[b-nej1br1hgy] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #e9ecef;
    padding: 1rem 1.5rem;
    font-weight: 600;
    font-size: 1rem;
    color: #495057;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

    .section-header i[b-nej1br1hgy] {
        color: #28a745;
        margin-right: 0.5rem;
    }

.section-actions[b-nej1br1hgy] {
    display: flex;
    gap: 0.5rem;
}

.btn-icon[b-nej1br1hgy] {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    border-radius: 4px;
    color: #6c757d;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

    .btn-icon:hover[b-nej1br1hgy] {
        background: #e9ecef;
        color: #495057;
    }

.card-content[b-nej1br1hgy] {
    padding: 1.5rem;
    transition: all 0.3s ease;
    overflow: hidden;
}

    .card-content.collapsed[b-nej1br1hgy] {
        max-height: 0;
        padding: 0 1.5rem;
        opacity: 0;
    }

/* Detail Layout */
.detail-row[b-nej1br1hgy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

    .detail-row:last-child[b-nej1br1hgy] {
        margin-bottom: 0;
    }

.detail-col[b-nej1br1hgy] {
    display: flex;
    flex-direction: column;
}

    .detail-col.full[b-nej1br1hgy] {
        grid-column: 1 / -1;
    }

    .detail-col.half[b-nej1br1hgy] {
        grid-column: span 2;
    }

.detail-field[b-nej1br1hgy] {
    margin-bottom: 1rem;
}

    .detail-field:last-child[b-nej1br1hgy] {
        margin-bottom: 0;
    }

.field-label[b-nej1br1hgy] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 0.5rem;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.field-value[b-nej1br1hgy] {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    color: #495057;
    padding: 0.75rem;
    font-size: 0.875rem;
    border-radius: 6px;
    min-height: 44px;
    display: flex;
    align-items: center;
    line-height: 1.5;
    word-break: break-word;
    transition: all 0.2s;
}

    .field-value:hover[b-nej1br1hgy] {
        background-color: #e9ecef;
    }

    .field-value.large[b-nej1br1hgy] {
        min-height: 80px;
        align-items: flex-start;
        padding-top: 0.75rem;
        line-height: 1.6;
    }

.notes-content[b-nej1br1hgy] {
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Vaccination Grid */
.vaccination-grid[b-nej1br1hgy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.vaccination-item[b-nej1br1hgy] {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    transition: all 0.3s ease;
}

    .vaccination-item:hover[b-nej1br1hgy] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .vaccination-item.vaccinated[b-nej1br1hgy] {
        border-color: #28a745;
        background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    }

    .vaccination-item.not-vaccinated[b-nej1br1hgy] {
        border-color: #dc3545;
        background: linear-gradient(135deg, #f8d7da 0%, #f1b0b7 100%);
    }

    .vaccination-item.unknown[b-nej1br1hgy] {
        border-color: #ffc107;
        background: linear-gradient(135deg, #fff3cd 0%, #fce4a0 100%);
    }

.vaccination-status[b-nej1br1hgy] {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

    .vaccination-status.vaccinated[b-nej1br1hgy] {
        color: #155724;
    }

    .vaccination-status.not-vaccinated[b-nej1br1hgy] {
        color: #721c24;
    }

    .vaccination-status.unknown[b-nej1br1hgy] {
        color: #856404;
    }

.vaccination-date[b-nej1br1hgy] {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 500;
}

/* Media Gallery */
.media-gallery[b-nej1br1hgy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    padding: 0.5rem 0;
}

.media-item[b-nej1br1hgy] {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e9ecef;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

    .media-item:hover[b-nej1br1hgy] {
        transform: scale(1.05);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
        z-index: 1;
    }

.media-thumbnail[b-nej1br1hgy],
.media-placeholder[b-nej1br1hgy] {
    width: 100%;
    height: 140px;
    object-fit: cover;
    display: block;
}

.media-placeholder[b-nej1br1hgy] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9ecef;
    color: #6c757d;
    font-size: 2rem;
}

.media-thumbnail-container[b-nej1br1hgy] {
    position: relative;
    width: 100%;
    height: 140px;
}

.media-type-badge[b-nej1br1hgy] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.6875rem;
    font-weight: 600;
    backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.duration[b-nej1br1hgy] {
    font-size: 0.625rem;
    opacity: 0.9;
}

.media-info[b-nej1br1hgy] {
    padding: 0.75rem;
    background: white;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.media-filename[b-nej1br1hgy] {
    font-weight: 500;
    color: #495057;
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.media-date[b-nej1br1hgy] {
    color: #6c757d;
    font-size: 0.6875rem;
}

/* Timeline */
.timeline[b-nej1br1hgy] {
    position: relative;
    padding-left: 2rem;
}

    .timeline[b-nej1br1hgy]::before {
        content: '';
        position: absolute;
        left: 1rem;
        top: 0;
        bottom: 0;
        width: 3px;
        background: linear-gradient(180deg, #28a745, #20c997);
        border-radius: 2px;
    }

.timeline-item[b-nej1br1hgy] {
    position: relative;
    margin-bottom: 1.5rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

    .timeline-item:hover[b-nej1br1hgy] {
        background: #e3f2fd;
        border-color: #2196f3;
        transform: translateX(0.5rem);
    }

    .timeline-item[b-nej1br1hgy]::before {
        content: '';
        position: absolute;
        left: -2.75rem;
        top: 1.5rem;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: linear-gradient(135deg, #28a745, #20c997);
        border: 3px solid white;
        box-shadow: 0 0 0 3px #e9ecef;
    }

.timeline-date[b-nej1br1hgy] {
    font-size: 0.75rem;
    color: #28a745;
    font-weight: 600;
    background: rgba(40, 167, 69, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    display: inline-block;
    margin-bottom: 0.75rem;
}

.timeline-content h4[b-nej1br1hgy] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    color: #495057;
}

.timeline-content p[b-nej1br1hgy] {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0.5rem 0;
    line-height: 1.5;
}

    .timeline-content p:last-child[b-nej1br1hgy] {
        margin-bottom: 0;
    }

/* Action Buttons */
.action-buttons[b-nej1br1hgy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.action-group-left[b-nej1br1hgy],
.action-group-right[b-nej1br1hgy] {
    display: flex;
    gap: 0.75rem;
}

.btn[b-nej1br1hgy] {
    padding: 0.75rem 1.5rem;
    border: 1px solid #ced4da;
    border-radius: 8px;
    background: white;
    color: #495057;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    min-width: 120px;
}

    .btn:hover[b-nej1br1hgy] {
        background: #f8f9fa;
        border-color: #adb5bd;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

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

.btn-primary[b-nej1br1hgy] {
    background: linear-gradient(135deg, #007bff, #0056b3);
    border-color: #007bff;
    color: white;
}

    .btn-primary:hover[b-nej1br1hgy] {
        background: linear-gradient(135deg, #0056b3, #004085);
        border-color: #0056b3;
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
    }

.btn-secondary[b-nej1br1hgy] {
    background: #6c757d;
    border-color: #6c757d;
    color: white;
}

    .btn-secondary:hover[b-nej1br1hgy] {
        background: #545b62;
        border-color: #545b62;
    }

.btn-info[b-nej1br1hgy] {
    background: linear-gradient(135deg, #17a2b8, #117a8b);
    border-color: #17a2b8;
    color: white;
}

    .btn-info:hover[b-nej1br1hgy] {
        background: linear-gradient(135deg, #117a8b, #0e6674);
        border-color: #117a8b;
        box-shadow: 0 4px 12px rgba(23, 162, 184, 0.4);
    }

.btn-warning[b-nej1br1hgy] {
    background: linear-gradient(135deg, #ffc107, #e0a800);
    border-color: #ffc107;
    color: #212529;
}

    .btn-warning:hover[b-nej1br1hgy] {
        background: linear-gradient(135deg, #e0a800, #d39e00);
        border-color: #e0a800;
        box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
    }

.btn:disabled[b-nej1br1hgy] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

    .btn:disabled:hover[b-nej1br1hgy] {
        transform: none;
        box-shadow: none;
    }

/* Map Link */
.map-link[b-nej1br1hgy] {
    color: #007bff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    transition: all 0.2s;
}

    .map-link:hover[b-nej1br1hgy] {
        color: #0056b3;
        text-decoration: underline;
    }

/* Modal Styles */
.modal-overlay[b-nej1br1hgy] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
}

.modal-content[b-nej1br1hgy] {
    background: white;
    border-radius: 12px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
}

.modal-header[b-nej1br1hgy] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8f9fa;
}

    .modal-header h5[b-nej1br1hgy] {
        margin: 0;
        font-weight: 600;
        color: #495057;
    }

.btn-close[b-nej1br1hgy] {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: #6c757d;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s;
}

    .btn-close:hover[b-nej1br1hgy] {
        background: #e9ecef;
        color: #495057;
    }

.modal-body[b-nej1br1hgy] {
    padding: 1rem;
    text-align: center;
    flex: 1;
    overflow: auto;
}

.modal-media[b-nej1br1hgy] {
    max-width: 100%;
    max-height: 70vh;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.modal-footer[b-nej1br1hgy] {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e9ecef;
    background: #f8f9fa;
    text-align: center;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .detail-row[b-nej1br1hgy] {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 0.75rem;
    }

    .vaccination-grid[b-nej1br1hgy] {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .media-gallery[b-nej1br1hgy] {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

@media (max-width: 768px) {
    .form-container[b-nej1br1hgy] {
        padding: 0.75rem;
    }

    .header-content[b-nej1br1hgy] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .header-title[b-nej1br1hgy] {
        font-size: 1.5rem;
    }

    .detail-row[b-nej1br1hgy] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .vaccination-grid[b-nej1br1hgy] {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 0.75rem;
    }

    .vaccination-item[b-nej1br1hgy] {
        padding: 0.75rem;
    }

    .media-gallery[b-nej1br1hgy] {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 0.75rem;
    }

    .media-thumbnail[b-nej1br1hgy],
    .media-placeholder[b-nej1br1hgy] {
        height: 100px;
    }

    .media-thumbnail-container[b-nej1br1hgy] {
        height: 100px;
    }

    .timeline[b-nej1br1hgy] {
        padding-left: 1.5rem;
    }

        .timeline[b-nej1br1hgy]::before {
            left: 0.75rem;
        }

    .timeline-item[b-nej1br1hgy]::before {
        left: -2.25rem;
    }

    .timeline-item[b-nej1br1hgy] {
        padding: 1rem;
    }

    .action-buttons[b-nej1br1hgy] {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem;
    }

    .action-group-left[b-nej1br1hgy],
    .action-group-right[b-nej1br1hgy] {
        width: 100%;
        justify-content: center;
    }

    .btn[b-nej1br1hgy] {
        min-width: auto;
        flex: 1;
    }

    .modal-content[b-nej1br1hgy] {
        max-width: 95vw;
        max-height: 95vh;
    }

    .modal-header[b-nej1br1hgy],
    .modal-footer[b-nej1br1hgy] {
        padding: 0.75rem 1rem;
    }

    .modal-body[b-nej1br1hgy] {
        padding: 0.75rem;
    }
}

@media (max-width: 480px) {
    .form-container[b-nej1br1hgy] {
        padding: 0.5rem;
    }

    .card-content[b-nej1br1hgy] {
        padding: 1rem;
    }

    .section-header[b-nej1br1hgy] {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }

    .field-value[b-nej1br1hgy] {
        padding: 0.5rem;
        font-size: 0.8125rem;
    }

    .vaccination-grid[b-nej1br1hgy] {
        grid-template-columns: 1fr 1fr;
    }

    .media-gallery[b-nej1br1hgy] {
        grid-template-columns: 1fr 1fr;
    }

    .btn[b-nej1br1hgy] {
        padding: 0.625rem 1rem;
        font-size: 0.8125rem;
    }
}

/* Print Styles */
@media print {
    .form-container[b-nej1br1hgy] {
        background: white;
        box-shadow: none;
        max-width: none;
        margin: 0;
        padding: 1rem;
    }

    .header-card[b-nej1br1hgy],
    .form-card[b-nej1br1hgy] {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
        margin-bottom: 1rem;
    }

    .action-buttons[b-nej1br1hgy],
    .btn-icon[b-nej1br1hgy],
    .section-actions[b-nej1br1hgy] {
        display: none !important;
    }

    .timeline-item[b-nej1br1hgy] {
        break-inside: avoid;
    }

    .media-gallery[b-nej1br1hgy] {
        display: none;
    }
}
/* /Pages/CommunityDogsList.razor.rz.scp.css */
/* Community Dogs Table Layout - Responsive Design */
.community-dogs-page[b-fz1jh10m6u] {
    /*background-color: #f8f9fa;*/
    /*min-height: 100vh;*/
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #1e293b70 0%, #3341557d 100%);
    overflow: hidden;
}

/* Header Section */
/*.header-card {
    background: #deede6;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-content {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.header-left {
    flex: 0 0 auto;
    min-width: 250px;
}

.header-title {
    font-size: 24px;
    font-weight: 600;
    color: #212529;
    margin: 0 0 5px 0;
}

.header-subtitle {
    font-size: 14px;
    color: #6c757d;
}

.stats-section {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.stat-item {
    background: white;
    padding: 15px 20px;
    border-radius: 8px;
    text-align: center;
    min-width: 120px;
    border: 2px solid;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

    .stat-item.healthy {
        border-color: #198754;
        background: #d1e7dd;
    }

    .stat-item.injured {
        border-color: #ffc107;
        background: #fff3cd;
    }

    .stat-item.critical {
        border-color: #dc3545;
        background: #f8d7da;
    }

.stat-number {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}*/

.modern-header[b-fz1jh10m6u] {
    /*background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    /*margin-bottom: 20px;*/
    overflow: hidden;
    position: relative;
}

    .modern-header[b-fz1jh10m6u]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
    }

.header-content[b-fz1jh10m6u] {
    padding: 20px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: relative;
    z-index: 1;
}

.header-left[b-fz1jh10m6u] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.header-icon[b-fz1jh10m6u] {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #f3d03c;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.header-text-with-stats[b-fz1jh10m6u] {
    flex: 1;
}

.header-title[b-fz1jh10m6u] {
    font-size: 28px;
    font-weight: 700;
    color: #f3d03c;
    margin-bottom: 2px;
    letter-spacing: -0.5px;
}

.header-subtitle[b-fz1jh10m6u] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 0;
}

.pills-row[b-fz1jh10m6u] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
    color: #f3d03c;
}

    .pills-row > *[b-fz1jh10m6u] {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
    }

.mini-stat-pill[b-fz1jh10m6u] {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 3px 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.3s ease;
    font-size: 11px;
}

    .mini-stat-pill:hover[b-fz1jh10m6u] {
        background: rgba(255, 255, 255, 0.15);
        transform: translateY(-1px);
    }

.mini-stat-number[b-fz1jh10m6u] {
    font-size: 12px;
    font-weight: 700;
    color: white;
    line-height: 1;
}

.mini-stat-label[b-fz1jh10m6u] {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    letter-spacing: 0.2px;
}
.add-record-btn[b-fz1jh10m6u] {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #f3d03c;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

    .add-record-btn:hover[b-fz1jh10m6u] {
        background: rgba(255, 255, 255, 0.25);
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        color: #f3d03c;
        font-weight: bolder;
    }
.sync-indicator[b-fz1jh10m6u] {
    background: rgba(251, 191, 36, 0.2);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 14px;
    padding: 3px 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 500;
    color: #fbbf24;
    letter-spacing: 0.2px;
    flex-shrink: 0; /* Add this */
    height: 22px; /* Add this to match mini-stat-pill height */
}

    .sync-indicator.synced[b-fz1jh10m6u] {
        background: #d4edda;
        color: #155724;
    }

    .sync-indicator.pending[b-fz1jh10m6u] {
        background: #fff3cd;
        color: #856404;
    }

    .sync-indicator.failed[b-fz1jh10m6u] {
        background: #f8d7da;
        color: #721c24;
    }

    .sync-indicator.online[b-fz1jh10m6u] {
        background: rgba(34, 197, 94, 0.2);
        border-color: rgba(34, 197, 94, 0.3);
        color: #22c55e;
    }

    .sync-indicator.offline[b-fz1jh10m6u] {
        background: rgba(239, 68, 68, 0.2);
        border-color: rgba(239, 68, 68, 0.3);
        color: #ef4444;
    }
.health-stat[b-fz1jh10m6u] {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    padding: 3px 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.3s ease;
    font-size: 11px;
}

    .health-stat.healthy[b-fz1jh10m6u] {
        border-color: rgba(34, 197, 94, 0.4);
        background: rgba(34, 197, 94, 0.15);
    }

    .health-stat.injured[b-fz1jh10m6u] {
        border-color: rgba(251, 191, 36, 0.4);
        background: rgba(251, 191, 36, 0.15);
    }

    .health-stat.critical[b-fz1jh10m6u] {
        border-color: rgba(239, 68, 68, 0.4);
        background: rgba(239, 68, 68, 0.15);
    }

/*.community-dogs-header {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}*/

/* Alert Messages */
.alert-custom[b-fz1jh10m6u] {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
}

    .alert-custom.warning[b-fz1jh10m6u] {
        background: #fff3cd;
        border: 1px solid #ffc107;
        color: #856404;
    }

/* Filters Section */
.filters-section[b-fz1jh10m6u] {
    background: white;
    padding: 20px;
    /*border-radius: 8px;
    margin-bottom: 20px;*/
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.filters-row[b-fz1jh10m6u] {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.search-input[b-fz1jh10m6u] {
    flex: 1;
    min-width: 250px;
    padding: 10px 15px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s;
}

    .search-input:focus[b-fz1jh10m6u] {
        border-color: #2196f3;
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
    }

.filter-select[b-fz1jh10m6u] {
    padding: 10px 15px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 14px;
    min-width: 150px;
    background: white;
    transition: border-color 0.2s;
}

    .filter-select:focus[b-fz1jh10m6u] {
        border-color: #2196f3;
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
    }

.filter-button[b-fz1jh10m6u] {
    padding: 10px 20px;
    background: #6c757d;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .filter-button:hover[b-fz1jh10m6u] {
        background: #5a6268;
    }

/* Loading State */
.loading-container[b-fz1jh10m6u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.spinner[b-fz1jh10m6u] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #2196f3;
    border-radius: 50%;
    animation: spin-b-fz1jh10m6u 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin-b-fz1jh10m6u {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Empty State */
.empty-state[b-fz1jh10m6u] {
    text-align: center;
    padding: 60px 20px;
    background: white;
    /*border-radius: 8px;*/
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

    .empty-state h4[b-fz1jh10m6u] {
        color: #495057;
        margin-bottom: 15px;
    }

    .empty-state p[b-fz1jh10m6u] {
        color: #6c757d;
        margin-bottom: 30px;
    }

.empty-state-actions[b-fz1jh10m6u] {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn[b-fz1jh10m6u] {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary[b-fz1jh10m6u] {
    background: #2196f3;
    border-color: #2196f3;
    color: white;
}

    .btn-primary:hover[b-fz1jh10m6u] {
        background: #1976d2;
        border-color: #1976d2;
    }

.btn-secondary[b-fz1jh10m6u] {
    background: #6c757d;
    border-color: #6c757d;
    color: white;
}

    .btn-secondary:hover[b-fz1jh10m6u] {
        background: #5a6268;
        border-color: #5a6268;
    }

/* Table Container */
.table-container[b-fz1jh10m6u] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
}

/* Desktop Table */
.desktop-table[b-fz1jh10m6u] {
    overflow-x: auto;
}

.dogs-table[b-fz1jh10m6u] {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 1000px;
}

    .dogs-table th[b-fz1jh10m6u] {
        background: #f8f9fa;
        color: #495057;
        font-weight: 600;
        padding: 16px 12px;
        text-align: left;
        border-bottom: 2px solid #dee2e6;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        white-space: nowrap;
    }

    .dogs-table td[b-fz1jh10m6u] {
        padding: 16px 12px;
        border-bottom: 1px solid #e9ecef;
        vertical-align: middle;
    }

.table-row[b-fz1jh10m6u] {
    transition: background-color 0.2s;
    cursor: pointer;
}

    .table-row:hover[b-fz1jh10m6u] {
        background: #f8fbff;
    }

.table-dog-avatar[b-fz1jh10m6u] {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #a3d9a3, #4a7c59);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    font-weight: bold;
}

.table-dog-id[b-fz1jh10m6u] {
    font-family: monospace;
    background: #e3f2fd;
    padding: 4px 8px;
    border-radius: 4px;
    color: #1976d2;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.location-cell[b-fz1jh10m6u] {
    max-width: 150px;
}

.location-primary[b-fz1jh10m6u] {
    font-weight: 500;
    margin-bottom: 2px;
}

.location-coordinates[b-fz1jh10m6u] {
    color: #6c757d;
    font-size: 11px;
    display: block;
}

.table-status-badge[b-fz1jh10m6u] {
    padding: 4px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    display: inline-block;
}

/* Status Badge Colors */
.badge-healthy[b-fz1jh10m6u] {
    background: #d1e7dd;
    border: 1px solid #198754;
    color: #0f5132;
}

.badge-injured[b-fz1jh10m6u] {
    background: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
}

.badge-critical[b-fz1jh10m6u] {
    background: #f8d7da;
    border: 1px solid #dc3545;
    color: #721c24;
}

.badge-special[b-fz1jh10m6u] {
    background: #e2e3ff;
    border: 1px solid #6f42c1;
    color: #493057;
}

.badge-friendly[b-fz1jh10m6u] {
    background: #cff4fc;
    border: 1px solid #0dcaf0;
    color: #055160;
}

.badge-fearful[b-fz1jh10m6u] {
    background: #f3e2f3;
    border: 1px solid #d63384;
    color: #5c1a3b;
}

.badge-aggressive[b-fz1jh10m6u] {
    background: #f8d7da;
    border: 1px solid #dc3545;
    color: #721c24;
}

.badge-neutral[b-fz1jh10m6u] {
    background: #e2e3f1;
    border: 1px solid #6c757d;
    color: #495057;
}

.badge-local[b-fz1jh10m6u] {
    background: #e3f2fd;
    border: 1px solid #2196f3;
    color: #1976d2;
}

.badge-scheduled[b-fz1jh10m6u] {
    background: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
}

.badge-picked[b-fz1jh10m6u] {
    background: #cfe2ff;
    border: 1px solid #0d6efd;
    color: #084298;
}

.badge-shelter[b-fz1jh10m6u] {
    background: #d1ecf1;
    border: 1px solid #0dcaf0;
    color: #055160;
}

.badge-procedure[b-fz1jh10m6u] {
    background: #fce4ec;
    border: 1px solid #e91e63;
    color: #88344f;
}

.badge-recovery[b-fz1jh10m6u] {
    background: #f3e5f5;
    border: 1px solid #9c27b0;
    color: #6a1b9a;
}

.badge-ready[b-fz1jh10m6u] {
    background: #e8f5e8;
    border: 1px solid #4caf50;
    color: #2e7d32;
}

.badge-released[b-fz1jh10m6u] {
    background: #e0f2f1;
    border: 1px solid #009688;
    color: #00695c;
}

.badge-deceased[b-fz1jh10m6u] {
    background: #efebe9;
    border: 1px solid #795548;
    color: #3e2723;
}

.badge-missing[b-fz1jh10m6u] {
    background: #fafafa;
    border: 1px solid #9e9e9e;
    color: #424242;
}

.badge-unknown[b-fz1jh10m6u] {
    background: #f5f5f5;
    border: 1px solid #bdbdbd;
    color: #757575;
}

/* Action Buttons */
.actions-cell[b-fz1jh10m6u] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.action-btn[b-fz1jh10m6u] {
    padding: 6px 8px;
    border: 1px solid #ced4da;
    background: white;
    color: #495057;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
}

    .action-btn:hover[b-fz1jh10m6u] {
        background: #f8f9fa;
        border-color: #adb5bd;
        transform: translateY(-1px);
    }

    .action-btn.primary[b-fz1jh10m6u] {
        background: #2196f3;
        border-color: #2196f3;
        color: white;
    }

        .action-btn.primary:hover[b-fz1jh10m6u] {
            background: #1976d2;
            border-color: #1976d2;
        }

    .action-btn.status[b-fz1jh10m6u] {
        background: #17a2b8;
        border-color: #17a2b8;
        color: white;
    }

        .action-btn.status:hover[b-fz1jh10m6u] {
            background: #138496;
            border-color: #138496;
        }

/* Mobile Cards - Hidden on desktop */
.mobile-cards[b-fz1jh10m6u] {
    display: none;
}

.mobile-dog-card[b-fz1jh10m6u] {
    background: white;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-left: 4px solid #198754;
    transition: all 0.2s;
    cursor: pointer;
}

    .mobile-dog-card:hover[b-fz1jh10m6u] {
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        transform: translateY(-2px);
    }

.mobile-card-header[b-fz1jh10m6u] {
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #e9ecef;
}

.mobile-dog-avatar[b-fz1jh10m6u] {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #a3d9a3, #4a7c59);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    font-weight: bold;
    flex-shrink: 0;
}

.mobile-dog-info[b-fz1jh10m6u] {
    flex: 1;
}

    .mobile-dog-info h3[b-fz1jh10m6u] {
        font-size: 16px;
        font-weight: 600;
        color: #212529;
        margin: 0 0 4px 0;
    }

.mobile-dog-id[b-fz1jh10m6u] {
    font-family: monospace;
    background: #e3f2fd;
    padding: 2px 6px;
    border-radius: 4px;
    color: #1976d2;
    font-size: 11px;
    font-weight: 500;
    display: inline-block;
}

.mobile-actions[b-fz1jh10m6u] {
    display: flex;
    gap: 8px;
}

.mobile-action-btn[b-fz1jh10m6u] {
    width: 36px;
    height: 36px;
    border: 1px solid #ced4da;
    background: white;
    color: #495057;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

    .mobile-action-btn:hover[b-fz1jh10m6u] {
        background: #f8f9fa;
        border-color: #adb5bd;
    }

    .mobile-action-btn.primary[b-fz1jh10m6u] {
        background: #2196f3;
        border-color: #2196f3;
        color: white;
    }

        .mobile-action-btn.primary:hover[b-fz1jh10m6u] {
            background: #1976d2;
        }

.mobile-card-content[b-fz1jh10m6u] {
    padding: 15px 20px;
}

.mobile-details[b-fz1jh10m6u] {
    margin-bottom: 15px;
}

.mobile-detail-item[b-fz1jh10m6u] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 14px;
}

.mobile-label[b-fz1jh10m6u] {
    font-weight: 500;
    color: #495057;
}

.mobile-value[b-fz1jh10m6u] {
    color: #6c757d;
    text-align: right;
    max-width: 60%;
}

.mobile-status-badges[b-fz1jh10m6u] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.mobile-status-badge[b-fz1jh10m6u] {
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Pagination */
.pagination-container[b-fz1jh10m6u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: white;
    border-radius: 8px;
    margin-top: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    flex-wrap: wrap;
    gap: 15px;
}

.pagination-info[b-fz1jh10m6u] {
    color: #6c757d;
    font-size: 14px;
}

.pagination-controls[b-fz1jh10m6u] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.page-btn[b-fz1jh10m6u] {
    padding: 8px 12px;
    border: 1px solid #ced4da;
    background: white;
    color: #495057;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .page-btn:hover:not(:disabled)[b-fz1jh10m6u] {
        background: #f8f9fa;
        border-color: #adb5bd;
    }

    .page-btn.active[b-fz1jh10m6u] {
        background: #2196f3;
        border-color: #2196f3;
        color: white;
    }

    .page-btn:disabled[b-fz1jh10m6u] {
        background: #f8f9fa;
        color: #6c757d;
        cursor: not-allowed;
        opacity: 0.6;
    }

/* Status Update Modal */
.modal-backdrop[b-fz1jh10m6u] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 20px;
}

.modal-dialog[b-fz1jh10m6u] {
    background: white;
    border-radius: 8px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}

.modal-content[b-fz1jh10m6u] {
    padding: 0;
}

.modal-header[b-fz1jh10m6u] {
    padding: 20px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title[b-fz1jh10m6u] {
    font-size: 18px;
    font-weight: 600;
    color: #212529;
    margin: 0;
}

.modal-close[b-fz1jh10m6u] {
    background: none;
    border: none;
    font-size: 18px;
    color: #6c757d;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
}

    .modal-close:hover[b-fz1jh10m6u] {
        background: #f8f9fa;
        color: #495057;
    }

.modal-body[b-fz1jh10m6u] {
    padding: 20px;
}

.modal-footer[b-fz1jh10m6u] {
    padding: 20px;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.form-group[b-fz1jh10m6u] {
    margin-bottom: 20px;
}

.form-label[b-fz1jh10m6u] {
    display: block;
    font-weight: 500;
    color: #495057;
    margin-bottom: 8px;
    font-size: 14px;
}

.form-control[b-fz1jh10m6u] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.2s;
}

    .form-control:focus[b-fz1jh10m6u] {
        border-color: #2196f3;
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
    }

/* Responsive Design */
@media (max-width: 1200px) {
    .dogs-table[b-fz1jh10m6u] {
        min-width: 900px;
    }

        .dogs-table th[b-fz1jh10m6u],
        .dogs-table td[b-fz1jh10m6u] {
            padding: 12px 8px;
        }
}

@media (max-width: 992px) {
    /* Hide desktop table, show mobile cards */
    .desktop-table[b-fz1jh10m6u] {
        display: none;
    }

    .mobile-cards[b-fz1jh10m6u] {
        display: block;
        padding: 20px;
    }

    .stats-section[b-fz1jh10m6u] {
        justify-content: center;
        gap: 10px;
    }

    .stat-item[b-fz1jh10m6u] {
        min-width: 100px;
        padding: 12px 16px;
    }

    .stat-number[b-fz1jh10m6u] {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    .community-dogs-page[b-fz1jh10m6u] {
        padding: 0 10px;
    }
    .modern-header .header-content[b-fz1jh10m6u] {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 18px 20px;
    }

    .modern-header .header-left[b-fz1jh10m6u] {
        justify-content: center;
        text-align: center;
    }

    .pills-row[b-fz1jh10m6u] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .header-title[b-fz1jh10m6u] {
        font-size: 24px;
    }

    .community-dogs-page[b-fz1jh10m6u] {
        padding: 0 10px;
    }

    .filters-section[b-fz1jh10m6u] {
        padding: 15px;
    }

    .filters-row[b-fz1jh10m6u] {
        flex-direction: column;
        gap: 10px;
    }

    .filter-select[b-fz1jh10m6u],
    .search-input[b-fz1jh10m6u] {
        width: 100%;
    }

    .results-summary[b-fz1jh10m6u] {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    .filter-button[b-fz1jh10m6u] {
        justify-content: center;
    }

    .mobile-cards[b-fz1jh10m6u] {
        padding: 0;
    }

    .mobile-dog-card[b-fz1jh10m6u] {
        margin-bottom: 12px;
    }

    .mobile-card-header[b-fz1jh10m6u] {
        padding: 12px 15px;
    }

    .mobile-card-content[b-fz1jh10m6u] {
        padding: 12px 15px;
    }

    .pagination-container[b-fz1jh10m6u] {
        flex-direction: column;
        gap: 10px;
        padding: 15px;
    }

    .pagination-controls[b-fz1jh10m6u] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .modal-backdrop[b-fz1jh10m6u] {
        padding: 10px;
    }

    .modal-header[b-fz1jh10m6u],
    .modal-body[b-fz1jh10m6u],
    .modal-footer[b-fz1jh10m6u] {
        padding: 15px;
    }
}

@media (max-width: 576px) {
    .stats-section[b-fz1jh10m6u] {
        gap: 8px;
    }

    .stat-item[b-fz1jh10m6u] {
        padding: 8px 10px;
    }

    .stat-number[b-fz1jh10m6u] {
        font-size: 16px;
    }

    .stat-label[b-fz1jh10m6u] {
        font-size: 9px;
    }

    .mobile-dog-info h3[b-fz1jh10m6u] {
        font-size: 14px;
    }

    .mobile-detail-item[b-fz1jh10m6u] {
        font-size: 13px;
    }

    .mobile-actions[b-fz1jh10m6u] {
        gap: 6px;
    }

    .mobile-action-btn[b-fz1jh10m6u] {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .pagination-controls .page-btn[b-fz1jh10m6u] {
        padding: 6px 10px;
        font-size: 12px;
    }
}

/* Utilities */
.me-2[b-fz1jh10m6u] {
    margin-right: 8px;
}

.fas[b-fz1jh10m6u] {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

/* Print Styles */
@media print {
    .filters-section[b-fz1jh10m6u],
    .pagination-container[b-fz1jh10m6u],
    .actions-cell[b-fz1jh10m6u],
    .mobile-actions[b-fz1jh10m6u] {
        display: none !important;
    }

    .table-container[b-fz1jh10m6u] {
        box-shadow: none;
        border: 1px solid #dee2e6;
    }

    .dogs-table[b-fz1jh10m6u] {
        font-size: 12px;
    }

        .dogs-table th[b-fz1jh10m6u],
        .dogs-table td[b-fz1jh10m6u] {
            padding: 8px 6px;
        }
}
/* /Pages/ContactUs.razor.rz.scp.css */
/* Contact Page Styles */
.contact-page[b-p85yhrwlvu] {
    /*   border:1px solid white;
    background-color: white;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0px;*/
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 0;
    margin: 0 auto;
    color: #0f172a;
    max-width: 1200px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1e293b70 0%, #3341557d 100%);
    overflow: hidden;
}

/* Header Section */
.page-header[b-p85yhrwlvu] {
    /*background: linear-gradient(135deg, #1e293b 0%, #334155 100%);*/
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 5px;
    /*  border-top-left-radius: 10px;
    border-top-right-radius: 10px;*/
    border-bottom: 1px solid #cdbc76;
    text-align: center;
    margin-bottom: 0px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    color: #f3d03c;
}

    .page-header h4[b-p85yhrwlvu] {
        font-size: 24px;
        font-weight: 600;
        /*color: #212529;*/
        margin: 0 0 5px 0;
    }

    .page-header p[b-p85yhrwlvu] {
        font-size: 1rem;
        opacity: 0.9;
        /*color: #212529;*/
    }
/* Main Content */
.main-content[b-p85yhrwlvu] {
    padding: 20px;
    background-color: #f8fafceb;
}
/* Contact Options */
.contact-options[b-p85yhrwlvu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding:0px;
    margin-bottom: 20px;
}

.option-card[b-p85yhrwlvu] {
    background: white;
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid #e2e8f0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

    .option-card:hover[b-p85yhrwlvu] {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        border-color: #06b6d4;
    }

    .option-card.active[b-p85yhrwlvu] {
        border-color: #06b6d4;
        background: linear-gradient(135deg, #f0f9ff 0%, #e0f7fa 100%);
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(6, 182, 212, 0.2);
    }

.option-icon[b-p85yhrwlvu] {
    font-size: 3rem;
    margin-bottom: 15px;
}

.option-card h3[b-p85yhrwlvu] {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
}

.option-card p[b-p85yhrwlvu] {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
}

/* Forms Section */
.forms-section[b-p85yhrwlvu] {
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-bottom: 20px;
}

.form-card[b-p85yhrwlvu] {
    padding: 30px;
}

    .form-card h2[b-p85yhrwlvu] {
        color: #1e293b;
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 25px;
        padding-bottom: 15px;
        border-bottom: 2px solid #e2e8f0;
    }

.form-row[b-p85yhrwlvu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.form-group[b-p85yhrwlvu] {
    margin-bottom: 20px;
}

.form-label[b-p85yhrwlvu] {
    font-size: 0.9rem;
    color: #1e293b;
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
}

.form-control[b-p85yhrwlvu], .form-select[b-p85yhrwlvu], .form-textarea[b-p85yhrwlvu] {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    background: white;
    font-family: inherit;
}

    .form-control:focus[b-p85yhrwlvu], .form-select:focus[b-p85yhrwlvu], .form-textarea:focus[b-p85yhrwlvu] {
        outline: none;
        border-color: #06b6d4;
        box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
    }

    .form-control:disabled[b-p85yhrwlvu], .form-select:disabled[b-p85yhrwlvu], .form-textarea:disabled[b-p85yhrwlvu] {
        background-color: #f8fafc;
        color: #64748b;
        cursor: not-allowed;
    }

.form-textarea[b-p85yhrwlvu] {
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
}

.form-check[b-p85yhrwlvu] {
    margin-right: 8px;
    transform: scale(1.2);
}

.form-check-label[b-p85yhrwlvu] {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: #475569;
    cursor: pointer;
}

.submit-button[b-p85yhrwlvu] {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    font-family: inherit;
}

    .submit-button:hover:not(:disabled)[b-p85yhrwlvu] {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(6, 182, 212, 0.3);
    }

    .submit-button:disabled[b-p85yhrwlvu] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        background: #94a3b8;
    }

/* Success and Error Messages */
.success-message[b-p85yhrwlvu] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
}

    .success-message h3[b-p85yhrwlvu] {
        margin-bottom: 10px;
        font-size: 1.2rem;
    }

    .success-message p[b-p85yhrwlvu] {
        margin: 5px 0;
        font-size: 0.95rem;
    }

.error-message[b-p85yhrwlvu] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    padding: 15px;
    border-radius: 8px;
    margin-top: 15px;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.2);
}

    .error-message p[b-p85yhrwlvu] {
        margin: 0;
        font-size: 0.9rem;
    }

/* Validation Messages */
[b-p85yhrwlvu] .validation-message {
    color: #dc2626;
    font-size: 0.8rem;
    margin-top: 5px;
    display: block;
}

/* Direct Contact Info */
.direct-contact[b-p85yhrwlvu] {
    background: #f8fafc;
    padding: 25px;
    border-radius: 10px;
    margin-top: 30px;
    border-left: 4px solid #06b6d4;
}

    .direct-contact h3[b-p85yhrwlvu] {
        color: #1e293b;
        margin-bottom: 15px;
        font-size: 1.2rem;
    }

.contact-info[b-p85yhrwlvu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.contact-item[b-p85yhrwlvu] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #475569;
    font-size: 0.95rem;
}

    .contact-item i[b-p85yhrwlvu] {
        color: #06b6d4;
        width: 20px;
        font-size: 1rem;
    }


/* Floating Label Styles */
.floating-input[b-p85yhrwlvu] {
    position: relative;
    margin-bottom: 20px;
}

    .floating-input input[b-p85yhrwlvu],
    .floating-input select[b-p85yhrwlvu],
    .floating-input textarea[b-p85yhrwlvu] {
        width: 100%;
        padding: 16px 12px 8px 12px;
        font-size: 14px;
        border: 2px solid #e2e8f0;
        border-radius: 8px;
        /*background: transparent;*/
        outline: none;
        transition: all 0.3s ease;
        box-sizing: border-box;
    }

        .floating-input input:focus[b-p85yhrwlvu],
        .floating-input select:focus[b-p85yhrwlvu],
        .floating-input textarea:focus[b-p85yhrwlvu] {
            border-color: #2196f3;
            box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
        }

    .floating-input label[b-p85yhrwlvu] {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 12px;
        font-size: 14px;
        color: #6b7280;
        pointer-events: none;
        transition: all 0.3s ease;
        background: white;
        padding: 0 4px;
        transform-origin: left;
    }

    /* Label moves up when input is focused or has content */
    .floating-input input:focus + label[b-p85yhrwlvu],
    .floating-input input:not(:placeholder-shown) + label[b-p85yhrwlvu],
    .floating-input select:focus + label[b-p85yhrwlvu],
    .floating-input textarea:focus + label[b-p85yhrwlvu],
    .floating-input textarea:not(:placeholder-shown) + label[b-p85yhrwlvu],
    .floating-input.has-value label[b-p85yhrwlvu] {
        top: -8px;
        transform: translateY(0);
        left: 8px;
        font-size: 12px;
        color: #2196f3;
        font-weight: 600;
    }

    .floating-input label.required[b-p85yhrwlvu]::after {
        content: " *";
        color: #dc3545;
    }

    .floating-input select[b-p85yhrwlvu] {
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 12px center;
        background-repeat: no-repeat;
        background-size: 16px;
        padding-right: 40px;
    }

        .floating-input select:focus[b-p85yhrwlvu] {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%232196f3' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        }

    .floating-input textarea[b-p85yhrwlvu] {
        resize: vertical;
        min-height: 80px;
    }

    .floating-input input[type="date"]:not(:focus):not(:valid)[b-p85yhrwlvu] {
        color: transparent;
    }

/* Responsive Design */
@media (max-width: 1024px) {
    .contact-container[b-p85yhrwlvu] {
        max-width: 100%;
        padding: 15px;
    }

    .contact-options[b-p85yhrwlvu] {
        gap: 15px;
    }

    .form-card[b-p85yhrwlvu] {
        padding: 25px;
    }
}

@media (max-width: 768px) {
    .contact-container[b-p85yhrwlvu] {
        padding: 15px;
    }

    .contact-header[b-p85yhrwlvu] {
        padding: 20px;
    }

        .contact-header h1[b-p85yhrwlvu] {
            font-size: 1.6rem;
        }

        .contact-header p[b-p85yhrwlvu] {
            font-size: 1rem;
        }

    .contact-options[b-p85yhrwlvu] {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .option-card[b-p85yhrwlvu] {
        padding: 20px;
    }

    .option-icon[b-p85yhrwlvu] {
        font-size: 2.5rem;
        margin-bottom: 10px;
    }

    .form-card[b-p85yhrwlvu] {
        padding: 20px;
    }

        .form-card h2[b-p85yhrwlvu] {
            font-size: 1.3rem;
            margin-bottom: 20px;
        }

    .form-row[b-p85yhrwlvu] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-info[b-p85yhrwlvu] {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .form-control[b-p85yhrwlvu], .form-select[b-p85yhrwlvu], .form-textarea[b-p85yhrwlvu] {
        padding: 10px 12px;
        font-size: 0.9rem;
    }

    .submit-button[b-p85yhrwlvu] {
        padding: 12px 25px;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .contact-container[b-p85yhrwlvu] {
        padding: 10px;
    }

    .contact-header[b-p85yhrwlvu] {
        padding: 15px;
    }

        .contact-header h1[b-p85yhrwlvu] {
            font-size: 1.4rem;
        }

        .contact-header p[b-p85yhrwlvu] {
            font-size: 0.9rem;
        }

    .form-card[b-p85yhrwlvu] {
        padding: 15px;
    }

    .option-card[b-p85yhrwlvu] {
        padding: 15px;
    }

    .option-icon[b-p85yhrwlvu] {
        font-size: 2rem;
    }

    .option-card h3[b-p85yhrwlvu] {
        font-size: 1.1rem;
    }

    .option-card p[b-p85yhrwlvu] {
        font-size: 0.85rem;
    }

    .form-card h2[b-p85yhrwlvu] {
        font-size: 1.2rem;
    }

    .form-label[b-p85yhrwlvu] {
        font-size: 0.85rem;
    }

    .form-control[b-p85yhrwlvu], .form-select[b-p85yhrwlvu], .form-textarea[b-p85yhrwlvu] {
        padding: 8px 10px;
        font-size: 0.85rem;
    }

    .submit-button[b-p85yhrwlvu] {
        padding: 10px 20px;
        font-size: 0.9rem;
    }

    .direct-contact[b-p85yhrwlvu] {
        padding: 15px;
    }

        .direct-contact h3[b-p85yhrwlvu] {
            font-size: 1.1rem;
        }

    .contact-item[b-p85yhrwlvu] {
        font-size: 0.85rem;
    }
}
/* /Pages/CreateCommunityDog.razor.rz.scp.css */
/* CreateCommunityDog.razor.css - Based on PickupForm.razor.css with community dog specific enhancements */
.formcontrol.autowidth[b-uj2w1515o9] {
    width: auto !important;
}

.form-container[b-uj2w1515o9] {
    background-color: #f8f9fa;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 1024px;
    margin: 0 auto;
    padding: 1rem;
}

/* Header Section */
.header-card[b-uj2w1515o9] {
    background: #deede6;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-content[b-uj2w1515o9] {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.header-left[b-uj2w1515o9] {
    flex: 0 0 auto;
    min-width: 200px;
}

.header-title[b-uj2w1515o9] {
    font-size: 24px;
    font-weight: 600;
    color: #212529;
    margin: 0 0 5px 0;
}

.header-subtitle[b-uj2w1515o9] {
    font-size: 14px;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Form Cards */
.form-card[b-uj2w1515o9] {
    background: white;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
}

.section-header[b-uj2w1515o9] {
    font-size: 16px;
    color: #1e293b;
    margin-bottom: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    text-align: left;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e2e8f0;
}

.form-label[b-uj2w1515o9] {
    font-size: 14px;
    color: #1e293b;
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
}

.form-control[b-uj2w1515o9], .form-select[b-uj2w1515o9] {
    font-size: 14px;
    padding: 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

    .form-control:focus[b-uj2w1515o9], .form-select:focus[b-uj2w1515o9] {
        border-color: #2196f3;
        box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
        outline: none;
    }

.row[b-uj2w1515o9] {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;
}

.col-md-3[b-uj2w1515o9], .col-md-4[b-uj2w1515o9], .col-md-6[b-uj2w1515o9], .col-md-8[b-uj2w1515o9], .col-md-12[b-uj2w1515o9] {
    padding: 10px;
    box-sizing: border-box;
}

.col-md-3[b-uj2w1515o9] {
    flex: 0 0 25%;
}

.col-md-4[b-uj2w1515o9] {
    flex: 0 0 33.333%;
}

.col-md-6[b-uj2w1515o9] {
    flex: 0 0 50%;
}

.col-md-8[b-uj2w1515o9] {
    flex: 0 0 66.666%;
}

.col-md-12[b-uj2w1515o9] {
    flex: 0 0 100%;
}

.col-6[b-uj2w1515o9] {
    flex: 0 0 50%;
}

.col-lg-3[b-uj2w1515o9] {
    flex: 0 0 25%;
}

/* Vaccination Status Grid */
.vaccination-grid[b-uj2w1515o9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 10px;
}

.vaccination-item[b-uj2w1515o9] {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 10px;
}

    .vaccination-item .form-label[b-uj2w1515o9] {
        font-size: 12px;
        font-weight: 600;
        color: #495057;
        margin-bottom: 5px;
    }

/* Location Header */
.location-header[b-uj2w1515o9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.location-title[b-uj2w1515o9] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.2rem;
    color: #1e293b;
    font-weight: 600;
}

.btn-current-location[b-uj2w1515o9] {
    background: #2196f3;
    border-color: #2196f3;
    color: white;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-current-location:hover[b-uj2w1515o9] {
        background: #1976d2;
        border-color: #1976d2;
    }

    .btn-current-location i[b-uj2w1515o9] {
        font-size: 14px;
    }

    .btn-current-location span[b-uj2w1515o9] {
        display: inline; /* Show text on desktop */
    }

.coordinates-row[b-uj2w1515o9] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

/* Media Documentation */
.media-section[b-uj2w1515o9] {
    background: #f1f3f4;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    margin-top: 15px;
    transition: all 0.3s;
}

    .media-section:hover[b-uj2w1515o9] {
        border-color: #2196f3;
        background: #e3f2fd;
    }

/* Mobile Capture Buttons */
.capture-buttons-container[b-uj2w1515o9] {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.mobile-capture-buttons[b-uj2w1515o9] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.mobile-upload-option[b-uj2w1515o9] {
    display: flex;
    align-items: center;
}

.btn-capture-photo[b-uj2w1515o9], .btn-capture-video[b-uj2w1515o9] {
    background: #2196f3;
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-capture-video[b-uj2w1515o9] {
    background: #f44336;
}

.btn-capture-photo:hover[b-uj2w1515o9] {
    background: #1976d2;
    transform: scale(1.1);
}

.btn-capture-video:hover[b-uj2w1515o9] {
    background: #d32f2f;
    transform: scale(1.1);
}

.btn-upload-files[b-uj2w1515o9] {
    background: #4caf50;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-upload-files:hover[b-uj2w1515o9] {
        background: #388e3c;
    }

/* Buttons */
.btn[b-uj2w1515o9] {
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
}

.btn-primary[b-uj2w1515o9] {
    background: #2196f3;
    color: white;
}

    .btn-primary:hover[b-uj2w1515o9] {
        background: #1976d2;
    }

.btn-outline-secondary[b-uj2w1515o9] {
    background: white;
    border: 2px solid #dee2e6;
    color: #495057;
}

    .btn-outline-secondary:hover[b-uj2w1515o9] {
        background: #f8f9fa;
    }

.btn-outline-danger[b-uj2w1515o9] {
    background: white;
    border: 1px solid #dc3545;
    color: #dc3545;
    padding: 5px 10px;
    font-size: 12px;
}

    .btn-outline-danger:hover[b-uj2w1515o9] {
        background: #dc3545;
        color: white;
    }

.btn-sm[b-uj2w1515o9] {
    padding: 5px 10px;
    font-size: 12px;
}

.btn-link[b-uj2w1515o9] {
    background: none;
    border: none;
    color: #2196f3;
    padding: 5px 10px;
    text-decoration: none;
}

    .btn-link:hover[b-uj2w1515o9] {
        color: #1976d2;
        text-decoration: underline;
    }

.btn-lg[b-uj2w1515o9] {
    padding: 15px 40px;
    font-size: 16px;
}

/* Alert */
.alert-custom[b-uj2w1515o9] {
    background: #e3f2fd;
    border: 1px solid #2196f3;
    color: #1976d2;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 20px;
}

.alert-info[b-uj2w1515o9] {
    background: #e3f2fd;
    border: 1px solid #2196f3;
    color: #1976d2;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 20px;
}

/* Image and Media Styles */
.image-thumbnail[b-uj2w1515o9] {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

.image-card[b-uj2w1515o9] {
    background: white;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    position: relative;
}

.video-thumbnail-container[b-uj2w1515o9] {
    position: relative;
}

.media-type-badge[b-uj2w1515o9] {
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
}

.status-overlay[b-uj2w1515o9] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    padding: 4px 8px;
    font-size: 0.75rem;
    color: white;
}

    .status-overlay .text-success[b-uj2w1515o9] {
        color: #28a745 !important;
    }

    .status-overlay .text-danger[b-uj2w1515o9] {
        color: #dc3545 !important;
    }

/* Processing Overlay */
.processing-overlay[b-uj2w1515o9] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.processing-modal[b-uj2w1515o9] {
    background: white;
    border-radius: 12px;
    padding: 30px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.processing-content[b-uj2w1515o9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.processing-spinner .spinner-border-lg[b-uj2w1515o9] {
    width: 3rem;
    height: 3rem;
    border-width: 4px;
}

.processing-title[b-uj2w1515o9] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.processing-message[b-uj2w1515o9] {
    font-size: 14px;
    color: #6c757d;
    margin: 0;
}

.processing-progress[b-uj2w1515o9] {
    width: 100%;
}

.progress[b-uj2w1515o9] {
    height: 8px;
    background-color: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
}

.progress-bar[b-uj2w1515o9] {
    height: 100%;
    background: linear-gradient(90deg, #2196f3, #1976d2);
    transition: width 0.3s ease;
    border-radius: 4px;
}

.progress-text[b-uj2w1515o9] {
    font-size: 12px;
    color: #6c757d;
    margin-top: 5px;
    display: block;
}

.processing-note[b-uj2w1515o9] {
    font-size: 12px;
    color: #6c757d;
    margin: 0;
}

/* Bootstrap Grid Utility Classes */
.d-none[b-uj2w1515o9] {
    display: none !important;
}

.d-flex[b-uj2w1515o9] {
    display: flex !important;
}

.justify-content-between[b-uj2w1515o9] {
    justify-content: space-between !important;
}

.justify-content-center[b-uj2w1515o9] {
    justify-content: center !important;
}

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

.me-1[b-uj2w1515o9] {
    margin-right: 4px !important;
}

.me-2[b-uj2w1515o9] {
    margin-right: 8px !important;
}

.mb-3[b-uj2w1515o9] {
    margin-bottom: 1rem !important;
}

.mt-2[b-uj2w1515o9] {
    margin-top: 0.5rem !important;
}

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

.p-2[b-uj2w1515o9] {
    padding: 0.5rem !important;
}

.text-muted[b-uj2w1515o9] {
    color: #6c757d !important;
}

.text-danger[b-uj2w1515o9] {
    color: #dc3545 !important;
}

.text-success[b-uj2w1515o9] {
    color: #28a745 !important;
}

/* Spinner */
.spinner-border[b-uj2w1515o9] {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: -0.125em;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-uj2w1515o9 0.75s linear infinite;
}

.spinner-border-sm[b-uj2w1515o9] {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
}

@keyframes spinner-border-b-uj2w1515o9 {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .form-container[b-uj2w1515o9] {
        padding: 0.5rem;
    }

    .col-md-3[b-uj2w1515o9], .col-md-4[b-uj2w1515o9], .col-md-6[b-uj2w1515o9], .col-md-8[b-uj2w1515o9] {
        flex: 0 0 100%;
    }

    .col-6[b-uj2w1515o9] {
        flex: 0 0 50%;
    }

    .vaccination-grid[b-uj2w1515o9] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .header-content[b-uj2w1515o9] {
        padding: 15px;
        flex-direction: column;
        gap: 10px;
    }

    .header-title[b-uj2w1515o9] {
        font-size: 20px;
    }

    .section-header[b-uj2w1515o9] {
        font-size: 1.1rem;
        padding-bottom: 8px;
    }

    .form-label[b-uj2w1515o9] {
        font-size: 12px;
        margin-bottom: 6px;
    }

    .form-control[b-uj2w1515o9], .form-select[b-uj2w1515o9] {
        font-size: 12px;
        padding: 0.5rem 0.75rem;
    }

    /* Mobile capture buttons layout */
    .capture-buttons-container[b-uj2w1515o9] {
        display: flex;
        flex-direction: row;
        gap: 8px;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .mobile-capture-buttons[b-uj2w1515o9] {
        display: flex;
        flex-direction: row;
        gap: 8px;
        flex: 2;
    }

    .mobile-upload-option[b-uj2w1515o9] {
        flex: 1;
        display: flex;
        justify-content: center;
    }

    .location-header[b-uj2w1515o9] {
        flex-direction: row;
        gap: 10px;
        align-items: stretch;
    }

    .btn-current-location[b-uj2w1515o9] {
        background: #2196f3;
        border-color: #2196f3;
        color: white;
        padding: 8px 10px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        min-width: 40px;
        height: 36px;
        max-width: 40px;
    }

        /* MOBILE: Hide text, show icon only for current location button */
        .btn-current-location span[b-uj2w1515o9] {
            display: none !important;
        }

        .btn-current-location i[b-uj2w1515o9] {
            font-size: 16px;
            margin: 0 !important;
        }

    .coordinates-row[b-uj2w1515o9] {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }
}

@media (max-width: 576px) {
    .form-card[b-uj2w1515o9] {
        padding: 15px;
        margin-bottom: 15px;
    }

    .vaccination-item[b-uj2w1515o9] {
        padding: 8px;
    }

    .media-section[b-uj2w1515o9] {
        padding: 15px;
    }

    .image-thumbnail[b-uj2w1515o9] {
        height: 100px;
    }

    .col-6[b-uj2w1515o9] {
        flex: 0 0 100%;
    }

    .location-header[b-uj2w1515o9] {
        flex-direction: row;
        gap: 10px;
        align-items: stretch;
    }
}

@media (max-width: 480px) {
    .btn-current-location[b-uj2w1515o9] {
        padding: 6px 8px;
        font-size: 10px;
        max-width: 40px;
    }

    .location-header[b-uj2w1515o9] {
        flex-direction: row;
        gap: 10px;
        align-items: stretch;
    }
}
/* /Pages/DogDetails.razor.rz.scp.css */
.form-container[b-4w26lvuev3] {
    background-color: #f8f9fa;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 1024px;
    margin: 0 auto;
}
.header-card[b-4w26lvuev3] {
    background: #deede6;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    margin-bottom: 0px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-content[b-4w26lvuev3] {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.header-left[b-4w26lvuev3] {
    flex: 0 0 auto;
    min-width: 200px;
}

.header-title[b-4w26lvuev3] {
    font-size: 24px;
    font-weight: 600;
    color: #212529;
    margin: 0 0 5px 0;
}

.header-subtitle[b-4w26lvuev3] {
    font-size: 14px;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 8px;
}
.form-card[b-4w26lvuev3] {
    background: white;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    /*margin-bottom: 1rem;*/
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.card-header-custom[b-4w26lvuev3] {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 1rem;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    font-size: 14px;
    color: #495057;
}

.card-content[b-4w26lvuev3] {
    padding: 1rem;
}

.section-header[b-4w26lvuev3] {
    /*background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 0.75rem 1rem;
    margin: -1rem -1rem 1rem -1rem;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    font-size: 14px;
    color: #495057;*/
    font-size: 1.2rem;
    color: #1e293b;
    margin-bottom: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e2e8f0;
}

.form-label[b-4w26lvuev3] {
    /* font-size: 12px;
    font-weight: 500;
    color: #495057;
    margin-bottom: 0.5rem;*/
    font-size: 16px;
    color: #1e293b;
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
}

.detail-field[b-4w26lvuev3] {
    font-size: 16px;
    color: #495057;
    line-height: 1.5;
}

    .detail-field .form-label[b-4w26lvuev3] {
        font-weight: 600;
        margin-bottom: 0;
        margin-right: 0.5rem;
    }

.form-control[b-4w26lvuev3], .form-select[b-4w26lvuev3] {
    font-size: 12px;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

    .form-control:focus[b-4w26lvuev3], .form-select:focus[b-4w26lvuev3] {
        border-color: #2196f3;
        box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
    }

.btn-sm-custom[b-4w26lvuev3] {
    padding: 0.5rem 1rem;
    font-size: 12px;
    border-radius: 4px;
    text-decoration: none;
    border: 1px solid #ced4da;
    background: white;
    color: #495057;
    font-weight: 500;
}

    .btn-sm-custom:hover[b-4w26lvuev3] {
        background: #f8f9fa;
        color: #495057;
        text-decoration: none;
        border-color: #adb5bd;
    }

.btn-primary-custom[b-4w26lvuev3] {
    background: #2196f3;
    border-color: #2196f3;
    color: white;
}

    .btn-primary-custom:hover[b-4w26lvuev3] {
        background: #1976d2;
        border-color: #1976d2;
        color: white;
    }

.btn-success-custom[b-4w26lvuev3] {
    background: #198754;
    border-color: #198754;
    color: white;
}

    .btn-success-custom:hover[b-4w26lvuev3] {
        background: #157347;
        border-color: #157347;
        color: white;
    }

.status-badge[b-4w26lvuev3] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #e3f2fd;
    border: 1px solid #2196f3;
    color: #1976d2;
}

.badge-healthy[b-4w26lvuev3] {
    background: #d1e7dd;
    border: 1px solid #198754;
    color: #0f5132;
}

.badge-friendly[b-4w26lvuev3] {
    background: #cff4fc;
    border: 1px solid #0dcaf0;
    color: #055160;
}

.badge-medium[b-4w26lvuev3] {
    background: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
}

.badge-local[b-4w26lvuev3] {
    background: #e3f2fd;
    border: 1px solid #2196f3;
    color: #1976d2;
}

.badge-pending[b-4w26lvuev3] {
    background: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
}

.image-thumbnail[b-4w26lvuev3] {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    cursor: pointer;
    transition: transform 0.2s ease;
}

/* Only apply hover effect to images, not videos */
img.image-thumbnail:hover[b-4w26lvuev3] {
    transform: scale(1.02);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Remove hover effect from videos */
video.image-thumbnail[b-4w26lvuev3] {
    background: #000;
    cursor: default;
}

video.image-thumbnail:hover[b-4w26lvuev3] {
    transform: none;
    box-shadow: none;
}

.image-card[b-4w26lvuev3] {
    background: white;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    position: relative;
}

.alert-custom[b-4w26lvuev3] {
    background: #e3f2fd;
    border: 1px solid #2196f3;
    color: #1976d2;
    border-radius: 4px;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

.photo-capture-section[b-4w26lvuev3] {
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    margin-bottom: 1rem;
}

    .photo-capture-section:hover[b-4w26lvuev3] {
        border-color: #2196f3;
        background: #e3f2fd;
    }

.actions-section[b-4w26lvuev3] {
    background: white;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    margin-top: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* NEW: Video support styles */
.video-thumbnail-container[b-4w26lvuev3] {
    position: relative;
}

.media-type-badge[b-4w26lvuev3] {
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    z-index: 2;
}

.duration-indicator[b-4w26lvuev3] {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 2px 4px;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 500;
    z-index: 2;
}

.file-size-text[b-4w26lvuev3] {
    color: #6c757d;
    font-size: 9px;
}

/* Video specific styles */
video.image-thumbnail[b-4w26lvuev3] {
    background: #000;
    cursor: default;
}

video.image-thumbnail[b-4w26lvuev3]::-webkit-media-controls {
    height: 30px;
    background: transparent;
}

video.image-thumbnail[b-4w26lvuev3]::-webkit-media-controls-panel {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
}

video.image-thumbnail[b-4w26lvuev3]::-webkit-media-controls-play-button,
video.image-thumbnail[b-4w26lvuev3]::-webkit-media-controls-volume-slider,
video.image-thumbnail[b-4w26lvuev3]::-webkit-media-controls-timeline {
    filter: brightness(1.2);
}

/* Ensure video controls are always visible and functional */
video.image-thumbnail[b-4w26lvuev3]::-webkit-media-controls-enclosure {
    background: transparent;
}
/* Hover effects - only for badges, not media */
.image-card:hover .media-type-badge[b-4w26lvuev3] {
    background: rgba(33, 150, 243, 0.9);
    transition: background 0.2s ease;
}

.image-card:hover .duration-indicator[b-4w26lvuev3] {
    background: rgba(33, 150, 243, 0.9);
    transition: background 0.2s ease;
}
/* Remove any overlay effects that might cause black overlay */
.image-card[b-4w26lvuev3]::before,
.image-card[b-4w26lvuev3]::after {
    display: none;
}

.video-thumbnail-container[b-4w26lvuev3]::before,
.video-thumbnail-container[b-4w26lvuev3]::after {
    display: none;
}

/* Status indicators for pending uploads */
.image-card .status-badge[b-4w26lvuev3] {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 3;
    font-size: 8px;
    padding: 2px 6px;
}

/* Responsive adjustments for media cards */
@media (max-width: 768px) {
    .image-thumbnail[b-4w26lvuev3] {
        height: 100px;
    }
    
    .media-type-badge[b-4w26lvuev3] {
        font-size: 9px;
        padding: 2px 4px;
    }
    
    .duration-indicator[b-4w26lvuev3] {
        font-size: 9px;
        padding: 1px 3px;
    }
    
    .file-size-text[b-4w26lvuev3] {
        font-size: 8px;
    }
}

@media (max-width: 576px) {
    .image-thumbnail[b-4w26lvuev3] {
        height: 80px;
    }
    
    .media-type-badge[b-4w26lvuev3] {
        font-size: 8px;
        padding: 1px 3px;
    }
    
    .duration-indicator[b-4w26lvuev3] {
        font-size: 8px;
        padding: 1px 2px;
    }
}

/* Loading states */
.media-loading[b-4w26lvuev3] {
    position: relative;
}

.media-loading[b-4w26lvuev3]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #2196f3;
    border-radius: 50%;
    animation: spin-b-4w26lvuev3 1s linear infinite;
}

@keyframes spin-b-4w26lvuev3 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .form-container[b-4w26lvuev3] {
        padding: 0.5rem;
    }

    .card-content[b-4w26lvuev3] {
        padding: 0.75rem;
    }

    .section-header[b-4w26lvuev3] {
        padding: 0.5rem 0.75rem;
        margin: -0.75rem -0.75rem 0.75rem -0.75rem;
    }

    .actions-section[b-4w26lvuev3] {
        padding: 1rem;
    }

    .btn-sm-custom[b-4w26lvuev3] {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .image-thumbnail[b-4w26lvuev3] {
        height: 100px;
    }
}

@media (max-width: 576px) {
    .form-container[b-4w26lvuev3] {
        padding: 0.25rem;
    }

    .card-content[b-4w26lvuev3] {
        padding: 0.5rem;
    }

    .section-header[b-4w26lvuev3] {
        padding: 0.5rem;
        margin: -0.5rem -0.5rem 0.5rem -0.5rem;
        font-size: 13px;
    }

    .form-label[b-4w26lvuev3] {
        font-size: 11px;
    }

    .detail-field[b-4w26lvuev3] {
        font-size: 11px;
    }

    .status-badge[b-4w26lvuev3] {
        font-size: 9px;
        padding: 3px 8px;
    }

    .image-thumbnail[b-4w26lvuev3] {
        height: 80px;
    }

    .photo-capture-section[b-4w26lvuev3] {
        padding: 1rem;
    }

    .actions-section[b-4w26lvuev3] {
        padding: 0.75rem;
    }
}
/* /Pages/EditDog.razor.rz.scp.css */
.form-container[b-2ey6wkn616] {
    background-color: #f8f9fa;
    min-height: 100vh;
    padding: 1rem;
}

.form-card[b-2ey6wkn616] {
    background: white;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.card-header-custom[b-2ey6wkn616] {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 1rem;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    font-size: 14px;
    color: #495057;
}

.card-content[b-2ey6wkn616] {
    padding: 1rem;
}

.section-header[b-2ey6wkn616] {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 0.75rem 1rem;
    margin: -1rem -1rem 1rem -1rem;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    font-size: 14px;
    color: #495057;
}

.form-label[b-2ey6wkn616] {
    font-size: 12px;
    font-weight: 500;
    color: #495057;
    margin-bottom: 0.5rem;
}
.detail-field[b-2ey6wkn616] {
    font-size: 12px;
    color: #495057;
    line-height: 1.5;
}

    .detail-field .form-label[b-2ey6wkn616] {
        font-weight: 600;
        margin-bottom: 0;
        margin-right: 0.5rem;
    }

.form-control[b-2ey6wkn616], .form-select[b-2ey6wkn616] {
    font-size: 12px;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

    .form-control:focus[b-2ey6wkn616], .form-select:focus[b-2ey6wkn616] {
        border-color: #ffc107;
        box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
    }

/* Readonly field styling for details view */
.readonly-field[b-2ey6wkn616] {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    color: #495057;
    cursor: default;
    min-height: 38px;
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-size: 12px;
    border-radius: 4px;
}

.btn-sm-custom[b-2ey6wkn616] {
    padding: 0.5rem 1rem;
    font-size: 12px;
    border-radius: 4px;
    text-decoration: none;
    border: 1px solid #ced4da;
    background: white;
    color: #495057;
    font-weight: 500;
}

    .btn-sm-custom:hover[b-2ey6wkn616] {
        background: #f8f9fa;
        color: #495057;
        text-decoration: none;
        border-color: #adb5bd;
    }

.btn-primary-custom[b-2ey6wkn616] {
    background: #2196f3;
    border-color: #2196f3;
    color: white;
}

    .btn-primary-custom:hover[b-2ey6wkn616] {
        background: #1976d2;
        border-color: #1976d2;
        color: white;
    }

.btn-success-custom[b-2ey6wkn616] {
    background: #198754;
    border-color: #198754;
    color: white;
}

    .btn-success-custom:hover[b-2ey6wkn616] {
        background: #157347;
        border-color: #157347;
        color: white;
    }

.btn-warning-custom[b-2ey6wkn616] {
    background: #ffc107;
    border-color: #ffc107;
    color: #212529;
}

    .btn-warning-custom:hover[b-2ey6wkn616] {
        background: #e0a800;
        border-color: #d39e00;
        color: #212529;
    }
.status-badge[b-2ey6wkn616] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #e3f2fd;
    border: 1px solid #2196f3;
    color: #1976d2;
}
/* Badge variants */
.badge-success[b-2ey6wkn616] {
    background: #d1e7dd;
    border: 1px solid #198754;
    color: #0f5132;
}

.badge-warning[b-2ey6wkn616] {
    background: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
}

.badge-danger[b-2ey6wkn616] {
    background: #f8d7da;
    border: 1px solid #dc3545;
    color: #721c24;
}

.badge-info[b-2ey6wkn616] {
    background: #cff4fc;
    border: 1px solid #0dcaf0;
    color: #055160;
}

.badge-secondary[b-2ey6wkn616] {
    background: #e2e3e5;
    border: 1px solid #6c757d;
    color: #383d41;
}

.image-thumbnail[b-2ey6wkn616] {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    cursor: pointer;
    transition: transform 0.2s;
}

    .image-thumbnail:hover[b-2ey6wkn616] {
        transform: scale(1.05);
    }

.image-card[b-2ey6wkn616] {
    background: white;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.alert-custom[b-2ey6wkn616] {
    background: #e3f2fd;
    border: 1px solid #2196f3;
    color: #1976d2;
    border-radius: 4px;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

.photo-capture-section[b-2ey6wkn616] {
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    margin-bottom: 1rem;
}

    .photo-capture-section:hover[b-2ey6wkn616] {
        border-color: #2196f3;
        background: #e3f2fd;
    }

.actions-section[b-2ey6wkn616] {
    background: white;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    margin-top: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .form-container[b-2ey6wkn616] {
        padding: 0.5rem;
    }

    .card-content[b-2ey6wkn616] {
        padding: 0.75rem;
    }

    .section-header[b-2ey6wkn616] {
        padding: 0.5rem 0.75rem;
        margin: -0.75rem -0.75rem 0.75rem -0.75rem;
    }

    .actions-section[b-2ey6wkn616] {
        padding: 1rem;
    }

    .btn-sm-custom[b-2ey6wkn616] {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    .image-thumbnail[b-2ey6wkn616] {
        height: 100px;
    }
}

@media (max-width: 576px) {
    .form-container[b-2ey6wkn616] {
        padding: 0.25rem;
    }

    .card-content[b-2ey6wkn616] {
        padding: 0.5rem;
    }

    .section-header[b-2ey6wkn616] {
        padding: 0.5rem;
        margin: -0.5rem -0.5rem 0.5rem -0.5rem;
        font-size: 13px;
    }

    .form-label[b-2ey6wkn616] {
        font-size: 11px;
    }

    .form-control[b-2ey6wkn616], .form-select[b-2ey6wkn616], .readonly-field[b-2ey6wkn616] {
        font-size: 11px;
        padding: 0.4rem 0.6rem;
    }

    .status-badge[b-2ey6wkn616] {
        font-size: 9px;
        padding: 3px 8px;
    }

    .image-thumbnail[b-2ey6wkn616] {
        height: 80px;
    }

    .photo-capture-section[b-2ey6wkn616] {
        padding: 1rem;
    }

    .actions-section[b-2ey6wkn616] {
        padding: 0.75rem;
    }
}
/* /Pages/HomePage.razor.rz.scp.css */
/* Reset and Base Styles */
*[b-p8shk399xd] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.formcontrol.autowidth[b-p8shk399xd] {
    width: auto !important;
}

.form-container[b-p8shk399xd] {
    /*background-color: #f8f9fa;*/
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 1200px;
    margin: 0 auto;
    background-color: #4a5e72a3;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    /*padding: 1rem;*/
}

.unified-dashboard[b-p8shk399xd] {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    /*  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);*/
   /* background: rgba(255, 255, 255, 0.15);*/
    backdrop-filter: blur(10px);
    min-height: 100vh;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* Header */
.header[b-p8shk399xd] {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: white;
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.header-content[b-p8shk399xd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.logo-section[b-p8shk399xd] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo[b-p8shk399xd] {
    width: 45px;
    height: 45px;
    background: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #1e293b;
    font-size: 18px;
}

.brand-text[b-p8shk399xd] {
    display: flex;
    flex-direction: column;
}

.brand-name[b-p8shk399xd] {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

.brand-tagline[b-p8shk399xd] {
    font-size: 12px;
    opacity: 0.9;
    font-weight: 400;
}

/* Navigation */
.main-nav[b-p8shk399xd] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.nav-item[b-p8shk399xd] {
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    font-size: 14px;
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid transparent;
}

    .nav-item:hover[b-p8shk399xd] {
        background: rgba(255, 255, 255, 0.2);
        transform: translateY(-1px);
    }

    .nav-item.active[b-p8shk399xd] {
        background: rgba(255, 255, 255, 0.25);
        border-color: rgba(255, 255, 255, 0.3);
    }

.user-menu[b-p8shk399xd] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.notification-btn[b-p8shk399xd] {
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .notification-btn:hover[b-p8shk399xd] {
        background: rgba(255, 255, 255, 0.2);
    }

.notification-badge[b-p8shk399xd] {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #ef4444;
    color: white;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 10px;
    font-weight: 600;
}

.user-avatar[b-p8shk399xd] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .user-avatar:hover[b-p8shk399xd] {
        transform: scale(1.05);
    }

/* Mobile Navigation */
.mobile-nav-toggle[b-p8shk399xd] {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 8px;
}

.mobile-nav[b-p8shk399xd] {
    position: fixed;
    top: 0;
    left: -100%;
    width: 280px;
    height: 100vh;
    background: white;
    z-index: 2000;
    transition: left 0.3s ease;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    padding: 80px 24px 24px;
}

    .mobile-nav.active[b-p8shk399xd] {
        left: 0;
    }

    .mobile-nav .nav-item[b-p8shk399xd] {
        background: #f8fafc;
        color: #1e293b;
        margin-bottom: 12px;
        border-radius: 12px;
        padding: 16px;
    }

        .mobile-nav .nav-item.active[b-p8shk399xd] {
            background: #3b82f6;
            color: white;
        }

.mobile-nav-overlay[b-p8shk399xd] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1500;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

    .mobile-nav-overlay.active[b-p8shk399xd] {
        opacity: 1;
        visibility: visible;
    }

/* Service Verticals Section */
.service-verticals[b-p8shk399xd] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px;
}

.page-title[b-p8shk399xd] {
    text-align: center;
    margin-bottom: 48px;
}

    .page-title h1[b-p8shk399xd] {
        font-size: 36px;
        font-weight: 700;
        color: white;
        margin-bottom: 12px;
    }

.page-subtitle[b-p8shk399xd] {
    font-size: 18px;
    color: white;
    max-width: 600px;
    margin: 0 auto;
}

/* Emergency Alert */
.emergency-alert[b-p8shk399xd] {
    /*background: linear-gradient(135deg, #dc2626, #ef4444);*/
   background: linear-gradient(135deg, rgb(238, 90, 36), rgb(255, 107, 107));
    color: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    gap: 16px;
    animation: pulse-border-b-p8shk399xd 2s infinite;
}

@keyframes pulse-border-b-p8shk399xd {
    0% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(220, 38, 38, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0);
    }
}

.alert-icon[b-p8shk399xd] {
    font-size: 32px;
    animation: bounce-b-p8shk399xd 1s infinite;
}

@keyframes bounce-b-p8shk399xd {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-5px);
    }

    60% {
        transform: translateY(-3px);
    }
}

.alert-content[b-p8shk399xd] {
    flex: 1;
}

    .alert-content h3[b-p8shk399xd] {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 4px;
    }

    .alert-content p[b-p8shk399xd] {
        opacity: 0.9;
        font-size: 14px;
    }

.alert-actions[b-p8shk399xd] {
    display: flex;
    gap: 12px;
}

/* Vertical Cards */
.verticals-grid[b-p8shk399xd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 32px;
    margin-bottom: 48px;
}

.vertical-card[b-p8shk399xd] {
    background: #ffffff;
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

    .vertical-card[b-p8shk399xd]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, var(--accent-color), var(--accent-color-light));
    }

    .vertical-card:hover[b-p8shk399xd] {
        transform: translateY(-8px);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    }

    .vertical-card.community[b-p8shk399xd] {
        --accent-color: #10b981;
        --accent-color-light: #34d399;
    }

    .vertical-card.blood[b-p8shk399xd] {
        --accent-color: #ef4444;
        --accent-color-light: #f87171;
    }

.vertical-header[b-p8shk399xd] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.vertical-icon[b-p8shk399xd] {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
}

.vertical-card.community .vertical-icon[b-p8shk399xd] {
    background: linear-gradient(135deg, #10b981, #34d399);
}

.vertical-card.blood .vertical-icon[b-p8shk399xd] {
    background: linear-gradient(135deg, #ef4444, #f87171);
}

.vertical-title[b-p8shk399xd] {
    font-size: 24px;
    font-weight: 700;
    color: black;
    margin-bottom: 4px;
}

.vertical-description[b-p8shk399xd] {
    color: black;
    font-size: 14px;
}

/* Service Items */
.services-list[b-p8shk399xd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.service-item[b-p8shk399xd] {
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #cbd5e1;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

    .service-item:hover[b-p8shk399xd] {
        background: #f1f5f9;
        /*transform: translateY(-2px);*/
        border: 2px solid #cbd5e1;
    }

    .service-item:active[b-p8shk399xd] {
        transform: scale(0.98);
    }

.service-item-header[b-p8shk399xd] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.service-item-icon[b-p8shk399xd] {
    font-size: 20px;
}

.service-item-name[b-p8shk399xd] {
    font-weight: 600;
    color: #1e293b;
    font-size: 15px;
}

.service-item-description[b-p8shk399xd] {
    color: #64748b;
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 12px;
}

.service-item-stats[b-p8shk399xd] {
    display: flex;
    justify-content: flex-end;
}

.stat-badge[b-p8shk399xd] {
    background: #e2e8f0;
    color: #64748b;
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
}

    .stat-badge.urgent[b-p8shk399xd] {
        background: #fee2e2;
        color: #dc2626;
    }

    .stat-badge.success[b-p8shk399xd] {
        background: #dcfce7;
        color: #16a34a;
    }

/* Buttons */
.vertical-action[b-p8shk399xd] {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.btn[b-p8shk399xd] {
    padding: 12px 28px;
    border-radius: 10px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

    .btn:disabled[b-p8shk399xd] {
        opacity: 0.7;
        cursor: not-allowed;
    }

.btn-primary[b-p8shk399xd] {
    background: linear-gradient(135deg, var(--accent-color), var(--accent-color-light));
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-p8shk399xd] {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    }

.btn-outline[b-p8shk399xd] {
    background: transparent;
    border: 1px solid #e2e8f0;
    color: #64748b;
}

    .btn-outline:hover[b-p8shk399xd] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

.btn-emergency[b-p8shk399xd] {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    color: white;
}

    .btn-emergency:hover[b-p8shk399xd] {
        background: linear-gradient(135deg, #b91c1c, #dc2626);
    }

.btn-respond[b-p8shk399xd] {
    background: #ffffff;
    color: #ee5a24;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
    .btn-respond:hover[b-p8shk399xd] {
        background: #f8f9fa;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

.btn-dismiss[b-p8shk399xd] {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .btn-dismiss:hover[b-p8shk399xd] {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.5);
    }

/* Loading Spinner */
.loading-spinner[b-p8shk399xd] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin-b-p8shk399xd 1s linear infinite;
}

.loading-spinner-large[b-p8shk399xd] {
    width: 40px;
    height: 40px;
    border: 4px solid #e2e8f0;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    animation: spin-b-p8shk399xd 1s linear infinite;
}

@keyframes spin-b-p8shk399xd {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Stats Section */
.platform-stats[b-p8shk399xd] {
    background: #ffffff;
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 32px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.stats-title[b-p8shk399xd] {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 32px;
}

.stats-grid[b-p8shk399xd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
}

.stat-item[b-p8shk399xd] {
    text-align: center;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .stat-item:hover[b-p8shk399xd] {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }

.stat-number[b-p8shk399xd] {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 8px;
}

.stat-label[b-p8shk399xd] {
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
}

.stat-trend[b-p8shk399xd] {
    font-size: 12px;
    color: #10b981;
    font-weight: 500;
}

.stat-item.community .stat-number[b-p8shk399xd] {
    color: #10b981;
}

.stat-item.blood .stat-number[b-p8shk399xd] {
    color: #ef4444;
}

.stat-item.general .stat-number[b-p8shk399xd] {
    color: #3b82f6;
}

/* Recent Activity */
.recent-activity[b-p8shk399xd] {
    background: #cfcddd;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.activity-header[b-p8shk399xd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.activity-title[b-p8shk399xd] {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
}

.view-all-link[b-p8shk399xd] {
    color: #3b82f6;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s ease;
}

    .view-all-link:hover[b-p8shk399xd] {
        color: #1d4ed8;
    }

.activity-list[b-p8shk399xd] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.activity-item[b-p8shk399xd] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

    .activity-item:hover[b-p8shk399xd] {
        background: #f1f5f9;
        transform: translateY(-1px);
    }

    .activity-item.community[b-p8shk399xd] {
        border-left: 4px solid #10b981;
    }

    .activity-item.blood[b-p8shk399xd] {
        border-left: 4px solid #ef4444;
    }

.activity-icon[b-p8shk399xd] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
    flex-shrink: 0;
}

.activity-item.community .activity-icon[b-p8shk399xd] {
    background: linear-gradient(135deg, #10b981, #34d399);
}

.activity-item.blood .activity-icon[b-p8shk399xd] {
    background: linear-gradient(135deg, #ef4444, #f87171);
}

.activity-content[b-p8shk399xd] {
    flex: 1;
}

.activity-title-text[b-p8shk399xd] {
    font-weight: 600;
    color: #1e293b;
    font-size: 14px;
    margin-bottom: 4px;
}

.activity-description[b-p8shk399xd] {
    color: #64748b;
    font-size: 13px;
    line-height: 1.4;
}

.activity-time[b-p8shk399xd] {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
}

/* Loading Overlay */
.loading-overlay[b-p8shk399xd] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-content[b-p8shk399xd] {
    background: white;
    padding: 40px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

    .loading-content p[b-p8shk399xd] {
        margin-top: 20px;
        color: #64748b;
        font-weight: 500;
    }

/* Mobile Responsive */
@media (max-width: 768px) {
    .header-content[b-p8shk399xd] {
        padding: 12px 16px;
    }

    .brand-name[b-p8shk399xd] {
        font-size: 18px;
    }

    .main-nav[b-p8shk399xd] {
        display: none;
    }

    .mobile-nav-toggle[b-p8shk399xd] {
        display: block;
    }

    .verticals-grid[b-p8shk399xd] {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .vertical-card[b-p8shk399xd] {
        padding: 24px;
    }

    .services-list[b-p8shk399xd] {
        grid-template-columns: 1fr;
    }

    .page-title h1[b-p8shk399xd] {
        font-size: 28px;
    }

    .service-verticals[b-p8shk399xd] {
        padding: 24px 16px;
    }

    .stats-grid[b-p8shk399xd] {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .emergency-alert[b-p8shk399xd] {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .alert-actions[b-p8shk399xd] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .activity-item[b-p8shk399xd] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .activity-time[b-p8shk399xd] {
        align-self: flex-end;
    }
}

@media (max-width: 480px) {
    .page-title h1[b-p8shk399xd] {
        font-size: 24px;
    }

    .stats-grid[b-p8shk399xd] {
        grid-template-columns: 1fr;
    }

    .vertical-card[b-p8shk399xd] {
        padding: 20px;
    }

    .platform-stats[b-p8shk399xd],
    .recent-activity[b-p8shk399xd] {
        padding: 24px;
    }
}

/* Animation Classes */
.fade-in[b-p8shk399xd] {
    animation: fadeIn-b-p8shk399xd 0.6s ease-out;
}

@keyframes fadeIn-b-p8shk399xd {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.slide-up[b-p8shk399xd] {
    animation: slideUp-b-p8shk399xd 0.4s ease-out;
}

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

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

/* Focus States for Accessibility */
.nav-item:focus[b-p8shk399xd],
/*.service-item:focus,*/
.btn:focus[b-p8shk399xd],
.stat-item:focus[b-p8shk399xd] {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .vertical-card[b-p8shk399xd] {
        border-width: 2px;
    }

    .service-item[b-p8shk399xd] {
        border-width: 2px;
    }

    .btn[b-p8shk399xd] {
        border-width: 2px;
    }
}
/* /Pages/Organisation/RegisterOrganisation.razor.rz.scp.css */
/* OrganizationRegistration.razor.css - Based on CreateCommunityDog.razor.css styling */

.form-container[b-ablps9h0it] {
    background-color: #f8f9fa;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 1024px;
    margin: 0 auto;
    padding: 1rem;
}

/* Header Section */
.header-card[b-ablps9h0it] {
    background: #deede6;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-content[b-ablps9h0it] {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.header-left[b-ablps9h0it] {
    flex: 0 0 auto;
    min-width: 200px;
}

.header-title[b-ablps9h0it] {
    font-size: 24px;
    font-weight: 600;
    color: #212529;
    margin: 0 0 5px 0;
}

.header-subtitle[b-ablps9h0it] {
    font-size: 14px;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Form Cards */
.form-card[b-ablps9h0it] {
    background: white;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
}

.section-header[b-ablps9h0it] {
    font-size: 16px;
    color: #1e293b;
    margin-bottom: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    text-align: left;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e2e8f0;
}

/* Form Elements */
.form-group[b-ablps9h0it] {
    margin-bottom: 1.5rem;
}

.form-label[b-ablps9h0it] {
    font-size: 14px;
    color: #1e293b;
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
}

.form-control[b-ablps9h0it], .form-select[b-ablps9h0it] {
    font-size: 14px;
    padding: 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .form-control:focus[b-ablps9h0it], .form-select:focus[b-ablps9h0it] {
        border-color: #2196f3;
        box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
        outline: none;
    }

    .form-control[b-ablps9h0it]::placeholder {
        color: #6c757d;
        opacity: 1;
    }

/* Input Groups */
.input-group[b-ablps9h0it] {
    display: flex;
    align-items: stretch;
}

.input-group-text[b-ablps9h0it] {
    padding: 0.75rem;
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    border-right: none;
    border-radius: 4px 0 0 4px;
    font-size: 14px;
    color: #495057;
    display: flex;
    align-items: center;
}

.input-group .form-control[b-ablps9h0it] {
    border-radius: 0 4px 4px 0;
}

/* Grid System */
.row[b-ablps9h0it] {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;
}

.col-md-3[b-ablps9h0it], .col-md-4[b-ablps9h0it], .col-md-6[b-ablps9h0it], .col-md-8[b-ablps9h0it], .col-md-12[b-ablps9h0it] {
    padding: 10px;
    box-sizing: border-box;
}

.col-md-3[b-ablps9h0it] {
    flex: 0 0 25%;
}

.col-md-4[b-ablps9h0it] {
    flex: 0 0 33.333333%;
}

.col-md-6[b-ablps9h0it] {
    flex: 0 0 50%;
}

.col-md-8[b-ablps9h0it] {
    flex: 0 0 66.666667%;
}

.col-md-12[b-ablps9h0it] {
    flex: 0 0 100%;
}

/* Form Text */
.form-text[b-ablps9h0it] {
    font-size: 12px;
    margin-top: 5px;
    display: block;
}

.text-muted[b-ablps9h0it] {
    color: #6c757d;
}

.text-danger[b-ablps9h0it] {
    color: #dc3545;
}

/* Checkboxes */
.form-check[b-ablps9h0it] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 1rem;
}

.form-check-input[b-ablps9h0it] {
    margin: 0;
    flex-shrink: 0;
    margin-top: 2px;
}

.form-check-label[b-ablps9h0it] {
    font-size: 14px;
    line-height: 1.4;
}

    .form-check-label a[b-ablps9h0it] {
        color: #2196f3;
        text-decoration: none;
    }

        .form-check-label a:hover[b-ablps9h0it] {
            text-decoration: underline;
        }

/* Alert Messages */
.alert-custom[b-ablps9h0it] {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    gap: 8px;
}

    .alert-custom.info[b-ablps9h0it] {
        background: #e3f2fd;
        border: 1px solid #2196f3;
        color: #1976d2;
    }

    .alert-custom.warning[b-ablps9h0it] {
        background: #fff3cd;
        border: 1px solid #ffc107;
        color: #856404;
    }

    .alert-custom.danger[b-ablps9h0it] {
        background: #f8d7da;
        border: 1px solid #dc3545;
        color: #721c24;
    }

/* Buttons */
.btn[b-ablps9h0it] {
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
}

.btn-primary[b-ablps9h0it] {
    background: #2196f3;
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-ablps9h0it] {
        background: #1976d2;
        transform: translateY(-1px);
    }

    .btn-primary:disabled[b-ablps9h0it] {
        background: #94a3b8;
        cursor: not-allowed;
        transform: none;
    }

.btn-outline-secondary[b-ablps9h0it] {
    background: white;
    border: 2px solid #dee2e6;
    color: #495057;
}

    .btn-outline-secondary:hover[b-ablps9h0it] {
        background: #f8f9fa;
        border-color: #adb5bd;
    }

.btn-lg[b-ablps9h0it] {
    padding: 15px 30px;
    font-size: 16px;
}

.btn-sm[b-ablps9h0it] {
    padding: 8px 16px;
    font-size: 12px;
}

/* Form Actions */
.form-actions[b-ablps9h0it] {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
    padding: 20px 0;
    border-top: 1px solid #e2e8f0;
    margin-top: 20px;
}

/* Alerts */
.alert[b-ablps9h0it] {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.alert-dismissible[b-ablps9h0it] {
    padding-right: 50px;
}

.btn-close[b-ablps9h0it] {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
}

    .btn-close:hover[b-ablps9h0it] {
        opacity: 1;
    }

/* Validation */
.validation-message[b-ablps9h0it] {
    color: #dc3545;
    font-size: 12px;
    margin-top: 5px;
    display: block;
}

/* Loading States */
.fa-spin[b-ablps9h0it] {
    animation: fa-spin-b-ablps9h0it 1s infinite linear;
}

@keyframes fa-spin-b-ablps9h0it {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .form-container[b-ablps9h0it] {
        padding: 0.5rem;
    }

    .form-card[b-ablps9h0it] {
        padding: 20px;
        margin-bottom: 20px;
    }

    .header-content[b-ablps9h0it] {
        padding: 15px;
        flex-direction: column;
        text-align: center;
    }

    .header-title[b-ablps9h0it] {
        font-size: 20px;
    }

    .row[b-ablps9h0it] {
        margin: -5px;
    }

    .col-md-3[b-ablps9h0it], .col-md-4[b-ablps9h0it], .col-md-6[b-ablps9h0it], .col-md-8[b-ablps9h0it], .col-md-12[b-ablps9h0it] {
        padding: 5px;
        flex: 0 0 100%;
    }

    .form-actions[b-ablps9h0it] {
        flex-direction: column-reverse;
    }

    .btn-lg[b-ablps9h0it] {
        width: 100%;
        justify-content: center;
    }
}

/* Focus States */
.form-control:focus[b-ablps9h0it],
.form-select:focus[b-ablps9h0it],
.form-check-input:focus[b-ablps9h0it] {
    border-color: #2196f3;
    box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
    outline: none;
}

/* Hover Effects */
.form-card:hover[b-ablps9h0it] {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

/* Custom Scrollbar */
.form-container[b-ablps9h0it]::-webkit-scrollbar {
    width: 8px;
}

.form-container[b-ablps9h0it]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.form-container[b-ablps9h0it]::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

    .form-container[b-ablps9h0it]::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }
/* /Pages/Pets/AddPet.razor.rz.scp.css */
/* Add Pet Page Styles */
.add-pet-page[b-p75ruerkuy] {
    /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 0;
    margin: 0 auto;
    color: #0f172a;
    max-width: 1200px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1e293b70 0%, #3341557d 100%);
    overflow: hidden;*/
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #1e293b70 0%, #3341557d 100%);
    overflow: hidden;
}

/* Back Navigation Link */
.back-link[b-p75ruerkuy] {
    display: inline-flex;
    align-items: center;
    color: #2196f3;
    cursor: pointer;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

    .back-link:hover[b-p75ruerkuy] {
        color: #2196f3;
        font-weight: bolder;
        text-decoration: underline;
    }

.back-icon[b-p75ruerkuy] {
    margin-right: 0.5rem;
}


/* Page Header */
.page-header[b-p75ruerkuy] {
    /*background-color: #deede6;*/
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 5px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: 1px solid #cdbc76;
    text-transform: uppercase;
    color: #f3d03c;
}

.page-title[b-p75ruerkuy] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}

.header-content[b-p75ruerkuy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*background-color: #ffffff;*/
    /*padding: 1.5rem;*/
    border-radius: 10px;
    /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);*/
}

.header-left[b-p75ruerkuy] {
    display: flex;
    flex-direction: column;
}

.header-right[b-p75ruerkuy] {
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.header-btn[b-p75ruerkuy] {
    backdrop-filter: blur(10px);
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

    .header-btn:hover[b-p75ruerkuy] {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        font-weight: bolder;
    }

.header-save-btn[b-p75ruerkuy] {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #f3d03c;
}

    .header-save-btn:hover[b-p75ruerkuy] {
        background: rgba(255, 255, 255, 0.25);
        color: #f3d03c;
    }

.header-cancel-btn[b-p75ruerkuy] {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #f3d03c;
}

    .header-cancel-btn:hover[b-p75ruerkuy] {
        background: rgba(255, 255, 255, 0.25);
        color: #f3d03c;
    }

.action-buttons[b-p75ruerkuy] {
    display: flex;
    gap: 0.75rem;
}
    .action-buttons button[b-p75ruerkuy] {
        padding: 0.375rem 0.75rem;
        border-radius: 0.25rem;
        font-size: 0.75rem;
        font-weight: 600;
        cursor: pointer;
        border: none;
        transition: all 0.2s ease;
    }

/* Tab Navigation */
.tab-navigation[b-p75ruerkuy] {
    display: flex;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-bottom: none;
    border-radius: 0.5rem 0.5rem 0 0;
}

.tab[b-p75ruerkuy] {
    padding: 1rem;
    flex: 1;
    text-align: center;
    font-weight: 500;
    font-size: 0.875rem;
    color: #64748b;
    cursor: pointer;
    background-color: #f1f5f9;
    transition: all 0.2s ease;
}

    .tab:first-child[b-p75ruerkuy] {
        border-radius: 0.5rem 0 0 0;
    }

    .tab:last-child[b-p75ruerkuy] {
        border-radius: 0 0.5rem 0 0;
    }

    .tab.active[b-p75ruerkuy] {
        background-color: #eff6ff;
        color: #3b82f6;
        font-weight: 600;
        font-size: 1rem;
    }

    .tab:hover:not(.active)[b-p75ruerkuy] {
        background-color: #e2e8f0;
    }

    .tab.disabled[b-p75ruerkuy] {
        opacity: 0.5;
        cursor: not-allowed;
        /*pointer-events: none;*/
        background-color: #f8fafc;
        color: #94a3b8;
    }

        .tab.disabled:hover[b-p75ruerkuy] {
            background-color: #f8fafc;
            color: #94a3b8;
        }

/* Tab Content */
.tab-content[b-p75ruerkuy] {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0 0 0.5rem 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    min-height: 300px;
}

/* Section Styling */
.section-header[b-p75ruerkuy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

    .section-header h2[b-p75ruerkuy] {
        font-size: 1rem;
        font-weight: 600;
        margin: 0;
    }

.allergens-header[b-p75ruerkuy] {
    margin-top: 2rem;
}

/* Empty State */
.empty-state[b-p75ruerkuy] {
    padding: 2rem;
    text-align: center;
    background-color: #f8fafc;
    border: 1px dashed #e2e8f0;
    border-radius: 0.5rem;
    color: #94a3b8;
}

/* Form Styling */
.form-group[b-p75ruerkuy] {
    margin-bottom: 1rem;
}

.form-row[b-p75ruerkuy] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.half-width[b-p75ruerkuy] {
    width: calc(50% - 0.5rem);
}

label[b-p75ruerkuy] {
    display: block;
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.form-control[b-p75ruerkuy] {
    width: 100%;
    padding: 0.625rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.25rem;
    font-size: 0.875rem;
}

    .form-control:focus[b-p75ruerkuy] {
        outline: none;
        border-color: #93c5fd;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    }

textarea.form-control[b-p75ruerkuy] {
    resize: vertical;
    min-height: 80px;
}

/* Form Grid for Basic Info */
.form-grid[b-p75ruerkuy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

/* Pet Avatar */
.pet-avatar-container[b-p75ruerkuy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 2rem;
    margin-bottom: 1rem;
}

.pet-avatar[b-p75ruerkuy] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    border: 1px solid #e2e8f0;
}

/* Medical Conditions, Vaccinations, Medications, Allergens Lists */
.medical-list[b-p75ruerkuy],
.vaccination-list[b-p75ruerkuy],
.medication-list[b-p75ruerkuy],
.allergen-list[b-p75ruerkuy] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.medical-item[b-p75ruerkuy],
.vaccination-item[b-p75ruerkuy],
.medication-item[b-p75ruerkuy],
.allergen-item[b-p75ruerkuy] {
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    background-color: #ffffff;
}

.medical-item-header[b-p75ruerkuy],
.vaccination-item-header[b-p75ruerkuy],
.medication-item-header[b-p75ruerkuy],
.allergen-item-header[b-p75ruerkuy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

    .medical-item-header h3[b-p75ruerkuy],
    .vaccination-item-header h3[b-p75ruerkuy],
    .medication-item-header h3[b-p75ruerkuy],
    .allergen-item-header h3[b-p75ruerkuy] {
        font-size: 1rem;
        font-weight: 600;
        margin: 0;
    }

.item-actions[b-p75ruerkuy] {
    display: flex;
    gap: 0.5rem;
}

.action-button[b-p75ruerkuy] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: #64748b;
    padding: 0.25rem;
}

    .action-button:hover[b-p75ruerkuy] {
        color: #0f172a;
    }

.medical-item-details[b-p75ruerkuy],
.vaccination-item-details[b-p75ruerkuy],
.medication-item-details[b-p75ruerkuy] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.medical-item-description[b-p75ruerkuy],
.vaccination-item-description[b-p75ruerkuy],
.medication-item-description[b-p75ruerkuy] {
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.5;
}

/* Allergen Specific Styling */
.allergen-item.severe[b-p75ruerkuy] {
    background-color: #fff1f2;
    border-color: #fda4af;
}

.allergen-item.moderate[b-p75ruerkuy] {
    background-color: #fef9c3;
    border-color: #fed7aa;
}

.allergen-item.mild[b-p75ruerkuy] {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
}

.allergen-item-details[b-p75ruerkuy] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detail-item[b-p75ruerkuy] {
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.5;
}

.detail-label[b-p75ruerkuy] {
    font-weight: 600;
    margin-right: 0.25rem;
}

/* Tags */
.tag[b-p75ruerkuy] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
}

    .tag.severe[b-p75ruerkuy] {
        background-color: #fecdd3;
        color: #e11d48;
    }

    .tag.moderate[b-p75ruerkuy] {
        background-color: #fef9c3;
        color: #ca8a04;
    }

    .tag.mild[b-p75ruerkuy] {
        background-color: #dcfce7;
        color: #16a34a;
    }

    .tag.light[b-p75ruerkuy] {
        background-color: #f1f5f9;
        color: #64748b;
    }

    .tag.dosage[b-p75ruerkuy] {
        background-color: #fee2e2;
        color: #ef4444;
    }

    .tag.frequency[b-p75ruerkuy] {
        background-color: #dbeafe;
        color: #3b82f6;
    }

    .tag.duration[b-p75ruerkuy] {
        background-color: #fef9c3;
        color: #ca8a04;
    }

    .tag.prescriber[b-p75ruerkuy] {
        background-color: #f1f5f9;
        color: #64748b;
    }

    .tag.administered[b-p75ruerkuy] {
        background-color: #bae6fd;
        color: #0284c7;
    }

    .tag.expiration[b-p75ruerkuy] {
        background-color: #fecdd3;
        color: #e11d48;
    }

    .tag.period[b-p75ruerkuy] {
        background-color: #dbeafe;
        color: #3b82f6;
    }

.severity-tag[b-p75ruerkuy] {
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 0.75rem;
}

    .severity-tag.severe[b-p75ruerkuy] {
        background-color: #fecdd3;
        color: #e11d48;
    }

    .severity-tag.moderate[b-p75ruerkuy] {
        background-color: #fef9c3;
        color: #ca8a04;
    }

    .severity-tag.mild[b-p75ruerkuy] {
        background-color: #dcfce7;
        color: #16a34a;
    }

/* Bottom Navigation */
.bottom-navigation[b-p75ruerkuy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #cdbc76;
}

.required-notice[b-p75ruerkuy] {
    font-size: 0.75rem;
    color: #64748b;
}

/* Modal Styles */
.modal-container[b-p75ruerkuy] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-p75ruerkuy] {
    background-color: #ffffff;
    border-radius: 0.5rem;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.modal-header[b-p75ruerkuy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

    .modal-header h2[b-p75ruerkuy] {
        font-size: 1.25rem;
        font-weight: 600;
        margin: 0;
    }

.medical-header[b-p75ruerkuy] {
    background-color: #f1f5f9;
}

.vaccination-header[b-p75ruerkuy] {
    background-color: #dbeafe;
}

.medication-header[b-p75ruerkuy] {
    background-color: #eff6ff;
}

.allergen-header[b-p75ruerkuy] {
    background-color: #fef2f2;
}

.close-button[b-p75ruerkuy] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
}

.modal-body[b-p75ruerkuy] {
    padding: 1.5rem;
}

.modal-footer[b-p75ruerkuy] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #cdbc76;
    background-color: #f8fafc;
}

/* Button Styles */
.btn[b-p75ruerkuy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-small[b-p75ruerkuy] {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

.btn-primary[b-p75ruerkuy] {
    background-color: #3b82f6;
    color: #ffffff;
}

    .btn-primary:hover[b-p75ruerkuy] {
        background-color: #2563eb;
    }

.btn-outline-primary[b-p75ruerkuy] {
    background-color: #eff6ff;
    color: #3b82f6;
    border: 1px solid #bfdbfe;
}

    .btn-outline-primary:hover[b-p75ruerkuy] {
        background-color: #dbeafe;
    }

.btn-outline-secondary[b-p75ruerkuy] {
    background-color: #ffffff;
    color: #64748b;
    border: 1px solid #cbd5e1;
}

    .btn-outline-secondary:hover[b-p75ruerkuy] {
        background-color: #f1f5f9;
    }

/* Responsive Styles */
@media (max-width: 768px) {
    .page-header[b-p75ruerkuy] {
        flex-direction: column;
        align-items: flex-start;
    }

    .action-buttons[b-p75ruerkuy] {
        margin-top: 1rem;
        width: 100%;
    }

    .tab-navigation[b-p75ruerkuy] {
        flex-wrap: wrap;
    }

    /*.tab {
        flex-basis: 50%;
        font-size: 0.75rem;
        padding: 0.75rem 0.5rem;
    }*/
    .tab[b-p75ruerkuy] {
        flex-basis: 33.33%; /* 3 tabs per row on smaller screens */
        font-size: 0.75rem;
        padding: 0.75rem 0.5rem;
    }

        .tab.active[b-p75ruerkuy] {
            font-size: 0.875rem;
        }

    .pet-avatar-container[b-p75ruerkuy] {
        margin-right: 0;
        margin-bottom: 1.5rem;
    }

    .form-grid[b-p75ruerkuy] {
        grid-template-columns: 1fr;
    }

    .form-row[b-p75ruerkuy] {
        flex-direction: column;
        gap: 1rem;
    }

    .half-width[b-p75ruerkuy] {
        width: 100%;
    }

    .medical-item-details[b-p75ruerkuy],
    .vaccination-item-details[b-p75ruerkuy],
    .medication-item-details[b-p75ruerkuy] {
        flex-direction: column;
        align-items: flex-start;
    }

    .modal-content[b-p75ruerkuy] {
        width: 95%;
        max-height: 85vh;
    }
}

@media (max-width: 480px) {
    .tab-navigation[b-p75ruerkuy] {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    /*.tab {
        flex: 0 0 auto;
        padding: 0.75rem 1rem;
        white-space: nowrap;
    }*/
    .tab[b-p75ruerkuy] {
        flex: 0 0 auto;
        padding: 0.75rem 0.75rem;
        white-space: nowrap;
        min-width: 100px;
    }

    .bottom-navigation[b-p75ruerkuy] {
        flex-direction: column;
        gap: 1rem;
    }

        .bottom-navigation .action-button[b-p75ruerkuy] {
            width: 100%;
        }
}

/* Download Button */
.download-button[b-p75ruerkuy] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    background-color: #3b82f6;
    color: white;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: transform 0.2s ease;
    z-index: 50;
}

    .download-button:hover[b-p75ruerkuy] {
        transform: scale(1.05);
    }

.download-icon[b-p75ruerkuy] {
    font-size: 1.5rem;
}

.download-options[b-p75ruerkuy] {
    position: fixed;
    bottom: 5rem;
    right: 1.5rem;
    background-color: white;
    border-radius: 0.5rem;
    padding: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 49;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.download-option[b-p75ruerkuy] {
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

    .download-option:hover[b-p75ruerkuy] {
        background-color: #f1f5f9;
    }

.validation-summary[b-p75ruerkuy] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    margin: 1rem 0;
    background-color: #fef3cd;
    border: 1px solid #ffc107;
    border-radius: 0.5rem;
    color: #856404;
}

.validation-icon[b-p75ruerkuy] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.validation-message[b-p75ruerkuy] {
    flex: 1;
}

    .validation-message strong[b-p75ruerkuy] {
        display: block;
        margin-bottom: 0.5rem;
        color: #664d03;
    }

.validation-list[b-p75ruerkuy] {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
}

    .validation-list li[b-p75ruerkuy] {
        margin-bottom: 0.25rem;
    }
/* /Pages/Pets/EditPet.razor.rz.scp.css */
/* Edit Pet Page Styles */
.edit-pet-page[b-ejdsmi9fx5] {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #1e293b70 0%, #3341557d 100%);
    overflow: hidden;
}

/* Back Navigation Link */
.back-link[b-ejdsmi9fx5] {
    display: inline-flex;
    align-items: center;
    color: #2196f3;
    cursor: pointer;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

    .back-link:hover[b-ejdsmi9fx5] {
        color: #2196f3;
        font-weight: bolder;
        text-decoration: underline;
    }

.back-icon[b-ejdsmi9fx5] {
    margin-right: 0.5rem;
}

/* Page Header */
.page-header[b-ejdsmi9fx5] {
    /*background-color: #deede6;*/
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 5px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: 1px solid #cdbc76;
    text-transform: uppercase;
    color: #f3d03c;
}

.page-title[b-ejdsmi9fx5] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}

.header-content[b-ejdsmi9fx5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*background-color: #ffffff;*/
    /*padding: 1.5rem;*/
    border-radius: 10px;
    /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);*/
}

.header-left[b-ejdsmi9fx5] {
    display: flex;
    flex-direction: column;
}

.header-right[b-ejdsmi9fx5] {
    display: flex;
    flex-direction: row;
    gap: 5px;
}



.header-btn[b-ejdsmi9fx5] {
    backdrop-filter: blur(10px);
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

    .header-btn:hover[b-ejdsmi9fx5] {
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        font-weight: bolder;
    }

.header-save-btn[b-ejdsmi9fx5] {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #f3d03c;
}

    .header-save-btn:hover[b-ejdsmi9fx5] {
        background: rgba(255, 255, 255, 0.25);
        color: #f3d03c;
    }

.header-cancel-btn[b-ejdsmi9fx5] {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #f3d03c;
}

    .header-cancel-btn:hover[b-ejdsmi9fx5] {
        background: rgba(255, 255, 255, 0.25);
        color: #f3d03c;
    }

.header-delete-btn[b-ejdsmi9fx5] {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #f3d03c;
}

    .header-delete-btn:hover[b-ejdsmi9fx5] {
        background: rgba(255, 255, 255, 0.25);
        color: #f3d03c;
    }

.action-buttons[b-ejdsmi9fx5] {
    display: flex;
    gap: 0.75rem;
}

    .action-buttons button[b-ejdsmi9fx5] {
        padding: 0.375rem 0.75rem;
        border-radius: 0.25rem;
        font-size: 0.75rem;
        font-weight: 600;
        cursor: pointer;
        border: none;
        transition: all 0.2s ease;
    }

/* Main Content */
.main-content[b-ejdsmi9fx5] {
    /*max-width: 1024px;*/
    /*margin: 0 auto;
    padding: 1.5rem;*/
    margin-top: 2rem;
    padding-left: 20px;
    padding-right: 20px;
}

/* Loading and Error States */
.loading-container[b-ejdsmi9fx5],
.error-container[b-ejdsmi9fx5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

    .loading-container p[b-ejdsmi9fx5],
    .error-container p[b-ejdsmi9fx5] {
        margin-top: 1rem;
        color: #64748b;
    }

.error-message[b-ejdsmi9fx5] {
    color: #dc2626;
    font-weight: 500;
}

.warning-text[b-ejdsmi9fx5] {
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* Tab Navigation */
.tab-navigation[b-ejdsmi9fx5] {
    display: flex;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-bottom: none;
    border-radius: 0.5rem 0.5rem 0 0;
}

.tab[b-ejdsmi9fx5] {
    padding: 1rem;
    flex: 1;
    text-align: center;
    font-weight: 500;
    font-size: 0.75rem;
    color: #64748b;
    cursor: pointer;
    background-color: #f1f5f9;
    transition: all 0.2s ease;
    border-right: 1px solid #e2e8f0;
}

    .tab:first-child[b-ejdsmi9fx5] {
        border-radius: 0.5rem 0 0 0;
    }

    .tab:last-child[b-ejdsmi9fx5] {
        border-radius: 0 0.5rem 0 0;
        border-right: none;
    }

    .tab.active[b-ejdsmi9fx5] {
        background-color: #eff6ff;
        color: #3b82f6;
        font-weight: 600;
        font-size: 0.9rem;
        border-bottom: 2px solid #3b82f6;
    }

    .tab:hover:not(.active)[b-ejdsmi9fx5] {
        background-color: #e2e8f0;
        color: #475569;
    }

/* Tab Content */
.tab-content[b-ejdsmi9fx5] {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0 0 0.5rem 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    min-height: 400px;
}

/* Pet Photo */
.pet-photo[b-ejdsmi9fx5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Section Styling */
.section-header[b-ejdsmi9fx5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

    .section-header h2[b-ejdsmi9fx5] {
        font-size: 1rem;
        font-weight: 600;
        margin: 0;
        color: #1e293b;
    }

.allergens-header[b-ejdsmi9fx5] {
    margin-top: 2rem;
}

/* Empty State */
.empty-state[b-ejdsmi9fx5] {
    padding: 2rem;
    text-align: center;
    background-color: #f8fafc;
    border: 1px dashed #e2e8f0;
    border-radius: 0.5rem;
    color: #94a3b8;
}

/* Form Styling */
.form-group[b-ejdsmi9fx5] {
    margin-bottom: 1rem;
}

.form-row[b-ejdsmi9fx5] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.half-width[b-ejdsmi9fx5] {
    width: calc(50% - 0.5rem);
}

label[b-ejdsmi9fx5] {
    display: block;
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    color: #374151;
}

.form-control[b-ejdsmi9fx5] {
    width: 100%;
    padding: 0.625rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .form-control:focus[b-ejdsmi9fx5] {
        outline: none;
        border-color: #93c5fd;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    }

textarea.form-control[b-ejdsmi9fx5] {
    resize: vertical;
    min-height: 80px;
}

/* Form Grid for Basic Info */
.form-grid[b-ejdsmi9fx5] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

/* Pet Avatar */
.pet-avatar-container[b-ejdsmi9fx5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 2rem;
    margin-bottom: 1rem;
}

.pet-avatar[b-ejdsmi9fx5] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    border: 2px solid #e2e8f0;
    overflow: hidden;
    position: relative;
}

/* Medical Conditions, Vaccinations, Medications, Allergens Lists */
.medical-list[b-ejdsmi9fx5],
.vaccination-list[b-ejdsmi9fx5],
.medication-list[b-ejdsmi9fx5],
.allergen-list[b-ejdsmi9fx5] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.medical-item[b-ejdsmi9fx5],
.vaccination-item[b-ejdsmi9fx5],
.medication-item[b-ejdsmi9fx5],
.allergen-item[b-ejdsmi9fx5] {
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    background-color: #ffffff;
    transition: box-shadow 0.2s ease;
}

    .medical-item:hover[b-ejdsmi9fx5],
    .vaccination-item:hover[b-ejdsmi9fx5],
    .medication-item:hover[b-ejdsmi9fx5],
    .allergen-item:hover[b-ejdsmi9fx5] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

.medical-item-header[b-ejdsmi9fx5],
.vaccination-item-header[b-ejdsmi9fx5],
.medication-item-header[b-ejdsmi9fx5],
.allergen-item-header[b-ejdsmi9fx5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

    .medical-item-header h3[b-ejdsmi9fx5],
    .vaccination-item-header h3[b-ejdsmi9fx5],
    .medication-item-header h3[b-ejdsmi9fx5],
    .allergen-item-header h3[b-ejdsmi9fx5] {
        font-size: 1rem;
        font-weight: 600;
        margin: 0;
        color: #1e293b;
    }

.item-actions[b-ejdsmi9fx5] {
    display: flex;
    gap: 0.5rem;
}

.action-button[b-ejdsmi9fx5] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: #64748b;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
}

    .action-button:hover[b-ejdsmi9fx5] {
        color: #0f172a;
        background-color: #f1f5f9;
    }

.medical-item-details[b-ejdsmi9fx5],
.vaccination-item-details[b-ejdsmi9fx5],
.medication-item-details[b-ejdsmi9fx5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.medical-item-description[b-ejdsmi9fx5],
.vaccination-item-description[b-ejdsmi9fx5],
.medication-item-description[b-ejdsmi9fx5] {
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.5;
}

/* Allergen Specific Styling */
.allergen-item.severe[b-ejdsmi9fx5] {
    background-color: #fff1f2;
    border-color: #fda4af;
}

.allergen-item.moderate[b-ejdsmi9fx5] {
    background-color: #fef9c3;
    border-color: #fed7aa;
}

.allergen-item.mild[b-ejdsmi9fx5] {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
}

.allergen-item-details[b-ejdsmi9fx5] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detail-item[b-ejdsmi9fx5] {
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.5;
}

.detail-label[b-ejdsmi9fx5] {
    font-weight: 600;
    margin-right: 0.25rem;
    color: #374151;
}

/* Tags */
.tag[b-ejdsmi9fx5] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

    .tag.severe[b-ejdsmi9fx5] {
        background-color: #fecdd3;
        color: #e11d48;
    }

    .tag.moderate[b-ejdsmi9fx5] {
        background-color: #fef9c3;
        color: #ca8a04;
    }

    .tag.mild[b-ejdsmi9fx5] {
        background-color: #dcfce7;
        color: #16a34a;
    }

    .tag.light[b-ejdsmi9fx5] {
        background-color: #f1f5f9;
        color: #64748b;
    }

    .tag.dosage[b-ejdsmi9fx5] {
        background-color: #fee2e2;
        color: #ef4444;
    }

    .tag.frequency[b-ejdsmi9fx5] {
        background-color: #dbeafe;
        color: #3b82f6;
    }

    .tag.duration[b-ejdsmi9fx5] {
        background-color: #fef9c3;
        color: #ca8a04;
    }

    .tag.prescriber[b-ejdsmi9fx5] {
        background-color: #f1f5f9;
        color: #64748b;
    }

    .tag.administered[b-ejdsmi9fx5] {
        background-color: #bae6fd;
        color: #0284c7;
    }

    .tag.expiration[b-ejdsmi9fx5] {
        background-color: #fecdd3;
        color: #e11d48;
    }

    .tag.period[b-ejdsmi9fx5] {
        background-color: #dbeafe;
        color: #3b82f6;
    }

.severity-tag[b-ejdsmi9fx5] {
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 0.75rem;
}

    .severity-tag.severe[b-ejdsmi9fx5] {
        background-color: #fecdd3;
        color: #e11d48;
    }

    .severity-tag.moderate[b-ejdsmi9fx5] {
        background-color: #fef9c3;
        color: #ca8a04;
    }

    .severity-tag.mild[b-ejdsmi9fx5] {
        background-color: #dcfce7;
        color: #16a34a;
    }

/* Bottom Navigation */
.bottom-navigation[b-ejdsmi9fx5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #cdbc76;
}

.last-updated[b-ejdsmi9fx5] {
    font-size: 0.75rem;
    color: #64748b;
    font-style: italic;
}

/* Modal Styles */
.modal-container[b-ejdsmi9fx5] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-ejdsmi9fx5] {
    background-color: #ffffff;
    border-radius: 0.5rem;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.modal-header[b-ejdsmi9fx5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

    .modal-header h2[b-ejdsmi9fx5] {
        font-size: 1.25rem;
        font-weight: 600;
        margin: 0;
        color: #1e293b;
    }

.medical-header[b-ejdsmi9fx5] {
    background-color: #f1f5f9;
}

.vaccination-header[b-ejdsmi9fx5] {
    background-color: #dbeafe;
}

.medication-header[b-ejdsmi9fx5] {
    background-color: #eff6ff;
}

.allergen-header[b-ejdsmi9fx5] {
    background-color: #fef2f2;
}

.delete-header[b-ejdsmi9fx5] {
    background-color: #fef2f2;
    border-bottom-color: #fca5a5;
}

.close-button[b-ejdsmi9fx5] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
}

    .close-button:hover[b-ejdsmi9fx5] {
        color: #0f172a;
    }

.modal-body[b-ejdsmi9fx5] {
    padding: 1.5rem;
}

.modal-footer[b-ejdsmi9fx5] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    background-color: #f8fafc;
}

/* Button Styles */
.btn[b-ejdsmi9fx5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    text-decoration: none;
}

    .btn:disabled[b-ejdsmi9fx5] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-small[b-ejdsmi9fx5] {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
}

.btn-primary[b-ejdsmi9fx5] {
    background-color: #3b82f6;
    color: #ffffff;
}

    .btn-primary:hover:not(:disabled)[b-ejdsmi9fx5] {
        background-color: #2563eb;
    }

.btn-danger[b-ejdsmi9fx5] {
    background-color: #dc2626;
    color: #ffffff;
}

    .btn-danger:hover:not(:disabled)[b-ejdsmi9fx5] {
        background-color: #b91c1c;
    }

.btn-outline-primary[b-ejdsmi9fx5] {
    background-color: #eff6ff;
    color: #3b82f6;
    border: 1px solid #bfdbfe;
}

    .btn-outline-primary:hover:not(:disabled)[b-ejdsmi9fx5] {
        background-color: #dbeafe;
    }

.btn-outline-secondary[b-ejdsmi9fx5] {
    background-color: #ffffff;
    color: #64748b;
    border: 1px solid #cbd5e1;
}

    .btn-outline-secondary:hover:not(:disabled)[b-ejdsmi9fx5] {
        background-color: #f1f5f9;
    }

/* Spinner */
.spinner-border[b-ejdsmi9fx5] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: text-bottom;
    border: 0.125rem solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-ejdsmi9fx5 0.75s linear infinite;
}

.spinner-border-sm[b-ejdsmi9fx5] {
    width: 0.875rem;
    height: 0.875rem;
    border-width: 0.125rem;
}

@keyframes spinner-border-b-ejdsmi9fx5 {
    to {
        transform: rotate(360deg);
    }
}

/* Form Check (Checkboxes) */
.form-check[b-ejdsmi9fx5] {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.form-check-input[b-ejdsmi9fx5] {
    margin-right: 0.5rem;
    width: 1rem;
    height: 1rem;
}

.form-check-label[b-ejdsmi9fx5] {
    font-size: 0.875rem;
    color: #374151;
    margin-bottom: 0;
}

.row[b-ejdsmi9fx5] {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.5rem;
}

.col-md-6[b-ejdsmi9fx5] {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 0.5rem;
}
/* Floating Label Styles */
.floating-input[b-ejdsmi9fx5] {
    position: relative;
    margin-bottom: 20px;
}

    .floating-input input[b-ejdsmi9fx5],
    .floating-input select[b-ejdsmi9fx5],
    .floating-input textarea[b-ejdsmi9fx5] {
        width: 100%;
        padding: 16px 12px 8px 12px;
        font-size: 14px;
        border: 2px solid #e2e8f0;
        border-radius: 8px;
        /*background: transparent;*/
        outline: none;
        transition: all 0.3s ease;
        box-sizing: border-box;
    }

        .floating-input input:focus[b-ejdsmi9fx5],
        .floating-input select:focus[b-ejdsmi9fx5],
        .floating-input textarea:focus[b-ejdsmi9fx5] {
            border-color: #2196f3;
            box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
        }

    .floating-input label[b-ejdsmi9fx5] {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 12px;
        font-size: 14px;
        color: #6b7280;
        pointer-events: none;
        transition: all 0.3s ease;
        background: white;
        padding: 0 4px;
        transform-origin: left;
    }

    /* Label moves up when input is focused or has content */
    .floating-input input:focus + label[b-ejdsmi9fx5],
    .floating-input input:not(:placeholder-shown) + label[b-ejdsmi9fx5],
    .floating-input select:focus + label[b-ejdsmi9fx5],
    .floating-input textarea:focus + label[b-ejdsmi9fx5],
    .floating-input textarea:not(:placeholder-shown) + label[b-ejdsmi9fx5],
    .floating-input.has-value label[b-ejdsmi9fx5] {
        top: -8px;
        transform: translateY(0);
        left: 8px;
        font-size: 12px;
        color: #2196f3;
        font-weight: 600;
    }

    .floating-input label.required[b-ejdsmi9fx5]::after {
        content: " *";
        color: #dc3545;
    }

    .floating-input select[b-ejdsmi9fx5] {
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 12px center;
        background-repeat: no-repeat;
        background-size: 16px;
        padding-right: 40px;
    }

        .floating-input select:focus[b-ejdsmi9fx5] {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%232196f3' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        }

    .floating-input textarea[b-ejdsmi9fx5] {
        resize: vertical;
        min-height: 80px;
    }

    .floating-input input[type="date"]:not(:focus):not(:valid)[b-ejdsmi9fx5] {
        color: transparent;
    }
/* Responsive Styles */
@media (max-width: 768px) {
    .page-header[b-ejdsmi9fx5] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .action-buttons[b-ejdsmi9fx5] {
        width: 100%;
        justify-content: space-between;
    }

    .tab-navigation[b-ejdsmi9fx5] {
        flex-wrap: wrap;
    }

    .tab[b-ejdsmi9fx5] {
        flex-basis: 50%;
        font-size: 0.75rem;
        padding: 0.75rem 0.5rem;
    }

        .tab.active[b-ejdsmi9fx5] {
            font-size: 0.875rem;
        }

    .pet-avatar-container[b-ejdsmi9fx5] {
        margin-right: 0;
        margin-bottom: 1.5rem;
    }

    .form-grid[b-ejdsmi9fx5] {
        grid-template-columns: 1fr;
    }

    .form-row[b-ejdsmi9fx5] {
        flex-direction: column;
        gap: 1rem;
    }

    .half-width[b-ejdsmi9fx5] {
        width: 100%;
    }

    .medical-item-details[b-ejdsmi9fx5],
    .vaccination-item-details[b-ejdsmi9fx5],
    .medication-item-details[b-ejdsmi9fx5] {
        flex-direction: column;
        align-items: flex-start;
    }

    .modal-content[b-ejdsmi9fx5] {
        width: 95%;
        max-height: 85vh;
    }

    .bottom-navigation[b-ejdsmi9fx5] {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .col-md-6[b-ejdsmi9fx5] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .edit-pet-page[b-ejdsmi9fx5] {
        padding: 0.5rem;
    }

    .tab-navigation[b-ejdsmi9fx5] {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .tab[b-ejdsmi9fx5] {
        flex: 0 0 auto;
        padding: 0.75rem 1rem;
        white-space: nowrap;
        min-width: 120px;
    }

    .action-buttons[b-ejdsmi9fx5] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .btn[b-ejdsmi9fx5] {
        width: 100%;
        justify-content: center;
    }

    .bottom-navigation .action-button[b-ejdsmi9fx5] {
        width: 100%;
    }

    .pet-avatar[b-ejdsmi9fx5] {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }
}

/* Enhanced focus states for accessibility */
.btn:focus[b-ejdsmi9fx5],
.form-control:focus[b-ejdsmi9fx5],
.tab:focus[b-ejdsmi9fx5] {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Improved contrast for better readability */
.medical-item-description[b-ejdsmi9fx5],
.vaccination-item-description[b-ejdsmi9fx5],
.medication-item-description[b-ejdsmi9fx5] {
    color: #4b5563;
}

/* Better visual hierarchy */
.section-header h2[b-ejdsmi9fx5] {
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0.5rem;
}

.badge-pill[b-ejdsmi9fx5] {
    background-color: cadetblue;
    border-radius: 50%;
    font-size: 0.6rem;
    min-width: 1rem;
    height: 1rem;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
}
/* /Pages/Pets/PetManagement.razor.rz.scp.css */
/* Pet Management Page Styles - Fixed to match SVG design exactly */

.pet-management-page[b-0jmhrgl5xq] {
    /*padding: 1.5rem;*/
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #1e293b70 0%, #3341557d 100%);
    overflow: hidden;
    border-radius: 10px;
    /* border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    min-height: 100vh;*/
}

/* Page Header */
.page-header[b-0jmhrgl5xq] {
    /*margin-bottom: 2rem;*/
    /*background-color: #deede6;*/
    /*background-color: #4c5d67;*/
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 5px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: 1px solid #f3d03c;
    text-transform: uppercase;
    color: #f3d03c;
}

.header-content[b-0jmhrgl5xq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*background-color: #ffffff;*/
    /*padding: 1.5rem;*/
    border-radius: 0.75rem;
    /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);*/
}

.header-left[b-0jmhrgl5xq] {
    display: flex;
    flex-direction: column;
}

.page-title[b-0jmhrgl5xq] {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}
/* Back Navigation Link */
.back-link[b-0jmhrgl5xq] {
    display: inline-flex;
    align-items: center;
    color: #2196f3;
    cursor: pointer;
    margin-bottom: 1rem;
    font-size: 0.875rem;
}

    .back-link:hover[b-0jmhrgl5xq] {
        color: #2196f3;
        font-weight: bolder;
        text-decoration: underline;
    }

.back-icon[b-0jmhrgl5xq] {
    margin-right: 0.5rem;
}
/*
.back-button {
    background: none;
    border: none;
    color: #2196f3;
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0.5rem;
}

    .back-button:hover {
        color: #2196f3;
        font-weight: bolder;
        text-decoration: underline;
    }*/
.add-record-btn[b-0jmhrgl5xq] {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #f3d03c;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

    .add-record-btn:hover[b-0jmhrgl5xq] {
        background: rgba(255, 255, 255, 0.25);
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        color: #f3d03c;
        font-weight: bolder;
    }
/*.breadcrumb {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: #64748b;
}

.breadcrumb-link {
    color: #3b82f6;
    text-decoration: none;
    transition: color 0.2s;
}

    .breadcrumb-link:hover {
        color: #1d4ed8;
    }

.breadcrumb-separator {
    margin: 0 0.5rem;
    color: #cbd5e1;
}

.breadcrumb-current {
    color: #64748b;
    font-weight: 500;
}*/

.add-pet-btn[b-0jmhrgl5xq] {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border: none;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
    box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2);
    cursor: pointer;
}

    .add-pet-btn:hover[b-0jmhrgl5xq] {
        transform: translateY(-1px);
        box-shadow: 0 6px 8px rgba(59, 130, 246, 0.3);
    }

/* Content Area */
.content-area[b-0jmhrgl5xq] {
    padding: 20px;
    background-color: #f8fafceb;
}

/* Loading State */
.loading-container[b-0jmhrgl5xq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.loading-spinner[b-0jmhrgl5xq] {
    margin-bottom: 1.5rem;
}

.spinner[b-0jmhrgl5xq] {
    width: 3rem;
    height: 3rem;
    border: 4px solid #e2e8f0;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    animation: spin-b-0jmhrgl5xq 1s linear infinite;
}

@keyframes spin-b-0jmhrgl5xq {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.loading-text[b-0jmhrgl5xq] {
    font-size: 1rem;
    color: #64748b;
    margin: 0;
}

/* Empty State */
.empty-state[b-0jmhrgl5xq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    background-color: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.empty-state-icon[b-0jmhrgl5xq] {
    font-size: 4rem;
    color: #cbd5e1;
    margin-bottom: 1.5rem;
}

.empty-state-title[b-0jmhrgl5xq] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.75rem 0;
}

.empty-state-description[b-0jmhrgl5xq] {
    font-size: 1rem;
    color: #64748b;
    margin: 0 0 2rem 0;
    max-width: 400px;
    line-height: 1.5;
}

.empty-state-btn[b-0jmhrgl5xq] {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    border: none;
    color: white;
    padding: 1rem 2rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
    box-shadow: 0 4px 6px rgba(59, 130, 246, 0.2);
    cursor: pointer;
}

    .empty-state-btn:hover[b-0jmhrgl5xq] {
        transform: translateY(-1px);
        box-shadow: 0 6px 8px rgba(59, 130, 246, 0.3);
    }

/* Pets Grid */
.pets-grid[b-0jmhrgl5xq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

/* Pet Card - Exactly matching SVG design */
.pet-card[b-0jmhrgl5xq] {
    width: 300px;
    /*height: 300px;*/
    background-color: #ffffff;
    border-radius: 1rem;
    overflow: hidden;
    /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    /*transition: all 0.3s ease;*/
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); /* lighter shadow by default */
}

    .pet-card:hover[b-0jmhrgl5xq] {
        /* transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);*/
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); /* darker shadow on hover */
    }

/* Header with Gradient - exact SVG match */
.pet-card-header[b-0jmhrgl5xq] {
    /*background: linear-gradient(135deg, #3b82f6, #1d4ed8);*/
    background: white;
    height: 80px;
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    border-bottom: 1px solid darkgrey;
}

.pet-header-info[b-0jmhrgl5xq] {
    flex: 1;
}

.pet-name[b-0jmhrgl5xq] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #8054e4;
    margin: 0 0 0.25rem 0;
    font-family: Arial, sans-serif;
}

.pet-breed-age[b-0jmhrgl5xq] {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0;
    font-family: Arial, sans-serif;
}

.pet-avatar[b-0jmhrgl5xq] {
    width: 2.5rem;
    height: 2.5rem;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.pet-image[b-0jmhrgl5xq] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Info Section */
.pet-info-section[b-0jmhrgl5xq] {
    padding: 1.25rem;
    /*flex: 1;*/
}

.info-grid[b-0jmhrgl5xq] {
    /* display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.375rem;*/
    display: flex;
    gap: 0.625rem;
    justify-content: space-between;
}

.info-box[b-0jmhrgl5xq] {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.375rem 0.25rem;
    text-align: left;
    width: 100px;
    /*height: 60px;*/
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.info-label[b-0jmhrgl5xq] {
    font-size: 0.4rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-bottom: 0.125rem;
    font-family: Arial, sans-serif;
    line-height: 1;
}

.info-value[b-0jmhrgl5xq] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.125rem;
    font-family: Arial, sans-serif;
    flex: 1;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.info-extra[b-0jmhrgl5xq] {
    font-size: 0.5rem;
    color: #64748b;
    font-family: Arial, sans-serif;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Medical Summary Bar - Two rows layout */
.medical-summary-bar[b-0jmhrgl5xq] {
    background-color: #fef3c7;
    margin: 0 1.25rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.medical-row[b-0jmhrgl5xq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.medical-item[b-0jmhrgl5xq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.medical-circle[b-0jmhrgl5xq] {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.5625rem;
    font-weight: 700;
    color: #ffffff;
    font-family: Arial, sans-serif;
    flex-shrink: 0;
}

    .medical-circle.conditions[b-0jmhrgl5xq] {
        background-color: #f59e0b;
    }

    .medical-circle.medications[b-0jmhrgl5xq] {
        background-color: #10b981;
    }

    .medical-circle.vaccinations[b-0jmhrgl5xq] {
        background-color: #10b981;
    }

    .medical-circle.allergens[b-0jmhrgl5xq] {
        background-color: #f59e0b;
    }

.medical-label[b-0jmhrgl5xq] {
    font-size: 0.6875rem;
    font-weight: 500;
    font-family: Arial, sans-serif;
    color: #92400e;
    line-height: 1;
}

/* Action Buttons - exact SVG match */
.action-buttons[b-0jmhrgl5xq] {
    display: flex;
    justify-content: space-between;
    gap: 0.625rem;
    margin: 0.75rem 1.25rem 1rem 1.25rem;
}

.action-btn[b-0jmhrgl5xq] {
    flex: 1;
    height: 1.5rem;
    padding: 0 0.5rem;
    border-radius: 0.625rem;
    font-size: 0.7rem;
    font-weight: 500;
    border: 1px solid;
    background-color: transparent;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
}

    .action-btn.view-btn[b-0jmhrgl5xq] {
        border-color: #3b82f6;
        color: #3b82f6;
    }

        .action-btn.view-btn:hover[b-0jmhrgl5xq] {
            background-color: #3b82f6;
            color: #ffffff;
        }

    .action-btn.edit-btn[b-0jmhrgl5xq] {
        border-color: #3b82f6;
        color: #3b82f6;
    }

        .action-btn.edit-btn:hover[b-0jmhrgl5xq] {
            background-color: #3b82f6;
            color: #ffffff;
        }

    .action-btn.delete-btn[b-0jmhrgl5xq] {
        border-color: #ef4444;
        color: #ef4444;
    }

        .action-btn.delete-btn:hover[b-0jmhrgl5xq] {
            background-color: #ef4444;
            color: #ffffff;
        }

/* Delete Modal */
.modal-overlay[b-0jmhrgl5xq] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.delete-modal[b-0jmhrgl5xq] {
    background-color: #ffffff;
    border-radius: 0.75rem;
    max-width: 500px;
    width: 90%;
    margin: 2rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.delete-modal-header[b-0jmhrgl5xq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}

.delete-modal-title[b-0jmhrgl5xq] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.close-btn[b-0jmhrgl5xq] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #64748b;
    cursor: pointer;
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .close-btn:hover[b-0jmhrgl5xq] {
        color: #1e293b;
    }

.delete-modal-body[b-0jmhrgl5xq] {
    padding: 1.5rem;
}

    .delete-modal-body p[b-0jmhrgl5xq] {
        margin: 0 0 1rem 0;
        color: #374151;
    }

.warning-text[b-0jmhrgl5xq] {
    color: #6b7280;
    font-size: 0.875rem;
}

.delete-modal-footer[b-0jmhrgl5xq] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.5rem;
    border-top: 1px solid #e2e8f0;
}

.btn[b-0jmhrgl5xq] {
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.btn-secondary[b-0jmhrgl5xq] {
    background-color: #f1f5f9;
    color: #475569;
}

    .btn-secondary:hover[b-0jmhrgl5xq] {
        background-color: #e2e8f0;
    }

.btn-danger[b-0jmhrgl5xq] {
    background-color: #ef4444;
    color: #ffffff;
}

    .btn-danger:hover[b-0jmhrgl5xq] {
        background-color: #dc2626;
    }

.btn-primary[b-0jmhrgl5xq] {
    background-color: #3b82f6;
    color: #ffffff;
}

    .btn-primary:hover[b-0jmhrgl5xq] {
        background-color: #2563eb;
    }

/* Responsive Design */
@media (max-width: 768px) {
    .pets-grid[b-0jmhrgl5xq] {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .pet-card[b-0jmhrgl5xq] {
        width: 100%;
        max-width: 400px;
    }

    .pet-management-page[b-0jmhrgl5xq] {
        padding: 1rem;
    }

    .header-content[b-0jmhrgl5xq] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .header-left[b-0jmhrgl5xq] {
        text-align: center;
    }

    .page-title[b-0jmhrgl5xq] {
        font-size: 1.5rem;
    }

    .info-grid[b-0jmhrgl5xq] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .action-buttons[b-0jmhrgl5xq] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .action-btn[b-0jmhrgl5xq] {
        height: 2rem;
        font-size: 0.75rem;
    }

    .delete-modal[b-0jmhrgl5xq] {
        margin: 1rem;
        width: calc(100% - 2rem);
    }

    .delete-modal-footer[b-0jmhrgl5xq] {
        flex-direction: column;
        gap: 0.5rem;
    }

        .delete-modal-footer .btn[b-0jmhrgl5xq] {
            width: 100%;
        }
}

@media (max-width: 480px) {
    .pet-management-page[b-0jmhrgl5xq] {
        padding: 0.75rem;
    }

    .page-title[b-0jmhrgl5xq] {
        font-size: 1.25rem;
    }

    .breadcrumb[b-0jmhrgl5xq] {
        font-size: 0.75rem;
    }

    .pet-card[b-0jmhrgl5xq] {
        height: auto;
        min-height: 280px;
    }

    .pet-card-header[b-0jmhrgl5xq] {
        padding: 0.75rem 1rem;
        height: 70px;
    }

    .pet-name[b-0jmhrgl5xq] {
        font-size: 1.125rem;
    }

    .pet-breed-age[b-0jmhrgl5xq] {
        font-size: 0.6875rem;
    }

    .pet-avatar[b-0jmhrgl5xq] {
        width: 2rem;
        height: 2rem;
        font-size: 0.875rem;
    }

    .pet-info-section[b-0jmhrgl5xq] {
        padding: 1rem;
    }

    .info-box[b-0jmhrgl5xq] {
        padding: 0.5rem 0.375rem;
        height: 55px;
    }

    .info-label[b-0jmhrgl5xq] {
        font-size: 0.5625rem;
    }

    .info-value[b-0jmhrgl5xq] {
        font-size: 0.75rem;
    }

    .info-extra[b-0jmhrgl5xq] {
        font-size: 0.5625rem;
    }

    .medical-summary-bar[b-0jmhrgl5xq] {
        margin: 0 1rem;
        padding: 0.375rem;
    }

    .medical-circle[b-0jmhrgl5xq] {
        width: 1rem;
        height: 1rem;
        font-size: 0.5rem;
    }

    .medical-label[b-0jmhrgl5xq] {
        font-size: 0.5625rem;
    }

    .action-buttons[b-0jmhrgl5xq] {
        margin: 0.75rem 1rem 1rem 1rem;
    }
}

/* Large screens */
@media (min-width: 1200px) {
    .pets-grid[b-0jmhrgl5xq] {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 2rem;
    }
}

@media (min-width: 1600px) {
   /* .pet-management-page {
        padding: 2rem;
    }*/

    .pets-grid[b-0jmhrgl5xq] {
        gap: 2.5rem;
    }
}

/* Animation for pet cards on load */
.pet-card[b-0jmhrgl5xq] {
    animation: fadeInUp-b-0jmhrgl5xq 0.4s ease-out;
}

@keyframes fadeInUp-b-0jmhrgl5xq {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Hover effects for interactive elements */
.pet-card-header[b-0jmhrgl5xq] {
    position: relative;
    overflow: hidden;
}

    .pet-card-header[b-0jmhrgl5xq]::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transition: left 0.6s;
    }

.pet-card:hover .pet-card-header[b-0jmhrgl5xq]::before {
    left: 100%;
}

/* Focus states for accessibility */
.add-pet-btn:focus[b-0jmhrgl5xq],
.action-btn:focus[b-0jmhrgl5xq],
.btn:focus[b-0jmhrgl5xq] {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.close-btn:focus[b-0jmhrgl5xq] {
    outline: 2px solid #64748b;
    outline-offset: 2px;
}

/* Smooth transitions for all interactive elements */
.pet-card[b-0jmhrgl5xq],
.action-btn[b-0jmhrgl5xq],
.btn[b-0jmhrgl5xq],
.add-pet-btn[b-0jmhrgl5xq] {
    transition: all 0.3s ease;
}
/* /Pages/PickupForm.razor.rz.scp.css */
/* PickupForm.razor.css - Based on TrackingForm.razor.css with multi-dog enhancements */
/*.formcontrol.autowidth{    
    width: auto !important;
}*/
.pickup-form-page[b-fmadewb9eh] {
    /*background-color: #f8f9fa;*/
    min-height: 100vh;
    /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 1024px;
    margin: 0 auto;*/
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #1e293b70 0%, #3341557d 100%);
}

/* Header Section */
.header-card[b-fmadewb9eh] {
    /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: 1px solid #e1e5e9;*/
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    /*margin-bottom: 20px;*/
    border-bottom: 2px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/*.header-content {
    padding: 15px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: relative;
    z-index: 1;
}*/

/*.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}
*/
.header-icon[b-fmadewb9eh] {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.header-info[b-fmadewb9eh] {
    flex: 1;
    min-width: 0;
}
/*.header-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}*/
.header-title[b-fmadewb9eh] {
    font-size: 28px;
    font-weight: 700;
    color: white;
    margin-bottom: 2px;
    letter-spacing: -0.5px;
}
/*.header-dog-count-label {
    font-size: 18px;
    font-weight: 600;
    color: #212529;
    margin: 0 0 5px 0;
}
*/

.header-subtitle[b-fmadewb9eh] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 0;
}

.header-content-design[b-fmadewb9eh] {
    padding: 20px 25px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 25px;
}
.page-header[b-fmadewb9eh] {
    /*background-color: #deede6;*/
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 5px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: 1px solid #cdbc76;
    overflow: hidden;
    position: relative;
}

.page-title[b-fmadewb9eh] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #f3d03c;
    margin: 0 0 0.5rem 0;
}

.header-content[b-fmadewb9eh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*background-color: #ffffff;*/
    padding: 15px 15px;
    border-radius: 0.75rem;
    /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);*/
}

.header-left[b-fmadewb9eh] {
    display: flex;
    flex-direction: column;
}

.header-right[b-fmadewb9eh] {
    display: flex;
    flex-direction: row;
    gap: 5px;
}


.counter-card[b-fmadewb9eh] {
    /*background: white;*/
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    /*border: 1px solid rgba(255, 255, 255, 0.8);*/
    border: 0px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    min-width: 120px;
    color: #f3d03c;
}

.counter-title[b-fmadewb9eh] {
    font-size: 12px;
    color: white;
    font-weight: 500;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.counter-card .counter-controls[b-fmadewb9eh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.counter-card .counter-btn[b-fmadewb9eh] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #4a5568;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

    .counter-card .counter-btn:hover[b-fmadewb9eh] {
        background: #2196f3;
        border-color: #2196f3;
        color: white;
    }

.counter-card .counter-input[b-fmadewb9eh] {
    font-size: 16px;
    font-weight: 600;
    color: #2d3748;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 8px;
    text-align: center;
    width: 40px;
    outline: none;
}

    .counter-card .counter-input:focus[b-fmadewb9eh] {
        border-color: #2196f3;
        box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
    }

.main-content[b-fmadewb9eh] {
    background-color: #f8fafceb;
    /*max-width: 1024px;*/
    /*margin: 0 auto;
    padding: 1.5rem;*/
    /*margin-top: 2rem;*/
    /*background-color: #ffffff;*/
    /*border-radius:10px;*/
}

/* Form Cards */
.form-card[b-fmadewb9eh] {
    /*background: white;
    border-radius: 15px;*/
    /* background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);*/
    padding: 25px;
    /*margin-bottom: 25px;*/
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid #e2e8f0;
    border-radius: 10px;
}

.section-header[b-fmadewb9eh] {
    font-size: 16px;
    color: #2196f3;
    margin-bottom: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    text-align: left;
    gap: 10px;
    color: #2196f3;
    /*padding-bottom: 10px;
    border-bottom: 2px solid #e2e8f0;*/
    /*    align-items: flex-start;
    justify-content: space-between;*/
}
.section-header-info[b-fmadewb9eh] {
    flex: 1;
}

.form-label[b-fmadewb9eh] {
    font-size: 14px;
    color: #1e293b;
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
}

.form-control[b-fmadewb9eh], .form-select[b-fmadewb9eh] {
    font-size: 14px;
    padding: 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}

    .form-control:focus[b-fmadewb9eh], .form-select:focus[b-fmadewb9eh] {
        border-color: #2196f3;
        box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
        outline: none;
    }

.row[b-fmadewb9eh] {
    display: flex;
    flex-wrap: wrap;
    margin: -10px;
}

.col-md-3[b-fmadewb9eh], .col-md-4[b-fmadewb9eh], .col-md-6[b-fmadewb9eh], .col-md-12[b-fmadewb9eh] {
    padding: 10px;
    box-sizing: border-box;
}

.col-md-3[b-fmadewb9eh] {
    flex: 0 0 25%;
}

.col-md-4[b-fmadewb9eh] {
    flex: 0 0 33.333%;
}

.col-md-6[b-fmadewb9eh] {
    flex: 0 0 50%;
}

.col-md-12[b-fmadewb9eh] {
    flex: 0 0 100%;
}

.col-6[b-fmadewb9eh] {
    flex: 0 0 50%;
}

.col-lg-3[b-fmadewb9eh] {
    flex: 0 0 25%;
}

/* Dog Count Section */
.dog-count-section[b-fmadewb9eh] {
    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
    color: white;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}

.count-input-wrapper[b-fmadewb9eh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
}

.count-btn[b-fmadewb9eh] {
    background: white;
    color: #2196f3;
    border: 2px solid white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .count-btn:hover[b-fmadewb9eh] {
        background: rgba(255, 255, 255, 0.9);
        transform: scale(1.1);
    }

.count-input[b-fmadewb9eh] {
    background: white;
    color: #2196f3;
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 24px;
    font-weight: bold;
    /*min-width: 80px;*/
    text-align: center;
    border: none;
    outline: none;
}

/* Individual Dog Cards */
.dog-card[b-fmadewb9eh] {
    background: #f8f9fa;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    transition: all 0.3s;
}

    .dog-card:hover[b-fmadewb9eh] {
        border-color: #2196f3;
        box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);
    }

.dog-card-header[b-fmadewb9eh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #dee2e6;
}

.dog-number[b-fmadewb9eh] {
    background: #2196f3;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 10px;
    flex-shrink: 0;
}

.dog-id-display[b-fmadewb9eh] {
    font-family: monospace;
    background: #e3f2fd;
    padding: 5px 10px;
    border-radius: 4px;
    color: #1976d2;
    font-weight: 500;
    font-size: 12px;
}

/* Vaccination Status Grid */
.vaccination-grid[b-fmadewb9eh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 10px;
}

.vaccination-item[b-fmadewb9eh] {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 10px;
}

    .vaccination-item .form-label[b-fmadewb9eh] {
        font-size: 12px;
        font-weight: 600;
        color: #495057;
        margin-bottom: 5px;
    }

/* Media Documentation */
.media-section[b-fmadewb9eh] {
    background: #f1f3f4;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    margin-top: 15px;
    transition: all 0.3s;
}

    .media-section:hover[b-fmadewb9eh] {
        border-color: #2196f3;
        background: #e3f2fd;
    }

/* Buttons */
.btn[b-fmadewb9eh] {
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
}

.btn-primary[b-fmadewb9eh] {
    background: #2196f3;
    color: white;
}

    .btn-primary:hover[b-fmadewb9eh] {
        background: #1976d2;
    }

.btn-success[b-fmadewb9eh] {
    background: #198754;
    color: white;
}

    .btn-success:hover[b-fmadewb9eh] {
        background: #157347;
    }


.btn-outline-primary[b-fmadewb9eh] {
    color: orange;
    border:none;
}
    .btn-outline-primary:hover[b-fmadewb9eh] {
        background: #0d6efd;
        color: orange;
        border: none;
    }
.btn-outline-secondary[b-fmadewb9eh] {
    background: white;
    border: 2px solid #dee2e6;
    color: #495057;
}

    .btn-outline-secondary:hover[b-fmadewb9eh] {
        background: #f8f9fa;
    }

.btn-outline-danger[b-fmadewb9eh] {
    background: white;
    border: 1px solid #dc3545;
    color: #dc3545;
    padding: 5px 10px;
    font-size: 12px;
}

    .btn-outline-danger:hover[b-fmadewb9eh] {
        background: #dc3545;
        color: white;
    }

.btn-sm[b-fmadewb9eh] {
    padding: 5px 10px;
    font-size: 12px;
}

.btn-link[b-fmadewb9eh] {
    background: none;
    border: none;
    color: orange;
    padding: 5px 10px;
    text-decoration: none;
}

    .btn-link:hover[b-fmadewb9eh] {
        background: #0d6efd;
        color: orange;
        border: none;
    }

/* Mobile Capture Buttons */
.capture-buttons-container[b-fmadewb9eh] {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.mobile-capture-buttons[b-fmadewb9eh] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.mobile-upload-option[b-fmadewb9eh] {
    display: flex;
    align-items: center;
}

.btn-capture-photo[b-fmadewb9eh], .btn-capture-video[b-fmadewb9eh] {
    background: #2196f3;
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-capture-video[b-fmadewb9eh] {
    background: #f44336;
}

.btn-capture-photo:hover[b-fmadewb9eh] {
    background: #1976d2;
    transform: scale(1.1);
}

.btn-capture-video:hover[b-fmadewb9eh] {
    background: #d32f2f;
    transform: scale(1.1);
}

.btn-upload-files[b-fmadewb9eh] {
    background: #4caf50;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-upload-files:hover[b-fmadewb9eh] {
        background: #388e3c;
    }

/* Alert */
.alert-custom[b-fmadewb9eh] {
    background: #e3f2fd;
    border: 1px solid #2196f3;
    color: #1976d2;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 20px;
}

.alert-info[b-fmadewb9eh] {
    background: #e3f2fd;
    border: 1px solid #2196f3;
    color: #1976d2;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 20px;
}

    .alert-info strong[b-fmadewb9eh] {
        font-weight: 600;
    }

/* Location Header */
.location-header[b-fmadewb9eh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.location-title[b-fmadewb9eh] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: #2196f3;
    font-weight: 600;
}

.btn-current-location[b-fmadewb9eh] {
    background: #2196f3;
    border-color: #2196f3;
    color: white;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-current-location:hover[b-fmadewb9eh] {
        background: #1976d2;
        border-color: #1976d2;
    }

    .btn-current-location i[b-fmadewb9eh] {
        font-size: 14px;
    }

    .btn-current-location span[b-fmadewb9eh] {
        display: inline; /* Show text on desktop */
    }

.coordinates-row[b-fmadewb9eh] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

/* Image and Media Styles */
.image-thumbnail[b-fmadewb9eh] {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

.image-card[b-fmadewb9eh] {
    background: white;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    position: relative;
}

.video-thumbnail-container[b-fmadewb9eh] {
    position: relative;
}

.media-type-badge[b-fmadewb9eh] {
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
}

.status-overlay[b-fmadewb9eh] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    padding: 4px 8px;
    font-size: 0.75rem;
    color: white;
}

    .status-overlay .text-success[b-fmadewb9eh] {
        color: #28a745 !important;
    }

    .status-overlay .text-danger[b-fmadewb9eh] {
        color: #dc3545 !important;
    }

/* Processing Overlay */
.processing-overlay[b-fmadewb9eh] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.processing-modal[b-fmadewb9eh] {
    background: white;
    border-radius: 12px;
    padding: 30px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.processing-content[b-fmadewb9eh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.processing-spinner .spinner-border-lg[b-fmadewb9eh] {
    width: 3rem;
    height: 3rem;
    border-width: 4px;
}

.processing-title[b-fmadewb9eh] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.processing-message[b-fmadewb9eh] {
    font-size: 14px;
    color: #6c757d;
    margin: 0;
}

.processing-progress[b-fmadewb9eh] {
    width: 100%;
}

.progress[b-fmadewb9eh] {
    height: 8px;
    background-color: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
}

.progress-bar[b-fmadewb9eh] {
    height: 100%;
    background: linear-gradient(90deg, #2196f3, #1976d2);
    transition: width 0.3s ease;
    border-radius: 4px;
}

.progress-text[b-fmadewb9eh] {
    font-size: 12px;
    color: #6c757d;
    margin-top: 5px;
    display: block;
}

.processing-note[b-fmadewb9eh] {
    font-size: 12px;
    color: #6c757d;
    margin: 0;
}

/* Bootstrap Grid Utility Classes */
.d-none[b-fmadewb9eh] {
    display: none !important;
}

.d-flex[b-fmadewb9eh] {
    display: flex !important;
}

.justify-content-between[b-fmadewb9eh] {
    justify-content: space-between !important;
}

.justify-content-center[b-fmadewb9eh] {
    justify-content: center !important;
}

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

.me-1[b-fmadewb9eh] {
    margin-right: 4px !important;
}

.me-2[b-fmadewb9eh] {
    margin-right: 8px !important;
}

.mb-3[b-fmadewb9eh] {
    margin-bottom: 1rem !important;
}

.mt-2[b-fmadewb9eh] {
    margin-top: 0.5rem !important;
}

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

.p-2[b-fmadewb9eh] {
    padding: 0.5rem !important;
}

.text-muted[b-fmadewb9eh] {
    color: #6c757d !important;
}
.text-muted-white[b-fmadewb9eh] {
    color: white !important;
}

.text-muted-gold[b-fmadewb9eh] {
    color: #f3d03c !important;
}

.text-danger[b-fmadewb9eh] {
    color: #dc3545 !important;
}

.text-success[b-fmadewb9eh] {
    color: #28a745 !important;
}

/* Spinner */
.spinner-border[b-fmadewb9eh] {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: -0.125em;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-fmadewb9eh 0.75s linear infinite;
}

.spinner-border-sm[b-fmadewb9eh] {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
}
/* Search Panel Styles */
.search-panel[b-fmadewb9eh] {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    /*margin-bottom: 20px;*/
    /*border: 1px solid #e9ecef;*/
    transition: all 0.3s ease;
}

    .search-panel.show[b-fmadewb9eh] {
        display: block;
        animation: slideDown-b-fmadewb9eh 0.3s ease;
    }
.flexcontainer[b-fmadewb9eh] {
    display: flex;
    align-items: center;
}
    .flexcontainer > button[b-fmadewb9eh] {
        /*width:20px;*/
        height: max-content;
    }
.items-left[b-fmadewb9eh] {
    justify-content: flex-start;
}
.items-center[b-fmadewb9eh] {
    justify-content: center;
}
.items-right[b-fmadewb9eh]{
    justify-content:flex-end;
}
@keyframes slideDown-b-fmadewb9eh {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* Dogs Grid Layout */
.dogs-grid[b-fmadewb9eh] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 20px;
}

/* Individual Dog Selection Card */
.dog-selection-card[b-fmadewb9eh] {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    height: 80px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

    .dog-selection-card:hover[b-fmadewb9eh] {
        border-color: #2196f3;
        box-shadow: 0 4px 16px rgba(33, 150, 243, 0.15);
        transform: translateY(-2px);
    }

    .dog-selection-card.selected[b-fmadewb9eh] {
        border-color: #2196f3;
        background-color: #e3f2fd;
        box-shadow: 0 4px 16px rgba(33, 150, 243, 0.25);
    }

/* Checkbox in top-right corner */
.dog-card-checkbox[b-fmadewb9eh] {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
}

    .dog-card-checkbox input[type="checkbox"][b-fmadewb9eh] {
        width: 18px;
        height: 18px;
        cursor: pointer;
        accent-color: #2196f3;
    }

/* Dog Image/Placeholder */
.dog-card-image[b-fmadewb9eh] {
    width: 75px;
    height: 75px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 6px;
    overflow: hidden;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dog-thumbnail[b-fmadewb9eh] {
    width: 95%;
    height:95%;
    object-fit: cover;
    border-radius: 8px;
}

.dog-placeholder[b-fmadewb9eh] {
    color: #6c757d;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #f1f3f4;
    border-radius: 8px;
}

/* Dog Card Info */
.dog-card-info[b-fmadewb9eh] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0; /* Allow text truncation */
}

.dog-name[b-fmadewb9eh] {
    font-weight: 700;
    font-size: 16px;
    color: #1e293b;
    margin: 0;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dog-microchip[b-fmadewb9eh] {
    font-size: 11px;
    color: #4a5568;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .dog-microchip i[b-fmadewb9eh] {
        color: #2196f3;
        font-size: 10px;
    }

.dog-status[b-fmadewb9eh] {
    margin: 4px 0;
}

.status-badge[b-fmadewb9eh] {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .status-badge.badge-success[b-fmadewb9eh] {
        background-color: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }

    .status-badge.badge-info[b-fmadewb9eh] {
        background-color: #d1ecf1;
        color: #0c5460;
        border: 1px solid #bee5eb;
    }

    .status-badge.badge-warning[b-fmadewb9eh] {
        background-color: #fff3cd;
        color: #856404;
        border: 1px solid #ffeaa7;
    }

    .status-badge.badge-secondary[b-fmadewb9eh] {
        background-color: #e2e3e5;
        color: #383d41;
        border: 1px solid #d6d8db;
    }
.dog-card-right[b-fmadewb9eh] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
}

.dog-location[b-fmadewb9eh] {
    font-size: 11px;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 4px;
    text-align: right;
    /*max-width: 80px;*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .dog-location i[b-fmadewb9eh] {
        color: #dc3545;
        font-size: 9px;
        flex-shrink: 0;
    }

/* Results container */
.existing-dogs-results[b-fmadewb9eh] {
  /*  min-height: 100px;
    max-height: 500px;*/
    /*overflow-y: auto;*/
    /*padding: 8px;*/
    /*border-radius: 8px;*/
    /*background: #fafbfc;*/
    /*display:none;*/
}

/* Selected summary */
.selected-summary[b-fmadewb9eh] {
    border-left: 4px solid #28a745;
    background: #f8fff9;
    border: 1px solid #d4edda;
}
/* Empty State Styles */
.empty-state[b-fmadewb9eh] {
    text-align: center;
    color: #64748b;
}

.empty-state-icon[b-fmadewb9eh] {
    font-size: 48px;
    color: #cbd5e1;
}

.empty-state-title[b-fmadewb9eh] {
    font-size: 18px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 8px;
}

.empty-state-description[b-fmadewb9eh] {
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
    max-width: 500px;
    margin: 0 auto;
}

/* Add New Dog Button */
.add-dog-section[b-fmadewb9eh] {
    text-align: center;
    margin: 10px 0;
}

.btn-add-dog[b-fmadewb9eh] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

    .btn-add-dog:hover[b-fmadewb9eh] {
        background: linear-gradient(135deg, #059669 0%, #047857 100%);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35);
    }

/* Counter Display Styles */
.counter-display[b-fmadewb9eh] {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
}

.counter-label[b-fmadewb9eh] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
/* Floating Label Styles */
.floating-input[b-fmadewb9eh] {
    position: relative;
    margin-bottom: 20px;
}

    .floating-input input[b-fmadewb9eh],
    .floating-input select[b-fmadewb9eh],
    .floating-input textarea[b-fmadewb9eh] {
        width: 100%;
        padding: 16px 12px 8px 12px;
        font-size: 14px;
        border: 2px solid #e2e8f0;
        border-radius: 8px;
        /*background: transparent;*/
        outline: none;
        transition: all 0.3s ease;
        box-sizing: border-box;
    }

        .floating-input input:focus[b-fmadewb9eh],
        .floating-input select:focus[b-fmadewb9eh],
        .floating-input textarea:focus[b-fmadewb9eh] {
            border-color: #2196f3;
            box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
        }

    .floating-input label[b-fmadewb9eh] {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 12px;
        font-size: 14px;
        color: #6b7280;
        pointer-events: none;
        transition: all 0.3s ease;
        background: white;
        padding: 0 4px;
        transform-origin: left;
    }

    /* Label moves up when input is focused or has content */
    .floating-input input:focus + label[b-fmadewb9eh],
    .floating-input input:not(:placeholder-shown) + label[b-fmadewb9eh],
    .floating-input select:focus + label[b-fmadewb9eh],
    .floating-input textarea:focus + label[b-fmadewb9eh],
    .floating-input textarea:not(:placeholder-shown) + label[b-fmadewb9eh],
    .floating-input.has-value label[b-fmadewb9eh] {
        top: -8px;
        transform: translateY(0);
        left: 8px;
        font-size: 12px;
        color: #2196f3;
        font-weight: 600;
    }

    .floating-input label.required[b-fmadewb9eh]::after {
        content: " *";
        color: #dc3545;
    }

    .floating-input select[b-fmadewb9eh] {
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 12px center;
        background-repeat: no-repeat;
        background-size: 16px;
        padding-right: 40px;
    }

        .floating-input select:focus[b-fmadewb9eh] {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%232196f3' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        }

    .floating-input textarea[b-fmadewb9eh] {
        resize: vertical;
        /*min-height: 80px;*/
    }

    .floating-input input[type="date"]:not(:focus):not(:valid)[b-fmadewb9eh] {
        color: transparent;
    }

    /*.floating-input select option:first-child {
    color: transparent;
    display: none;
}

.floating-input select:invalid {
    color: #6b7280;
}

.floating-input select:focus:invalid {
    color: #1f2937;
}*/

/* For Blazor InputSelect specifically */
/*.floating-select[value=""] {
    color: #6b7280;
}*/
    /*.floating-input select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 12px center;
        background-repeat: no-repeat;
        background-size: 16px;
        padding-right: 40px;
        cursor: pointer;
    }

        .floating-input select:focus {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%232196f3' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        }*/

        /* Don't hide the first option - that was breaking it */
        /*.floating-input select option {
            color: inherit;
            display: block;
        }*/

.main-form-card[b-fmadewb9eh] {
    padding: 30px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-bottom: 20px;
}

    .main-form-card h2[b-fmadewb9eh] {
        color: #1e293b;
        font-size: 1.5rem;
        font-weight: 600;
        margin-bottom: 25px;
        padding-bottom: 15px;
        border-bottom: 2px solid #e2e8f0;
    }

@keyframes spinner-border-b-fmadewb9eh {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive Design */
@media (max-width: 992px) {
    .dogs-grid[b-fmadewb9eh] {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}
@media (max-width: 768px) {
    .form-container[b-fmadewb9eh] {
        padding: 0.5rem;
    }

    .col-md-3[b-fmadewb9eh], .col-md-4[b-fmadewb9eh], .col-md-6[b-fmadewb9eh] {
        flex: 0 0 100%;
    }

    .col-6[b-fmadewb9eh] {
        flex: 0 0 50%;
    }

    .vaccination-grid[b-fmadewb9eh] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .header-content[b-fmadewb9eh] {
        padding: 15px;
        flex-direction: column;
        gap: 10px;
    }

    .header-title[b-fmadewb9eh] {
        font-size: 20px;
    }

    .section-header[b-fmadewb9eh] {
        font-size: 1.1rem;
        padding-bottom: 8px;
    }

    .form-label[b-fmadewb9eh] {
        font-size: 12px;
        margin-bottom: 6px;
    }

    .form-control[b-fmadewb9eh], .form-select[b-fmadewb9eh] {
        font-size: 12px;
        padding: 0.5rem 0.75rem;
    }

    .dog-card-header[b-fmadewb9eh] {
        flex-wrap: wrap;
        gap: 10px;
    }

    .dog-id-display[b-fmadewb9eh] {
        font-size: 10px;
    }

    /* Mobile capture buttons layout */
    .capture-buttons-container[b-fmadewb9eh] {
        display: flex;
        flex-direction: row;
        gap: 8px;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .mobile-capture-buttons[b-fmadewb9eh] {
        display: flex;
        flex-direction: row;
        gap: 8px;
        flex: 2;
    }

    .mobile-upload-option[b-fmadewb9eh] {
        flex: 1;
        display: flex;
        justify-content: center;
    }

    .location-header[b-fmadewb9eh] {
        flex-direction: row;
        gap: 10px;
        align-items: stretch;
    }

    .btn-current-location[b-fmadewb9eh] {
        background: #2196f3;
        border-color: #2196f3;
        color: white;
        padding: 8px 10px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 500;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        min-width: 40px;
        height: 36px;
        max-width: 40px;
    }

        /* MOBILE: Hide text, show icon only for current location button */
        .btn-current-location span[b-fmadewb9eh] {
            display: none !important;
        }

        .btn-current-location i[b-fmadewb9eh] {
            font-size: 16px;
            margin: 0 !important;
        }

    .coordinates-row[b-fmadewb9eh] {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    .count-input-wrapper[b-fmadewb9eh] {
        gap: 10px;
    }

    .count-btn[b-fmadewb9eh] {
        width: 35px;
        height: 35px;
        font-size: 18px;
    }

    .count-input[b-fmadewb9eh] {
        min-width: 60px;
        font-size: 20px;
        padding: 8px 15px;
    }
    .header-content-design3[b-fmadewb9eh] {
        flex-direction: column;
        gap: 15px;
    }

    .counter-card[b-fmadewb9eh] {
        align-self: stretch;
        min-width: auto;
    }

    .dogs-grid[b-fmadewb9eh] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .dog-selection-card[b-fmadewb9eh] {
        height: 70px;
        padding: 10px;
        gap: 10px;
    }

    .dog-card-image[b-fmadewb9eh] {
        width: 70px;
        height: 70px;
    }

    .dog-name[b-fmadewb9eh] {
        font-size: 14px;
    }

    .dog-microchip[b-fmadewb9eh] {
        font-size: 10px;
    }

    .dog-location[b-fmadewb9eh] {
        font-size: 10px;
        max-width: 70px;
    }

    .search-panel[b-fmadewb9eh] {
        padding: 12px;
    }
}

@media (max-width: 576px) {
    .form-card[b-fmadewb9eh] {
        padding: 15px;
        margin-bottom: 15px;
    }

    .dog-card[b-fmadewb9eh] {
        padding: 15px;
        margin-bottom: 15px;
    }

    .vaccination-item[b-fmadewb9eh] {
        padding: 8px;
    }

    .media-section[b-fmadewb9eh] {
        padding: 15px;
    }

    .image-thumbnail[b-fmadewb9eh] {
        height: 100px;
    }

    .col-6[b-fmadewb9eh] {
        flex: 0 0 100%;
    }
    .location-header[b-fmadewb9eh] {
        flex-direction: row;
        gap: 10px;
        align-items: stretch;
    }
    .dogs-grid[b-fmadewb9eh] {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 10px;
    }

    .dog-selection-card[b-fmadewb9eh] {
        height: 65px;
        padding: 8px;
        gap: 8px;
    }

    .dog-card-image[b-fmadewb9eh] {
        width: 65px;
        height: 65px;
    }

    .dog-name[b-fmadewb9eh] {
        font-size: 13px;
    }

    .dog-microchip[b-fmadewb9eh],
    .dog-location[b-fmadewb9eh] {
        font-size: 9px;
    }

    .dog-card-checkbox input[type="checkbox"][b-fmadewb9eh] {
        width: 14px;
        height: 14px;
    }
}
@media (max-width: 480px) {
    .btn-current-location[b-fmadewb9eh] {
        padding: 6px 8px;
        font-size: 10px;
        max-width: 40px;
    }
    .location-header[b-fmadewb9eh] {
        flex-direction: row;
        gap: 10px;
        align-items: stretch;
    }
}
/* /Pages/PickupRecordDetails-old.razor.rz.scp.css */
/* Pickup Record Details Styles */
.pickup-details-container[b-f8xl4lxnh0] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f8f9fa;
    min-height: 100vh;
}

/* Loading and Empty States */
.loading-container[b-f8xl4lxnh0], .empty-state[b-f8xl4lxnh0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.spinner[b-f8xl4lxnh0] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #2196f3;
    border-radius: 50%;
    animation: spin-b-f8xl4lxnh0 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin-b-f8xl4lxnh0 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.empty-state h4[b-f8xl4lxnh0] {
    color: #495057;
    margin-bottom: 10px;
}

.empty-state p[b-f8xl4lxnh0] {
    color: #6c757d;
    margin-bottom: 20px;
}

/* Header Section */
.details-header[b-f8xl4lxnh0] {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.header-left[b-f8xl4lxnh0] {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
}

.btn-back[b-f8xl4lxnh0] {
    background: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-back:hover[b-f8xl4lxnh0] {
        background: #e9ecef;
        border-color: #adb5bd;
    }

.header-title h1[b-f8xl4lxnh0] {
    font-size: 28px;
    font-weight: 600;
    color: #212529;
    margin: 0 0 5px 0;
}

.header-meta[b-f8xl4lxnh0] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6c757d;
}

.separator[b-f8xl4lxnh0] {
    color: #dee2e6;
}

.priority[b-f8xl4lxnh0] {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

    .priority.normal[b-f8xl4lxnh0] {
        background: #d4edda;
        color: #155724;
    }

    .priority.urgent[b-f8xl4lxnh0] {
        background: #fff3cd;
        color: #856404;
    }

    .priority.critical[b-f8xl4lxnh0] {
        background: #f8d7da;
        color: #721c24;
    }

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

.btn-action[b-f8xl4lxnh0] {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-action.edit[b-f8xl4lxnh0] {
        background: #2196f3;
        color: white;
    }

        .btn-action.edit:hover[b-f8xl4lxnh0] {
            background: #1976d2;
        }

    .btn-action.download[b-f8xl4lxnh0] {
        background: #28a745;
        color: white;
    }

        .btn-action.download:hover[b-f8xl4lxnh0] {
            background: #218838;
        }

.btn-primary[b-f8xl4lxnh0] {
    background: #2196f3;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-primary:hover[b-f8xl4lxnh0] {
        background: #1976d2;
    }

/* Details Grid */
.details-grid[b-f8xl4lxnh0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
}

.details-card[b-f8xl4lxnh0] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
}

    .details-card.full-width[b-f8xl4lxnh0] {
        grid-column: 1 / -1;
    }

.card-header[b-f8xl4lxnh0] {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 15px 20px;
    font-weight: 600;
    color: #495057;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .card-header i[b-f8xl4lxnh0] {
        color: #2196f3;
    }

.card-content[b-f8xl4lxnh0] {
    padding: 20px;
}

/* Information Rows */
.info-row[b-f8xl4lxnh0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f8f9fa;
}

    .info-row:last-child[b-f8xl4lxnh0] {
        border-bottom: none;
    }

    .info-row .label[b-f8xl4lxnh0] {
        font-weight: 500;
        color: #6c757d;
        flex: 0 0 140px;
    }

    .info-row .value[b-f8xl4lxnh0] {
        color: #495057;
        text-align: right;
        flex: 1;
    }

        .info-row .value.highlight[b-f8xl4lxnh0] {
            font-weight: 600;
            color: #2196f3;
        }

.vehicle-number[b-f8xl4lxnh0] {
    font-family: monospace;
    background: #e3f2fd;
    color: #1976d2;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
}

.phone-link[b-f8xl4lxnh0] {
    color: #2196f3;
    text-decoration: none;
}

    .phone-link:hover[b-f8xl4lxnh0] {
        text-decoration: underline;
    }

.priority-badge[b-f8xl4lxnh0] {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

    .priority-badge.normal[b-f8xl4lxnh0] {
        background: #d4edda;
        color: #155724;
    }

    .priority-badge.urgent[b-f8xl4lxnh0] {
        background: #fff3cd;
        color: #856404;
    }

    .priority-badge.critical[b-f8xl4lxnh0] {
        background: #f8d7da;
        color: #721c24;
    }

.sync-status[b-f8xl4lxnh0] {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .sync-status.synced[b-f8xl4lxnh0] {
        color: #28a745;
    }

    .sync-status.pending[b-f8xl4lxnh0] {
        color: #ffc107;
    }

    .sync-status.failed[b-f8xl4lxnh0] {
        color: #dc3545;
    }

/* Dogs Grid */
.dogs-grid[b-f8xl4lxnh0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
}

.dog-card[b-f8xl4lxnh0] {
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 15px;
    background: #f8f9fa;
}

.dog-header[b-f8xl4lxnh0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.dog-info[b-f8xl4lxnh0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dog-id[b-f8xl4lxnh0] {
    font-family: monospace;
    font-weight: 600;
    color: #2196f3;
    font-size: 12px;
}

.dog-name[b-f8xl4lxnh0] {
    font-weight: 600;
    color: #495057;
}

.dog-status[b-f8xl4lxnh0] {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

    .dog-status.in-area[b-f8xl4lxnh0] {
        background: #e8f5e9;
        color: #2e7d32;
    }

    .dog-status.picked-up[b-f8xl4lxnh0] {
        background: #e3f2fd;
        color: #1976d2;
    }

    .dog-status.at-shelter[b-f8xl4lxnh0] {
        background: #fff3e0;
        color: #f57c00;
    }

.dog-details[b-f8xl4lxnh0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}

.dog-detail[b-f8xl4lxnh0] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6c757d;
}

    .dog-detail i[b-f8xl4lxnh0] {
        width: 14px;
        color: #2196f3;
    }

.dog-actions[b-f8xl4lxnh0] {
    display: flex;
    justify-content: flex-end;
}

.btn-small[b-f8xl4lxnh0] {
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .btn-small.view[b-f8xl4lxnh0] {
        background: #2196f3;
        color: white;
    }

        .btn-small.view:hover[b-f8xl4lxnh0] {
            background: #1976d2;
        }

/* Metadata Grid */
.metadata-grid[b-f8xl4lxnh0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .pickup-details-container[b-f8xl4lxnh0] {
        padding: 15px;
    }

    .details-header[b-f8xl4lxnh0] {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .header-left[b-f8xl4lxnh0] {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .header-actions[b-f8xl4lxnh0] {
        justify-content: center;
    }

    .details-grid[b-f8xl4lxnh0] {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .info-row[b-f8xl4lxnh0] {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

        .info-row .label[b-f8xl4lxnh0] {
            flex: none;
        }

        .info-row .value[b-f8xl4lxnh0] {
            text-align: left;
        }

    .dogs-grid[b-f8xl4lxnh0] {
        grid-template-columns: 1fr;
    }

    .metadata-grid[b-f8xl4lxnh0] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/PickupRecordDetails.razor.rz.scp.css */
/* Pickup Record Details - Enhanced Responsive Design (Community Dog Details Style) */
.form-container[b-33at3xkke5] {
    background-color: #f8f9fa;
    min-height: 100vh;
    padding: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 1200px;
    margin: 0 auto;
}

/* Loading States */
.loading-container[b-33at3xkke5],
.error-container[b-33at3xkke5] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 2rem;
}

.loading-spinner[b-33at3xkke5],
.error-card[b-33at3xkke5] {
    text-align: center;
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.loading-text[b-33at3xkke5] {
    margin-top: 1rem;
    color: #6c757d;
    font-size: 14px;
}

.error-icon[b-33at3xkke5] {
    font-size: 3rem;
    color: #dc3545;
    margin-bottom: 1rem;
}

/* Header Section */
.header-card[b-33at3xkke5] {
    background: linear-gradient(135deg, #deede6 0%, #c8e6c9 100%);
    border: 1px solid #e1e5e9;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    overflow: hidden;
}

.header-content[b-33at3xkke5] {
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.header-left[b-33at3xkke5] {
    flex: 1;
}

.header-title[b-33at3xkke5] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #212529;
    margin: 0 0 0.5rem 0;
}

.header-subtitle[b-33at3xkke5] {
    font-size: 0.875rem;
    color: #6c757d;
    line-height: 1.4;
}

.header-right[b-33at3xkke5] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Status Badges */
.status-badge[b-33at3xkke5] {
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.status-inarea[b-33at3xkke5] {
    background: #f8d7da;
    color: #721c24;
}

.status-scheduled[b-33at3xkke5] {
    background: #fff3cd;
    color: #856404;
}

.status-pickedup[b-33at3xkke5] {
    background: #d1ecf1;
    color: #0c5460;
}

.status-atshelter[b-33at3xkke5] {
    background: #cce5ff;
    color: #004085;
}

.status-procedure[b-33at3xkke5] {
    background: #e2e3e5;
    color: #383d41;
}

.status-recovery[b-33at3xkke5] {
    background: #fff3cd;
    color: #856404;
}

.status-ready[b-33at3xkke5] {
    background: #d4edda;
    color: #155724;
}

.status-released[b-33at3xkke5] {
    background: #d1f2eb;
    color: #0e6245;
}

.status-deceased[b-33at3xkke5] {
    background: #f8d7da;
    color: #721c24;
}

.status-missing[b-33at3xkke5] {
    background: #e2e3e5;
    color: #383d41;
}

.status-unknown[b-33at3xkke5] {
    background: #ffeaa7;
    color: #856404;
}

/* Form Cards */
.form-card[b-33at3xkke5] {
    background: white;
    border: 1px solid #e1e5e9;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: all 0.3s ease;
}

    .form-card:hover[b-33at3xkke5] {
        box-shadow: 0 4px 15px rgba(0,0,0,0.12);
        transform: translateY(-2px);
    }

.section-header[b-33at3xkke5] {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #e9ecef;
    padding: 1rem 1.5rem;
    font-weight: 600;
    font-size: 1rem;
    color: #495057;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

    .section-header i[b-33at3xkke5] {
        color: #28a745;
        margin-right: 0.5rem;
    }

.section-actions[b-33at3xkke5] {
    display: flex;
    gap: 0.5rem;
}

.btn-icon[b-33at3xkke5] {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    border-radius: 4px;
    color: #6c757d;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

    .btn-icon:hover[b-33at3xkke5] {
        background: #e9ecef;
        color: #495057;
    }

.card-content[b-33at3xkke5] {
    padding: 1.5rem;
    transition: all 0.3s ease;
    overflow: hidden;
}

    .card-content.collapsed[b-33at3xkke5] {
        max-height: 0;
        padding: 0 1.5rem;
        opacity: 0;
    }

/* Detail Layout */
.detail-row[b-33at3xkke5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

    .detail-row:last-child[b-33at3xkke5] {
        margin-bottom: 0;
    }

.detail-col[b-33at3xkke5] {
    display: flex;
    flex-direction: column;
}

    .detail-col.full[b-33at3xkke5] {
        grid-column: 1 / -1;
    }

    .detail-col.half[b-33at3xkke5] {
        grid-column: span 2;
    }

.detail-field[b-33at3xkke5] {
    margin-bottom: 1rem;
}

    .detail-field:last-child[b-33at3xkke5] {
        margin-bottom: 0;
    }

.field-label[b-33at3xkke5] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 0.5rem;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.field-value[b-33at3xkke5] {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    color: #495057;
    padding: 0.75rem;
    font-size: 0.875rem;
    border-radius: 6px;
    min-height: 44px;
    display: flex;
    align-items: center;
    line-height: 1.5;
    word-break: break-word;
    transition: all 0.2s;
}

    .field-value:hover[b-33at3xkke5] {
        background-color: #e9ecef;
    }

    .field-value.large[b-33at3xkke5] {
        min-height: 80px;
        align-items: flex-start;
        padding-top: 0.75rem;
        line-height: 1.6;
    }

    .field-value.highlight[b-33at3xkke5] {
        font-weight: 600;
        color: #2196f3;
    }

.notes-content[b-33at3xkke5] {
    white-space: pre-wrap;
    word-wrap: break-word;
}

.vehicle-number[b-33at3xkke5] {
    font-family: monospace;
    background: #e3f2fd;
    color: #1976d2;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
}

.phone-link[b-33at3xkke5] {
    color: #2196f3;
    text-decoration: none;
}

    .phone-link:hover[b-33at3xkke5] {
        text-decoration: underline;
    }

.map-link[b-33at3xkke5] {
    color: #007bff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    transition: all 0.2s;
    margin-left: 1rem;
}

    .map-link:hover[b-33at3xkke5] {
        color: #0056b3;
        text-decoration: underline;
    }

/* Sync Status */
.sync-status[b-33at3xkke5] {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .sync-status.synced[b-33at3xkke5] {
        color: #28a745;
    }

    .sync-status.pending[b-33at3xkke5] {
        color: #ffc107;
    }

    .sync-status.failed[b-33at3xkke5] {
        color: #dc3545;
    }

/* Dog Tabs */
.dog-tabs[b-33at3xkke5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 1rem;
}

.dog-tab[b-33at3xkke5] {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 200px;
    flex: 1;
}

    .dog-tab:hover[b-33at3xkke5] {
        background: #e9ecef;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .dog-tab.active[b-33at3xkke5] {
        background: #2196f3;
        color: white;
        border-color: #2196f3;
        box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
    }

.dog-tab-number[b-33at3xkke5] {
    background: white;
    color: #2196f3;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.dog-tab.active .dog-tab-number[b-33at3xkke5] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.dog-tab-info[b-33at3xkke5] {
    flex: 1;
    min-width: 0;
}

.dog-tab-name[b-33at3xkke5] {
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dog-tab-id[b-33at3xkke5] {
    font-family: monospace;
    font-size: 0.75rem;
    opacity: 0.8;
}

.dog-tab-status[b-33at3xkke5] {
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* Dog Details Content */
.dog-details-content[b-33at3xkke5] {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1.5rem;
}

.dog-section[b-33at3xkke5] {
    margin-bottom: 1.5rem;
}

    .dog-section:last-child[b-33at3xkke5] {
        margin-bottom: 0;
    }

.dog-section-title[b-33at3xkke5] {
    font-size: 1rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #dee2e6;
}

    .dog-section-title i[b-33at3xkke5] {
        color: #2196f3;
    }

/* Vaccination Grid */
.vaccination-grid[b-33at3xkke5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.vaccination-item[b-33at3xkke5] {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    transition: all 0.3s ease;
}

    .vaccination-item:hover[b-33at3xkke5] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .vaccination-item.vaccinated[b-33at3xkke5] {
        border-color: #28a745;
        background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    }

    .vaccination-item.not-vaccinated[b-33at3xkke5] {
        border-color: #dc3545;
        background: linear-gradient(135deg, #f8d7da 0%, #f1b0b7 100%);
    }

    .vaccination-item.unknown[b-33at3xkke5] {
        border-color: #ffc107;
        background: linear-gradient(135deg, #fff3cd 0%, #fce4a0 100%);
    }

.vaccination-status[b-33at3xkke5] {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

    .vaccination-status.vaccinated[b-33at3xkke5] {
        color: #155724;
    }

    .vaccination-status.not-vaccinated[b-33at3xkke5] {
        color: #721c24;
    }

    .vaccination-status.unknown[b-33at3xkke5] {
        color: #856404;
    }

.vaccination-date[b-33at3xkke5] {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 500;
}

/* Dog Actions */
.dog-actions[b-33at3xkke5] {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #dee2e6;
}

/* Action Buttons */
.action-buttons[b-33at3xkke5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.action-group-left[b-33at3xkke5],
.action-group-right[b-33at3xkke5] {
    display: flex;
    gap: 0.75rem;
}

.btn[b-33at3xkke5] {
    padding: 0.75rem 1.5rem;
    border: 1px solid #ced4da;
    border-radius: 8px;
    background: white;
    color: #495057;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    min-width: 120px;
}

    .btn:hover[b-33at3xkke5] {
        background: #f8f9fa;
        border-color: #adb5bd;
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .btn:active[b-33at3xkke5] {
        transform: translateY(0);
    }

.btn-primary[b-33at3xkke5] {
    background: linear-gradient(135deg, #007bff, #0056b3);
    border-color: #007bff;
    color: white;
}

    .btn-primary:hover[b-33at3xkke5] {
        background: linear-gradient(135deg, #0056b3, #004085);
        border-color: #0056b3;
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
    }

.btn-secondary[b-33at3xkke5] {
    background: #6c757d;
    border-color: #6c757d;
    color: white;
}

    .btn-secondary:hover[b-33at3xkke5] {
        background: #545b62;
        border-color: #545b62;
    }

.btn-info[b-33at3xkke5] {
    background: linear-gradient(135deg, #17a2b8, #117a8b);
    border-color: #17a2b8;
    color: white;
}

    .btn-info:hover[b-33at3xkke5] {
        background: linear-gradient(135deg, #117a8b, #0e6674);
        border-color: #117a8b;
        box-shadow: 0 4px 12px rgba(23, 162, 184, 0.4);
    }

.btn:disabled[b-33at3xkke5] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

    .btn:disabled:hover[b-33at3xkke5] {
        transform: none;
        box-shadow: none;
    }

/* Spinner */
.spinner-border[b-33at3xkke5] {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: -0.125em;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-33at3xkke5 0.75s linear infinite;
}

.spinner-border-sm[b-33at3xkke5] {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
}

@keyframes spinner-border-b-33at3xkke5 {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .detail-row[b-33at3xkke5] {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 0.75rem;
    }

    .vaccination-grid[b-33at3xkke5] {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .dog-tabs[b-33at3xkke5] {
        flex-direction: column;
    }

    .dog-tab[b-33at3xkke5] {
        min-width: auto;
    }
}

@media (max-width: 768px) {
    .form-container[b-33at3xkke5] {
        padding: 0.75rem;
    }

    .header-content[b-33at3xkke5] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .header-title[b-33at3xkke5] {
        font-size: 1.5rem;
    }

    .detail-row[b-33at3xkke5] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .vaccination-grid[b-33at3xkke5] {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 0.75rem;
    }

    .vaccination-item[b-33at3xkke5] {
        padding: 0.75rem;
    }

    .action-buttons[b-33at3xkke5] {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem;
    }

    .action-group-left[b-33at3xkke5],
    .action-group-right[b-33at3xkke5] {
        width: 100%;
        justify-content: center;
    }

    .btn[b-33at3xkke5] {
        min-width: auto;
        flex: 1;
    }

    .dog-details-content[b-33at3xkke5] {
        padding: 1rem;
    }

    .dog-section-title[b-33at3xkke5] {
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .form-container[b-33at3xkke5] {
        padding: 0.5rem;
    }

    .card-content[b-33at3xkke5] {
        padding: 1rem;
    }

    .section-header[b-33at3xkke5] {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }

    .field-value[b-33at3xkke5] {
        padding: 0.5rem;
        font-size: 0.8125rem;
    }

    .vaccination-grid[b-33at3xkke5] {
        grid-template-columns: 1fr 1fr;
    }

    .btn[b-33at3xkke5] {
        padding: 0.625rem 1rem;
        font-size: 0.8125rem;
    }
}

/* Print Styles */
@media print {
    .form-container[b-33at3xkke5] {
        background: white;
        box-shadow: none;
        max-width: none;
        margin: 0;
        padding: 1rem;
    }

    .header-card[b-33at3xkke5],
    .form-card[b-33at3xkke5] {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
        margin-bottom: 1rem;
    }

    .action-buttons[b-33at3xkke5],
    .btn-icon[b-33at3xkke5],
    .section-actions[b-33at3xkke5] {
        display: none !important;
    }

    .dog-tabs[b-33at3xkke5] {
        display: none;
    }

    .dog-details-content[b-33at3xkke5] {
        background: white;
    }
}
/* /Pages/PickupRecordsList.razor.rz.scp.css */
/* Pickup Records List Styles */
.pickup-records-page[b-d4hw25cwoo] {
    /*background-color: #f8f9fa;*/
    /*  min-height: 100vh;
    max-width: 1024px;
    margin: 0 auto;*/
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #1e293b70 0%, #3341557d 100%);
    overflow: hidden;
}

/* Modern Header Section */
.page-header[b-d4hw25cwoo] {
    /*background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 5px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    /*margin-bottom: 20px;*/
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #cdbc76;
}

    .page-header[b-d4hw25cwoo]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /*background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);*/
        pointer-events: none;
    }

.header-content[b-d4hw25cwoo] {
    padding: 15px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: relative;
    z-index: 1;
}

.header-left[b-d4hw25cwoo] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.header-icon[b-d4hw25cwoo] {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #f3d03c;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.header-text-with-stats[b-d4hw25cwoo] {
    flex: 1;
}

.header-title[b-d4hw25cwoo] {
    font-size: 1.75rem;
    font-weight: 700;
    color: #f3d03c;
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.5px;
}

.header-subtitle[b-d4hw25cwoo] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 0;
}

.pills-row[b-d4hw25cwoo] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}
    .pills-row > *[b-d4hw25cwoo] {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
    }
.mini-stat-pill[b-d4hw25cwoo] {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    padding: 3px 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.3s ease;
    font-size: 11px;
    color: #f3d03c;
}

    .mini-stat-pill:hover[b-d4hw25cwoo] {
        background: rgba(255, 255, 255, 0.15);
        transform: translateY(-1px);
    }

.mini-stat-number[b-d4hw25cwoo] {
    font-size: 12px;
    font-weight: 700;
    color: #f3d03c;
    line-height: 1;
}

.mini-stat-label[b-d4hw25cwoo] {
    font-size: 10px;
    color:rgba(175 161 110,0.8);
    font-weight: 500;
    letter-spacing: 0.2px;
}

.main-content[b-d4hw25cwoo] {
    background-color: #f8fafceb;
}
.sync-indicator[b-d4hw25cwoo] {
    background: rgba(251, 191, 36, 0.2);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 14px;
    padding: 3px 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 500;
    color: #fbbf24;
    letter-spacing: 0.2px;
    flex-shrink: 0; /* Add this */
    height: 22px; /* Add this to match mini-stat-pill height */
}
    .sync-indicator.synced[b-d4hw25cwoo] {
        background: #d4edda;
        color: #155724;
    }

    .sync-indicator.pending[b-d4hw25cwoo] {
        background: #fff3cd;
        color: #856404;
    }

    .sync-indicator.failed[b-d4hw25cwoo] {
        background: #f8d7da;
        color: #721c24;
    }

    .sync-indicator.online[b-d4hw25cwoo] {
        background: rgba(34, 197, 94, 0.2);
        border-color: rgba(34, 197, 94, 0.3);
        color: #22c55e;
    }

    .sync-indicator.offline[b-d4hw25cwoo] {
        background: rgba(239, 68, 68, 0.2);
        border-color: rgba(239, 68, 68, 0.3);
        color: #ef4444;
    }

.sync-text[b-d4hw25cwoo] {
    font-size: 10px;
    color: #6c757d;
    font-weight: 500;
}
   
/* Sync Status */
.sync-status[b-d4hw25cwoo] {
    width: 60px;
    flex-shrink: 0;
    text-align: center;
}

/* .sync-indicator {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 0 auto 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px
    background: rgba(251, 191, 36, 0.2);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 14px;
    padding: 3px 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 500;
    color: #fbbf24;
    letter-spacing: 0.2px;
    flex-shrink: 0; /* Add this 
    height: 22px; /* Add this to match mini-stat-pill height 
}*/




.add-record-btn[b-d4hw25cwoo] {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #f3d03c;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

    .add-record-btn:hover[b-d4hw25cwoo] {
        background: rgba(255, 255, 255, 0.25);
        transform: translateY(-2px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        color: #f3d03c;
        font-weight:bolder;
    }

/* Responsive adjustments */
@media (max-width: 768px) {
    .header-content[b-d4hw25cwoo] {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 18px 20px;
    }

    .header-left[b-d4hw25cwoo] {
        justify-content: center;
        text-align: center;
    }

    .pills-row[b-d4hw25cwoo] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .header-title[b-d4hw25cwoo] {
        font-size: 24px;
    }
}
/* Filter Section */
.filter-section[b-d4hw25cwoo] {
    background: white;
    border: 1px solid #e1e5e9;
    /*border-radius: 8px;*/
    padding: 16px 20px;
    /*margin-bottom: 15px;*/
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.filter-content[b-d4hw25cwoo] {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.filter-group[b-d4hw25cwoo] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .filter-group label[b-d4hw25cwoo] {
        font-size: 14px;
        font-weight: 500;
        color: #495057;
    }

    .filter-group select[b-d4hw25cwoo],
    .filter-group input[b-d4hw25cwoo] {
        padding: 6px 10px;
        border: 1px solid #ced4da;
        border-radius: 4px;
        font-size: 14px;
    }

        .filter-group select:focus[b-d4hw25cwoo],
        .filter-group input:focus[b-d4hw25cwoo] {
            border-color: #2196f3;
            outline: none;
            box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
        }

/* Action Bar */
.action-bar[b-d4hw25cwoo] {
    background: white;
    border: 1px solid #e1e5e9;
    /*border-radius: 8px;*/
    padding: 16px 20px;
    /*margin-bottom: 5px;*/
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.action-bar-content[b-d4hw25cwoo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
.actions-cell[b-d4hw25cwoo] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.action-btn[b-d4hw25cwoo] {
    padding: 6px 8px;
    border: 1px solid #ced4da;
    background: white;
    color: #495057;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
}

    .action-btn:hover[b-d4hw25cwoo] {
        background: #f8f9fa;
        border-color: #adb5bd;
        transform: translateY(-1px);
    }

    .action-btn.primary[b-d4hw25cwoo] {
        background: #2196f3;
        border-color: #2196f3;
        color: white;
    }

        .action-btn.primary:hover[b-d4hw25cwoo] {
            background: #1976d2;
            border-color: #1976d2;
        }

.select-all-content[b-d4hw25cwoo] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.select-all-checkbox[b-d4hw25cwoo] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .select-all-checkbox input[type="checkbox"][b-d4hw25cwoo] {
        width: 16px;
        height: 16px;
        cursor: pointer;
        accent-color: #2196f3;
    }

    .select-all-checkbox label[b-d4hw25cwoo] {
        font-size: 14px;
        font-weight: 500;
        color: #495057;
        cursor: pointer;
        margin: 0;
    }

.selection-actions[b-d4hw25cwoo] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.selection-count[b-d4hw25cwoo] {
    font-style: italic;
    font-weight: bold;
    color: #2196f3;
    font-size: 14px;
}

.action-buttons[b-d4hw25cwoo] {
    display: flex;
    gap: 8px;
}

.btn-action[b-d4hw25cwoo] {
    background: white;
    color: #495057;
    border: 1px solid #e9ecef;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

    .btn-action:hover:not(:disabled)[b-d4hw25cwoo] {
        background: #f8f9fa;
        border-color: #dee2e6;
        transform: translateY(-1px);
    }

    .btn-action:disabled[b-d4hw25cwoo] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .btn-action.export[b-d4hw25cwoo] {
        color: #2196f3;
        border-color: #2196f3;
    }

        .btn-action.export:hover:not(:disabled)[b-d4hw25cwoo] {
            background: #e3f2fd;
        }

    .btn-action.view[b-d4hw25cwoo] {
        color: #28a745;
        border-color: #28a745;
    }

        .btn-action.view:hover:not(:disabled)[b-d4hw25cwoo] {
            background: #d4edda;
        }

/* Loading and Empty States */
.loading-container[b-d4hw25cwoo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #6c757d;
}

.spinner[b-d4hw25cwoo] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #2196f3;
    border-radius: 50%;
    animation: spin-b-d4hw25cwoo 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin-b-d4hw25cwoo {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.empty-state[b-d4hw25cwoo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    background:white;
    justify-content: center;
    padding: 60px 20px;
    color: #6c757d;
    text-align: center;
}

    .empty-state h4[b-d4hw25cwoo] {
        margin: 20px 0 10px 0;
        color: #495057;
    }

    .empty-state p[b-d4hw25cwoo] {
        color: #6c757d;
        font-size: 14px;
    }

/* Timeline Container */
.timeline-container[b-d4hw25cwoo] {
    position: relative;
    padding-left: 60px;
}

.timeline-line[b-d4hw25cwoo] {
    position: absolute;
    left: 40px;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: #e9ecef;
    z-index: 1;
}

/* Day Markers */
.day-marker[b-d4hw25cwoo] {
    position: relative;
    left: -50px;
    background-color: #6c757d;
    border: 2px solid #6c757d;
    border-radius: 20px;
    padding: 2px;
    font-size: 12px;
    color: white;
    text-align: center;
    margin: 25px 0 15px 0;
    width: 80px;
    z-index: 3;
    font-weight: 700;
}

    .day-marker.today[b-d4hw25cwoo] {
        background-color: #2196f3;
        border-color: #2196f3;
        color: white;
    }

/* Timeline Checkboxes */
.timeline-checkbox[b-d4hw25cwoo] {
    position: absolute;
    left: 32px;
    width: 22px;
    height: 22px;
    z-index: 3;
    margin-top: 50px;
}

    .timeline-checkbox input[type="checkbox"][b-d4hw25cwoo] {
        width: 16px;
        height: 16px;
        margin: 0;
        cursor: pointer;
        position: absolute;
        z-index: 2;
    }

.checkbox-label[b-d4hw25cwoo] {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #6c757d;
    border: 3px solid white;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    box-shadow: 0 0 0 1px #e9ecef;
}

    .checkbox-label.today[b-d4hw25cwoo] {
        background-color: #2196f3;
    }

.timeline-checkbox input[type="checkbox"]:checked + .checkbox-label[b-d4hw25cwoo] {
    background-color: #2196f3;
    transform: scale(1.2);
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.3);
}

    .timeline-checkbox input[type="checkbox"]:checked + .checkbox-label[b-d4hw25cwoo]::after {
        content: '✓';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 10px;
        font-weight: bold;
    }

/* Pickup Record Cards */
.pickup-card[b-d4hw25cwoo] {
    background-color: #effdff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    margin-bottom: 15px;
    margin-right: 20px;
    padding: 20px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 100px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.2s;
}

    .pickup-card:hover[b-d4hw25cwoo] {
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .pickup-card.selected[b-d4hw25cwoo] {
        border-color: #2196f3;
        background-color: #f8fbff;
        box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);
    }

/* Priority Indicator */
.priority-indicator[b-d4hw25cwoo] {
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 100%;
    border-radius: 8px 0 0 8px;
}

    .priority-indicator.normal[b-d4hw25cwoo] {
        background-color: #198754;
    }

    .priority-indicator.urgent[b-d4hw25cwoo] {
        background-color: #ffc107;
    }

    .priority-indicator.critical[b-d4hw25cwoo] {
        background-color: #dc3545;
    }

/* Pickup Icon */
.pickup-icon[b-d4hw25cwoo] {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
}

/* Pickup Content */
.pickup-content[b-d4hw25cwoo] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pickup-header[b-d4hw25cwoo] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pickup-id[b-d4hw25cwoo] {
    font-family: monospace;
    font-weight: 700;
    font-size: 16px;
    color: #1976d2;
    background: #e3f2fd;
    padding: 4px 8px;
    border-radius: 4px;
}

.dog-count-badge[b-d4hw25cwoo] {
    background: #2196f3;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pickup-details[b-d4hw25cwoo] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    font-size: 13px;
}

.detail-item[b-d4hw25cwoo] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #6c757d;
}

    .detail-item i[b-d4hw25cwoo] {
        width: 14px;
        color: #2196f3;
    }

.detail-value[b-d4hw25cwoo] {
    color: #495057;
    font-weight: 500;
}

/* Team Info */
.team-info[b-d4hw25cwoo] {
    width: 140px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: right;
}

.team-name[b-d4hw25cwoo] {
    font-size: 14px;
    font-weight: 600;
    color: #495057;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.team-details[b-d4hw25cwoo] {
    font-size: 12px;
    color: #6c757d;
}

.vehicle-number[b-d4hw25cwoo] {
    font-family: monospace;
    font-weight: 600;
    color: #2196f3;
    background: #e3f2fd;
    padding: 2px 6px;
    border-radius: 3px;
    margin-top: 4px;
    align-self: flex-end;
}


/* Mobile Styles */
@media (max-width: 768px) {
    .pickup-records-page[b-d4hw25cwoo] {
        padding: 0 10px;
    }

    .header-content[b-d4hw25cwoo] {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .stats-section[b-d4hw25cwoo] {
        justify-content: center;
        width: 100%;
    }

    .filter-content[b-d4hw25cwoo] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .filter-group[b-d4hw25cwoo] {
        justify-content: space-between;
    }

    .action-bar-content[b-d4hw25cwoo] {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .timeline-container[b-d4hw25cwoo] {
        padding-left: 40px;
    }

    .timeline-line[b-d4hw25cwoo] {
        left: 25px;
    }

    .timeline-checkbox[b-d4hw25cwoo] {
        left: 19px;
    }

    .day-marker[b-d4hw25cwoo] {
        left: -35px;
    }

    .pickup-card[b-d4hw25cwoo] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 15px;
        margin-right: 0;
    }

    .pickup-content[b-d4hw25cwoo] {
        text-align: center;
    }

    .pickup-details[b-d4hw25cwoo] {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .team-info[b-d4hw25cwoo] {
        width: 100%;
        text-align: center;
    }

    .vehicle-number[b-d4hw25cwoo] {
        align-self: center;
    }
}
/* /Pages/Prelaunch/RegisterPetBloodDonor.razor.rz.scp.css */
.pet-show-registration[b-5fg4ptjq7t] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /*background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/
    min-height: 100vh;
    /*padding: 20px;*/
}

    .pet-show-registration .registration-wrapper[b-5fg4ptjq7t] {
        max-width: 1400px;
        margin: 0 auto;
        background: white;
        border-radius: 15px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* Header */
    .pet-show-registration .header[b-5fg4ptjq7t] {
        background: linear-gradient(135deg, #dc3545 0%, #d58181 100%);
        color: white;
        padding: 30px;
        text-align: center;
    }

        .pet-show-registration .header h1[b-5fg4ptjq7t] {
            font-size: 32px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
        }

        .pet-show-registration .header p[b-5fg4ptjq7t] {
            font-size: 16px;
            opacity: 0.95;
        }

    /* Main Layout */
    .pet-show-registration .main-layout[b-5fg4ptjq7t] {
        display: flex;
        min-height: 600px;
    }

    /* Left Sidebar */
    .pet-show-registration .vertical-tabs[b-5fg4ptjq7t] {
        width: 320px;
        background: #f8f9fa;
        border-right: 3px solid #e9ecef;
        padding: 0;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

    /* Pet Counter */
    .pet-show-registration .pet-counter-section[b-5fg4ptjq7t] {
        background: white;
        padding: 30px 20px;
        border-bottom: 2px solid #e9ecef;
        text-align: center;
    }

    .pet-show-registration .pet-counter-title[b-5fg4ptjq7t] {
        font-size: 18px;
        font-weight: 700;
        color: #333;
        margin-bottom: 20px;
    }

    .pet-show-registration .counter-controls[b-5fg4ptjq7t] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }

    .pet-show-registration .counter-btn[b-5fg4ptjq7t] {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        border: 3px solid #007bff;
        background: white;
        color: #007bff;
        font-size: 24px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
    }

        .pet-show-registration .counter-btn:hover:not(:disabled)[b-5fg4ptjq7t] {
            background: #007bff;
            color: white;
            transform: scale(1.15);
            box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
        }

        .pet-show-registration .counter-btn:disabled[b-5fg4ptjq7t] {
            opacity: 0.3;
            cursor: not-allowed;
        }

    .pet-show-registration .counter-display[b-5fg4ptjq7t] {
        font-size: 42px;
        font-weight: bold;
        color: #007bff;
        min-width: 70px;
        text-align: center;
    }

    /* Tabs */
    .pet-show-registration .tabs-container[b-5fg4ptjq7t] {
        padding: 20px;
        flex: 1;
    }

    .pet-show-registration .tab-item[b-5fg4ptjq7t] {
        background: white;
        border-left: 5px solid transparent;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 15px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        display: flex;
        align-items: center;
        gap: 15px;
    }

        .pet-show-registration .tab-item:hover[b-5fg4ptjq7t] {
            transform: translateX(5px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .pet-show-registration .tab-item.active[b-5fg4ptjq7t] {
            border-left-color: #007bff;
            background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
            box-shadow: 0 4px 15px rgba(0, 123, 255, 0.2);
        }

        .pet-show-registration .tab-item.user-tab.active[b-5fg4ptjq7t] {
            border-left-color: #28a745;
            background: linear-gradient(135deg, #f8fff8 0%, #e8f5e8 100%);
            box-shadow: 0 4px 15px rgba(40, 167, 69, 0.2);
        }

    .pet-show-registration .tab-icon[b-5fg4ptjq7t] {
        width: 50px;
        height: 50px;
        border-radius: 12px;
        background: #e9ecef;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        flex-shrink: 0;
        transition: all 0.3s ease;
    }

    .pet-show-registration .tab-item.active .tab-icon[b-5fg4ptjq7t] {
        background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
        color: white;
    }

    .pet-show-registration .tab-item.user-tab.active .tab-icon[b-5fg4ptjq7t] {
        background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
        color: white;
    }

    .pet-show-registration .tab-info[b-5fg4ptjq7t] {
        flex: 1;
    }

    .pet-show-registration .tab-title[b-5fg4ptjq7t] {
        font-size: 16px;
        font-weight: 700;
        color: #333;
        margin-bottom: 4px;
    }

    .pet-show-registration .tab-subtitle[b-5fg4ptjq7t] {
        font-size: 12px;
        color: #6c757d;
    }

    .pet-show-registration .tab-status[b-5fg4ptjq7t] {
        font-size: 22px;
        color: #e9ecef;
        flex-shrink: 0;
    }

    .pet-show-registration .tab-item.completed .tab-status[b-5fg4ptjq7t] {
        color: #28a745;
    }

    /* Content Area */
    .pet-show-registration .content-area[b-5fg4ptjq7t] {
        flex: 1;
        padding: 40px 50px;
        background: white;
        overflow-y: auto;
    }

    .pet-show-registration .form-section[b-5fg4ptjq7t] {
        display: none;
    }

        .pet-show-registration .form-section.active[b-5fg4ptjq7t] {
            display: block;
            animation: fadeInSlide-b-5fg4ptjq7t 0.4s ease-out;
        }

@keyframes fadeInSlide-b-5fg4ptjq7t {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

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

.pet-show-registration .section-header[b-5fg4ptjq7t] {
    margin-bottom: 30px;
}

.pet-show-registration .section-title[b-5fg4ptjq7t] {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pet-show-registration .section-subtitle[b-5fg4ptjq7t] {
    font-size: 15px;
    color: #6c757d;
}

.pet-show-registration .alert[b-5fg4ptjq7t] {
    padding: 15px 18px;
    border-radius: 8px;
    margin-bottom: 25px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
}

.pet-show-registration .alert-info[b-5fg4ptjq7t] {
    background: linear-gradient(135deg, #e8f7f9 0%, #f0fbfc 100%);
    border-left: 4px solid #17a2b8;
    color: #0c5460;
}

/* Forms */
.pet-show-registration .form-grid[b-5fg4ptjq7t] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-bottom: 25px;
}

    .pet-show-registration .form-grid.single-column[b-5fg4ptjq7t] {
        grid-template-columns: 1fr;
    }

.pet-show-registration .form-group[b-5fg4ptjq7t] {
    display: flex;
    flex-direction: column;
}

.pet-show-registration .form-label[b-5fg4ptjq7t] {
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
    font-size: 15px;
}

.pet-show-registration .required[b-5fg4ptjq7t] {
    color: #dc3545;
}

.pet-show-registration .form-control[b-5fg4ptjq7t] {
    padding: 14px 16px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 15px;
    transition: all 0.3s ease;
}

    .pet-show-registration .form-control:focus[b-5fg4ptjq7t] {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
    }

.pet-show-registration .input-group[b-5fg4ptjq7t] {
    display: flex;
}

.pet-show-registration .input-group-text[b-5fg4ptjq7t] {
    background: #e9ecef;
    border: 2px solid #e9ecef;
    border-right: none;
    padding: 14px 16px;
    border-radius: 8px 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    color: #495057;
}

.pet-show-registration .input-group .form-control[b-5fg4ptjq7t] {
    border-left: none;
    border-radius: 0 8px 8px 0;
}

.pet-show-registration .checkbox-wrapper[b-5fg4ptjq7t] {
    background: #f8f9fa;
    padding: 18px;
    border-radius: 10px;
    border: 2px solid #e9ecef;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

    .pet-show-registration .checkbox-wrapper input[type="checkbox"][b-5fg4ptjq7t] {
        width: 22px;
        height: 22px;
        cursor: pointer;
    }

    .pet-show-registration .checkbox-wrapper label[b-5fg4ptjq7t] {
        cursor: pointer;
        margin: 0;
        font-size: 15px;
        flex: 1;
    }

/* Submit Section */
.pet-show-registration .submit-section[b-5fg4ptjq7t] {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 3px solid #e9ecef;
    display: flex;
    gap: 15px;
    justify-content: flex-end;
}

.pet-show-registration .btn[b-5fg4ptjq7t] {
    padding: 16px 40px;
    border: none;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.pet-show-registration .btn-secondary[b-5fg4ptjq7t] {
    background: #6c757d;
    color: white;
}

    .pet-show-registration .btn-secondary:hover[b-5fg4ptjq7t] {
        background: #5a6268;
        transform: translateY(-2px);
    }

.pet-show-registration .btn-primary[b-5fg4ptjq7t] {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}

    .pet-show-registration .btn-primary:hover:not(:disabled)[b-5fg4ptjq7t] {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
    }

    .pet-show-registration .btn-primary:disabled[b-5fg4ptjq7t] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* Modal */
.pet-show-registration .modal[b-5fg4ptjq7t] {
    display: flex;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    align-items: center;
    justify-content: center;
}

.pet-show-registration .modal-content[b-5fg4ptjq7t] {
    background: white;
    border-radius: 20px;
    max-width: 500px;
    width: 90%;
    overflow: hidden;
    animation: modalZoom-b-5fg4ptjq7t 0.3s ease-out;
}

@keyframes modalZoom-b-5fg4ptjq7t {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.pet-show-registration .modal-header[b-5fg4ptjq7t] {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    padding: 35px 30px;
    text-align: center;
}

    .pet-show-registration .modal-header h3[b-5fg4ptjq7t] {
        font-size: 26px;
        margin-bottom: 10px;
    }

    .pet-show-registration .modal-header p[b-5fg4ptjq7t] {
        font-size: 15px;
        opacity: 0.95;
    }

.pet-show-registration .modal-body[b-5fg4ptjq7t] {
    padding: 35px 30px;
}

.pet-show-registration .otp-input[b-5fg4ptjq7t] {
    width: 100%;
    padding: 20px;
    font-size: 32px;
    text-align: center;
    letter-spacing: 16px;
    border: 3px solid #e9ecef;
    border-radius: 12px;
    margin-bottom: 25px;
    font-weight: 700;
}

    .pet-show-registration .otp-input:focus[b-5fg4ptjq7t] {
        border-color: #28a745;
        box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.1);
        outline: none;
    }

/* Thank You */
.pet-show-registration .thank-you-page[b-5fg4ptjq7t] {
    display: none;
    padding: 80px 50px;
    text-align: center;
}

    .pet-show-registration .thank-you-page.active[b-5fg4ptjq7t] {
        display: block;
    }

.pet-show-registration .success-circle[b-5fg4ptjq7t] {
    width: 140px;
    height: 140px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 35px;
    animation: successBounce-b-5fg4ptjq7t 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes successBounce-b-5fg4ptjq7t {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.pet-show-registration .success-circle i[b-5fg4ptjq7t] {
    font-size: 70px;
    color: white;
}

.pet-show-registration .thank-you-page h2[b-5fg4ptjq7t] {
    font-size: 36px;
    color: #333;
    margin-bottom: 20px;
}

.pet-show-registration .thank-you-page p[b-5fg4ptjq7t] {
    font-size: 17px;
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 25px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.pet-show-registration .summary-box[b-5fg4ptjq7t] {
    background: #f8f9fa;
    border-radius: 15px;
    padding: 30px;
    margin: 35px auto;
    max-width: 500px;
    text-align: left;
}

    .pet-show-registration .summary-box h3[b-5fg4ptjq7t] {
        font-size: 20px;
        color: #333;
        margin-bottom: 20px;
        text-align: center;
    }

.pet-show-registration .summary-item[b-5fg4ptjq7t] {
    padding: 12px 0;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .pet-show-registration .summary-item:last-child[b-5fg4ptjq7t] {
        border-bottom: none;
    }

.pet-show-registration .summary-icon[b-5fg4ptjq7t] {
    color: #28a745;
    font-size: 20px;
}

/* Mobile Submit */
.pet-show-registration .mobile-submit-container[b-5fg4ptjq7t] {
    display: none;
}

/* Accordion - hidden on desktop */
.pet-show-registration .accordion-content[b-5fg4ptjq7t] {
    display: none;
}

.pet-show-registration .tab-header[b-5fg4ptjq7t] {
    display: contents;
}

/* Responsive */
@media (max-width: 992px) {
    .pet-show-registration .main-layout[b-5fg4ptjq7t] {
        flex-direction: column;
    }

    .pet-show-registration .vertical-tabs[b-5fg4ptjq7t] {
        width: 100%;
        border-right: none;
    }

    .pet-show-registration .tabs-container[b-5fg4ptjq7t] {
        padding: 0;
    }

    .pet-show-registration .tab-item[b-5fg4ptjq7t] {
        border-radius: 0;
        margin-bottom: 0;
        border-left: none;
        border-bottom: 2px solid #e9ecef;
        display: block;
        padding: 0;
    }

    .pet-show-registration .tab-header[b-5fg4ptjq7t] {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 20px;
    }

    .pet-show-registration .tab-item:hover[b-5fg4ptjq7t] {
        transform: none;
        background: #f8f9fa;
    }

    .pet-show-registration .tab-item.active .tab-header[b-5fg4ptjq7t] {
        background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
    }

    .pet-show-registration .tab-item.user-tab.active .tab-header[b-5fg4ptjq7t] {
        background: linear-gradient(135deg, #f8fff8 0%, #e8f5e8 100%);
    }

    .pet-show-registration .content-area[b-5fg4ptjq7t] {
        display: none !important;
    }

    .pet-show-registration .accordion-content[b-5fg4ptjq7t] {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
        background: white;
        padding: 0;
        border-top: 2px solid #e9ecef;
        display: block;
    }

    .pet-show-registration .tab-item.active .accordion-content[b-5fg4ptjq7t] {
        max-height: 3000px;
        padding: 20px;
    }

    .pet-show-registration .form-grid[b-5fg4ptjq7t] {
        grid-template-columns: 1fr;
    }

    .pet-show-registration .submit-section[b-5fg4ptjq7t] {
        display: none !important;
    }

    .pet-show-registration .mobile-submit-container[b-5fg4ptjq7t] {
        display: block;
        padding: 20px;
        background: #f8f9fa;
        border-top: 2px solid #e9ecef;
    }

        .pet-show-registration .mobile-submit-container .btn[b-5fg4ptjq7t] {
            width: 100%;
            justify-content: center;
        }
}

@media (max-width: 576px) {
    .pet-show-registration[b-5fg4ptjq7t] {
        /*padding: 15px;*/
    }

        .pet-show-registration .header h1[b-5fg4ptjq7t] {
            font-size: 24px;
        }

        .pet-show-registration .pet-counter-section[b-5fg4ptjq7t] {
            padding: 20px 15px;
        }

        .pet-show-registration .counter-display[b-5fg4ptjq7t] {
            font-size: 36px;
        }

        .pet-show-registration .counter-btn[b-5fg4ptjq7t] {
            width: 40px;
            height: 40px;
            font-size: 20px;
        }

        .pet-show-registration .tab-header[b-5fg4ptjq7t] {
            padding: 15px;
        }

        .pet-show-registration .tab-icon[b-5fg4ptjq7t] {
            width: 40px;
            height: 40px;
            font-size: 20px;
        }

        .pet-show-registration .thank-you-page[b-5fg4ptjq7t] {
            padding: 40px 20px;
        }

        .pet-show-registration .success-circle[b-5fg4ptjq7t] {
            width: 100px;
            height: 100px;
        }

            .pet-show-registration .success-circle i[b-5fg4ptjq7t] {
                font-size: 50px;
            }
}
/* /Pages/Prelaunch/RegisterPetParent.razor.rz.scp.css */
.error-page[b-3tnvu8gkdr] {
    /*display: flex;*/
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.error-box[b-3tnvu8gkdr] {
    text-align: center;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    background: white;
}

.btn-custom[b-3tnvu8gkdr] {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    margin-top: 15px;
}

    .btn-custom:hover[b-3tnvu8gkdr] {
        background-color: #0056b3;
        border-color: #0056b3;
        color: white;
        text-decoration: none;
    }

.spinner-border-sm[b-3tnvu8gkdr] {
    width: 1rem;
    height: 1rem;
}

.card[b-3tnvu8gkdr] {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: 10px;
}

.card-header[b-3tnvu8gkdr] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 10px 10px 0 0 !important;
}

/* User Type Selection Styles */
.user-type-selection[b-3tnvu8gkdr] {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    border: 1px solid #e9ecef;
}

    .user-type-selection .form-check[b-3tnvu8gkdr] {
        background: white;
        border: 2px solid #e9ecef;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 10px;
        transition: all 0.3s ease;
        cursor: pointer;
    }

        .user-type-selection .form-check:hover[b-3tnvu8gkdr] {
            border-color: #007bff;
            box-shadow: 0 2px 8px rgba(0, 123, 255, 0.15);
        }

    .user-type-selection .form-check-input:checked + .form-check-label[b-3tnvu8gkdr] {
        color: #007bff;
    }

    .user-type-selection .form-check:has(.form-check-input:checked)[b-3tnvu8gkdr] {
        border-color: #007bff;
        background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
    }

    .user-type-selection .form-check-label[b-3tnvu8gkdr] {
        cursor: pointer;
        width: 100%;
        display: block;
    }

        .user-type-selection .form-check-label strong[b-3tnvu8gkdr] {
            font-size: 16px;
            color: #333;
        }

    .user-type-selection .form-check-input[b-3tnvu8gkdr] {
        margin-top: 0.25rem;
        margin-right: 10px;
        transform: scale(1.2);
    }

/* Individual Types Grid */
.individual-types-section[b-3tnvu8gkdr] {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    border: 1px solid #e9ecef;
    margin-top: 15px;
}

.individual-types-grid[b-3tnvu8gkdr] {
    display: grid;
    /*grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));*/
    grid-template-columns: auto;
    /*justify-items:start;*/
    gap: 15px;
    margin-top: 10px;
}

    .individual-types-grid .form-check[b-3tnvu8gkdr] {
        background: white;
        border: 1px solid #e9ecef;
        border-radius: 6px;
        padding: 12px;
        transition: all 0.3s ease;
        cursor: pointer;
    }

        .individual-types-grid .form-check:hover[b-3tnvu8gkdr] {
            border-color: #007bff;
            box-shadow: 0 2px 6px rgba(0, 123, 255, 0.15);
        }

        .individual-types-grid .form-check:has(.form-check-input:checked)[b-3tnvu8gkdr] {
            border-color: #007bff;
            background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
            box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
        }

    .individual-types-grid .form-check-label[b-3tnvu8gkdr] {
        cursor: pointer;
        font-weight: 500;
        color: #333;
        width: 100%;
        /*display: flex;*/
        align-items: center;
    }

    .individual-types-grid .form-check-input[b-3tnvu8gkdr] {
        margin-right: 8px;
        transform: scale(1.1);
    }

/* Organisation Section Styles */
.organisation-section[b-3tnvu8gkdr] {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    border: 1px solid #e9ecef;
    margin-top: 15px;
}

.organisation-search-container[b-3tnvu8gkdr] {
    position: relative;
}

.organisation-search-icon[b-3tnvu8gkdr] {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    pointer-events: none;
}

.organisation-dropdown[b-3tnvu8gkdr] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 2px;
}

.organisation-option[b-3tnvu8gkdr] {
    padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f1f3f4;
    transition: background-color 0.2s ease;
}

    .organisation-option:hover[b-3tnvu8gkdr] {
        background-color: #f8f9fa;
    }

    .organisation-option:last-child[b-3tnvu8gkdr] {
        border-bottom: none;
    }

.org-name[b-3tnvu8gkdr] {
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.org-type[b-3tnvu8gkdr] {
    font-size: 12px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.no-results[b-3tnvu8gkdr] {
    padding: 20px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
}

/* Selected Organisation Card */
.selected-organisation[b-3tnvu8gkdr] {
    margin-top: 10px;
}

.selected-org-card[b-3tnvu8gkdr] {
    background: linear-gradient(135deg, #e8f5e8 0%, #f0f8f0 100%);
    border: 1px solid #28a745;
    border-radius: 8px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.selected-org-info[b-3tnvu8gkdr] {
    flex: 1;
}

.selected-org-name[b-3tnvu8gkdr] {
    font-weight: 600;
    color: #155724;
    margin-bottom: 2px;
}

.selected-org-type[b-3tnvu8gkdr] {
    font-size: 12px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-remove-org[b-3tnvu8gkdr] {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

    .btn-remove-org:hover[b-3tnvu8gkdr] {
        background-color: rgba(220, 53, 69, 0.1);
        color: #dc3545;
    }

/* Form Enhancements */
.form-label[b-3tnvu8gkdr] {
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.form-control:focus[b-3tnvu8gkdr],
.form-select:focus[b-3tnvu8gkdr] {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.password-section[b-3tnvu8gkdr] {
    border-left: 4px solid #007bff !important;
    background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%) !important;
}

.terms-and-policy .form-check-label[b-3tnvu8gkdr] {
    font-size: 14px;
    line-height: 1.5;
}

    .terms-and-policy .form-check-label a[b-3tnvu8gkdr] {
        color: #007bff;
        text-decoration: none;
        font-weight: 500;
    }

        .terms-and-policy .form-check-label a:hover[b-3tnvu8gkdr] {
            text-decoration: underline;
        }

/* Alert Enhancements */
.alert-info[b-3tnvu8gkdr] {
    border-left: 4px solid #17a2b8;
    background: linear-gradient(135deg, #e8f7f9 0%, #f0fbfc 100%);
}

.alert-danger[b-3tnvu8gkdr] {
    border-left: 4px solid #dc3545;
    background: linear-gradient(135deg, #fdf2f2 0%, #fef7f7 100%);
}

.alert-success[b-3tnvu8gkdr] {
    border-left: 4px solid #28a745;
    background: linear-gradient(135deg, #f2f9f2 0%, #f7fcf7 100%);
}

/* Button Enhancements */
.btn-primary[b-3tnvu8gkdr] {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    border: none;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

    .btn-primary:hover[b-3tnvu8gkdr] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
    }

    .btn-primary:disabled[b-3tnvu8gkdr] {
        transform: none;
        box-shadow: none;
        opacity: 0.6;
    }

/* Responsive Design */
@media (max-width: 768px) {
    .individual-types-grid[b-3tnvu8gkdr] {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .user-type-selection .form-check[b-3tnvu8gkdr] {
        padding: 12px;
    }

    .organisation-section[b-3tnvu8gkdr],
    .individual-types-section[b-3tnvu8gkdr] {
        padding: 12px;
    }

    .selected-org-card[b-3tnvu8gkdr] {
        padding: 10px 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .btn-remove-org[b-3tnvu8gkdr] {
        align-self: flex-end;
        margin-top: -30px;
    }
}

@media (max-width: 480px) {
    .individual-types-grid .form-check-label[b-3tnvu8gkdr] {
        font-size: 14px;
    }

    .org-name[b-3tnvu8gkdr] {
        font-size: 14px;
    }

    .org-type[b-3tnvu8gkdr] {
        font-size: 11px;
    }

    .organisation-dropdown[b-3tnvu8gkdr] {
        max-height: 200px;
    }
}

/* Animation for smooth transitions */
.individual-types-section[b-3tnvu8gkdr],
.organisation-section[b-3tnvu8gkdr] {
    animation: slideIn-b-3tnvu8gkdr 0.3s ease-out;
}

@keyframes slideIn-b-3tnvu8gkdr {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* Focus states for accessibility */
.form-check-input:focus[b-3tnvu8gkdr] {
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.organisation-option:focus[b-3tnvu8gkdr] {
    background-color: #e3f2fd;
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

/* Loading states */
.spinner-border[b-3tnvu8gkdr] {
    animation: spinner-border-b-3tnvu8gkdr 0.75s linear infinite;
}

@keyframes spinner-border-b-3tnvu8gkdr {
    to {
        transform: rotate(360deg);
    }
}
/* /Pages/Support/Donation/SustenanceDonation.razor.rz.scp.css */
.donation-page[b-t5c6knu1ag] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 0;
    margin: 0 auto;
    color: #0f172a;
    max-width: 1200px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1e293b70 0%, #3341557d 100%);
    overflow: hidden;
}

/* Header Section */
.page-header[b-t5c6knu1ag] {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #cdbc76;
    text-align: center;
    margin-bottom: 0px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    color: #f3d03c;
}

    .page-header h4[b-t5c6knu1ag] {
        font-size: 24px;
        font-weight: 600;
        margin: 0 0 5px 0;
    }

    .page-header p[b-t5c6knu1ag] {
        font-size: 1rem;
        opacity: 0.9;
    }

.header-stats[b-t5c6knu1ag] {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.stat-item[b-t5c6knu1ag] {
    text-align: center;
}

.stat-number[b-t5c6knu1ag] {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    color: #06b6d4;
}

.stat-label[b-t5c6knu1ag] {
    font-size: 0.8rem;
    color: #1e293b;
}

/* Main Content */
.donation-content[b-t5c6knu1ag] {
    padding: 40px 70px;
}

.main-content[b-t5c6knu1ag] {
    padding: 20px;
    background-color: #f8fafceb;
}

.section[b-t5c6knu1ag] {
    margin-bottom: 35px;
}

.section-title[b-t5c6knu1ag] {
    font-size: 1.3rem;
    color: #1e293b;
    margin-bottom: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Cost Breakdown */
.cost-breakdown[b-t5c6knu1ag] {
    background: #f8fafc;
    border-radius: 15px;
    padding: 25px;
    border: 1px solid #e2e8f0;
}

.cost-item[b-t5c6knu1ag] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e2e8f0;
}

    .cost-item:last-child[b-t5c6knu1ag] {
        border-bottom: none;
    }

.total-cost[b-t5c6knu1ag] {
    font-weight: 600;
    color: #1e293b;
    font-size: 1.1rem;
    margin-top: 10px;
    padding-top: 15px;
    border-top: 2px solid #e2e8f0;
}

.cost-label[b-t5c6knu1ag] {
    color: #64748b;
    font-size: 0.95rem;
}

.cost-amount[b-t5c6knu1ag] {
    color: #1e293b;
    font-weight: 500;
}

/* Funding Progress */
.funding-progress[b-t5c6knu1ag] {
    margin-top: 20px;
    padding: 20px;
    background: #f1f5f9;
    border-radius: 10px;
}

.progress-header[b-t5c6knu1ag] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: #475569;
}

.progress-bar[b-t5c6knu1ag] {
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill[b-t5c6knu1ag] {
    height: 100%;
    background: linear-gradient(90deg, #deede6, #0891b2);
    transition: width 0.3s ease;
}

.progress-text[b-t5c6knu1ag] {
    display: block;
    margin-top: 5px;
    color: #64748b;
}

/* Features List */
.features-list[b-t5c6knu1ag] {
    list-style: none;
    padding: 0;
}

    .features-list li[b-t5c6knu1ag] {
        padding: 12px 0;
        color: #475569;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .features-list li[b-t5c6knu1ag]::before {
            content: "⚡";
            font-size: 1.2rem;
        }

/* QR Section - Central Placement */
.qr-section[b-t5c6knu1ag] {
    /*background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);*/
    background-color: #deede6;
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    color: #1e293b;
    margin-top: 20px;
}

.qr-container[b-t5c6knu1ag] {
    background: white;
    border-radius: 15px;
    padding: 20px;
    display: inline-block;
    margin: 20px 0;
    cursor: pointer;
    transition: transform 0.2s ease;
}

    .qr-container:hover[b-t5c6knu1ag] {
        transform: scale(1.02);
    }

.qr-code[b-t5c6knu1ag] {
    width: 180px;
    height: 180px;
    background: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .qr-code svg[b-t5c6knu1ag], .qr-code img[b-t5c6knu1ag] {
        width: 160px;
        height: 160px;
    }

.qr-title[b-t5c6knu1ag] {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.qr-subtitle[b-t5c6knu1ag] {
    font-size: 1rem;
    opacity: 0.9;
    margin-bottom: 20px;
}

.qr-instructions[b-t5c6knu1ag] {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-top: 15px;
    line-height: 1.4;
}

/* Trust Indicators */
.trust-indicators[b-t5c6knu1ag] {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 25px;
    flex-wrap: wrap;
}

.trust-badge[b-t5c6knu1ag] {
    /*background: rgba(255, 255, 255, 0.2);*/
    background-color: #7d968b;
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Quick Amounts */
.quick-amounts[b-t5c6knu1ag] {
    margin-top: 25px;
}

.quick-amounts-title[b-t5c6knu1ag] {
    font-size: 0.9rem;
    margin-bottom: 15px;
    opacity: 0.9;
}

.amount-buttons[b-t5c6knu1ag] {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.amount-btn[b-t5c6knu1ag] {
    /*background: rgba(255, 255, 255, 0.2);*/
    background-color: #7d968b;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .amount-btn:hover[b-t5c6knu1ag] {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-1px);
    }

/* Payment Methods */
.payment-methods[b-t5c6knu1ag] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.payment-method[b-t5c6knu1ag] {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: #deede6;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .payment-method:hover[b-t5c6knu1ag] {
        border-color: #7b9c8e;
        background: #deede6;
    }

.payment-icon[b-t5c6knu1ag] {
    font-size: 1.5rem;
}

.payment-info strong[b-t5c6knu1ag] {
    display: block;
    color: #1e293b;
    margin-bottom: 5px;
}

.payment-info small[b-t5c6knu1ag] {
    color: #64748b;
}

/* Support Info */
.support-info[b-t5c6knu1ag] {
    background: #f1f5f9;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    margin-top: 30px;
}

    .support-info h3[b-t5c6knu1ag] {
        color: #1e293b;
        margin-bottom: 10px;
        font-size: 1.1rem;
    }

    .support-info p[b-t5c6knu1ag] {
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.5;
    }

/* Recent Supporters */
.recent-supporters[b-t5c6knu1ag] {
    background: #fefefe;
    border-radius: 15px;
    padding: 20px;
    border: 1px solid #e2e8f0;
}

    .recent-supporters h3[b-t5c6knu1ag] {
        color: #1e293b;
        margin-bottom: 15px;
        font-size: 1.1rem;
    }

.supporters-list[b-t5c6knu1ag] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.supporter-item[b-t5c6knu1ag] {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background: #f8fafc;
    border-radius: 8px;
}

.supporter-avatar[b-t5c6knu1ag] {
    width: 40px;
    height: 40px;
    background: #06b6d4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 0.9rem;
}

.supporter-info[b-t5c6knu1ag] {
    flex: 1;
}

.supporter-name[b-t5c6knu1ag] {
    font-weight: 500;
    color: #1e293b;
}

.supporter-amount[b-t5c6knu1ag] {
    font-size: 0.9rem;
    color: #06b6d4;
    font-weight: 500;
}

.supporter-time[b-t5c6knu1ag] {
    font-size: 0.8rem;
    color: #64748b;
}

/* Modal */
.modal-overlay[b-t5c6knu1ag] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content[b-t5c6knu1ag] {
    background: white;
    border-radius: 15px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-header[b-t5c6knu1ag] {
    padding: 20px 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-close[b-t5c6knu1ag] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #64748b;
}

.modal-body[b-t5c6knu1ag] {
    padding: 20px;
}

.modal-footer[b-t5c6knu1ag] {
    padding: 0 20px 20px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.btn[b-t5c6knu1ag] {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 500;
}

.btn-primary[b-t5c6knu1ag] {
    background: #06b6d4;
    color: white;
}

.btn-secondary[b-t5c6knu1ag] {
    background: #e2e8f0;
    color: #475569;
}

/* Responsive Design */
@media (max-width: 768px) {
    .donation-container[b-t5c6knu1ag] {
        margin: 10px;
        max-width: none;
    }

    .donation-header[b-t5c6knu1ag] {
        padding: 30px 20px;
    }

        .donation-header h1[b-t5c6knu1ag] {
            font-size: 1.6rem;
        }

    .donation-content[b-t5c6knu1ag] {
        padding: 30px 20px;
    }

    .qr-section[b-t5c6knu1ag] {
        padding: 25px 15px;
    }

    .qr-code[b-t5c6knu1ag] {
        width: 160px;
        height: 160px;
    }

        .qr-code svg[b-t5c6knu1ag], .qr-code img[b-t5c6knu1ag] {
            width: 140px;
            height: 140px;
        }

    .trust-indicators[b-t5c6knu1ag] {
        gap: 10px;
    }

    .trust-badge[b-t5c6knu1ag] {
        font-size: 0.75rem;
        padding: 6px 12px;
    }

    .header-stats[b-t5c6knu1ag] {
        gap: 20px;
    }

    .stat-number[b-t5c6knu1ag] {
        font-size: 1.2rem;
    }
}

/* Animation */
.qr-container[b-t5c6knu1ag] {
    animation: pulse-b-t5c6knu1ag 2s infinite;
}

@keyframes pulse-b-t5c6knu1ag {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
    }
}
/* /Pages/Support/Feedback.razor.rz.scp.css */
.feedback-page[b-b0xtghwnoi] {
    /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 0;
    margin: 0 auto;
    color: #0f172a;
    max-width: 1200px;
    border-radius: 10px;
    background: #4a5e72a3;
    overflow: hidden;*/
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #1e293b70 0%, #3341557d 100%);
}

/* Header Section - Match Donation Page */
.page-header[b-b0xtghwnoi] {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 5px;
    /*  border-top-left-radius: 10px;
    border-top-right-radius: 10px;*/
    border-bottom: 1px solid #cdbc76;
    text-align: center;
    margin-bottom: 0px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    color: #f3d03c;
}

    .page-header h4[b-b0xtghwnoi] {
        font-size: 24px;
        font-weight: 600;
        margin: 0 0 5px 0;
    }

    .page-header p[b-b0xtghwnoi] {
        font-size: 1rem;
        opacity: 0.9;
    }

/* Main Content */
.main-content[b-b0xtghwnoi] {
    padding: 20px;
    background-color: #f8fafceb;
}
.feedback-card[b-b0xtghwnoi] {
    background: white;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
}

.section-header[b-b0xtghwnoi] {
    font-size: 1.2rem;
    color: #3b82f6;
    margin-bottom: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e2e8f0;
}

/* Star Rating */
.star-rating[b-b0xtghwnoi] {
    display: flex;
    gap: 5px;
    margin: 10px 0;
    justify-content: center
}

.star[b-b0xtghwnoi] {
    font-size: 2rem;
    color: #929aa6;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.1s ease;
}

    .star:hover[b-b0xtghwnoi], .star.active[b-b0xtghwnoi] {
        color: #06b6d4;
        transform: scale(1.1);
    }

/* Checkbox Grid */
.checkbox-grid[b-b0xtghwnoi] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.checkbox-item[b-b0xtghwnoi] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    transition: all 0.3s ease;
    background: #f8fafc;
}

    .checkbox-item:hover[b-b0xtghwnoi] {
        border-color: #06b6d4;
        background: rgba(6, 182, 212, 0.05);
    }

    .checkbox-item input[type="checkbox"]:checked + label[b-b0xtghwnoi] {
        color: #06b6d4;
        font-weight: 500;
    }

    .checkbox-item input[type="checkbox"][b-b0xtghwnoi] {
        width: 18px;
        height: 18px;
        accent-color: #06b6d4;
    }

    .checkbox-item label[b-b0xtghwnoi] {
        color: #1e293b;
        font-weight: 500;
        cursor: pointer;
        margin: 0;
    }

/* Form Controls */
.form-control[b-b0xtghwnoi] {
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 15px;
    transition: border-color 0.3s ease;
    background: #f8fafc;
    color: #1e293b;
}

    .form-control:focus[b-b0xtghwnoi] {
        border-color: #06b6d4;
        box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
        outline: none;
    }

    .form-control[b-b0xtghwnoi]::placeholder {
        color: #64748b;
    }

/* Form Labels */
.form-label[b-b0xtghwnoi] {
    font-size: 14px;
    color: #1e293b;
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
}

/* Text Colors */
.text-muted[b-b0xtghwnoi] {
    color: #64748b !important;
}

/* Buttons */
.btn-primary[b-b0xtghwnoi] {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    border: none;
    padding: 12px 30px;
    border-radius: 10px;
    font-weight: 500;
    color: white;
    transition: all 0.3s ease;
}

    .btn-primary:hover[b-b0xtghwnoi] {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(6, 182, 212, 0.4);
    }

.btn-outline-secondary[b-b0xtghwnoi] {
    border: 2px solid #64748b;
    border-radius: 10px;
    padding: 12px 30px;
    font-weight: 500;
    background: white;
    color: #64748b;
    transition: all 0.3s ease;
}

    .btn-outline-secondary:hover[b-b0xtghwnoi] {
        background: #64748b;
        color: white;
        transform: translateY(-2px);
    }

.btn:disabled[b-b0xtghwnoi] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Submit Section */
.submit-section[b-b0xtghwnoi] {
    text-align: center;
    padding: 30px 0;
    background: #f8fafc;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

    .submit-section .d-flex[b-b0xtghwnoi] {
        justify-content: center;
        align-items: center;
        gap: 15px;
    }
/* Alerts */
.alert[b-b0xtghwnoi] {
    border-radius: 10px;
    margin-bottom: 20px;
    animation: slideDown-b-b0xtghwnoi 0.3s ease-out;
}

.alert-success[b-b0xtghwnoi] {
    background: #dcfce7;
    border-color: #22c55e;
    color: #166534;
}

.alert-danger[b-b0xtghwnoi] {
    background: #fef2f2;
    border-color: #ef4444;
    color: #dc2626;
}

.alert .btn-close[b-b0xtghwnoi] {
    background: none;
    border: none;
    font-size: 1.2rem;
    opacity: 0.6;
    cursor: pointer;
}

    .alert .btn-close:hover[b-b0xtghwnoi] {
        opacity: 1;
    }

/* Loading Overlay */
.loading-overlay[b-b0xtghwnoi] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loading-content[b-b0xtghwnoi] {
    background: white;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    color: #1e293b;
}

.spinner-border[b-b0xtghwnoi] {
    color: #06b6d4;
}

/* Form Group */
.form-group[b-b0xtghwnoi] {
    margin-bottom: 20px;
}

/* Row and Column spacing */
.row[b-b0xtghwnoi] {
    margin: 0 -10px;
}

.col-md-6[b-b0xtghwnoi] {
    padding: 0 10px;
}

/* Validation Messages */
.validation-message[b-b0xtghwnoi] {
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 5px;
}

/* Icons */
.fas[b-b0xtghwnoi] {
    color: inherit;
}

/* Rating Section Specific */
.rating-section[b-b0xtghwnoi] {
    padding: 20px;
    background: #f8fafc;
    border-radius: 10px;
    text-align: center;
    border: 2px solid #e2e8f0;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .feedback-container[b-b0xtghwnoi] {
        margin: 10px;
        max-width: none;
    }

    .feedback-header[b-b0xtghwnoi] {
        padding: 30px 20px;
    }

        .feedback-header h2[b-b0xtghwnoi] {
            font-size: 1.6rem;
        }

    .feedback-card[b-b0xtghwnoi] {
        padding: 20px;
        margin-bottom: 20px;
    }

    .checkbox-grid[b-b0xtghwnoi] {
        grid-template-columns: 1fr;
    }

    .star-rating .star[b-b0xtghwnoi] {
        font-size: 1.5rem;
    }

    .submit-section .d-flex[b-b0xtghwnoi] {
        flex-direction: column;
        gap: 15px;
    }

    .btn-lg[b-b0xtghwnoi] {
        width: auto;
        margin-bottom: 10px;
    }

    .col-md-6[b-b0xtghwnoi] {
        margin-bottom: 15px;
    }

    .submit-section[b-b0xtghwnoi] {
        margin: 0 -20px -20px -20px;
    }
}

@media (max-width: 576px) {
    .feedback-header[b-b0xtghwnoi] {
        padding: 20px 15px;
    }

    .feedback-card[b-b0xtghwnoi] {
        padding: 15px;
        margin-bottom: 15px;
    }

    .submit-section[b-b0xtghwnoi] {
        margin: 0 -15px -15px -15px;
        padding: 20px 15px;
    }
}

/* Animations */
@keyframes slideDown-b-b0xtghwnoi {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

@keyframes spin-b-b0xtghwnoi {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.fa-spinner.fa-spin[b-b0xtghwnoi] {
    animation: spin-b-b0xtghwnoi 1s linear infinite;
}

/* Accessibility */
.star:focus[b-b0xtghwnoi],
.checkbox-item:focus-within[b-b0xtghwnoi],
.btn:focus[b-b0xtghwnoi] {
    outline: 2px solid #06b6d4;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .feedback-card[b-b0xtghwnoi] {
        border: 2px solid #000;
    }

    .star.active[b-b0xtghwnoi] {
        color: #000;
        background: #06b6d4;
    }

    .btn-primary[b-b0xtghwnoi] {
        background: #000;
        border-color: #000;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *[b-b0xtghwnoi] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Print styles */
@media print {
    .feedback-container[b-b0xtghwnoi] {
        box-shadow: none;
    }

    .feedback-header[b-b0xtghwnoi] {
        background: #f8f9fa !important;
        color: #000 !important;
    }

    .btn[b-b0xtghwnoi],
    .loading-overlay[b-b0xtghwnoi] {
        display: none !important;
    }

    .feedback-card[b-b0xtghwnoi] {
        border: 1px solid #000;
        break-inside: avoid;
    }
}
/* /Pages/TrackingForm.razor.rz.scp.css */
.form-container[b-x51p1li27f] {
    background-color: #f8f9fa;
    min-height: 100vh;
    /*padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 70px;
    padding-right: 70px;*/
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 1024px;
    margin: 0 auto;
}

/* Header Section - Centered Layout */
.header-card[b-x51p1li27f] {
    background: #deede6;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    margin-bottom: 0px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-content[b-x51p1li27f] {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.header-left[b-x51p1li27f] {
    flex: 0 0 auto;
    min-width: 200px;
}

.header-title[b-x51p1li27f] {
    font-size: 24px;
    font-weight: 600;
    color: #212529;
    margin: 0 0 5px 0;
}

.header-subtitle[b-x51p1li27f] {
    font-size: 14px;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Main Content */
.form-card[b-x51p1li27f] {
    background: white;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
}
/*.form-card {
    background: white;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

    .form-card.header-card {*/
        /*background: linear-gradient(135deg, #1e293b 0%, #334155 100%);*/
        /*background-color: #deede6;*/
        /*color: white;*/
        /*text-align: center;
    }
.header-title {
    font-size: 24px;
    font-weight: 600;
    color: #212529;
    margin: 0 0 5px 0;
}

.header-subtitle {
    font-size: 14px;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 8px;
}*/
.card-header-custom[b-x51p1li27f] {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 1rem;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    font-size: 14px;
    color: #495057;
}

.card-content[b-x51p1li27f] {
    padding: 1rem;
}

/*.section-header {*/
    /*background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    padding: 0.75rem 1rem;
    margin: -1rem -1rem 1rem -1rem;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    font-size: 14px;
    color: #495057;*/
    /*font-size: 1.2rem;
    color: #1e293b;
    margin-bottom: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e2e8f0;
}*/

.section-header[b-x51p1li27f] {
    font-size: 1.2rem;
    color: #1e293b;
    margin-bottom: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e2e8f0;
}


.form-label[b-x51p1li27f] {
  font-size: 14px;
/*    font-weight: 500;
    color: #495057;
    margin-bottom: 0.5rem;*/
    color: #1e293b;
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
}

.form-control[b-x51p1li27f], .form-select[b-x51p1li27f] {
    font-size: 12px;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 4px;
}

    .form-control:focus[b-x51p1li27f], .form-select:focus[b-x51p1li27f] {
        border-color: #2196f3;
        box-shadow: 0 0 0 0.2rem rgba(33, 150, 243, 0.25);
    }

.btn-sm-custom[b-x51p1li27f] {
    padding: 0.5rem 1rem;
    font-size: 12px;
    border-radius: 4px;
    text-decoration: none;
    border: 1px solid #ced4da;
    background: white;
    color: #495057;
    font-weight: 500;
}

    .btn-sm-custom:hover[b-x51p1li27f] {
        background: #f8f9fa;
        color: #495057;
        text-decoration: none;
        border-color: #adb5bd;
    }

.btn-primary-custom[b-x51p1li27f] {
    background: #2196f3;
    border-color: #2196f3;
    color: white;
}

    .btn-primary-custom:hover[b-x51p1li27f] {
        background: #1976d2;
        border-color: #1976d2;
        color: white;
    }

.btn-success-custom[b-x51p1li27f] {
    background: #198754;
    border-color: #198754;
    color: white;
}

    .btn-success-custom:hover[b-x51p1li27f] {
        background: #157347;
        border-color: #157347;
        color: white;
    }

.status-badge[b-x51p1li27f] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #e3f2fd;
    border: 1px solid #2196f3;
    color: #1976d2;
}

.image-thumbnail[b-x51p1li27f] {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

.image-card[b-x51p1li27f] {
    background: white;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.alert-custom[b-x51p1li27f] {
    background: #e3f2fd;
    border: 1px solid #2196f3;
    color: #1976d2;
    border-radius: 4px;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

.photo-capture-section[b-x51p1li27f] {
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    margin-bottom: 1rem;
}

    .photo-capture-section:hover[b-x51p1li27f] {
        border-color: #2196f3;
        background: #e3f2fd;
    }

.actions-section[b-x51p1li27f] {
    background: white;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    margin-top: 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.video-thumbnail-container[b-x51p1li27f] {
    position: relative;
}

.media-type-badge[b-x51p1li27f] {
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
}

.image-thumbnail[b-x51p1li27f] {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

/* Video specific styles */
video.image-thumbnail[b-x51p1li27f] {
    background: #000;
}

    video.image-thumbnail[b-x51p1li27f]::-webkit-media-controls {
        height: 30px;
    }

    video.image-thumbnail[b-x51p1li27f]::-webkit-media-controls-panel {
        background: rgba(0, 0, 0, 0.8);
    }

/* Media upload area */
.photo-capture-section[b-x51p1li27f] {
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

    .photo-capture-section:hover[b-x51p1li27f] {
        border-color: #2196f3;
        background: #e3f2fd;
        transform: translateY(-1px);
    }

/* File size indicator */
.file-size-indicator[b-x51p1li27f] {
    font-size: 10px;
    color: #6c757d;
    margin-top: 2px;
}

/* Video duration indicator */
.duration-indicator[b-x51p1li27f] {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 2px 4px;
    border-radius: 2px;
    font-size: 10px;
}

.processing-indicator[b-x51p1li27f] {
    background: #e3f2fd;
    border: 1px solid #2196f3;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.processing-text[b-x51p1li27f] {
    font-size: 14px;
    font-weight: 500;
    color: #1976d2;
}

.progress[b-x51p1li27f] {
    height: 8px;
    background-color: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar[b-x51p1li27f] {
    height: 100%;
    background: linear-gradient(90deg, #2196f3, #1976d2);
    transition: width 0.3s ease;
    border-radius: 4px;
}

/* Enhanced photo capture section */
.photo-capture-section[b-x51p1li27f] {
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

    .photo-capture-section:hover:not(.processing)[b-x51p1li27f] {
        border-color: #2196f3;
        background: #e3f2fd;
        transform: translateY(-1px);
    }

    .photo-capture-section.processing[b-x51p1li27f] {
        border-color: #2196f3;
        background: #e3f2fd;
    }

/* Disable hover effects when processing */
.btn:disabled[b-x51p1li27f] {
    opacity: 0.7;
    cursor: not-allowed;
}

    .btn:disabled:hover[b-x51p1li27f] {
        transform: none;
    }
/* Full-page processing overlay */
.processing-overlay[b-x51p1li27f] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn-b-x51p1li27f 0.3s ease;
}

.processing-modal[b-x51p1li27f] {
    background: white;
    border-radius: 15px;
    padding: 40px 30px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    text-align: center;
    animation: slideIn-b-x51p1li27f 0.4s ease;
}

.processing-content[b-x51p1li27f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.processing-spinner[b-x51p1li27f] {
    margin-bottom: 10px;
}

.spinner-border-lg[b-x51p1li27f] {
    width: 3rem;
    height: 3rem;
    border-width: 0.25rem;
    color: #2196f3;
}

.processing-title[b-x51p1li27f] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.processing-message[b-x51p1li27f] {
    font-size: 1rem;
    color: #64748b;
    margin: 0;
    min-height: 24px;
    font-weight: 500;
}

.processing-progress[b-x51p1li27f] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .processing-progress .progress[b-x51p1li27f] {
        height: 12px;
        background-color: #e2e8f0;
        border-radius: 6px;
        overflow: hidden;
    }

    .processing-progress .progress-bar[b-x51p1li27f] {
        height: 100%;
        background: linear-gradient(90deg, #2196f3, #1976d2);
        transition: width 0.3s ease;
        border-radius: 6px;
    }

.progress-text[b-x51p1li27f] {
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 500;
}

.processing-note[b-x51p1li27f] {
    font-size: 0.875rem;
    color: #94a3b8;
    margin: 0;
    font-style: italic;
}

.location-header[b-x51p1li27f] {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
}
.location-title[b-x51p1li27f] {
    font-size: 1.2rem;
    color: #1e293b;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.btn-current-location[b-x51p1li27f] {
    background: #2196f3;
    border-color: #2196f3;
    color: white;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-current-location:hover[b-x51p1li27f] {
        background: #1976d2;
        border-color: #1976d2;
    }

    .btn-current-location i[b-x51p1li27f] {
        font-size: 14px;
    }

    .btn-current-location span[b-x51p1li27f] {
        display: inline; /* Show text on desktop */
    }
/* Animations */
@keyframes fadeIn-b-x51p1li27f {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
@keyframes slideIn-b-x51p1li27f {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

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

/* Enhanced spinner animation */
@keyframes spinner-border-b-x51p1li27f {
    to {
        transform: rotate(360deg);
    }
}
/* Spinner animation */
.spinner-border[b-x51p1li27f] {
    width: 1rem;
    height: 1rem;
    display: inline-block;
    vertical-align: text-bottom;
    border: 0.125rem solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-x51p1li27f 0.75s linear infinite;
}

.spinner-border-sm[b-x51p1li27f] {
    width: 0.875rem;
    height: 0.875rem;
    border-width: 0.1rem;
}
.capture-buttons-container[b-x51p1li27f] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

.mobile-capture-buttons[b-x51p1li27f] {
    display: flex;
    gap: 10px;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
}

.mobile-upload-option[b-x51p1li27f] {
    width: 100%;
    display: flex;
    justify-content: center;
}

.btn-capture[b-x51p1li27f] {
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 500;
    border: 2px solid;
    transition: all 0.3s ease;
    min-width: 140px;
    font-size: 14px;
}
    .btn-capture:disabled[b-x51p1li27f] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none !important;
        box-shadow: none !important;
    }
.btn-photo[b-x51p1li27f] {
    background: #10b981;
    border-color: #10b981;
    color: white;
}
    .btn-photo:hover:not(:disabled)[b-x51p1li27f] {
        background: #059669;
        border-color: #059669;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    }
.btn-video[b-x51p1li27f] {
    background: #f59e0b;
    border-color: #f59e0b;
    color: white;
}
    .btn-video:hover:not(:disabled)[b-x51p1li27f] {
        background: #d97706;
        border-color: #d97706;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
    }

.btn-upload[b-x51p1li27f] {
    background: #6366f1;
    border-color: #6366f1;
    color: white;
    min-width: 200px;
}
    .btn-upload:hover:not(:disabled)[b-x51p1li27f] {
        background: #4f46e5;
        border-color: #4f46e5;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
    }
.btn-primary[b-x51p1li27f] {
    background: #2196f3;
    border-color: #2196f3;
    color: white;
}
    .btn-primary:hover:not(:disabled)[b-x51p1li27f] {
        background: #1976d2;
        border-color: #1976d2;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
    }



/* Enhanced photo capture section for mobile */
/*.photo-capture-section {
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

    .photo-capture-section:hover:not(.processing) {
        border-color: #2196f3;
        background: #e3f2fd;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);
    }*/
/* Enhanced photo capture section for mobile */
.photo-capture-section[b-x51p1li27f] {
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

    .photo-capture-section:hover:not(.processing)[b-x51p1li27f] {
        border-color: #2196f3;
        background: #e3f2fd;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(33, 150, 243, 0.15);
    }
.coordinates-row[b-x51p1li27f] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.maps-link-badge[b-x51p1li27f] {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    border: 1px solid;
    flex-shrink: 0;
}

.status-overlay[b-x51p1li27f] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    padding: 4px 8px;
    font-size: 0.75rem;
    color: white;
}

    .status-overlay .text-success[b-x51p1li27f] {
        color: #28a745 !important;
    }

    .status-overlay .text-danger[b-x51p1li27f] {
        color: #dc3545 !important;
    }
/* Mobile responsiveness */
@media (max-width: 768px) {
    .form-container[b-x51p1li27f] {
        padding: 0.5rem;
    }

    .header-content[b-x51p1li27f] {
        padding: 15px;
    }

    .header-title[b-x51p1li27f] {
        font-size: 20px;
    }

    .card-content[b-x51p1li27f] {
        padding: 0.75rem;
    }

    .section-header[b-x51p1li27f] {
        padding: 0.5rem 0.75rem;
        margin: -0.75rem -0.75rem 0.75rem -0.75rem;
        font-size: 1.1rem;
    }

    .form-label[b-x51p1li27f] {
        font-size: 12px;
        margin-bottom: 6px;
    }

    /* All three media buttons in same line */
    .capture-buttons-container[b-x51p1li27f] {
        display: flex;
        flex-direction: row;
        gap: 8px;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .mobile-capture-buttons[b-x51p1li27f] {
        display: flex;
        flex-direction: row;
        gap: 8px;
        flex: 2;
    }

    .mobile-upload-option[b-x51p1li27f] {
        flex: 1;
        display: flex;
        justify-content: center;
        margin-top: 0;
    }

    .btn-capture[b-x51p1li27f] {
        flex: 1;
        padding: 10px 6px;
        border-radius: 6px;
        font-weight: 500;
        border: 2px solid;
        transition: all 0.3s ease;
        min-width: auto;
        font-size: 11px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        height: 45px;
    }

        .btn-capture span[b-x51p1li27f] {
            display: none;
        }

        .btn-capture i[b-x51p1li27f] {
            font-size: 14px;
            margin: 0;
        }

    .btn-upload[b-x51p1li27f] {
        background: #6366f1;
        border-color: #6366f1;
        color: white;
        min-width: auto;
        padding: 10px 6px;
        font-size: 11px;
        height: 45px;
        width: 100%;
    }

    /* MOBILE LOCATION: Icon only button, different positioning */
    .location-header[b-x51p1li27f] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 15px;
    }

    .location-title[b-x51p1li27f] {
        font-size: 1.1rem;
        color: #1e293b;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 1;
    }

    .btn-current-location[b-x51p1li27f] {
        background: #2196f3;
        border-color: #2196f3;
        color: white;
        padding: 8px 10px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        min-width: 40px;
        height: 36px;
    }

        /* MOBILE: Hide text, show icon only for current location button */
        .btn-current-location span[b-x51p1li27f] {
            display: none !important;
        }

        .btn-current-location i[b-x51p1li27f] {
            font-size: 16px;
            margin: 0 !important;
        }

    /* Form inputs - smaller */
    .form-control[b-x51p1li27f], .form-select[b-x51p1li27f] {
        font-size: 12px;
        padding: 8px 10px;
    }

    /* GPS Coordinates section */
    .coordinates-row[b-x51p1li27f] {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: 8px;
    }

    .coordinates-input[b-x51p1li27f] {
        flex: 1;
        font-size: 11px;
        padding: 6px 8px;
    }

    .btn-maps[b-x51p1li27f] {
        padding: 6px 10px;
        font-size: 10px;
        border-radius: 4px;
        white-space: nowrap;
    }

    /* Actions section */
    .actions-section[b-x51p1li27f] {
        padding: 1rem;
        margin-top: 15px;
    }

    /* Submit and back buttons - match header style */
    .btn-submit[b-x51p1li27f] {
        background-color: #198754;
        color: white;
        padding: 10px 20px;
        border-radius: 20px;
        text-decoration: none;
        font-size: 12px;
        font-weight: 600;
        border: none;
        cursor: pointer;
        transition: background-color 0.2s;
        width: 100%;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 40px;
    }

        .btn-submit:hover[b-x51p1li27f] {
            background-color: #157347;
            color: white;
            text-decoration: none;
        }

    .btn-back[b-x51p1li27f] {
        background-color: #6c757d;
        color: white;
        padding: 10px 20px;
        border-radius: 20px;
        text-decoration: none;
        font-size: 12px;
        font-weight: 600;
        border: none;
        cursor: pointer;
        transition: background-color 0.2s;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 40px;
    }

        .btn-back:hover[b-x51p1li27f] {
            background-color: #545b62;
            color: white;
            text-decoration: none;
        }

    /* Processing modal */
    .processing-modal[b-x51p1li27f] {
        padding: 25px 20px;
        margin: 15px;
    }

    .processing-title[b-x51p1li27f] {
        font-size: 1.2rem;
    }

    .processing-message[b-x51p1li27f] {
        font-size: 0.85rem;
    }

    .spinner-border-lg[b-x51p1li27f] {
        width: 2.2rem;
        height: 2.2rem;
    }

    /* Photo/Video thumbnails grid */
    .media-grid[b-x51p1li27f] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        gap: 8px;
        margin-top: 10px;
    }

    .image-thumbnail[b-x51p1li27f] {
        height: 80px;
        width: 100%;
        object-fit: cover;
        border-radius: 6px;
    }

    .media-type-badge[b-x51p1li27f] {
        font-size: 9px;
        padding: 2px 4px;
    }
}

/* Extra small phones */
@media (max-width: 480px) {
    .header-title[b-x51p1li27f] {
        font-size: 18px;
    }

    .section-header[b-x51p1li27f] {
        font-size: 1rem;
    }

    .btn-capture[b-x51p1li27f] {
        padding: 10px 6px;
        font-size: 11px;
    }

        .btn-capture i[b-x51p1li27f] {
            font-size: 14px;
        }

    .form-label[b-x51p1li27f] {
        font-size: 11px;
    }

    .form-control[b-x51p1li27f], .form-select[b-x51p1li27f] {
        font-size: 11px;
        padding: 7px 8px;
    }

    .btn-current-location[b-x51p1li27f] {
        padding: 6px 8px;
        font-size: 10px;
    }

    .btn-submit[b-x51p1li27f], .btn-back[b-x51p1li27f] {
        padding: 8px 16px;
        font-size: 11px;
    }
}
/* Prevent scrolling when overlay is active */
body:has(.processing-overlay)[b-x51p1li27f] {
    overflow: hidden;
}