/* /Components/Shared/MarkdownView.razor.rz.scp.css */
/* Use ::deep to target the HTML rendered from the MarkupString */

/*
 * Scoped stylesheet for the MarkdownView component.
 * Uses the `::deep` pseudo-element to style the HTML rendered from MarkupString.
 * Styles are based on the provided Webflow HTML source and adapted for MudBlazor.
*/

/* === GENERAL TYPOGRAPHY === */

[b-o716c2e2j1] p {
    /* Provides standard spacing between paragraphs */
    margin-bottom: 1em;
    line-height: 1.6;
}

[b-o716c2e2j1] a {
    /* Makes links use the primary theme color, like in most apps */
    color: var(--mud-palette-primary);
    text-decoration: none;
}

[b-o716c2e2j1] a:hover {
    text-decoration: underline;
}

[b-o716c2e2j1] strong,
[b-o716c2e2j1] b {
    /* Ensures bold text uses the theme's bold font-weight */
    font-weight: var(--mud-font-weight-bold);
}

/* === HEADINGS === */
/* Replicates the style and spacing of headings in the example */

[b-o716c2e2j1] h1,
[b-o716c2e2j1] h2,
[b-o716c2e2j1] h3,
[b-o716c2e2j1] h4,
[b-o716c2e2j1] h5,
[b-o716c2e2j1] h6 {
    font-family: var(--mud-font-family-h);
    font-weight: var(--mud-font-weight-h);
    margin-top: 1.5em;
    margin-bottom: 1em;
}

[b-o716c2e2j1] h1 { font-size: var(--mud-typography-h5-size); } /* Original h1 now renders as h5 */
[b-o716c2e2j1] h2 { font-size: var(--mud-typography-h6-size); } /* Original h2 now renders as h6 */
[b-o716c2e2j1] h3 { font-size: var(--mud-typography-subtitle1-size); } /* Original h3 now renders as subtitle1 */
[b-o716c2e2j1] h4 { font-size: var(--mud-typography-subtitle2-size); } /* Original h4 now renders as subtitle2 */
[b-o716c2e2j1] h5 { font-size: var(--mud-typography-body1-size); } /* Original h5 now renders as body1 */
[b-o716c2e2j1] h6 { font-size: var(--mud-typography-body2-size); } /* Original h6 now renders as body2 */
/* ::deep h6 { font-size: 0.9em; } Original h6 now renders even smaller */

/* Remove top margin for the very first heading in the content */
[b-o716c2e2j1] h1:first-child,
[b-o716c2e2j1] h2:first-child,
[b-o716c2e2j1] h3:first-child {
    margin-top: 0;
}


/* === TABLES === */
/* Styles tables to look clean and professional, similar to MudBlazor tables */

[b-o716c2e2j1] table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    overflow: hidden; /* Ensures the border-radius is applied to the table corners */
}

[b-o716c2e2j1] caption {
    /* Styles the optional <caption> element */
    padding: 16px;
    font-weight: 500;
    text-align: left;
    font-size: var(--mud-typography-subtitle1-size);
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-background-grey);
}

