@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.84wtju4z0n.bundle.scp.css';

/* /Pages/Email/Templates/Components/Editor/EmptyEditorState.razor.rz.scp.css */
.empty-editor-state[b-3b3r1cm374] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    padding: 20px;
}

.welcome-card[b-3b3r1cm374] {
    padding: 32px;
    max-width: 700px;
    width: 100%;
}

.welcome-icon[b-3b3r1cm374] {
    background: linear-gradient(135deg, var(--accent-fill-rest) 0%, var(--accent-fill-hover) 100%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-card[b-3b3r1cm374] {
    transition: all 0.2s ease;
    min-height: 140px;
}

.action-card:hover[b-3b3r1cm374] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.action-icon[b-3b3r1cm374] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* /Pages/Email/Templates/Components/Form/EmailTemplateForm.razor.rz.scp.css */
/* Email Template Form Component Styles */

/* Dialog header styling */
.dialog-header-content[b-pahw16h3yd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
}

.header-icon[b-pahw16h3yd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: var(--accent-fill-subtle);
    border-radius: 8px;
}

/* Action bar styling */
.action-bar[b-pahw16h3yd] {
    padding: 12px 16px;
    background-color: var(--neutral-layer-2);
    border-radius: 8px;
    margin-bottom: 16px;
}

/* Template content area */
.template-content-area[b-pahw16h3yd] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Edit mode container */
.edit-mode-container[b-pahw16h3yd] {
    height: 100%;
}

/* Preview mode container */
.preview-mode-container[b-pahw16h3yd] {
    height: 100%;
    overflow-y: auto;
}

/* Split view container */
.split-view-container[b-pahw16h3yd] {
    height: clamp(400px, 60vh, 600px);
}

/* Tab content container */
.tab-content-container[b-pahw16h3yd] {
    padding: 16px;
}

/* Card header styling */
.card-header[b-pahw16h3yd] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Textarea styling for code editor */
[b-pahw16h3yd] textarea {
    min-height: 280px;
    font-family: Consolas, 'Courier New', monospace;
}

/* HTML editor toolbar */
.html-editor-toolbar[b-pahw16h3yd] {
    background-color: var(--neutral-layer-2);
    padding: 8px 12px;
    border-radius: 6px;
}

/* Snippets container */
.snippets-container[b-pahw16h3yd] {
    padding: 12px 0;
}

.snippet-card[b-pahw16h3yd] {
    cursor: pointer;
    padding: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.snippet-card:hover[b-pahw16h3yd] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.snippet-card:focus[b-pahw16h3yd] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}

/* Placeholders styling */
.placeholders-header-card[b-pahw16h3yd] {
    padding: 16px;
}

.placeholder-item[b-pahw16h3yd] {
    padding: 12px 16px;
    transition: box-shadow 0.2s ease;
}

.placeholder-item:hover[b-pahw16h3yd] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.placeholder-indicator[b-pahw16h3yd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: var(--accent-fill-subtle);
    border-radius: 6px;
}

.empty-placeholders[b-pahw16h3yd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    gap: 12px;
    background-color: var(--neutral-layer-2);
    border-radius: 8px;
}

.suggestions-card[b-pahw16h3yd] {
    padding: 16px;
    background-color: var(--neutral-layer-1);
}

/* Validation summary */
.validation-summary[b-pahw16h3yd] {
    margin-top: 16px;
}

/* Error indicator badge */
.error-indicator[b-pahw16h3yd] {
    margin-left: 8px;
}

/* Dialog footer */
.dialog-footer-content[b-pahw16h3yd] {
    width: 100%;
}

/* Template library overlay */
.template-library-overlay[b-pahw16h3yd] {
    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;
}

.template-library-modal[b-pahw16h3yd] {
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
}

/* Email preview container */
.email-content-preview[b-pahw16h3yd] {
    font-family: var(--body-font);
    line-height: 1.5;
    max-width: 650px;
    margin: 0 auto;
    padding: 8px;
}

/* Ensure proper handling of HTML elements in preview */
.email-content-preview[b-pahw16h3yd]  img {
    max-width: 100%;
    height: auto;
}

.email-content-preview[b-pahw16h3yd]  table {
    border-collapse: collapse;
    width: 100%;
    margin: 8px 0;
}

.email-content-preview[b-pahw16h3yd]  td,
.email-content-preview[b-pahw16h3yd]  th {
    border: 1px solid var(--neutral-stroke-rest);
    padding: 8px;
}

/* Statistics items */
.stat-item[b-pahw16h3yd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background-color: var(--neutral-layer-2);
    border-radius: 8px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .split-view-container[b-pahw16h3yd] {
        height: auto;
    }

    .split-view-container > .fluent-stack[b-pahw16h3yd] {
        flex-direction: column;
    }

    .action-bar[b-pahw16h3yd] {
        padding: 8px 12px;
    }

    .stat-item[b-pahw16h3yd] {
        padding: 12px;
    }
}

@media (max-width: 640px) {
    .snippets-container .fluent-grid[b-pahw16h3yd] {
        grid-template-columns: 1fr;
    }

    .dialog-header-content[b-pahw16h3yd] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Placeholder Categories */
.detected-placeholders-card[b-pahw16h3yd],
.quick-insert-card[b-pahw16h3yd] {
    padding: 20px;
    background: var(--neutral-layer-2);
}

.placeholder-category[b-pahw16h3yd] {
    padding: 16px;
    background: var(--neutral-layer-1);
    border-radius: 8px;
    border-left: 4px solid var(--accent-fill-rest);
}

    .placeholder-category.recipient-category[b-pahw16h3yd] {
        border-left-color: var(--success);
    }

    .placeholder-category.system-category[b-pahw16h3yd] {
        border-left-color: var(--info);
    }

    .placeholder-category.custom-category[b-pahw16h3yd] {
        border-left-color: var(--warning);
    }

    .placeholder-category + .placeholder-category[b-pahw16h3yd] {
        margin-top: 12px;
    }

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

/* Code styling for placeholder preview */
code[b-pahw16h3yd] {
    background-color: var(--neutral-layer-3);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 0.9em;
}
/* /Pages/Email/Templates/Components/Form/Tabs/BasicInfoTab.razor.rz.scp.css */
.tab-content-container[b-0et1gd60zi] {
    padding: 16px;
}

.card-header[b-0et1gd60zi] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-with-counter[b-0et1gd60zi] {
    position: relative;
    width: 100%;
}

.character-counter[b-0et1gd60zi] {
    display: block;
    text-align: right;
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
    margin-top: 4px;
}

.stat-item[b-0et1gd60zi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background-color: var(--neutral-layer-2);
    border-radius: 8px;
}

/* Screen reader only class */
.sr-only[b-0et1gd60zi] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Responsive layout for grid items */
@media (max-width: 768px) {
    :deep(.fluent-grid-item[column="8"])[b-0et1gd60zi],
    :deep(.fluent-grid-item[column="4"])[b-0et1gd60zi] {
        grid-column: span 12 !important;
    }

    .stat-item[b-0et1gd60zi] {
        padding: 12px;
    }
}
/* /Pages/Email/Templates/Components/Form/Tabs/HtmlContentTab.razor.rz.scp.css */
.tab-content-container[b-hfyh9vp1nn] {
    padding: 16px;
}

.html-editor-toolbar[b-hfyh9vp1nn] {
    background-color: var(--neutral-layer-2);
    padding: 8px 12px;
    border-radius: 6px;
}

.html-editor-container[b-hfyh9vp1nn] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.html-editor[b-hfyh9vp1nn] {
    font-family: Consolas, 'Courier New', monospace;
    min-height: 280px;
}

[b-hfyh9vp1nn] .html-editor textarea {
    font-family: Consolas, 'Courier New', monospace;
    min-height: 280px;
}

.snippets-container[b-hfyh9vp1nn] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.snippet-category[b-hfyh9vp1nn] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.category-label[b-hfyh9vp1nn] {
    color: var(--neutral-foreground-rest);
    margin-bottom: 4px;
}

.snippet-card[b-hfyh9vp1nn] {
    cursor: pointer;
    padding: 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.snippet-card:hover[b-hfyh9vp1nn] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.snippet-card:focus[b-hfyh9vp1nn] {
    outline: 2px solid var(--accent-fill-rest);
    outline-offset: 2px;
}

/* Screen reader only class */
.sr-only[b-hfyh9vp1nn] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Responsive layout */
@media (max-width: 1024px) {
    [b-hfyh9vp1nn] .fluent-grid[columns="3"] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    [b-hfyh9vp1nn] .fluent-grid[columns="3"] {
        grid-template-columns: 1fr;
    }

    .snippet-card[b-hfyh9vp1nn] {
        padding: 12px;
    }
}
/* /Pages/Email/Templates/Components/Form/Tabs/PlaceholdersTab.razor.rz.scp.css */
.tab-content-container[b-4h6ag0s8v3] {
    padding: 16px;
}

.placeholders-header-card[b-4h6ag0s8v3] {
    padding: 16px;
}

.placeholders-management[b-4h6ag0s8v3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.placeholder-item[b-4h6ag0s8v3] {
    padding: 12px 16px;
    transition: box-shadow 0.2s ease;
}

.placeholder-item:hover[b-4h6ag0s8v3] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.placeholder-indicator[b-4h6ag0s8v3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: var(--accent-fill-subtle);
    border-radius: 6px;
}

.empty-placeholders[b-4h6ag0s8v3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    gap: 12px;
    background-color: var(--neutral-layer-2);
    border-radius: 8px;
}

.suggestions-card[b-4h6ag0s8v3] {
    padding: 16px;
    background-color: var(--neutral-layer-1);
}

/* Responsive layout */
@media (max-width: 640px) {
    .placeholders-header-card[b-4h6ag0s8v3] {
        padding: 12px;
    }

    [b-4h6ag0s8v3] .fluent-stack[orientation="horizontal"] {
        flex-direction: column;
        align-items: flex-start;
    }

    .placeholder-item[b-4h6ag0s8v3] {
        padding: 8px 12px;
    }

    .empty-placeholders[b-4h6ag0s8v3] {
        padding: 40px 16px;
    }
}
/* /Pages/Email/Templates/Components/Form/Toolbar/FormToolbar.razor.rz.scp.css */
.action-bar[b-9m2tu4hrxi] {
    padding: 12px 16px;
    background-color: var(--neutral-layer-2);
    border-radius: 8px;
    margin-bottom: 16px;
}

.view-mode-fieldset[b-9m2tu4hrxi] {
    border: none;
    padding: 0;
    margin: 0;
}

/* Screen reader only class */
.sr-only[b-9m2tu4hrxi] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .action-bar[b-9m2tu4hrxi] {
        padding: 8px 12px;
    }

    [b-9m2tu4hrxi] .fluent-radio-group {
        min-width: auto;
    }
}

@media (max-width: 480px) {
    [b-9m2tu4hrxi] .fluent-stack[orientation="horizontal"] {
        flex-direction: column;
        gap: 8px;
    }
}
/* /Pages/Email/Templates/Components/Preview/EmailTemplatePreview.razor.rz.scp.css */
.email-preview-container[b-4884xabig1] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Main preview container */
.preview-container[b-4884xabig1] {
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Email client header styling */
.email-client-header[b-4884xabig1] {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: var(--accent-fill-rest);
    padding: 12px 16px;
    color: white;
}

.email-client-title[b-4884xabig1] {
    font-weight: 600;
    font-size: 16px;
}

.preview-controls[b-4884xabig1] {
    display: flex;
    gap: 8px;
}

/* Email content container */
.email-content-container[b-4884xabig1] {
    display: flex;
    flex-direction: column;
    background-color: var(--neutral-layer-1);
}

/* Email header styling */
.email-header[b-4884xabig1] {
    padding: clamp(12px, 3vw, 20px);
    background-color: var(--neutral-layer-2);
    border-bottom: 1px solid var(--neutral-stroke-subtle);
}

.email-subject[b-4884xabig1] {
    font-size: clamp(14px, 2.5vw, 18px);
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-bottom: 12px;
}

.email-metadata[b-4884xabig1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.metadata-row[b-4884xabig1] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.metadata-label[b-4884xabig1] {
    width: 50px;
    color: var(--neutral-foreground-hint);
    font-weight: 500;
    flex-shrink: 0;
}

.metadata-value[b-4884xabig1] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--neutral-foreground-rest);
}

.email-divider[b-4884xabig1] {
    margin: 8px 0;
}

/* Email body styling */
.email-body[b-4884xabig1] {
    padding: clamp(12px, 3vw, 24px);
    min-height: clamp(200px, 30vh, 300px);
    max-height: clamp(300px, 50vh, 400px);
    overflow-y: auto;
    background-color: white;
}

.email-content-preview[b-4884xabig1] {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: var(--neutral-foreground-rest);
}

/* Empty content placeholder */
.empty-content[b-4884xabig1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(30px, 8vh, 60px) 0;
    color: var(--neutral-foreground-hint);
    text-align: center;
    gap: 12px;
}

/* Placeholder section styling */
.placeholder-accordion[b-4884xabig1] {
    border-top: 1px solid var(--neutral-stroke-subtle);
}

.placeholder-content[b-4884xabig1] {
    padding: 16px;
}

.placeholder-inputs[b-4884xabig1] {
    margin-top: 12px;
}

.placeholder-input-group[b-4884xabig1] {
    display: flex;
    flex-direction: column;
}

.empty-placeholders[b-4884xabig1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 0;
    color: var(--neutral-foreground-hint);
}

/* Template info card */
.template-info-card[b-4884xabig1] {
    padding: 16px;
}

.info-header[b-4884xabig1] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-item[b-4884xabig1] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.placeholders-summary[b-4884xabig1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Placeholder badges section */
.placeholders-card[b-4884xabig1] {
    padding: 16px;
    background-color: var(--neutral-layer-1);
}

.placeholders-header[b-4884xabig1] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

/* Ensure rendered HTML content is properly contained and styled */
.email-content-preview[b-4884xabig1]  table {
    border-collapse: collapse;
    width: auto;
    max-width: 100%;
    margin: 8px 0;
}

.email-content-preview[b-4884xabig1]  table th,
.email-content-preview[b-4884xabig1]  table td {
    border: 1px solid var(--neutral-stroke-rest);
    padding: 8px;
}

.email-content-preview[b-4884xabig1]  img {
    max-width: 100%;
    height: auto;
}

/* Styling for common HTML elements in email content */
.email-content-preview[b-4884xabig1]  h1,
.email-content-preview[b-4884xabig1]  h2,
.email-content-preview[b-4884xabig1]  h3,
.email-content-preview[b-4884xabig1]  h4 {
    margin-top: 16px;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--neutral-foreground-rest);
    line-height: 1.4;
}

.email-content-preview[b-4884xabig1]  p {
    margin: 8px 0;
    line-height: 1.5;
}

.email-content-preview[b-4884xabig1]  a {
    color: var(--accent-foreground-rest);
    text-decoration: underline;
}

.email-content-preview[b-4884xabig1]  ul,
.email-content-preview[b-4884xabig1]  ol {
    margin: 8px 0;
    padding-left: 24px;
}

.email-content-preview[b-4884xabig1]  li {
    margin: 4px 0;
}

.email-content-preview[b-4884xabig1]  div {
    max-width: 100%;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .email-client-header[b-4884xabig1] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .metadata-row[b-4884xabig1] {
        font-size: 0.9rem;
    }

    .email-body[b-4884xabig1] {
        min-height: 200px;
        max-height: 50vh;
    }
}

@media (max-width: 480px) {
    .email-header[b-4884xabig1] {
        padding: 12px;
    }

    .email-body[b-4884xabig1] {
        padding: 12px;
    }

    .placeholder-content[b-4884xabig1] {
        padding: 12px;
    }
}
/* /Pages/Email/Templates/Components/Preview/ResponsiveEmailPreview.razor.rz.scp.css */
.responsive-preview-container[b-n7l4nlp0uf] {
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.preview-card[b-n7l4nlp0uf] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Replicate FluentCard visual appearance */
    background: var(--neutral-layer-card-container, #fff);
    border: 1px solid var(--neutral-stroke-layer-rest, #e0e0e0);
    border-radius: calc(var(--control-corner-radius, 4) * 1px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.06);
}

.preview-header[b-n7l4nlp0uf] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--neutral-stroke-subtle);
    background-color: var(--neutral-layer-2);
    flex-shrink: 0;
}

.preview-content[b-n7l4nlp0uf] {
    flex: 1;
    padding: 12px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: stretch;
    background-color: var(--neutral-layer-3);
    min-height: 0;
}

/* Device Frames */
.device-frame[b-n7l4nlp0uf] {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.desktop-frame[b-n7l4nlp0uf] {
    width: 100%;
    max-width: 650px;
    border-radius: 8px;
}

.tablet-frame[b-n7l4nlp0uf] {
    width: 768px;
    max-width: 100%;
    border-radius: 12px;
    border: 6px solid #333;
}

.mobile-frame[b-n7l4nlp0uf] {
    width: 375px;
    max-width: 100%;
    border-radius: 28px;
    border: 8px solid #333;
    position: relative;
    padding-top: 20px;
}

.mobile-notch[b-n7l4nlp0uf] {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 20px;
    background-color: #333;
    border-radius: 0 0 12px 12px;
    z-index: 10;
}

/* Viewports — fill available space */
.preview-viewport[b-n7l4nlp0uf] {
    overflow-y: auto;
    overflow-x: hidden;
    background-color: white;
    transition: all 0.3s ease;
    flex: 1;
    min-height: 0;
}

.viewport-desktop[b-n7l4nlp0uf] {
    /* fills parent */
}

.viewport-tablet[b-n7l4nlp0uf] {
    /* fills parent */
}

.viewport-mobile[b-n7l4nlp0uf] {
    /* fills parent */
}

.email-preview-wrapper[b-n7l4nlp0uf] {
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

    /* Ensure email content is responsive */
    .email-preview-wrapper[b-n7l4nlp0uf]  img {
        max-width: 100%;
        height: auto;
    }

    .email-preview-wrapper[b-n7l4nlp0uf]  table {
        max-width: 100%;
    }

/* Empty preview state */
.empty-preview[b-n7l4nlp0uf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    text-align: center;
    gap: 8px;
    min-height: 200px;
}

/* Device info bar */
.device-info[b-n7l4nlp0uf] {
    padding: 6px 12px;
    border-top: 1px solid var(--neutral-stroke-subtle);
    text-align: center;
    background-color: var(--neutral-layer-2);
    flex-shrink: 0;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .tablet-frame[b-n7l4nlp0uf] {
        width: 100%;
        max-width: 768px;
    }
}

@media (max-width: 768px) {
    .preview-content[b-n7l4nlp0uf] {
        padding: 8px;
    }

    .mobile-frame[b-n7l4nlp0uf] {
        width: 100%;
        max-width: 375px;
    }
}
/* /Pages/Email/Templates/Components/TemplateGallery/TemplateGalleryDialog.razor.rz.scp.css */
.template-gallery-card[b-p24jvtzkk4] {
    padding: 8px;
}

.template-gallery-card:hover[b-p24jvtzkk4] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.template-gallery-card.selected[b-p24jvtzkk4] {
    background-color: var(--accent-fill-subtle);
}
/* /Pages/Home.razor.rz.scp.css */
.fluent-home-content[b-l2x09vz06e] {
    padding: 1rem;
    height: 100%; /* Ensure it takes available height */
}

/* Styles for the NotAuthorized section */
.welcome-card[b-l2x09vz06e] {
    box-shadow: var(--elevation-shadow-dialog);
    border: 1px solid var(--neutral-stroke-divider-rest);
}

.feature-item-grid[b-l2x09vz06e] {
    display: flex;
    justify-content: center;
}

.feature-item[b-l2x09vz06e] {
    border-radius: var(--control-corner-radius);
    transition: background-color 0.2s ease-in-out;
    width: 100%; /* Make stack take full width of grid item */
    height: 100%; /* Make stack take full height */
    display: flex; /* Ensure children align well */
    flex-direction: column;
    justify-content: center;
}

    .feature-item:hover[b-l2x09vz06e] {
        background-color: var(--neutral-fill-hover);
    }

/* Styles for the Authorized section */
.dashboard-card[b-l2x09vz06e] {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border: 1px solid var(--neutral-stroke-rest);
}

    .dashboard-card:hover[b-l2x09vz06e] {
        transform: translateY(-4px);
        box-shadow: var(--elevation-shadow-card-hover);
    }

.recent-activity-scroll[b-l2x09vz06e] {
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: var(--control-corner-radius);
    padding: 0.5rem; /* Add some padding inside the scroll area */
    background-color: var(--neutral-layer-1);
}

    .recent-activity-scroll .fluent-card[b-l2x09vz06e] {
        background-color: var(--neutral-layer-2); /* Slightly different background for cards inside scroll */
        border: 1px solid var(--neutral-stroke-subtle);
    }

.text-muted[b-l2x09vz06e] {
    color: var(--neutral-foreground-hint);
}

/* Ensure stacks in NotAuthorized card take available width */
.welcome-card fluent-stack[b-l2x09vz06e] {
    width: 100%;
}
/* /Pages/Settings/EmailSettings.razor.rz.scp.css */
/* Admin Header Card */
.admin-header-card[b-5zq2r2mzd8] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 32px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.15);
}

.header-icon-container[b-5zq2r2mzd8] {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Validation Summary */
.validation-summary-card[b-5zq2r2mzd8] {
    border-left: 4px solid var(--error-color, #e74c3c);
}

/* Section Headers */
.section-header[b-5zq2r2mzd8] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest);
}

.section-icon[b-5zq2r2mzd8] {
    width: 48px;
    height: 48px;
    background: var(--accent-fill-secondary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Settings Sections */
.settings-section[b-5zq2r2mzd8] {
    padding: 32px;
    border-radius: 12px;
    border: 1px solid var(--neutral-stroke-layer-rest);
    animation: slideInUp-b-5zq2r2mzd8 0.3s ease-out;
}

.config-subsection[b-5zq2r2mzd8] {
    padding: 24px;
    border-radius: 8px;
    background: var(--neutral-layer-1);
}

/* Test Email Section */
.test-email-section[b-5zq2r2mzd8] {
    border: 2px solid var(--success-color, #28a745);
}

/* Provider Selection */
.provider-option[b-5zq2r2mzd8] {
    padding: 20px;
    border: 2px solid var(--neutral-stroke-control-default);
    border-radius: 12px;
    transition: all 0.3s ease;
    background: var(--neutral-layer-1);
    min-width: 200px;
    cursor: pointer;
}

.provider-option:hover[b-5zq2r2mzd8] {
    border-color: var(--accent-fill-hover);
    background: var(--accent-fill-secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

/* Checkboxes */
.custom-checkbox[b-5zq2r2mzd8],
.security-checkbox[b-5zq2r2mzd8],
.tracking-checkbox[b-5zq2r2mzd8] {
    padding: 16px;
    border: 1px solid var(--neutral-stroke-control-default);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.custom-checkbox:hover[b-5zq2r2mzd8],
.security-checkbox:hover[b-5zq2r2mzd8],
.tracking-checkbox:hover[b-5zq2r2mzd8] {
    border-color: var(--accent-fill-rest);
    background: var(--accent-fill-secondary);
}

/* Action Section */
.action-section[b-5zq2r2mzd8] {
    padding: 24px;
    background: var(--neutral-layer-2);
    border: 1px solid var(--neutral-stroke-divider-rest);
    border-radius: 12px;
}

/* Animations */
@keyframes slideInUp-b-5zq2r2mzd8 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .admin-header-card[b-5zq2r2mzd8] {
        padding: 24px;
    }

    .header-icon-container[b-5zq2r2mzd8] {
        width: 48px;
        height: 48px;
    }

    .settings-section[b-5zq2r2mzd8] {
        padding: 20px;
    }
}