[b-o716c2e2j1] th {
    /* Styles table headers */
    background-color: var(--mud-palette-background-grey);
    font-weight: 500; /* A medium weight, less heavy than bold */
    text-align: left;
    padding: 16px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

[b-o716c2e2j1] td {
    /* Styles standard table cells */
    padding: 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Removes the bottom border from the last row in a table for a cleaner look */
[b-o716c2e2j1] tr:last-child td {
    border-bottom: none;
}


/* === LISTS (ORDERED & UNORDERED) === */
/* The example has several nested lists */

[b-o716c2e2j1] ol,
[b-o716c2e2j1] ul {
    padding-left: 2em; /* Indents the list */
    margin-bottom: 1em;
}

[b-o716c2e2j1] li {
    margin-bottom: 0.5em; /* Space between list items */
}

/* Adds a little space before a nested list begins */
[b-o716c2e2j1] ul ul,
[b-o716c2e2j1] ol ol,
[b-o716c2e2j1] ul ol,
[b-o716c2e2j1] ol ul {
    margin-top: 0.5em;
}

/* === OTHER ELEMENTS === */

[b-o716c2e2j1] hr {
    /* Styles horizontal rules to match MudBlazor dividers */
    border: none;
    border-top: 1px solid var(--mud-palette-divider);
    margin: 2rem 0;
}

[b-o716c2e2j1] blockquote {
    border-left: 4px solid var(--mud-palette-lines-inputs);
    padding-left: 16px;
    margin-left: 0;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

[b-o716c2e2j1] pre {
    /* Styles code blocks */
    background-color: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 16px;
    overflow-x: auto; /* Allow horizontal scrolling */
}

[b-o716c2e2j1] code {
    /* Styles inline code snippets */
    background-color: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-error);
    padding: .2em .4em;
    border-radius: 3px;
    font-family: var(--mud-font-family-monospace);
}

[b-o716c2e2j1] pre > code {
    /* Resets styles for code that is inside a pre block */
    background-color: transparent;
    color: inherit;
    padding: 0;
}
/* /Components/Shared/ProfilePicture.razor.rz.scp.css */
/* ProfilePicture Component Styles */
/* Following MudBlazor 8.8.0 and ProjectAlpha theme standards */

.profile-picture-container[b-syi5xuw65y] {
    display: inline-block;
    position: relative;
}

.profile-picture-avatar[b-syi5xuw65y] {
    cursor: var(--cursor, default);
    transition: var(--app-transition-fast);
    user-select: none;
}

.profile-picture-avatar.clickable[b-syi5xuw65y] {
    --cursor: pointer;
}

.profile-picture-avatar:hover.clickable[b-syi5xuw65y] {
    transform: scale(1.02);
    box-shadow: var(--mud-elevation-4);
}

.profile-picture-image[b-syi5xuw65y] {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
    transition: var(--app-transition-fast);
}

.profile-picture-image.rounded[b-syi5xuw65y] {
    border-radius: var(--app-radius-full);
}

.profile-picture-image.square[b-syi5xuw65y] {
    border-radius: var(--app-radius-small);
}

/* Size-specific styles that work with CSS variables */
.profile-picture-avatar.avatar-small[b-syi5xuw65y] {
    height: var(--app-avatar-small);
    width: var(--app-avatar-small);
    font-size: calc(var(--app-avatar-small) * 0.4); /* Responsive font size for initials */
}

.profile-picture-avatar.avatar-medium[b-syi5xuw65y] {
    height: var(--app-avatar-medium);
    width: var(--app-avatar-medium);  
    font-size: calc(var(--app-avatar-medium) * 0.3);
}

.profile-picture-avatar.avatar-large[b-syi5xuw65y] {
    height: var(--app-avatar-large);
    width: var(--app-avatar-large);
    font-size: calc(var(--app-avatar-large) * 0.25);
}

.profile-picture-avatar.avatar-xlarge[b-syi5xuw65y] {
    height: var(--app-avatar-xlarge);
    width: var(--app-avatar-xlarge);
    font-size: calc(var(--app-avatar-xlarge) * 0.2);
}

/* Loading state styles */
.profile-picture-avatar .mud-skeleton-circle[b-syi5xuw65y] {
    border-radius: var(--app-radius-full);
}

.profile-picture-avatar.square .mud-skeleton-circle[b-syi5xuw65y] {
    border-radius: var(--app-radius-small);
}

/* High contrast and accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .profile-picture-avatar[b-syi5xuw65y],
    .profile-picture-image[b-syi5xuw65y] {
        transition: none;
    }
    
    .profile-picture-avatar:hover.clickable[b-syi5xuw65y] {
        transform: none;
    }
}

/* Focus styles for keyboard accessibility */
.profile-picture-avatar:focus-visible[b-syi5xuw65y] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Error state styling */
.profile-picture-avatar.error[b-syi5xuw65y] {
    background-color: var(--mud-palette-error-lighten);
    color: var(--mud-palette-error-darken);
}

/* Print styles */
@media print {
    .profile-picture-container[b-syi5xuw65y] {
        break-inside: avoid;
    }
    
    .profile-picture-avatar:hover.clickable[b-syi5xuw65y] {
        transform: none;
        box-shadow: none;
    }
}
/* /Components/Shared/StandardPage.razor.rz.scp.css */
/* Hero Section Base Styles */
[b-s3y5gb8773] .hero-section {
    padding: clamp(2rem, 6vw, 4rem) 0;
    margin-bottom: 2rem;
    position: relative;
    min-height: clamp(200px, 30vw, 400px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: white;
    transition: all 0.3s ease;
}

[b-s3y5gb8773] .hero-content {
    position: relative;
    z-index: 2;
    padding: 1rem;
    width: 100%;
}

[b-s3y5gb8773] .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

[b-s3y5gb8773] .hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

/* Hero Size Variants */
[b-s3y5gb8773] .hero-small {
    min-height: clamp(150px, 20vw, 250px);
    padding: clamp(1.5rem, 4vw, 2.5rem) 0;
}

[b-s3y5gb8773] .hero-default {
    /* Default size - defined above */
}

[b-s3y5gb8773] .hero-large {
    min-height: clamp(300px, 40vw, 500px);
    padding: clamp(3rem, 8vw, 5rem) 0;
}

[b-s3y5gb8773] .hero-marketing {
    min-height: clamp(400px, 50vw, 600px);
    padding: clamp(4rem, 10vw, 6rem) 0;
}

/* Hero Style Presets */
[b-s3y5gb8773] .hero-auth {
    background: linear-gradient(135deg, var(--mud-palette-primary-light) 0%, var(--mud-palette-primary) 100%);
}

[b-s3y5gb8773] .hero-error {
    background: linear-gradient(135deg, var(--mud-palette-error-light) 0%, var(--mud-palette-error) 100%);
}

[b-s3y5gb8773] .hero-success {
    background: linear-gradient(135deg, var(--mud-palette-success-light) 0%, var(--mud-palette-success) 100%);
}

[b-s3y5gb8773] .hero-dashboard {
    background: linear-gradient(135deg, var(--mud-palette-info-light) 0%, var(--mud-palette-info) 100%);
}

/* Pattern Overlay */
[b-s3y5gb8773] .hero-pattern {
    position: relative;
}

[b-s3y5gb8773] .hero-pattern::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.1;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    z-index: 1;
}

/* Responsive Design - MudBlazor Breakpoints */

/* xs: 0-599px */
@media (max-width: 599.95px) {
    [b-s3y5gb8773] .hero-section {
        padding: clamp(1.5rem, 4vw, 2.5rem) 0;
        min-height: clamp(150px, 25vw, 250px);
    }
    
    [b-s3y5gb8773] .hero-content {
        padding: 0.5rem;
    }
    
    /* Responsive typography */
    [b-s3y5gb8773] .hero-section .mud-typography-h1 {
        font-size: 2rem;
    }
    
    [b-s3y5gb8773] .hero-section .mud-typography-h2 {
        font-size: 1.75rem;
    }
    
    [b-s3y5gb8773] .hero-section .mud-typography-h3 {
        font-size: 1.5rem;
    }
    
    [b-s3y5gb8773] .hero-section .mud-typography-h4 {
        font-size: 1.25rem;
    }
    
    [b-s3y5gb8773] .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    [b-s3y5gb8773] .hero-actions > * {
        width: 100%;
    }
}

/* sm: 600-959px */
@media (min-width: 600px) and (max-width: 959.95px) {
    [b-s3y5gb8773] .hero-section {
        padding: clamp(2rem, 5vw, 3rem) 0;
        min-height: clamp(200px, 28vw, 350px);
    }
    
    [b-s3y5gb8773] .hero-section .mud-typography-h1 {
        font-size: 2.5rem;
    }
    
    [b-s3y5gb8773] .hero-section .mud-typography-h2 {
        font-size: 2rem;
    }
    
    [b-s3y5gb8773] .hero-section .mud-typography-h3 {
        font-size: 1.75rem;
    }
}

/* md: 960-1279px */
@media (min-width: 960px) and (max-width: 1279.95px) {
    [b-s3y5gb8773] .hero-section {
        padding: clamp(2.5rem, 5.5vw, 3.5rem) 0;
    }
}

/* lg: 1280-1919px */
@media (min-width: 1280px) and (max-width: 1919.95px) {
    [b-s3y5gb8773] .hero-section {
        padding: clamp(3rem, 6vw, 4rem) 0;
    }
}

/* xl: 1920px+ */
@media (min-width: 1920px) {
    [b-s3y5gb8773] .hero-section {
        padding: 4rem 0;
    }
}

/* Accessibility Support */

/* High Contrast Mode */
@media (prefers-contrast: high) {
    [b-s3y5gb8773] .hero-section {
        border: 2px solid currentColor;
    }
    
    [b-s3y5gb8773] .hero-overlay {
        display: none;
    }
    
    [b-s3y5gb8773] .hero-pattern::before {
        display: none;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    [b-s3y5gb8773] .hero-section {
        transition: none;
    }
    
    [b-s3y5gb8773] .hero-animated .hero-content {
        animation: none;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    [b-s3y5gb8773] .hero-overlay {
        background-color: rgba(0, 0, 0, 0.6);
    }
}

/* Focus Visible for Keyboard Navigation */
[b-s3y5gb8773] .hero-actions button:focus-visible,
[b-s3y5gb8773] .hero-actions a:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}

/* Animation Classes */
[b-s3y5gb8773] .hero-animated .hero-content {
    animation: fadeInUp-b-s3y5gb8773 0.8s ease-out;
}

@keyframes fadeInUp-b-s3y5gb8773 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Print Styles */
@media print {
    [b-s3y5gb8773] .hero-section {
        display: none;
    }
}
/* /Pages/Projects/Components/ProjectDetailsFiles.Backup.razor.rz.scp.css */
/* File item hover effects */
.file-item-draggable:hover[b-s1oq9i3mmm] {
    cursor: grab !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.file-item-draggable:active[b-s1oq9i3mmm] {
    cursor: grabbing !important;
    transform: translateY(0px);
}

/* Drag handle visibility */
.drag-handle[b-s1oq9i3mmm] {
    opacity: 0.3 !important;
    transition: opacity 0.2s ease;
}

.file-item-draggable:hover .drag-handle[b-s1oq9i3mmm] {
    opacity: 0.8 !important;
}

/* Drop zone hover effects */
.mud-drop-zone:hover[b-s1oq9i3mmm] {
    border-color: var(--mud-palette-primary) !important;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.05) !important;
}

/* File item selection effects */
.file-item-selected[b-s1oq9i3mmm] {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.1) !important;
    border-left: 4px solid var(--mud-palette-primary) !important;
}

/* Smooth transitions for all file items */
.file-item-draggable[b-s1oq9i3mmm] {
    transition: all 0.2s ease;
}

/* Enhanced visual feedback for drag operations */
.mud-drag-active .file-item-draggable[b-s1oq9i3mmm] {
    opacity: 0.7;
    transform: scale(0.95);
}

/* Drop zone visual feedback during drag */
.mud-drop-zone-drag-over[b-s1oq9i3mmm] {
    border: 2px dashed var(--mud-palette-primary) !important;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.1) !important;
}

/* Empty state styling */
.empty-drop-zone[b-s1oq9i3mmm] {
    min-height: 300px;
    border: 2px dashed var(--mud-palette-divider);
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-surface);
    transition: all 0.3s ease;
}

.empty-drop-zone:hover[b-s1oq9i3mmm] {
    border-color: var(--mud-palette-primary);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.02);
}

/* File type icon colors for better visibility */
.file-icon-pdf[b-s1oq9i3mmm] {
    color: #e53e3e !important;
}

.file-icon-word[b-s1oq9i3mmm] {
    color: #2b6cb0 !important;
}

.file-icon-excel[b-s1oq9i3mmm] {
    color: #38a169 !important;
}

.file-icon-image[b-s1oq9i3mmm] {
    color: #805ad5 !important;
}

.file-icon-text[b-s1oq9i3mmm] {
    color: #4a5568 !important;
}

/* Mobile-friendly adjustments */
@media (max-width: 768px) {
    .file-item-draggable[b-s1oq9i3mmm] {
        padding: 16px 12px !important;
    }
    
    .drag-handle[b-s1oq9i3mmm] {
        display: none;
    }
}