/*
 * Opinario Feature System
 * Global visual language for AtlasPMS.Web/Opinario/Features,
except Opinario/Features/Feedback.
 * Keep this file focused on shared SaaS-dashboard tokens plus migrated feature styles.
 */

:root {
    --op-font-family-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --op-font-family-mono: 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;

    --op-type-size-micro: .68rem;
    --op-type-size-eyebrow: .72rem;
    --op-type-size-label: .78rem;
    --op-type-size-caption: .82rem;
    --op-type-size-meta: .84rem;
    --op-type-size-body-sm: .88rem;
    --op-type-size-body: .9rem;
    --op-type-size-body-lg: .95rem;
    --op-type-size-control: .94rem;
    --op-type-size-title-sm: .98rem;
    --op-type-size-title: 1rem;
    --op-type-size-title-md: 1.08rem;
    --op-type-size-title-lg: 1.28rem;
    --op-type-size-display-sm: 1.42rem;
    --op-type-size-display: 1.62rem;
    --op-type-size-page: clamp(1.35rem, 1.2rem + .5vw, 1.72rem);
    --op-type-size-page-lg: clamp(1.35rem, 1.2rem + .7vw, 2rem);
    --op-type-size-metric: 2rem;
    --op-type-size-metric-sm: 1.08rem;
    --op-type-size-metric-md: 1.2rem;
    --op-type-size-metric-lg: 2.35rem;
    --op-type-size-metric-xl: 2.65rem;

    --op-type-weight-medium: 500;
    --op-type-weight-body: 600;
    --op-type-weight-body-strong: 650;
    --op-type-weight-strong: 700;
    --op-type-weight-label: 800;
    --op-type-weight-heading: 850;

    --op-heading-strong: #0f172a;

    --op-line-tight: 1.12;
    --op-line-title: 1.2;
    --op-line-heading: 1.16;
    --op-line-compact: 1.25;
    --op-line-body: 1.45;
    --op-line-body-relaxed: 1.5;
    --op-line-body-loose: 1.62;
    --op-letter-kicker: .04em;

    --op-space-2xs: .22rem;
    --op-space-xs: .34rem;
    --op-space-sm: .55rem;
    --op-space-md: .75rem;
    --op-space-lg: 1rem;
    --op-space-xl: 1.35rem;
    --op-space-2xl: 2rem;

    --op-radius-control: 8px;
    --op-radius-pill: 999px;
    --op-radius-panel: 8px;

    --op-icon-box-xs: 28px;
    --op-icon-box-sm: 32px;
    --op-icon-box-md: 34px;
    --op-icon-box-lg: 38px;
    --op-icon-box-xl: 42px;
    --op-icon-box-empty: 54px;
    --op-control-height-sm: 36px;
    --op-control-height-md: 38px;
    --op-control-height-lg: 40px;
    --op-field-height: var(--op-icon-box-xl);
    --op-preview-fade-height: var(--op-control-height-md);

    --op-feature-card-bg: rgba(255, 255, 255, .96);
    --op-feature-card-border: rgba(47, 43, 61, .10);
    --op-feature-divider: rgba(47, 43, 61, .08);
    --op-feature-control-bg: #f8fbff;
    --op-feature-control-disabled-bg: #f1f5f9;
    --op-feature-shadow: 0 4px 14px rgba(47, 43, 61, .08);
    --op-feature-hover-shadow: 0 8px 18px rgba(47, 43, 61, .09);

}

.op-feature-panel-header {
    align-items: center;
    border-bottom: 1px solid var(--op-feature-divider);
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    padding: 1rem;
}

.op-feature-panel-heading {
    align-items: center;
    display: flex;
    gap: 0.78rem;
    min-width: 0;
}

.op-feature-panel-icon {
    align-items: center;
    background: var(--op-dashboard-primary-soft, #e7f1ff);
    border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.15);
    border-radius: var(--op-radius-control);
    color: var(--op-dashboard-primary-text, #0d6efd);
    display: inline-flex;
    flex: 0 0 auto;
    height: var(--op-icon-box-lg);
    justify-content: center;
    width: var(--op-icon-box-lg);
}

.op-feature-panel-title {
    color: var(--op-heading-strong, #0f172a);
    font-family: var(--op-font-family-sans);
    font-size: var(--op-type-size-title);
    font-weight: var(--op-type-weight-label);
    line-height: var(--op-line-heading);
    margin: 0;
}

.op-feature-panel-subtitle {
    color: var(--op-text-muted);
    display: block;
    font-family: var(--op-font-family-sans);
    font-size: var(--op-type-size-caption);
    font-weight: 400;
    line-height: var(--op-line-body-relaxed);
    margin: 0.12rem 0 0;
}

.op-feature-empty-panel {
    align-items: center;
    background: var(--op-feature-card-bg);
    border: 1px solid var(--op-feature-card-border);
    border-radius: var(--op-radius-control);
    box-shadow: var(--op-feature-shadow);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 330px;
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.op-feature-empty-icon {
    align-items: center;
    background: var(--op-dashboard-primary-soft, #e7f1ff);
    border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.15);
    border-radius: 12px;
    color: var(--op-dashboard-primary-text, #0d6efd);
    display: inline-flex;
    font-size: var(--op-type-size-title-lg);
    height: var(--op-icon-box-empty);
    justify-content: center;
    width: var(--op-icon-box-empty);
}

.op-feature-empty-kicker {
    color: var(--op-dashboard-primary-text, #0d6efd);
    display: block;
    font-size: var(--op-type-size-eyebrow);
    font-weight: var(--op-type-weight-label);
    letter-spacing: 0.04em;
    margin-top: 0.92rem;
    text-transform: uppercase;
}

.op-feature-empty-title {
    color: var(--op-text-strong);
    font-size: var(--op-type-size-title-lg);
    font-weight: var(--op-type-weight-label);
    line-height: var(--op-line-compact);
    margin: 0.28rem 0 0;
}

.op-feature-empty-copy {
    color: var(--op-text-body);
    font-size: var(--op-type-size-body);
    font-weight: var(--op-type-weight-body);
    line-height: var(--op-line-body-relaxed);
    margin: 0.44rem 0 0;
    max-width: 560px;
}

.op-feature-panel-empty {
    align-items: center;
    color: var(--op-text-muted);
    display: flex;
    flex-direction: column;
    gap: .58rem;
    justify-content: center;
    min-height: 190px;
    padding: 1.5rem;
    text-align: center;
}

.op-feature-panel-empty-icon {
    align-items: center;
    background: var(--op-dashboard-primary-soft, #e7f1ff);
    border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.15);
    border-radius: var(--op-radius-control);
    color: var(--op-dashboard-primary-text, #0d6efd);
    display: inline-flex;
    height: var(--op-icon-box-xl);
    justify-content: center;
    width: var(--op-icon-box-xl);
}

.op-feature-panel-empty-icon i {
    color: inherit;
    font-size: var(--op-type-size-body);
}

.op-feature-panel-empty strong {
    color: var(--op-text-strong);
    font-size: var(--op-type-size-title);
    font-weight: var(--op-type-weight-strong);
}

.op-feature-panel-empty span:not(.op-feature-panel-empty-icon) {
    color: var(--op-text-muted);
    font-size: var(--op-type-size-body);
    font-weight: 400;
    line-height: var(--op-line-body-relaxed);
}

.op-hotel-hero {
    align-items: center;
    background: var(--op-feature-card-bg);
    border: 1px solid var(--op-feature-card-border);
    border-radius: var(--op-radius-control);
    box-shadow: var(--op-feature-shadow);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1.1rem;
}

.op-hotel-hero-copy {
    min-width: 0;
}

.op-hotel-hero-title {
    color: var(--op-heading-strong, #0f172a);
    font-family: var(--op-font-family-sans);
    font-size: var(--op-type-size-page);
    font-weight: var(--op-type-weight-label);
    line-height: var(--op-line-heading);
    margin: 0;
}

.op-hotel-hero-subtitle {
    color: var(--op-text-muted);
    font-family: var(--op-font-family-sans);
    font-size: var(--op-type-size-body);
    font-weight: 400;
    line-height: var(--op-line-body-relaxed);
    margin: .28rem 0 0;
}

.op-hotel-primary-action {
    align-items: center;
    background: var(--op-dashboard-primary, #0d6efd);
    border: 1px solid var(--op-dashboard-primary, #0d6efd);
    border-radius: var(--op-radius-control);
    box-shadow: 0 8px 18px rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .20);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-family: var(--op-font-family-sans);
    font-size: var(--op-type-size-body);
    font-weight: var(--op-type-weight-label);
    gap: .42rem;
    justify-content: center;
    line-height: 1;
    min-height: var(--op-control-height-lg);
    padding: .62rem .82rem;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    white-space: nowrap;
}

.op-hotel-primary-action:hover:not(:disabled) {
    background: var(--op-dashboard-primary-hover, #0b5ed7);
    border-color: var(--op-dashboard-primary-hover, #0b5ed7);
    box-shadow: 0 10px 22px rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .24);
    color: #fff;
    transform: translateY(-1px);
}

.op-hotel-primary-action i {
    font-size: var(--op-type-size-title);
    line-height: 1;
}

.op-explorer-highlight {
    align-items: center;
    border: 1px solid;
    border-left-width: 3px;
    border-radius: var(--op-radius-control);
    display: grid;
    gap: 0.78rem;
    grid-template-columns: auto minmax(0, 1fr);
    margin-top: 0.92rem;
    padding: 0.86rem;
}

.op-explorer-highlight--positive {
    background: rgba(232, 245, 233, 0.58);
    border-color: rgba(16, 185, 129, 0.24);
}

.op-explorer-highlight--negative {
    background: rgba(255, 235, 238, 0.62);
    border-color: rgba(239, 68, 68, 0.24);
}

.op-explorer-highlight--warning {
    background: rgba(255, 247, 237, 0.72);
    border-color: rgba(245, 158, 11, 0.26);
}

.op-explorer-highlight-icon {
    align-items: center;
    border-radius: var(--op-radius-control);
    display: inline-flex;
    height: 31px;
    justify-content: center;
    width: 31px;
}

.op-explorer-highlight--positive .op-explorer-highlight-icon {
    background: var(--op-health-good-soft, #e8f5e9);
    color: var(--op-health-good-text, #065f46);
}

.op-explorer-highlight--negative .op-explorer-highlight-icon {
    background: var(--op-health-bad-soft, #ffebee);
    color: var(--op-health-bad-text, #991b1b);
}

.op-explorer-highlight--warning .op-explorer-highlight-icon {
    background: var(--op-health-warning-soft, #fff7ed);
    color: var(--op-health-warning-text, #92400e);
}

.op-explorer-highlight-label {
    color: var(--op-text-muted);
    display: block;
    font-size: var(--op-type-size-label);
    font-weight: var(--op-type-weight-body-strong);
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.op-explorer-highlight-text {
    color: var(--op-text-body);
    display: block;
    font-size: var(--op-type-size-body-lg);
    font-weight: 500;
    line-height: var(--op-line-body-loose);
    margin-top: 0.18rem;
    max-width: 76rem;
}

@media (max-width: 575.98px) {
    .op-hotel-hero {
        align-items: stretch;
        flex-direction: column;
        padding: 1rem;
    }

    .op-hotel-primary-action {
        width: 100%;
    }
}

.op-feature-page-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0 auto;
    padding: 1.5rem 0 3rem;
    width: 100%;
}

@media (max-width: 767.98px) {
    .op-feature-page-stack {
        gap: .75rem;
        padding: .75rem 0 2rem;
    }
}

/* Migrated from AtlasPMS.Web/Opinario/Features/Tasks/Components/TasksContent.razor.css */
.op-tasks {
    min-height: 100%;
}

.op-tasks .op-tasks-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 2rem;
    padding-top: 1rem;
}

.op-tasks .op-tasks-hero-panel,
.op-tasks .op-tasks-panel,
.op-tasks .op-tasks-kpi {
    background: var(--op-feature-card-bg);
    border: 1px solid var(--op-feature-card-border);
    border-radius: var(--op-radius-control);
    box-shadow: var(--op-feature-shadow);
}

.op-tasks .op-tasks-hero-panel {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1.1rem;
}

.op-tasks .op-tasks-hero-heading,
.op-tasks .op-tasks-kpi-header,
.op-tasks .op-task-card-main,
.op-tasks .op-task-title-line,
.op-tasks .op-task-card-meta,
.op-tasks .op-task-card-actions {
    align-items: center;
    display: flex;
}

.op-tasks .op-tasks-hero-heading {
    gap: .78rem;
    min-width: 0;
}

.op-tasks .op-tasks-hero-icon,
.op-tasks .op-tasks-kpi-icon,
.op-tasks .op-task-leading,
.op-tasks .op-tasks-modal-state-icon {
    align-items: center;
    background: var(--op-dashboard-primary-soft, #e7f1ff);
    border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .15);
    border-radius: var(--op-radius-control);
    color: var(--op-dashboard-primary-text, #0d6efd);
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
}

.op-tasks .op-tasks-hero-icon {
    height: var(--op-icon-box-lg);
    width: var(--op-icon-box-lg);
}

.op-tasks .op-tasks-kicker {
    color: var(--op-dashboard-primary-text, #0d6efd);
    display: block;
    font-size: var(--op-type-size-eyebrow);
    font-weight: var(--op-type-weight-label);
    letter-spacing: var(--op-letter-kicker);
    text-transform: uppercase;
}

.op-tasks .op-tasks-title {
    color: var(--op-text-strong, #172033);
    font-size: clamp(1.35rem, 1.2rem + .5vw, 1.72rem);
    font-weight: var(--op-type-weight-label);
    line-height: var(--op-line-heading);
    margin: .24rem 0 0;
}

.op-tasks .op-tasks-copy {
    color: var(--op-text-muted, #64748b);
    font-weight: var(--op-type-weight-body);
    line-height: var(--op-line-body);
    margin: .34rem 0 0;
}

.op-tasks .op-tasks-copy {
    font-size: var(--op-type-size-body);
}

.op-tasks .op-tasks-primary-action,
.op-tasks .op-tasks-secondary-action,
.op-tasks .op-tasks-danger-action,
.op-tasks .op-tasks-success-action,
.op-tasks .op-task-action-button {
    align-items: center;
    border-radius: var(--op-radius-control);
    display: inline-flex;
    font-size: var(--op-type-size-caption);
    font-weight: var(--op-type-weight-label);
    gap: .42rem;
    justify-content: center;
    min-height: var(--op-control-height-md);
    padding: .52rem .68rem;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
    white-space: nowrap;
}

.op-tasks .op-tasks-primary-action {
    background: var(--op-dashboard-primary, #0d6efd);
    border: 1px solid var(--op-dashboard-primary, #0d6efd);
    color: #fff;
}

.op-tasks .op-tasks-primary-action:hover:not(:disabled) {
    background: var(--op-dashboard-primary-hover, #0b5ed7);
    border-color: var(--op-dashboard-primary-hover, #0b5ed7);
    color: #fff;
    transform: translateY(-1px);
}

.op-tasks .op-tasks-hero-action {
    box-shadow: 0 8px 18px rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .20);
    flex: 0 0 auto;
    min-height: var(--op-control-height-lg);
    padding: .62rem .78rem;
}

.op-tasks .op-tasks-secondary-action,
.op-tasks .op-task-action-button {
    background: #fff;
    border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .22);
    color: var(--op-dashboard-primary-text, #0d6efd);
}

.op-tasks .op-tasks-secondary-action:hover:not(:disabled),
.op-tasks .op-task-action-button:hover:not(:disabled) {
    background: var(--op-dashboard-primary-soft, #e7f1ff);
    border-color: rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .38);
    color: var(--op-dashboard-primary-text, #0d6efd);
    transform: translateY(-1px);
}

.op-tasks .op-tasks-danger-action,
.op-tasks .op-task-action-button--danger {
    background: #fff;
    border-color: rgba(239, 68, 68, .24);
    color: #dc2626;
}

.op-tasks .op-tasks-danger-action:hover:not(:disabled),
.op-tasks .op-task-action-button--danger:hover:not(:disabled) {
    background: #fff7f7;
    border-color: #fecaca;
    color: #b91c1c;
}

.op-tasks .op-tasks-success-action {
    background: #ecfdf3;
    border: 1px solid rgba(16, 185, 129, .24);
    color: #067647;
}

.op-tasks button:disabled {
    cursor: not-allowed;
    opacity: .48;
}

.op-tasks .op-tasks-kpis {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.op-tasks .op-tasks-kpi {
    display: flex;
    flex-direction: column;
    min-height: 156px;
    padding: .94rem;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.op-tasks .op-tasks-kpi:hover {
    border-color: rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .28);
    box-shadow: var(--op-feature-hover-shadow);
    transform: translateY(-1px);
}

.op-tasks .op-tasks-kpi-header {
    gap: .5rem;
    margin-bottom: .85rem;
}

.op-tasks .op-tasks-kpi-icon {
    height: var(--op-icon-box-sm);
    width: var(--op-icon-box-sm);
}

.op-tasks .op-tasks-kpi--open .op-tasks-kpi-icon {
    background: var(--op-health-info-soft, #eff6ff);
    color: var(--op-health-info-text, #1e3a8a);
}

.op-tasks .op-tasks-kpi--progress .op-tasks-kpi-icon {
    background: var(--op-health-warning-soft, #fff7ed);
    color: var(--op-health-warning-text, #92400e);
}

.op-tasks .op-tasks-kpi--closed .op-tasks-kpi-icon {
    background: var(--op-health-good-soft, #e8f5e9);
    color: var(--op-health-good-text, #065f46);
}

.op-tasks .op-tasks-kpi-note {
    color: var(--op-text-muted, #64748b);
    font-size: var(--op-type-size-label);
    font-weight: var(--op-type-weight-label);
}

.op-tasks .op-tasks-kpi-value {
    color: var(--op-text-strong, #172033);
    font-size: var(--op-type-size-metric);
    font-weight: var(--op-type-weight-label);
    line-height: 1;
}

.op-tasks .op-tasks-kpi-label {
    color: var(--op-text-muted, #64748b);
    font-size: var(--op-type-size-label);
    font-weight: var(--op-type-weight-body);
    line-height: var(--op-line-body);
    margin-bottom: .78rem;
    margin-top: .42rem;
}

.op-tasks .op-tasks-kpi-trend {
    align-items: center;
    border-top: 1px solid var(--op-feature-divider);
    color: var(--op-text-muted, #64748b);
    display: flex;
    font-size: var(--op-type-size-label);
    font-weight: var(--op-type-weight-label);
    gap: .42rem;
    margin-top: auto;
    padding-top: .78rem;
}

.op-tasks .op-tasks-panel-header {
    align-items: center;
    border-bottom: 1px solid var(--op-feature-divider);
    display: flex;
    gap: .9rem;
    justify-content: space-between;
    padding: 1rem;
}

.op-tasks .op-tasks-count {
    background: var(--op-dashboard-primary-soft, #e7f1ff);
    border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .15);
    border-radius: var(--op-radius-pill);
    color: var(--op-dashboard-primary-text, #0d6efd);
    flex: 0 0 auto;
    font-size: var(--op-type-size-eyebrow);
    font-weight: var(--op-type-weight-label);
    padding: .3rem .58rem;
}

.op-tasks .op-tasks-filter-grid {
    display: grid;
    gap: .68rem;
    grid-template-columns: repeat(3, minmax(170px, 1fr));
    padding: 1rem;
}

.op-tasks .op-tasks-field {
    color: var(--op-text-strong, #172033);
    display: block;
    min-width: 0;
}

.op-tasks .op-tasks-control {
    width: 100%;
}

.op-tasks .op-tasks-filter-footer {
    align-items: center;
    border-top: 1px solid var(--op-feature-divider);
    display: flex;
    justify-content: flex-end;
    padding: .68rem 1rem;
}

.op-tasks .op-tasks-list {
    display: grid;
    gap: .62rem;
    padding: 1rem;
}

.op-tasks .op-task-card {
    background: #fff;
    border: 1px solid rgba(47, 43, 61, .09);
    border-radius: var(--op-radius-control);
    display: grid;
    gap: .85rem;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: .85rem;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.op-tasks .op-task-card:hover {
    border-color: rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .26);
    box-shadow: 0 7px 16px rgba(47, 43, 61, .08);
    transform: translateY(-1px);
}

.op-tasks .op-task-card-main {
    gap: .72rem;
    min-width: 0;
}

.op-tasks .op-task-leading {
    height: var(--op-icon-box-lg);
    width: var(--op-icon-box-lg);
}

.op-tasks .op-tasks__state-completed,
.op-tasks .op-tasks__health-good {
    background: var(--op-health-good-soft, #e8f5e9);
    color: var(--op-health-good-text, #065f46);
}

.op-tasks .op-tasks__state-failed,
.op-tasks .op-tasks__health-bad {
    background: var(--op-health-bad-soft, #ffebee);
    color: var(--op-health-bad-text, #991b1b);
}

.op-tasks .op-tasks__health-warning {
    background: var(--op-health-warning-soft, #fff7ed);
    color: var(--op-health-warning-text, #92400e);
}

.op-tasks .op-task-card-content {
    min-width: 0;
}

.op-tasks .op-task-title-line {
    flex-wrap: wrap;
    gap: .42rem;
}

.op-tasks .op-task-title {
    color: var(--op-text-strong, #172033);
    font-size: var(--op-type-size-title-sm);
    font-weight: var(--op-type-weight-label);
    overflow-wrap: anywhere;
}

.op-tasks .op-task-summary {
    color: var(--op-text-muted, #64748b);
    font-size: var(--op-type-size-body);
    line-height: var(--op-line-body);
    margin: .22rem 0 0;
}

.op-tasks .op-task-card-actions {
    flex-wrap: wrap;
    gap: .42rem;
    justify-content: flex-end;
}

.op-tasks .op-task-card-meta {
    flex-wrap: wrap;
    gap: .46rem .76rem;
    grid-column: 1 / -1;
}

.op-tasks .op-task-card-meta span {
    align-items: center;
    color: var(--op-text-muted, #64748b);
    display: inline-flex;
    font-size: var(--op-type-size-meta);
    font-weight: var(--op-type-weight-body-strong);
    gap: .32rem;
    white-space: nowrap;
}

.op-tasks .op-task-card-meta i {
    color: var(--op-text-muted, #64748b);
}

.op-tasks .op-task-meta-danger,
.op-tasks .op-task-meta-danger i {
    color: var(--op-health-bad-text, #991b1b) !important;
}

.op-tasks .op-tasks__status-badge,
.op-tasks .op-tasks__ai-badge {
    border-radius: var(--op-radius-pill);
    display: inline-flex;
    font-size: var(--op-type-size-label);
    font-weight: var(--op-type-weight-label);
    padding: .22rem .48rem;
}

.op-tasks .op-tasks__ai-badge {
    align-items: center;
    background: var(--op-dashboard-primary-soft, #e7f1ff);
    color: var(--op-dashboard-primary-text, #0d6efd);
    height: 1.45rem;
    justify-content: center;
    padding: 0;
    width: 1.45rem;
}

.op-tasks .op-tasks__status-open,
.op-tasks .op-tasks__status-muted {
    background: var(--op-dashboard-primary-soft, #e7f1ff);
    color: var(--op-dashboard-primary-text, #0d6efd);
}

.op-tasks .op-tasks__status-progress {
    background: var(--op-health-warning-soft, #fff7ed);
    color: var(--op-health-warning-text, #92400e);
}

.op-tasks .op-tasks__status-completed {
    background: var(--op-health-good-soft, #e8f5e9);
    color: var(--op-health-good-text, #065f46);
}

.op-tasks .op-tasks__status-failed {
    background: var(--op-health-bad-soft, #ffebee);
    color: var(--op-health-bad-text, #991b1b);
}

.op-tasks .op-tasks-modal-state {
    align-items: center;
    background: var(--op-feature-control-bg);
    border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .10);
    border-radius: var(--op-radius-control);
    color: var(--op-text-muted, #64748b);
    display: flex;
    flex-direction: column;
    gap: .54rem;
    justify-content: center;
    min-height: 230px;
    padding: 1.5rem;
    text-align: center;
}

.op-tasks .op-tasks-modal-state {
    min-height: 16rem;
}

.op-tasks .op-tasks-modal-state-icon {
    height: var(--op-icon-box-xl);
    width: var(--op-icon-box-xl);
}

.op-tasks .op-tasks-modal-state strong {
    color: var(--op-text-strong, #172033);
    font-size: var(--op-type-size-title);
}

.op-tasks .op-tasks-textarea {
    min-height: 7.5rem;
    resize: vertical;
}

.op-tasks .op-tasks-validation {
    color: var(--op-health-bad-text, #991b1b);
    display: block;
    font-size: var(--op-type-size-label);
    font-weight: var(--op-type-weight-strong);
    min-height: 1rem;
}

.op-tasks .op-tasks-form,
.op-tasks .op-task-detail-modal,
.op-tasks .op-task-history-modal {
    display: grid;
    gap: 1rem;
}

.op-tasks .op-tasks-form-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

.op-tasks .op-tasks-ai-picker,
.op-tasks .op-task-detail-card,
.op-tasks .op-task-history-card,
.op-tasks .op-task-detail-message {
    background: #fff;
    border: 1px solid var(--op-feature-card-border);
    border-radius: var(--op-radius-control);
    padding: .9rem;
}

.op-tasks .op-tasks-ai-picker {
    display: grid;
    gap: .85rem;
}

.op-tasks .op-tasks-ai-picker-head {
    align-items: center;
    display: flex;
    gap: .85rem;
}

.op-tasks .op-tasks-icon {
    align-items: center;
    background: var(--op-dashboard-primary-soft, #e7f1ff);
    border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .14);
    border-radius: var(--op-radius-control);
    color: var(--op-dashboard-primary-text, #0d6efd);
    display: inline-flex;
    height: var(--op-icon-box-lg);
    justify-content: center;
    width: var(--op-icon-box-lg);
}

.op-tasks .op-tasks-ai-picker-head strong,
.op-tasks .op-task-detail-title h3,
.op-tasks .op-task-history-heading strong,
.op-tasks .op-tasks-timeline-headline strong {
    color: var(--op-text-strong, #172033);
    font-weight: var(--op-type-weight-label);
}

.op-tasks .op-tasks-ai-picker-head div > span,
.op-tasks .op-task-detail-title p,
.op-tasks .op-task-history-heading span {
    color: var(--op-text-muted, #64748b);
    display: block;
    font-size: var(--op-type-size-body);
    font-weight: var(--op-type-weight-body);
    line-height: var(--op-line-body-relaxed);
}

.op-tasks .op-tasks-ai-options {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.op-tasks .op-tasks-ai-option {
    align-items: center;
    background: #fff;
    border: 1px solid var(--op-feature-card-border);
    border-radius: var(--op-radius-control);
    color: var(--op-text-muted, #64748b);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--op-type-size-body-sm);
    font-weight: var(--op-type-weight-label);
    gap: .45rem;
    min-height: 2.4rem;
    padding: .45rem .7rem;
}

.op-tasks .op-tasks-ai-option input {
    opacity: 0;
    position: absolute;
}

.op-tasks .op-tasks-ai-check {
    align-items: center;
    background: var(--op-feature-control-disabled-bg);
    border-radius: var(--op-radius-pill);
    color: transparent;
    display: inline-flex;
    font-size: var(--op-type-size-micro);
    height: 18px;
    justify-content: center;
    width: 18px;
}

.op-tasks .op-tasks-ai-option--active {
    border-color: rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .24);
    color: var(--op-dashboard-primary-text, #0d6efd);
}

.op-tasks .op-tasks-ai-option--active .op-tasks-ai-check {
    background: var(--op-dashboard-primary, #0d6efd);
    color: #fff;
}

.op-tasks .op-task-detail-title h3 {
    font-size: var(--op-type-size-title-md);
    line-height: var(--op-line-heading);
    margin: .48rem 0 .3rem;
}

.op-tasks .op-task-detail-facts {
    border-top: 1px solid rgba(47, 43, 61, .10);
    display: grid;
    gap: .68rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1rem;
    padding-top: 1rem;
}

.op-tasks .op-task-detail-facts div {
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: var(--op-radius-control);
    padding: .72rem;
}

.op-tasks .op-task-detail-facts span,
.op-tasks .op-tasks-timeline-headline span {
    color: var(--op-text-muted, #64748b);
    display: block;
    font-size: var(--op-type-size-eyebrow);
    font-weight: var(--op-type-weight-label);
    text-transform: uppercase;
}

.op-tasks .op-task-detail-facts strong {
    color: var(--op-text-strong, #172033);
    display: block;
    font-size: var(--op-type-size-body);
    margin-top: .24rem;
}

.op-tasks .op-task-detail-message {
    align-items: flex-start;
    color: var(--op-text-muted, #64748b);
    display: flex;
    font-size: var(--op-type-size-body);
    font-weight: var(--op-type-weight-body-strong);
    gap: .62rem;
    line-height: var(--op-line-body-relaxed);
}

.op-tasks .op-task-detail-message i {
    color: var(--op-dashboard-primary-text, #0d6efd);
    margin-top: .2rem;
}

.op-tasks .op-tasks-complete-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.op-tasks .op-tasks-log-composer {
    display: grid;
    gap: .68rem;
    grid-template-columns: minmax(0, 1fr) 12rem auto;
}

.op-tasks .op-tasks-timeline-headline {
    align-items: center;
    border-bottom: 1px solid rgba(47, 43, 61, .10);
    display: flex;
    justify-content: space-between;
    margin: -.1rem 0 .85rem;
    padding-bottom: .75rem;
}

.op-tasks .op-tasks-timeline {
    display: grid;
    gap: .85rem;
}

.op-tasks .op-tasks-timeline-item {
    display: grid;
    gap: .62rem;
    grid-template-columns: var(--op-icon-box-sm) minmax(0, 1fr);
    position: relative;
}

.op-tasks .op-tasks-timeline-item:not(:last-child)::before {
    background: rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .14);
    bottom: -1rem;
    content: "";
    left: 15px;
    position: absolute;
    top: 2.45rem;
    width: 2px;
}

.op-tasks .op-tasks-timeline-marker {
    align-items: center;
    background: #fff;
    border: 1px solid currentColor;
    border-radius: var(--op-radius-pill);
    display: inline-flex;
    height: var(--op-icon-box-sm);
    justify-content: center;
    margin-top: .55rem;
    position: relative;
    width: var(--op-icon-box-sm);
    z-index: 1;
}

.op-tasks .op-tasks-timeline-card {
    background: #fff;
    border: 1px solid rgba(47, 43, 61, .09);
    border-radius: var(--op-radius-control);
    padding: .82rem;
}

.op-tasks .op-tasks-timeline-card-head {
    align-items: center;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    margin-bottom: .45rem;
}

.op-tasks .op-tasks-timeline-card-head div {
    align-items: center;
    display: flex;
    gap: .45rem;
    min-width: 0;
}

.op-tasks .op-tasks-timeline-card-head strong {
    color: var(--op-text-strong, #172033);
    font-size: var(--op-type-size-control);
}

.op-tasks .op-tasks-timeline-card-head time {
    color: var(--op-text-muted, #64748b);
    flex: 0 0 auto;
    font-size: var(--op-type-size-caption);
    font-weight: var(--op-type-weight-strong);
}

.op-tasks .op-tasks-timeline-card p {
    color: var(--op-text-muted, #64748b);
    font-size: var(--op-type-size-control);
    line-height: var(--op-line-body-relaxed);
    margin: 0;
}

.op-tasks .op-tasks__actor-chip {
    align-items: center;
    background: var(--op-dashboard-primary-soft, #e7f1ff);
    border-radius: var(--op-radius-pill);
    color: var(--op-dashboard-primary-text, #0d6efd);
    display: inline-flex;
    font-size: var(--op-type-size-micro);
    height: 1.3rem;
    justify-content: center;
    width: 1.3rem;
}

@media (max-width: 991.98px) {
    .op-tasks .op-tasks-kpis,
.op-tasks .op-tasks-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .op-tasks .op-task-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .op-tasks .op-task-card-actions {
        justify-content: flex-start;
    }

    .op-tasks .op-tasks-log-composer {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .op-tasks .op-tasks-page {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }

    .op-tasks .op-tasks-hero-panel,
.op-tasks .op-tasks-panel-header {
        align-items: stretch;
        flex-direction: column;
    }

    .op-tasks .op-tasks-hero-action {
        justify-content: center;
    }

    .op-tasks .op-tasks-kpis,
.op-tasks .op-tasks-filter-grid,
.op-tasks .op-task-detail-facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .op-tasks .op-task-action-button {
        flex: 1 1 calc(50% - .3rem);
    }

    .op-tasks .op-tasks-complete-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .op-tasks .op-tasks-timeline-card-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Migrated from AtlasPMS.Web/Opinario/Features/Audit/Components/FormAuditContentEmpty.razor.css */
.op-audit-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 2rem;
}

.op-audit-hero {
    align-items: center;
    background: var(--op-feature-card-bg);
    border: 1px solid var(--op-feature-card-border);
    border-radius: var(--op-radius-control);
    box-shadow: var(--op-feature-shadow);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    min-height: 128px;
    padding: 1.35rem;
}

.op-audit-heading {
    align-items: center;
    display: flex;
    gap: .75rem;
    min-width: 0;
}

.op-audit-heading-icon {
    align-items: center;
    background: var(--op-dashboard-primary-soft, #e7f1ff);
    border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .15);
    border-radius: var(--op-radius-control);
    color: var(--op-dashboard-primary-text, #0d6efd);
    display: inline-flex;
    flex: 0 0 auto;
    height: var(--op-icon-box-xl);
    justify-content: center;
    width: var(--op-icon-box-xl);
}

.op-audit-kicker {
    color: var(--op-dashboard-primary-text, #0d6efd);
    display: block;
    font-size: var(--op-type-size-label);
    font-weight: var(--op-type-weight-heading);
    letter-spacing: .045em;
    margin-bottom: .18rem;
    text-transform: uppercase;
}

.op-audit-hero h1 {
    color: var(--op-text-strong, #172033);
    font-size: var(--op-type-size-page);
    font-weight: var(--op-type-weight-heading);
    line-height: var(--op-line-tight);
    margin: 0;
}

.op-audit-hero p {
    color: var(--op-text-muted, #64748b);
    font-size: var(--op-type-size-body);
    font-weight: var(--op-type-weight-body-strong);
    line-height: var(--op-line-body);
    margin: .22rem 0 0;
}

.op-audit-primary-action {
    align-items: center;
    background: linear-gradient(135deg, var(--op-dashboard-primary, #0d6efd), #2563eb);
    border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .35);
    border-radius: var(--op-radius-control);
    box-shadow: 0 8px 18px rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .18);
    color: #fff;
    display: inline-flex;
    font-size: var(--op-type-size-caption);
    font-weight: var(--op-type-weight-heading);
    gap: .45rem;
    justify-content: center;
    min-height: var(--op-control-height-lg);
    padding: .62rem .86rem;
    white-space: nowrap;
}

.op-audit-primary-action:disabled {
    cursor: not-allowed;
    opacity: .58;
}

@media (max-width: 767.98px) {
    .op-audit-shell {
        gap: .75rem;
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }

    .op-audit-hero {
        align-items: stretch;
        flex-direction: column;
        padding: .85rem;
    }

    .op-audit-hero h1 {
        font-size: var(--op-type-size-display-sm);
    }

    .op-audit-primary-action {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .op-audit-shell {
        padding-left: .5rem !important;
        padding-right: .5rem !important;
    }
}

/* Migrated from AtlasPMS.Web/Opinario/Features/Audit/Components/FormAuditContent.razor.css */
.op-audit-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 2rem;
}

.op-audit-hero,
.op-audit-panel,
.op-audit-status-panel,
.op-audit-cluster-card {
    background: var(--op-feature-card-bg);
    border: 1px solid var(--op-feature-card-border);
    border-radius: var(--op-radius-control);
    box-shadow: var(--op-feature-shadow);
}

.op-audit-hero {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    min-height: 128px;
    padding: 1.35rem;
}

.op-audit-heading,
.op-audit-status-heading,
.op-audit-panel-heading {
    align-items: center;
    display: flex;
    gap: .75rem;
    min-width: 0;
}

.op-audit-heading-icon,
.op-audit-panel-icon,
.op-audit-empty-icon,
.op-audit-loading-icon {
    align-items: center;
    background: var(--op-dashboard-primary-soft, #e7f1ff);
    border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .15);
    border-radius: var(--op-radius-control);
    color: var(--op-dashboard-primary-text, #0d6efd);
    display: inline-flex;
    flex: 0 0 auto;
    height: var(--op-icon-box-xl);
    justify-content: center;
    width: var(--op-icon-box-xl);
}

.op-audit-kicker {
    color: var(--op-dashboard-primary-text, #0d6efd);
    display: block;
    font-size: var(--op-type-size-label);
    font-weight: var(--op-type-weight-heading);
    letter-spacing: .045em;
    margin-bottom: .18rem;
    text-transform: uppercase;
}

.op-audit-hero h1,
.op-audit-status-panel h2,
.op-audit-panel-heading h2 {
    color: var(--op-text-strong, #172033);
    font-size: var(--op-type-size-page);
    font-weight: var(--op-type-weight-heading);
    line-height: var(--op-line-tight);
    margin: 0;
}

.op-audit-hero p,
.op-audit-status-panel p {
    color: var(--op-text-muted, #64748b);
    font-size: var(--op-type-size-body);
    font-weight: var(--op-type-weight-body-strong);
    line-height: var(--op-line-body);
    margin: .22rem 0 0;
}

.op-audit-actions {
    flex: 0 0 auto;
}

.op-audit-primary-action,
.op-audit-secondary-action {
    align-items: center;
    border-radius: var(--op-radius-control);
    display: inline-flex;
    font-size: var(--op-type-size-caption);
    font-weight: var(--op-type-weight-heading);
    gap: .45rem;
    justify-content: center;
    min-height: var(--op-control-height-lg);
    padding: .62rem .86rem;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
    white-space: nowrap;
}

.op-audit-primary-action {
    background: linear-gradient(135deg, var(--op-dashboard-primary, #0d6efd), #2563eb);
    border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .35);
    box-shadow: 0 8px 18px rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .18);
    color: #fff;
}

.op-audit-secondary-action {
    background: #fff;
    border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .22);
    color: var(--op-dashboard-primary-text, #0d6efd);
}

.op-audit-primary-action:hover:not(:disabled),
.op-audit-secondary-action:hover:not(:disabled) {
    transform: translateY(-1px);
}

.op-audit-primary-action:disabled {
    cursor: not-allowed;
    opacity: .58;
    transform: none;
}

.op-audit-loading,
.op-audit-empty {
    align-items: center;
    color: var(--op-text-muted, #64748b);
    display: flex;
    flex-direction: column;
    gap: .54rem;
    justify-content: center;
    min-height: 230px;
    padding: 1.5rem;
    text-align: center;
}

.op-audit-loading strong,
.op-audit-empty strong {
    color: var(--op-text-strong, #172033);
    font-size: var(--op-type-size-title);
}

.op-audit-status-panel {
    padding: 1rem;
}

.op-audit-status-heading {
    align-items: center;
}

.op-audit-status-heading > div {
    flex: 1 1 auto;
    min-width: 0;
}

.op-audit-status-panel h2 {
    font-size: var(--op-type-size-title);
    overflow-wrap: anywhere;
}

.op-audit-status-panel p {
    font-size: var(--op-type-size-meta);
    font-weight: var(--op-type-weight-strong);
}

.op-audit-status-icon {
    align-items: center;
    border-radius: var(--op-radius-control);
    display: inline-flex;
    flex: 0 0 auto;
    height: var(--op-icon-box-xl);
    justify-content: center;
    width: var(--op-icon-box-xl);
}

.op-audit-banner-clean {
    border-color: rgba(22, 163, 74, .22);
}

.op-audit-banner-clean .op-audit-status-icon {
    background: #ecfdf3;
    color: #15803d;
}

.op-audit-banner-suspicious {
    border-color: rgba(245, 158, 11, .28);
}

.op-audit-banner-suspicious .op-audit-status-icon {
    background: #fff7ed;
    color: #c2410c;
}

.op-audit-banner-highrisk {
    border-color: rgba(220, 38, 38, .26);
}

.op-audit-banner-highrisk .op-audit-status-icon {
    background: #fff5f5;
    color: #b91c1c;
}

.op-audit-panel {
    overflow: hidden;
}

.op-audit-panel-header {
    align-items: center;
    border-bottom: 1px solid var(--op-feature-divider);
    display: flex;
    gap: .9rem;
    justify-content: space-between;
    padding: 1rem;
}

.op-audit-panel-heading h2 {
    font-size: var(--op-type-size-title);
}

.op-audit-count {
    background: var(--op-dashboard-primary-soft, #e7f1ff);
    border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .15);
    border-radius: var(--op-radius-pill);
    color: var(--op-dashboard-primary-text, #0d6efd);
    flex: 0 0 auto;
    font-size: var(--op-type-size-eyebrow);
    font-weight: var(--op-type-weight-heading);
    padding: .3rem .58rem;
}

.op-audit-cluster-list {
    display: grid;
    gap: .85rem;
    padding: 1rem;
}

.op-audit-cluster-card {
    box-shadow: none;
    display: grid;
    gap: .85rem;
    padding: 1rem;
}

.op-audit-cluster-signature {
    display: grid;
    gap: .38rem;
}

.op-audit-cluster-signature span {
    color: #475569;
    font-size: var(--op-type-size-eyebrow);
    font-weight: var(--op-type-weight-heading);
    letter-spacing: var(--op-letter-kicker);
    text-transform: uppercase;
}

.op-audit-cluster-signature code,
.op-audit-table code {
    background: var(--op-feature-control-bg);
    border: 1px solid rgba(47, 43, 61, .08);
    border-radius: var(--op-radius-control);
    color: #334155;
    display: inline-block;
    font-size: var(--op-type-size-caption);
    padding: .48rem .58rem;
    word-break: break-all;
}

.op-audit-cluster-copy {
    color: var(--op-text-muted, #64748b);
    font-size: var(--op-type-size-body-sm);
    font-weight: var(--op-type-weight-body-strong);
    line-height: var(--op-line-body);
    margin: 0;
}

.op-audit-table-wrap {
    overflow-x: auto;
}

.op-audit-table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 560px;
    width: 100%;
}

.op-audit-table th,
.op-audit-table td {
    border-bottom: 1px solid var(--op-feature-divider);
    color: #334155;
    font-size: var(--op-type-size-body-sm);
    padding: .75rem;
    text-align: left;
}

.op-audit-table th {
    background: var(--op-feature-control-bg);
    color: #475569;
    font-size: var(--op-type-size-eyebrow);
    font-weight: var(--op-type-weight-heading);
    letter-spacing: var(--op-letter-kicker);
    text-transform: uppercase;
}

.op-audit-table tr:last-child td {
    border-bottom: 0;
}

@media (max-width: 767.98px) {
    .op-audit-shell {
        gap: .75rem;
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }

    .op-audit-hero,
.op-audit-panel-header {
        align-items: stretch;
        flex-direction: column;
    }

    .op-audit-status-heading {
        align-items: center;
        flex-direction: row;
    }

    .op-audit-hero {
        padding: .85rem;
    }

    .op-audit-hero h1 {
        font-size: var(--op-type-size-display-sm);
    }

    .op-audit-actions,
.op-audit-primary-action,
.op-audit-secondary-action {
        width: 100%;
    }

    .op-audit-cluster-list,
.op-audit-cluster-card,
.op-audit-panel-header,
.op-audit-status-panel {
        padding: .85rem;
    }
}

@media (max-width: 420px) {
    .op-audit-shell {
        padding-left: .5rem !important;
        padding-right: .5rem !important;
    }

    .op-audit-cluster-list,
.op-audit-cluster-card,
.op-audit-panel-header,
.op-audit-status-panel {
        padding: .65rem;
    }
}

/* Migrated from AtlasPMS.Web/Opinario/Features/FormEditor/Components/FormItemEditor.razor.css */
.form-item-card {
    background: #fff;
    border: 1px solid var(--op-feature-card-border);
    border-radius: var(--op-radius-control);
    overflow: hidden;
}

.form-item-card__header {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid var(--op-feature-divider);
    cursor: pointer;
    display: flex;
    gap: .62rem;
    padding: .8rem .9rem;
}

.form-item-card__handle {
    align-items: center;
    background: var(--op-feature-control-bg);
    border: 1px solid rgba(47, 43, 61, .08);
    border-radius: var(--op-radius-control);
    color: #94a3b8;
    cursor: grab;
    display: inline-flex;
    flex: 0 0 auto;
    height: var(--op-icon-box-sm);
    justify-content: center;
    width: var(--op-icon-box-sm);
}

.form-item-card__chevron {
    color: #94a3b8 !important;
}

.form-item-card__type {
    background: var(--op-dashboard-primary-soft, #e7f1ff);
    border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .15);
    border-radius: var(--op-radius-pill);
    color: var(--op-dashboard-primary-text, #0d6efd);
    flex: 0 0 auto;
    font-size: var(--op-type-size-label);
    font-weight: var(--op-type-weight-heading);
    max-width: 14rem;
    overflow: hidden;
    padding: .28rem .55rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.form-item-card__question {
    background: var(--op-feature-control-bg);
    border: 1px solid var(--op-feature-card-border);
    border-radius: var(--op-radius-control);
    box-shadow: none;
    color: var(--op-text-strong, #172033);
    font-size: var(--op-type-size-body);
    font-weight: var(--op-type-weight-body-strong);
    line-height: var(--op-line-body);
    min-height: var(--op-control-height-lg);
}

.form-item-card__question:focus {
    background: #fff;
    border-color: rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .48);
    box-shadow: 0 0 0 .2rem rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .12);
}

.form-item-card__delete {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(220, 38, 38, .20);
    border-radius: var(--op-radius-control);
    color: #b91c1c;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: var(--op-type-size-label);
    font-weight: var(--op-type-weight-heading);
    justify-content: center;
    min-height: var(--op-control-height-sm);
    padding: .5rem .62rem;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.form-item-card__delete:hover:not(:disabled) {
    background: #fff5f5;
    border-color: rgba(220, 38, 38, .34);
    transform: translateY(-1px);
}

.form-item-card__delete:disabled {
    cursor: not-allowed;
    opacity: .58;
    transform: none;
}

.form-item-card__body {
    background: #fff;
    padding: 1rem;
}

.form-item-card__body .btn-outline-primary,
.form-item-card__body .btn-outline-danger {
    border-radius: var(--op-radius-control);
    font-size: var(--op-type-size-label);
    font-weight: var(--op-type-weight-heading);
    min-height: var(--op-control-height-sm);
}

@media (max-width: 767.98px) {
    .form-item-card__header {
        align-items: center;
        display: grid;
        gap: .5rem;
        grid-template-columns: var(--op-icon-box-sm) 16px minmax(0, max-content) var(--op-icon-box-lg);
        padding: .65rem;
    }

    .form-item-card__type {
        justify-self: start;
        max-width: min(13rem, calc(100vw - 11rem));
    }

    .form-item-card__body {
        padding: .65rem;
    }

    .form-item-card__delete {
        height: var(--op-icon-box-lg);
        padding: 0;
        width: var(--op-icon-box-lg);
    }
}

@media (max-width: 420px) {
    .form-item-card__header {
        grid-template-columns: var(--op-icon-box-xs) 14px minmax(0, max-content) var(--op-icon-box-lg);
        padding: .55rem;
    }

    .form-item-card__handle {
        height: var(--op-icon-box-xs);
        width: var(--op-icon-box-xs);
    }

    .form-item-card__type {
        max-width: min(10.5rem, calc(100vw - 9.5rem));
    }

    .form-item-card__body {
        padding: .55rem;
    }
}

/* Migrated from AtlasPMS.Web/Opinario/Features/FormEditor/Components/FormEditorContent.razor.css */
.op-form-editor-workspace {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.op-form-editor-panel {
    background: var(--op-feature-card-bg);
    border: 1px solid var(--op-feature-card-border);
    border-radius: var(--op-radius-control);
    box-shadow: var(--op-feature-shadow);
    overflow: hidden;
}

.op-form-editor-panel-header {
    align-items: center;
    border-bottom: 1px solid var(--op-feature-divider);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem;
}

.op-form-editor-panel-heading {
    align-items: center;
    display: flex;
    gap: .68rem;
    min-width: 0;
}

.op-form-editor-panel-icon {
    align-items: center;
    background: var(--op-dashboard-primary-soft, #e7f1ff);
    border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .15);
    border-radius: var(--op-radius-control);
    color: var(--op-dashboard-primary-text, #0d6efd);
    display: inline-flex;
    flex: 0 0 auto;
    height: var(--op-icon-box-lg);
    justify-content: center;
    width: var(--op-icon-box-lg);
}

.op-form-editor-panel-heading h2,
.form-automation-card__title {
    color: var(--op-text-strong, #172033);
    font-size: var(--op-type-size-title);
    font-weight: var(--op-type-weight-heading);
    margin: 0;
}

.op-form-editor-panel-heading p,
.form-automation-card__subtitle {
    color: var(--op-text-muted, #64748b);
    font-size: var(--op-type-size-caption);
    font-weight: var(--op-type-weight-strong);
    line-height: var(--op-line-body);
    margin: .12rem 0 0;
}

.op-form-editor-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .42rem;
    justify-content: flex-end;
}

.op-form-editor-action,
.op-form-editor-primary-action {
    align-items: center;
    border-radius: var(--op-radius-control);
    display: inline-flex;
    font-size: var(--op-type-size-label);
    font-weight: var(--op-type-weight-heading);
    gap: .4rem;
    justify-content: center;
    min-height: var(--op-control-height-sm);
    padding: .5rem .68rem;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
    white-space: nowrap;
}

.op-form-editor-action {
    background: #fff;
    border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .22);
    color: var(--op-dashboard-primary-text, #0d6efd);
}

.op-form-editor-action:hover:not(:disabled) {
    background: var(--op-dashboard-primary-soft, #e7f1ff);
    border-color: rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .36);
    transform: translateY(-1px);
}

.op-form-editor-action--danger {
    border-color: rgba(220, 38, 38, .20);
    color: #b91c1c;
}

.op-form-editor-action--danger:hover:not(:disabled) {
    background: #fff5f5;
    border-color: rgba(220, 38, 38, .34);
}

.op-form-editor-primary-action {
    background: linear-gradient(135deg, var(--op-dashboard-primary, #0d6efd), #2563eb);
    border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .35);
    color: #fff;
    box-shadow: 0 8px 18px rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .18);
}

.op-form-editor-primary-action:hover:not(:disabled) {
    transform: translateY(-1px);
}

.op-form-editor-action:disabled,
.op-form-editor-primary-action:disabled {
    cursor: not-allowed;
    opacity: .58;
    transform: none;
}

.op-form-editor-primary-action--wide {
    min-height: 44px;
    width: 100%;
}

.op-form-editor-config-body,
.op-form-editor-sections-body {
    padding: 1rem;
}

.op-form-editor-field {
    display: block;
}

.form-automation-card__body {
    background: #fff;
    padding: 1rem;
}

.form-automation-card__header {
    align-items: center;
    display: flex;
    gap: .68rem;
    margin-bottom: .9rem;
}

.form-automation-card__options {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.form-automation-option {
    align-items: center;
    background: #fff;
    border: 1px solid var(--op-feature-card-border);
    border-radius: var(--op-radius-control);
    color: var(--op-text-body, #334155);
    cursor: pointer;
    display: flex;
    gap: .75rem;
    min-height: 68px;
    padding: .85rem .95rem;
    position: relative;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.form-automation-option:hover {
    border-color: rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .28);
    background: var(--op-feature-control-bg);
    transform: translateY(-1px);
}

.form-automation-option.is-active {
    border-color: rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .34);
    background: var(--op-dashboard-primary-soft, #e7f1ff);
}

.form-automation-option.is-disabled {
    cursor: default;
    opacity: .82;
    transform: none;
}

.form-automation-option__input {
    height: 1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

.form-automation-option__check {
    background: #fff;
    border: 2px solid rgba(47, 43, 61, .20);
    border-radius: .35rem;
    flex: 0 0 auto;
    height: 1.35rem;
    position: relative;
    transition: border-color .18s ease, background .18s ease;
    width: 1.35rem;
}

.form-automation-option.is-active .form-automation-option__check {
    border-color: var(--op-dashboard-primary, #0d6efd);
    background: var(--op-dashboard-primary, #0d6efd);
}

.form-automation-option.is-active .form-automation-option__check::after {
    border: solid #fff;
    border-width: 0 2px 2px 0;
    content: "";
    height: .72rem;
    left: .38rem;
    position: absolute;
    top: .17rem;
    transform: rotate(45deg);
    width: .4rem;
}

.form-automation-option__content {
    display: flex;
    flex-direction: column;
    gap: .12rem;
    min-width: 0;
}

.form-automation-option__label {
    color: var(--op-text-strong, #172033);
    font-weight: var(--op-type-weight-label);
    line-height: var(--op-line-heading);
}

.form-automation-option__hint {
    color: var(--op-text-muted, #64748b);
    font-size: var(--op-type-size-caption);
    font-weight: var(--op-type-weight-body-strong);
    line-height: var(--op-line-compact);
}

.op-form-editor-sections {
    display: grid;
    gap: .85rem;
}

.op-form-editor-save-footer {
    border-top: 1px solid var(--op-feature-divider);
    margin-top: 1rem;
    padding-top: 1rem;
}

.op-form-editor-empty {
    align-items: center;
    color: var(--op-text-muted, #64748b);
    display: flex;
    flex-direction: column;
    gap: .54rem;
    justify-content: center;
    min-height: 230px;
    padding: 1.5rem;
    text-align: center;
}

.op-form-editor-empty-icon {
    align-items: center;
    background: var(--op-dashboard-primary-soft, #e7f1ff);
    border-radius: var(--op-radius-control);
    color: var(--op-dashboard-primary-text, #0d6efd);
    display: inline-flex;
    height: var(--op-icon-box-xl);
    justify-content: center;
    width: var(--op-icon-box-xl);
}

.op-form-editor-empty strong {
    color: var(--op-text-strong, #172033);
    font-size: var(--op-type-size-title);
}

@media (max-width: 767.98px) {
    .op-form-editor-panel-header {
        align-items: stretch;
        flex-direction: column;
        padding: .85rem;
    }

    .op-form-editor-actions {
        display: grid;
        gap: .42rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
    }

    .op-form-editor-action,
.op-form-editor-primary-action {
        min-width: 0;
        width: 100%;
    }

    .op-form-editor-config-body,
.op-form-editor-sections-body,
.form-automation-card__body {
        padding: .85rem;
    }
}

@media (max-width: 420px) {
    .op-form-editor-actions {
        grid-template-columns: 1fr;
    }

    .op-form-editor-config-body,
.op-form-editor-sections-body,
.form-automation-card__body {
        padding: .65rem;
    }
}

/* Migrated from AtlasPMS.Web/Opinario/Features/FormEditor/Components/FormSectionEditor.razor.css */
.form-section-card {
    background: #fff;
    border: 1px solid var(--op-feature-card-border);
    border-radius: var(--op-radius-control);
    overflow: hidden;
    transition: border-color .18s ease, transform .18s ease;
}

.form-section-card:hover {
    border-color: rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .24);
}

.form-section-card__header {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid var(--op-feature-divider);
    cursor: pointer;
    display: flex;
    gap: .68rem;
    padding: .95rem 1rem;
}

.form-section-card.is-collapsed .form-section-card__header {
    border-bottom-color: transparent;
}

.form-section-card__handle {
    align-items: center;
    background: var(--op-feature-control-bg);
    border: 1px solid rgba(47, 43, 61, .08);
    border-radius: var(--op-radius-control);
    color: #94a3b8;
    cursor: grab;
    display: inline-flex;
    flex: 0 0 auto;
    height: var(--op-icon-box-sm);
    justify-content: center;
    width: var(--op-icon-box-sm);
}

.form-section-card__chevron {
    color: #94a3b8 !important;
    transition: transform .18s ease;
}

.form-section-card.is-collapsed .form-section-card__chevron {
    transform: rotate(-90deg);
}

.form-section-card__title {
    background: var(--op-feature-control-bg);
    border: 1px solid var(--op-feature-card-border);
    border-radius: var(--op-radius-control);
    box-shadow: none;
    color: var(--op-text-strong, #172033);
    font-size: var(--op-type-size-body);
    font-weight: var(--op-type-weight-body-strong);
    line-height: var(--op-line-body);
    min-height: var(--op-field-height);
}

.form-section-card__title:focus {
    background: #fff;
    border-color: rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .48);
    box-shadow: 0 0 0 .2rem rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .12);
}

.form-section-card__title:disabled {
    background: var(--op-feature-control-disabled-bg);
    color: #64748b;
    font-weight: 500;
}

.form-section-card__action,
.form-section-card__add-button {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .22);
    border-radius: var(--op-radius-control);
    color: var(--op-dashboard-primary-text, #0d6efd);
    display: inline-flex;
    font-size: var(--op-type-size-label);
    font-weight: var(--op-type-weight-heading);
    gap: .4rem;
    justify-content: center;
    min-height: var(--op-control-height-sm);
    padding: .5rem .68rem;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.form-section-card__action {
    border-color: rgba(220, 38, 38, .20);
    color: #b91c1c;
    flex: 0 0 auto;
    padding-inline: .62rem;
}

.form-section-card__action:hover:not(:disabled) {
    background: #fff5f5;
    border-color: rgba(220, 38, 38, .34);
    transform: translateY(-1px);
}

.form-section-card__add-button {
    margin-top: .85rem;
}

.form-section-card__add-button:hover:not(:disabled) {
    background: var(--op-dashboard-primary-soft, #e7f1ff);
    border-color: rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .36);
    transform: translateY(-1px);
}

.form-section-card__action:disabled,
.form-section-card__add-button:disabled {
    cursor: not-allowed;
    opacity: .58;
    transform: none;
}

.form-section-card__body {
    background: var(--op-feature-control-bg);
    padding: 1rem;
}

.form-section-card__items {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

@media (max-width: 767.98px) {
    .form-section-card__header {
        align-items: center;
        display: grid;
        gap: .5rem;
        grid-template-columns: var(--op-icon-box-sm) 16px minmax(0, 1fr) var(--op-icon-box-lg);
        padding: .75rem;
    }

    .form-section-card__title {
        min-width: 0;
    }

    .form-section-card__body {
        padding: .65rem;
    }

    .form-section-card__action {
        height: var(--op-icon-box-lg);
        padding: 0;
        width: var(--op-icon-box-lg);
    }
}

@media (max-width: 420px) {
    .form-section-card__header {
        grid-template-columns: var(--op-icon-box-xs) 14px minmax(0, 1fr) var(--op-icon-box-lg);
        padding: .6rem;
    }

    .form-section-card__handle {
        height: var(--op-icon-box-xs);
        width: var(--op-icon-box-xs);
    }

    .form-section-card__title {
        font-size: var(--op-type-size-body);
        min-height: var(--op-control-height-md);
    }

    .form-section-card__body {
        padding: .5rem;
    }
}

/* Migrated from AtlasPMS.Web/Opinario/Features/FormEditor/Components/Pages/FeedbackFormEditorContentPage.razor.css */
.op-form-editor-page {
    background:
        radial-gradient(circle at top left, rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .07), transparent 30rem),
        #f3f6fb;
    min-height: 100%;
}

.op-form-editor-page .op-feature-page-stack {
    padding-top: 0;
}

.op-form-editor-hero,
.op-form-editor-selector-panel {
    background: var(--op-feature-card-bg);
    border: 1px solid var(--op-feature-card-border);
    border-radius: var(--op-radius-control);
    box-shadow: var(--op-feature-shadow);
}

.op-form-editor-hero {
    align-items: center;
    display: flex;
    justify-content: space-between;
    min-height: 128px;
    padding: 1.1rem;
}

.op-form-editor-hero__heading,
.op-form-editor-panel-heading {
    align-items: center;
    display: flex;
    gap: .75rem;
    min-width: 0;
}

.op-form-editor-hero__icon,
.op-form-editor-panel-icon {
    align-items: center;
    background: var(--op-dashboard-primary-soft, #e7f1ff);
    border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .15);
    border-radius: var(--op-radius-control);
    color: var(--op-dashboard-primary-text, #0d6efd);
    display: inline-flex;
    flex: 0 0 auto;
    height: var(--op-icon-box-xl);
    justify-content: center;
    width: var(--op-icon-box-xl);
}

.op-form-editor-kicker {
    color: var(--op-dashboard-primary-text, #0d6efd);
    display: block;
    font-size: var(--op-type-size-label);
    font-weight: var(--op-type-weight-heading);
    letter-spacing: .045em;
    margin-bottom: .18rem;
    text-transform: uppercase;
}

.op-form-editor-hero h1,
.op-form-editor-panel-heading h2 {
    color: var(--op-text-strong, #172033);
    font-size: var(--op-type-size-page);
    font-weight: var(--op-type-weight-heading);
    line-height: var(--op-line-tight);
    margin: 0;
}

.op-form-editor-hero p,
.op-form-editor-panel-heading p {
    color: var(--op-text-muted, #64748b);
    font-size: var(--op-type-size-body);
    font-weight: var(--op-type-weight-body-strong);
    line-height: var(--op-line-body);
    margin: .22rem 0 0;
}

.op-form-editor-selector-panel {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem;
}

.op-form-editor-panel-heading h2 {
    font-size: var(--op-type-size-title);
}

.op-form-editor-panel-heading p {
    font-size: var(--op-type-size-caption);
    font-weight: var(--op-type-weight-strong);
}

.op-form-editor-selector {
    flex: 0 1 24rem;
    min-width: min(100%, 18rem);
}

.op-form-editor-selector label {
    color: #475569;
    display: block;
    font-size: var(--op-type-size-label);
    font-weight: var(--op-type-weight-label);
    letter-spacing: var(--op-letter-kicker);
    margin-bottom: .34rem;
    text-transform: uppercase;
}

.op-form-editor-selector select,
.op-form-editor-selector .form-select {
    min-height: var(--op-field-height);
}

@media (max-width: 767.98px) {
    .op-form-editor-page {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }

    .op-form-editor-page .op-feature-page-stack {
        padding-top: 0;
    }

    .op-form-editor-hero,
.op-form-editor-selector-panel {
        align-items: stretch;
        flex-direction: column;
        padding: .85rem;
    }

    .op-form-editor-hero h1 {
        font-size: var(--op-type-size-display-sm);
    }

    .op-form-editor-selector {
        flex-basis: auto;
        width: 100%;
    }
}

@media (max-width: 420px) {
    .op-form-editor-page {
        padding-left: .5rem !important;
        padding-right: .5rem !important;
    }

    .op-form-editor-hero__icon,
.op-form-editor-panel-icon {
        height: var(--op-icon-box-lg);
        width: var(--op-icon-box-lg);
    }
}

/* Migrated from AtlasPMS.Web/Opinario/Features/Feeds/Components/FeedDetailsContent.razor */
.op-main-content:has(.op-feed-detail-page) {
        background: var(--op-dashboard-bg, #f5f8ff);
    }

    .op-feed-detail-page {
        padding: 1.5rem;
    }

    .op-feed-detail-shell {
        margin: 0 auto;
        max-width: 1180px;
    }

    .op-feed-detail-back {
        align-items: center;
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        font-size: var(--op-type-size-body-sm);
        font-weight: var(--op-type-weight-label);
        gap: 0.42rem;
        margin-bottom: 0.82rem;
        text-decoration: none;
    }

    .op-feed-detail-hero,
.op-feed-detail-responses {
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(47, 43, 61, 0.10);
        border-radius: var(--op-radius-control);
        box-shadow: 0 4px 14px rgba(47, 43, 61, 0.08);
    }

    .op-feed-detail-hero {
        padding: 1.08rem;
    }

    .op-feed-detail-heading {
        align-items: center;
        display: flex;
        gap: 0.78rem;
        min-width: 0;
    }

    .op-feed-detail-icon {
        align-items: center;
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.15);
        border-radius: var(--op-radius-control);
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        flex: 0 0 auto;
        height: var(--op-icon-box-lg);
        justify-content: center;
        width: var(--op-icon-box-lg);
    }

    .op-feed-detail-kicker {
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: block;
        font-size: var(--op-type-size-eyebrow);
        font-weight: var(--op-type-weight-label);
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .op-feed-detail-title {
        color: var(--op-text-strong);
        font-size: var(--op-type-size-page);
        font-weight: var(--op-type-weight-label);
        line-height: var(--op-line-heading);
        margin: 0.24rem 0 0;
    }

    .op-feed-detail-copy {
        color: var(--op-text-muted);
        font-size: var(--op-type-size-body);
        font-weight: var(--op-type-weight-body);
        line-height: var(--op-line-body);
        margin: 0.34rem 0 0;
    }

    .op-feed-detail-meta {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 0.46rem;
        margin-top: 0.88rem;
    }

    .op-feed-detail-badge,
.op-feed-detail-source {
        border-radius: var(--op-radius-pill);
        display: inline-flex;
        flex: 0 0 auto;
        font-size: var(--op-type-size-eyebrow);
        font-weight: var(--op-type-weight-label);
        padding: 0.3rem 0.58rem;
        white-space: nowrap;
    }

    .op-feed-detail-source {
        background: #ffffff;
        border: 1px solid rgba(47, 43, 61, 0.12);
        color: var(--op-text-body);
    }

    .op-feed-detail-badge--positive {
        background: var(--op-health-good-soft, #e8f5e9);
        color: var(--op-health-good-text, #065f46);
    }

    .op-feed-detail-badge--negative {
        background: var(--op-health-bad-soft, #ffebee);
        color: var(--op-health-bad-text, #991b1b);
    }

    .op-feed-detail-badge--warning {
        background: var(--op-health-warning-soft, #fff7ed);
        color: var(--op-health-warning-text, #9a6700);
    }

    .op-feed-detail-responses {
        margin-top: 0.9rem;
    }

    .op-feed-detail-responses-body {
        display: grid;
        gap: 0.78rem;
        padding: 1rem;
    }

    @media (max-width: 575.98px) {
        .op-feed-detail-page {
            padding: 1rem;
        }

        .op-feed-detail-title {
            font-size: var(--op-type-size-title-lg);
        }
    }

/* Migrated from AtlasPMS.Web/Opinario/Features/Feeds/Components/FeedsContent.razor */
.op-feed-section {
        margin-bottom: 1rem;
    }

    .op-feed-header {
        align-items: center;
        display: flex;
        gap: 1rem;
        justify-content: space-between;
        margin-bottom: 0.9rem;
    }

    .op-feed-heading-copy {
        flex: 1 1 auto;
        min-width: 0;
    }

    .op-feed-title {
        color: var(--op-heading-strong, #0f172a);
        font-family: var(--op-font-family-sans);
        font-size: var(--op-type-size-title);
        font-weight: var(--op-type-weight-label);
        line-height: var(--op-line-heading);
        margin-bottom: 0.15rem;
    }

    .op-feed-subtitle {
        color: var(--op-text-muted);
        font-family: var(--op-font-family-sans);
        font-size: var(--op-type-size-label);
        font-weight: 400;
        line-height: var(--op-line-body-relaxed);
    }

    .op-feed-live-badge {
        align-items: center;
        background: var(--op-health-good-soft, #e8f5e9);
        border: 1px solid rgba(16, 185, 129, 0.18);
        border-radius: var(--op-radius-pill);
        color: var(--op-health-good-text, #065f46);
        display: inline-flex;
        font-size: var(--op-type-size-eyebrow);
        font-weight: var(--op-type-weight-body-strong);
        gap: 0.42rem;
        line-height: 1;
        min-height: var(--op-icon-box-sm);
        padding: 0.38rem 0.64rem;
        white-space: nowrap;
    }

    .op-feed-card {
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.94)),
            var(--op-surface-raised);
        border: 1px solid rgba(47, 43, 61, 0.10);
        border-radius: var(--op-radius-control);
        box-shadow: 0 4px 14px rgba(47, 43, 61, 0.08);
        padding: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 0.8rem;
        position: relative;
        overflow: hidden;
        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        cursor: pointer;
        flex: 0 0 auto;
        scroll-snap-align: start;
        min-height: 164px;
    }

    .op-feed-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 24px rgba(47, 43, 61, 0.12);
        border-color: rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.24);
    }

    .op-feed-card::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0.95rem;
        bottom: 0.95rem;
        width: 3px;
        border-radius: var(--op-radius-pill);
    }

    .op-feed-card-critical::before { background: var(--op-health-bad, #ef4444); }
    .op-feed-card-warning::before  { background: var(--op-health-warning, #f59e0b); }
    .op-feed-card-positive::before { background: var(--op-health-good, #10b981); }
    .op-feed-card-neutral::before  { background: #64748b; }

    .op-feed-card-top {
        align-items: center;
        display: flex;
        justify-content: space-between;
        gap: 0.75rem;
        padding-left: 0.25rem;
    }

    .op-feed-time {
        font-size: var(--op-type-size-eyebrow);
        font-weight: var(--op-type-weight-strong);
        color: var(--op-text-muted);
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .op-feed-signal {
        align-items: center;
        border-radius: var(--op-radius-pill);
        display: inline-flex;
        font-size: var(--op-type-size-micro);
        font-weight: var(--op-type-weight-label);
        gap: 0.35rem;
        padding: 0.24rem 0.48rem;
        white-space: nowrap;
    }

    .op-feed-card-critical .op-feed-signal { background: var(--op-health-bad-soft, #ffebee); color: var(--op-health-bad-text, #991b1b); }
    .op-feed-card-warning .op-feed-signal { background: var(--op-health-warning-soft, #fff7ed); color: var(--op-health-warning-text, #92400e); }
    .op-feed-card-positive .op-feed-signal { background: var(--op-health-good-soft, #e8f5e9); color: var(--op-health-good-text, #065f46); }
    .op-feed-card-neutral .op-feed-signal { background: #eef2f7; color: #475569; }

    .op-feed-message {
        font-size: var(--op-type-size-body);
        color: var(--op-text-body);
        line-height: var(--op-line-body);
        font-weight: var(--op-type-weight-body);
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        min-height: calc(0.9rem * 1.45 * 3);
        padding-left: 0.25rem;
    }

    .op-feed-meta {
        align-items: center;
        border-top: 1px solid rgba(47, 43, 61, 0.08);
        font-weight: var(--op-type-weight-body);
        display: flex;
        justify-content: space-between;
        gap: 0.75rem;
        padding-top: 0.7rem;
    }

    .op-feed-location,
.op-feed-category {
        color: var(--op-text-muted);
        font-size: var(--op-type-size-eyebrow);
        min-width: 0;
    }

    .op-feed-location {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .op-feed-category {
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.12);
        border-radius: var(--op-radius-pill);
        color: var(--op-dashboard-primary-text, #0d6efd);
        flex: 0 0 auto;
        font-weight: var(--op-type-weight-label);
        padding: 0.2rem 0.48rem;
    }

    .op-feed-carousel-viewport {
        overflow: hidden;
        position: relative;
    }

    .op-feed-carousel-track {
        display: flex;
        gap: 1rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        padding: 0.35rem 0 0.55rem;
    }

    .op-feed-carousel-track::-webkit-scrollbar {
        display: none;
    }

    .op-feed-card {
        width: 100%; 
    }

    @media (min-width: 768px) {
        .op-feed-card { width: calc(50% - 0.75rem); }
    }

    @media (min-width: 1200px) {
        .op-feed-card { width: calc(33.333% - 1rem); }
    }

    .op-nav-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        margin-top: 0.7rem;
    }

    .op-nav-arrow {
        background: #ffffff;
        color: var(--op-text-muted);
        border: 1px solid rgba(47, 43, 61, 0.10);
        border-radius: var(--op-radius-control);
        box-shadow: 0 4px 12px rgba(47, 43, 61, 0.06);
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
        cursor: pointer;
        font-size: var(--op-type-size-label);
        height: var(--op-icon-box-md);
        width: var(--op-icon-box-md);
    }

    .op-nav-arrow:hover {
        color: var(--op-dashboard-primary-text, #0d6efd);
        border-color: rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.24);
        transform: translateY(-1px);
    }

    .op-dots-container {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .op-nav-dot {
        height: 7px;
        width: 7px;
        border-radius: 6px;
        background: #cbd5e1;
        border: none;
        padding: 0;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .op-nav-dot.active {
        background: var(--op-dashboard-primary, #0d6efd);
        width: 26px;
    }

    .op-feed-live-dot {
        color: var(--op-health-good, #10b981);
        font-size: .48rem;
        line-height: 1;
    }

    @media (max-width: 575.98px) {
        .op-feed-header {
            gap: 0.62rem;
        }

        .op-feed-live-badge {
            flex: 0 0 auto;
            padding: 0.35rem 0.58rem;
        }

        .op-feed-card {
            min-height: 178px;
        }
    }

/* Migrated from AtlasPMS.Web/Opinario/Features/Feeds/Components/FeedsContentError.razor */
.op-feed-empty {
        align-items: flex-start;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(47, 43, 61, 0.10);
        border-radius: var(--op-radius-control);
        box-shadow: 0 4px 14px rgba(47, 43, 61, 0.08);
        display: flex;
        gap: 0.9rem;
        margin-bottom: 1rem;
        padding: 1rem;
    }

    .op-feed-empty > div:not(.op-feed-empty-icon) {
        flex: 1 1 auto;
        min-width: 0;
    }

    .op-feed-empty-icon {
        align-items: center;
        background: var(--op-health-bad-soft, #ffebee);
        border: 1px solid rgba(239, 68, 68, 0.18);
        border-radius: var(--op-radius-control);
        color: var(--op-health-bad-text, #991b1b);
        display: inline-flex;
        flex: 0 0 auto;
        height: var(--op-icon-box-lg);
        justify-content: center;
        width: var(--op-icon-box-lg);
    }

    .op-feed-empty h2 {
        color: var(--op-text-strong);
        font-size: var(--op-type-size-title-sm);
        font-weight: var(--op-type-weight-label);
        margin: 0 0 0.15rem;
    }

    .op-feed-empty p {
        color: var(--op-text-muted);
        font-size: var(--op-type-size-caption);
        margin: 0 0 0.75rem;
    }

    .op-feed-empty-panel {
        align-items: center;
        background: #fff7ed;
        border: 1px solid rgba(239, 68, 68, 0.14);
        border-radius: var(--op-radius-control);
        color: var(--op-text-body);
        display: inline-flex;
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-strong);
        gap: 0.52rem;
        line-height: var(--op-line-body);
        max-width: 100%;
        padding: 0.55rem 0.65rem;
    }

    .op-feed-empty-panel i {
        flex: 0 0 auto;
        color: var(--op-health-bad-text, #991b1b);
    }

    .op-feed-empty-panel span {
        min-width: 0;
    }

/* Migrated from AtlasPMS.Web/Opinario/Features/Feeds/Components/FeedsContentNoActivities.razor */
.op-feed-empty {
        align-items: flex-start;
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(47, 43, 61, 0.10);
        border-radius: var(--op-radius-control);
        box-shadow: 0 4px 14px rgba(47, 43, 61, 0.08);
        display: flex;
        gap: 0.9rem;
        margin-bottom: 1rem;
        padding: 1rem;
    }

    .op-feed-empty > div:not(.op-feed-empty-icon) {
        flex: 1 1 auto;
        min-width: 0;
    }

    .op-feed-empty-icon {
        align-items: center;
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.15);
        border-radius: var(--op-radius-control);
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        flex: 0 0 auto;
        height: var(--op-icon-box-lg);
        justify-content: center;
        width: var(--op-icon-box-lg);
    }

    .op-feed-empty h2 {
        color: var(--op-text-strong);
        font-size: var(--op-type-size-title-sm);
        font-weight: var(--op-type-weight-label);
        margin: 0 0 0.15rem;
    }

    .op-feed-empty p {
        color: var(--op-text-muted);
        font-size: var(--op-type-size-caption);
        margin: 0 0 0.75rem;
    }

    .op-feed-empty-panel {
        align-items: center;
        background: var(--op-feature-control-bg);
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.12);
        border-radius: var(--op-radius-control);
        color: var(--op-text-body);
        display: inline-flex;
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-strong);
        gap: 0.52rem;
        line-height: var(--op-line-body);
        max-width: 100%;
        padding: 0.55rem 0.65rem;
    }

    .op-feed-empty-panel i {
        flex: 0 0 auto;
        color: var(--op-dashboard-primary-text, #0d6efd);
    }

    .op-feed-empty-panel span {
        min-width: 0;
    }

/* Migrated from AtlasPMS.Web/Opinario/Features/FormEditor/Components/FormEditorContentSkeleton.razor */
.opsk-form-editor-workspace {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .opsk-form-editor-panel {
        background: var(--op-feature-card-bg);
        border: 1px solid var(--op-feature-card-border);
        border-radius: var(--op-radius-control);
        box-shadow: var(--op-feature-shadow);
        overflow: hidden;
    }

    .opsk-form-editor-header {
        align-items: center;
        border-bottom: 1px solid var(--op-feature-divider);
        display: flex;
        gap: 1rem;
        justify-content: space-between;
        padding: 1rem;
    }

    .opsk-form-editor-heading,
.opsk-form-editor-section-header,
.opsk-form-editor-question-header {
        align-items: center;
        display: flex;
        gap: .68rem;
        min-width: 0;
    }

    .opsk-form-editor-actions,
.opsk-form-editor-question-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .42rem;
        justify-content: flex-end;
    }

    .opsk-form-editor-body {
        padding: 1rem;
    }

    .opsk-form-editor-automation-grid {
        display: grid;
        gap: .75rem;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .opsk-form-editor-automation,
.opsk-form-editor-section,
.opsk-form-editor-question {
        background: #fff;
        border: 1px solid var(--op-feature-card-border);
        border-radius: var(--op-radius-control);
    }

    .opsk-form-editor-automation {
        align-items: center;
        display: flex;
        gap: .75rem;
        min-height: 68px;
        padding: .85rem .95rem;
    }

    .opsk-form-editor-sections {
        display: grid;
        gap: .85rem;
    }

    .opsk-form-editor-section-header {
        border-bottom: 1px solid var(--op-feature-divider);
        padding: .95rem 1rem;
    }

    .opsk-form-editor-section-body {
        background: var(--op-feature-control-bg);
        display: grid;
        gap: .75rem;
        padding: 1rem;
    }

    .opsk-form-editor-question-header {
        border-bottom: 1px solid var(--op-feature-divider);
        padding: .8rem .9rem;
    }

    .opsk-form-editor-question-body {
        padding: 1rem;
    }

    @media (max-width: 767.98px) {
        .opsk-form-editor-header {
            align-items: stretch;
            flex-direction: column;
        }

        .opsk-form-editor-actions {
            display: grid;
            gap: .42rem;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            justify-content: stretch;
        }

        .opsk-form-editor-actions .opsk-block {
            width: 100% !important;
        }

        .opsk-form-editor-body,
.opsk-form-editor-section-body,
.opsk-form-editor-question-body {
            padding: .65rem;
        }
    }

    @media (max-width: 420px) {
        .opsk-form-editor-actions {
            grid-template-columns: 1fr;
        }
    }

/* Migrated from AtlasPMS.Web/Opinario/Features/Insights/Components/Form/FormInsightsContent.razor */
.highlight-item {
        align-items: center;
        border-radius: var(--op-radius-control);
        display: flex;
        font-size: var(--op-type-size-body-lg);
        margin-bottom: 0.5rem;
        padding: 0.72rem 0.82rem;
    }

    .highlight-positive {
        background: var(--op-health-good-soft, #e8f5e9);
        color: var(--op-health-good-text, #065f46);
    }

    .highlight-negative {
        background: var(--op-health-bad-soft, #ffebee);
        color: var(--op-health-bad-text, #991b1b);
    }

    .highlight-clickable {
        cursor: pointer;
        transition: box-shadow 0.15s ease, transform 0.15s ease;
    }

    .highlight-clickable:hover {
        box-shadow: 0 6px 12px rgba(47, 43, 61, 0.08);
        transform: translateY(-1px);
    }

    .status-good { color: var(--op-health-good, #10b981); }
    .status-bad { color: var(--op-health-bad, #ef4444); }

    .op-topic-modal-overview {
        background: var(--op-feature-control-bg);
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.12);
        border-radius: var(--op-radius-control);
        padding: 0.9rem;
    }

    .op-topic-modal-kicker {
        align-items: center;
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-label);
        gap: 0.42rem;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    .op-topic-modal-analysis {
        color: var(--op-text-body);
        font-size: var(--op-type-size-title);
        line-height: var(--op-line-body-loose);
        margin: 0.62rem 0 0;
    }

    .op-topic-modal-grid {
        display: grid;
        gap: 0.85rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 0.9rem;
    }

    .op-topic-modal-panel {
        border: 1px solid var(--op-border-soft);
        border-radius: var(--op-radius-control);
        padding: 0.82rem;
    }

    .op-topic-modal-panel--positive {
        background: rgba(232, 245, 233, 0.44);
        border-color: rgba(16, 185, 129, 0.16);
    }

    .op-topic-modal-panel--negative {
        background: rgba(255, 235, 238, 0.44);
        border-color: rgba(239, 68, 68, 0.14);
    }

    .op-topic-modal-title {
        align-items: center;
        display: flex;
        font-size: var(--op-type-size-body-sm);
        font-weight: var(--op-type-weight-label);
        gap: 0.42rem;
        margin: 0 0 0.68rem;
        text-transform: uppercase;
    }

    .op-topic-modal-empty {
        color: var(--op-text-muted);
        font-size: var(--op-type-size-body-sm);
        font-style: italic;
        margin: 0;
    }

    .action-card {
        background: linear-gradient(135deg, #ffffff, #f8fbff);
        border: 1px solid var(--op-border-soft) !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 14px rgba(47, 43, 61, 0.06) !important;
        overflow: hidden;
        position: relative;
    }

    .action-card::before {
        background: var(--op-dashboard-primary, #0d6efd);
        content: "";
        inset: 0 auto 0 0;
        position: absolute;
        width: 3px;
    }

    .action-card-body {
        display: flex;
        flex-direction: column;
        gap: 0.76rem;
    }

    .action-card-heading {
        align-items: center;
        display: grid;
        gap: 0.7rem;
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .action-card-icon {
        align-items: center;
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        border-radius: var(--op-radius-control);
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        height: 2.1rem;
        justify-content: center;
        width: 2.1rem;
    }

    .action-card-title {
        color: var(--op-text-strong);
        font-size: var(--op-type-size-title);
        line-height: var(--op-line-compact);
    }

    .action-card-description {
        color: var(--op-text-body);
        font-size: var(--op-type-size-body);
        line-height: var(--op-line-body);
        margin: 0;
    }

    .action-card-footer {
        align-items: center;
        display: flex;
        gap: 0.7rem;
        justify-content: space-between;
    }

    .action-impact-chip,
.action-task-created {
        align-items: center;
        border-radius: var(--op-radius-pill);
        display: inline-flex;
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-strong);
        gap: 0.4rem;
        padding: 0.3rem 0.62rem;
    }

    .action-impact-chip {
        background: #ffffff;
        border: 1px solid var(--op-border-soft);
        color: var(--op-text-muted);
    }

    .action-task-created {
        background: rgba(16, 185, 129, 0.06);
        border: 1px solid rgba(16, 185, 129, 0.22);
        color: var(--op-health-good-text, #065f46);
    }

    .action-task-button {
        background: transparent;
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.38);
        border-radius: var(--op-radius-pill);
        color: var(--op-dashboard-primary-text, #0d6efd);
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-strong);
        padding: 0.28rem 0.66rem;
    }

    .action-task-button:hover:not(:disabled) {
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        color: var(--op-dashboard-primary-text, #0d6efd);
    }

    .action-task-button:disabled {
        background: var(--op-surface-muted);
        border-color: var(--op-border-soft);
        color: var(--op-text-muted);
        opacity: 1;
    }

    .priority-badge {
        border-radius: var(--op-radius-pill);
        font-size: var(--op-type-size-eyebrow);
        font-weight: var(--op-type-weight-label);
        padding: 0.3rem 0.52rem;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .action-priority-low,
.action-priority-medium {
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        color: var(--op-dashboard-primary-text, #0d6efd);
    }

    .action-priority-high {
        background: var(--op-health-warning-soft, #fff7ed);
        color: var(--op-health-warning-text, #92400e);
    }

    .action-priority-critical {
        background: var(--op-health-bad-soft, #ffebee);
        color: var(--op-health-bad-text, #991b1b);
    }

    @media (max-width: 575.98px) {
        .op-topic-modal-grid {
            grid-template-columns: 1fr;
        }

        .action-card-heading {
            grid-template-columns: auto minmax(0, 1fr);
        }

        .priority-badge {
            grid-column: 1 / -1;
            justify-self: start;
        }

        .action-card-footer {
            align-items: flex-start;
            flex-direction: column;
        }
    }

/* Migrated from AtlasPMS.Web/Opinario/Features/Insights/Components/Form/FormInsightsContentSkeleton.razor */
.opsk-form-insights-dashboard {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .opsk-form-insights-card {
        background: #ffffff;
        border: 1px solid rgba(47, 43, 61, 0.10);
        border-radius: var(--op-radius-control);
        box-shadow: 0 4px 14px rgba(47, 43, 61, 0.08);
    }

    .opsk-form-insights-hero {
        display: grid;
        gap: 1rem;
        grid-template-columns: minmax(0, 1.48fr) minmax(320px, 0.82fr);
        padding: 1.15rem;
    }

    .opsk-form-insights-metrics {
        display: grid;
        gap: 0.65rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .opsk-form-insights-metric {
        align-items: center;
        background: var(--op-feature-control-bg);
        border: 1px solid rgba(47, 43, 61, 0.08);
        border-radius: var(--op-radius-control);
        display: flex;
        gap: 0.68rem;
        padding: 0.72rem;
    }

    .opsk-form-insights-layout {
        align-items: start;
        display: grid;
        gap: 1rem;
        grid-template-columns: minmax(0, 1.45fr) minmax(290px, 0.72fr);
    }

    .opsk-form-insights-panel {
        padding: 1rem;
    }

    .opsk-form-insights-topic,
.opsk-form-insights-highlight {
        background: #ffffff;
        border: 1px solid rgba(47, 43, 61, 0.09);
        border-radius: var(--op-radius-control);
        padding: 0.84rem;
    }

    .opsk-form-insights-topic-list {
        display: grid;
        gap: 0.5rem;
        grid-template-columns: 1fr;
    }

    .opsk-form-insights-topic {
        min-height: 185px;
    }

    .opsk-form-insights-highlight {
        background: var(--op-feature-control-bg);
        padding: 0.68rem;
    }

    @media (max-width: 991.98px) {
        .opsk-form-insights-hero,
.opsk-form-insights-layout {
            grid-template-columns: 1fr;
        }
    }

    @media (min-width: 1800px) {
        .opsk-form-insights-topic-list {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 575.98px) {
        .opsk-form-insights-metrics {
            grid-template-columns: 1fr;
        }
    }

/* Migrated from AtlasPMS.Web/Opinario/Features/Insights/Components/Form/FormInsightsDashboard.razor */
.op-form-insights-dashboard {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .op-form-insights-card {
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(47, 43, 61, 0.10);
        border-radius: var(--op-radius-control);
        box-shadow: 0 4px 14px rgba(47, 43, 61, 0.08);
    }

    .op-form-insights-hero {
        display: grid;
        gap: 1rem;
        grid-template-columns: minmax(0, 1.48fr) minmax(320px, 0.82fr);
        padding: 1.15rem;
    }

    .op-form-insights-kicker {
        align-items: center;
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        font-size: var(--op-type-size-eyebrow);
        font-weight: var(--op-type-weight-label);
        gap: 0.42rem;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    .op-form-insights-icon {
        align-items: center;
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.15);
        border-radius: var(--op-radius-control);
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        flex: 0 0 auto;
        height: var(--op-icon-box-sm);
        justify-content: center;
        width: var(--op-icon-box-sm);
    }

    .op-form-insights-title {
        color: var(--op-text-strong);
        font-size: clamp(1.35rem, 1.2rem + 0.7vw, 2rem);
        font-weight: var(--op-type-weight-label);
        line-height: var(--op-line-heading);
        margin: 0.95rem 0 0;
    }

    .op-form-insights-scope {
        color: var(--op-text-muted);
        display: block;
        font-size: var(--op-type-size-body-sm);
        font-weight: var(--op-type-weight-strong);
        margin-top: 0.42rem;
    }

    .op-form-insights-summary {
        color: var(--op-text-body);
        font-size: var(--op-type-size-title-sm);
        line-height: var(--op-line-body-loose);
        margin: 0.9rem 0 0;
        max-width: 880px;
    }

    .op-form-insights-metrics {
        display: grid;
        gap: 0.65rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .op-form-insights-metric {
        align-items: center;
        background: var(--op-feature-control-bg);
        border: 1px solid rgba(47, 43, 61, 0.08);
        border-radius: var(--op-radius-control);
        display: flex;
        gap: 0.68rem;
        min-width: 0;
        padding: 0.72rem;
    }

    .op-form-insights-metric-icon {
        align-items: center;
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        border-radius: var(--op-radius-control);
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        flex: 0 0 auto;
        height: var(--op-icon-box-md);
        justify-content: center;
        width: var(--op-icon-box-md);
    }

    .op-form-insights-metric--good .op-form-insights-metric-icon {
        background: var(--op-health-good-soft, #e8f5e9);
        color: var(--op-health-good-text, #065f46);
    }

    .op-form-insights-metric strong {
        color: var(--op-text-strong);
        display: block;
        font-size: var(--op-type-size-title-md);
        line-height: 1;
    }

    .op-form-insights-metric span:not(.op-form-insights-metric-icon) {
        color: var(--op-text-muted);
        display: block;
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-strong);
        margin-top: 0.32rem;
    }

    .op-form-insights-layout {
        align-items: start;
        display: grid;
        gap: 1rem;
        grid-template-columns: minmax(0, 1.45fr) minmax(290px, 0.72fr);
    }

    .op-form-insights-panel {
        padding: 1rem;
    }

    .op-form-insights-panel-header {
        align-items: center;
        display: flex;
        gap: 0.75rem;
        justify-content: space-between;
        margin-bottom: 0.9rem;
    }

    .op-form-insights-panel-heading {
        align-items: center;
        display: flex;
        gap: 0.7rem;
        min-width: 0;
    }

    .op-form-insights-panel-title {
        color: var(--op-text-strong);
        font-size: var(--op-type-size-title);
        font-weight: var(--op-type-weight-label);
        margin: 0;
    }

    .op-form-insights-panel-subtitle {
        color: var(--op-text-muted);
        display: block;
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-strong);
        margin-top: 0.14rem;
    }

    .op-form-topic-list {
        display: grid;
        gap: 0.68rem;
        grid-template-columns: 1fr;
    }

    .op-form-highlight-list {
        display: flex;
        flex-direction: column;
        gap: 0.68rem;
    }

    .op-form-topic-card {
        background: #ffffff;
        border: 1px solid rgba(47, 43, 61, 0.09);
        border-radius: var(--op-radius-control);
        box-shadow: 0 3px 10px rgba(47, 43, 61, 0.05);
        color: inherit;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 0.94rem;
        text-align: left;
        transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
        width: 100%;
    }

    .op-form-topic-card:hover {
        border-color: rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.26);
        box-shadow: 0 8px 18px rgba(47, 43, 61, 0.09);
        transform: translateY(-1px);
    }

    .op-form-topic-header,
.op-form-topic-footer,
.op-form-topic-score {
        align-items: center;
        display: flex;
    }

    .op-form-topic-header {
        gap: 0.65rem;
    }

    .op-form-topic-heading {
        min-width: 0;
    }

    .op-form-topic-title {
        color: var(--op-text-strong);
        display: block;
        font-size: var(--op-type-size-title);
        font-weight: var(--op-type-weight-label);
        line-height: var(--op-line-compact);
    }

    .op-form-topic-sentiment {
        color: var(--op-text-muted);
        display: block;
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-strong);
        margin-top: 0.12rem;
    }

    .op-form-topic-status {
        align-items: center;
        border-radius: var(--op-radius-control);
        display: inline-flex;
        flex: 0 0 auto;
        height: var(--op-icon-box-sm);
        justify-content: center;
        margin-left: auto;
        width: var(--op-icon-box-sm);
    }

    .op-form-topic-analysis {
        color: var(--op-text-body);
        display: block;
        font-size: var(--op-type-size-body);
        line-height: var(--op-line-body-relaxed);
        max-height: calc(1.55em * 3);
        margin-top: 0.66rem;
        min-height: calc(1.55em * 3);
        overflow: hidden;
        position: relative;
    }

    .op-form-topic-analysis::after {
        background: linear-gradient(to right, transparent, #ffffff 82%);
        bottom: 0;
        content: "";
        height: 1.55em;
        position: absolute;
        right: 0;
        width: 42%;
    }

    .op-form-topic-progress {
        background: #eef1f6;
        border-radius: var(--op-radius-pill);
        display: block;
        height: 5px;
        margin-top: 0.76rem;
        overflow: hidden;
    }

    .op-form-topic-progress span {
        border-radius: inherit;
        display: block;
        height: 100%;
    }

    .op-form-topic-footer {
        gap: 0.64rem;
        justify-content: space-between;
        margin-top: auto;
        padding-top: 0.62rem;
    }

    .op-form-topic-score {
        color: var(--op-text-muted);
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-label);
        flex-wrap: wrap;
        gap: 0.38rem;
    }

    .op-form-topic-link {
        color: var(--op-dashboard-primary-text, #0d6efd);
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-label);
        white-space: nowrap;
    }

    .op-form-topic-relevance {
        background: var(--op-feature-control-bg);
        border: 1px solid rgba(47, 43, 61, 0.08);
        border-radius: var(--op-radius-pill);
        color: var(--op-text-muted);
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-label);
        padding: 0.24rem 0.48rem;
    }

    .op-form-topic--good .op-form-topic-status {
        background: var(--op-health-good-soft, #e8f5e9);
        color: var(--op-health-good-text, #065f46);
    }

    .op-form-topic--warning .op-form-topic-status {
        background: var(--op-health-warning-soft, #fff7ed);
        color: var(--op-health-warning-text, #92400e);
    }

    .op-form-topic--bad .op-form-topic-status {
        background: var(--op-health-bad-soft, #ffebee);
        color: var(--op-health-bad-text, #991b1b);
    }

    .op-form-topic--good .op-form-topic-progress span { background: var(--op-health-good, #10b981); }
    .op-form-topic--warning .op-form-topic-progress span { background: var(--op-health-warning, #f59e0b); }
    .op-form-topic--bad .op-form-topic-progress span { background: var(--op-health-bad, #ef4444); }

    .op-form-highlight-item {
        align-items: flex-start;
        background: var(--op-feature-control-bg);
        border: 1px solid rgba(47, 43, 61, 0.08);
        border-radius: var(--op-radius-control);
        color: var(--op-text-body);
        cursor: pointer;
        display: flex;
        font-size: var(--op-type-size-body-sm);
        font-weight: var(--op-type-weight-body);
        gap: 0.58rem;
        line-height: var(--op-line-body);
        padding: 0.68rem;
        text-align: left;
        transition: background-color 0.2s ease, border-color 0.2s ease;
        width: 100%;
    }

    .op-form-highlight-item:hover {
        background: #ffffff;
        border-color: rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.24);
    }

    .op-form-highlight-item i {
        flex: 0 0 auto;
        margin-top: 0.18rem;
    }

    .op-form-highlight-item--positive i { color: var(--op-health-good, #10b981); }
    .op-form-highlight-item--negative i { color: var(--op-health-bad, #ef4444); }

    .op-form-actions-panel {
        background: linear-gradient(145deg, #f8fbff, #ffffff);
        margin-top: 1rem;
    }

    .op-form-actions-copy {
        color: var(--op-text-body);
        font-size: var(--op-type-size-body);
        line-height: var(--op-line-body);
        margin: 0.72rem 0 0;
    }

    .op-form-actions-button {
        align-items: center;
        background: var(--op-dashboard-primary, #0d6efd);
        border: 1px solid var(--op-dashboard-primary, #0d6efd);
        border-radius: var(--op-radius-control);
        box-shadow: 0 8px 18px rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.20);
        color: #ffffff;
        display: inline-flex;
        font-size: var(--op-type-size-body-sm);
        font-weight: var(--op-type-weight-label);
        gap: 0.5rem;
        justify-content: center;
        margin-top: 0.84rem;
        padding: 0.66rem 0.82rem;
        transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
        width: 100%;
    }

    .op-form-actions-button:hover {
        background: var(--op-dashboard-primary-hover, #0b5ed7);
        border-color: var(--op-dashboard-primary-hover, #0b5ed7);
        box-shadow: 0 12px 24px rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.26);
        color: #ffffff;
        transform: translateY(-1px);
    }

    @media (max-width: 991.98px) {
        .op-form-insights-hero,
.op-form-insights-layout {
            grid-template-columns: 1fr;
        }
    }

    @media (min-width: 1800px) {
        .op-form-topic-list {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 575.98px) {
        .op-form-insights-hero,
.op-form-insights-panel {
            padding: 0.9rem;
        }

        .op-form-insights-metrics {
            grid-template-columns: 1fr;
        }

        .op-form-topic-footer {
            align-items: flex-start;
            flex-direction: column;
        }
    }

/* Migrated from AtlasPMS.Web/Opinario/Features/Insights/Components/Form/FormInsightsDetailsContent.razor */
.op-main-content:has(.op-highlight-detail-page) {
        background: var(--op-dashboard-bg, #f5f8ff);
    }

    .op-highlight-detail-page {
        padding: 1.5rem 0 3rem;
    }

    .op-highlight-detail-back {
        align-items: center;
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        font-size: var(--op-type-size-body-sm);
        font-weight: var(--op-type-weight-label);
        gap: 0.45rem;
        margin-bottom: 1rem;
        text-decoration: none;
    }

    .op-highlight-detail-back:hover {
        color: var(--op-dashboard-primary-hover, #0b5ed7);
    }

    .op-highlight-detail-card {
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(47, 43, 61, 0.10);
        border-radius: var(--op-radius-control);
        box-shadow: 0 4px 14px rgba(47, 43, 61, 0.08);
    }

    .op-highlight-detail-hero {
        padding: 1rem;
    }

    .op-highlight-detail-hero-header {
        align-items: center;
        display: flex;
        gap: 0.75rem;
        justify-content: space-between;
    }

    .op-highlight-detail-heading {
        align-items: center;
        display: flex;
        gap: 0.72rem;
        min-width: 0;
    }

    .op-highlight-detail-icon {
        align-items: center;
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.14);
        border-radius: var(--op-radius-control);
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        flex: 0 0 auto;
        height: var(--op-icon-box-lg);
        justify-content: center;
        width: var(--op-icon-box-lg);
    }

    .op-highlight-detail-kicker {
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: block;
        font-size: var(--op-type-size-eyebrow);
        font-weight: var(--op-type-weight-label);
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .op-highlight-detail-title {
        color: var(--op-text-strong);
        font-size: var(--op-type-size-page);
        font-weight: var(--op-type-weight-label);
        line-height: var(--op-line-heading);
        margin: 0.24rem 0 0;
    }

    .op-highlight-export {
        align-items: center;
        background: #ffffff;
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.22);
        border-radius: var(--op-radius-control);
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        font-size: var(--op-type-size-meta);
        font-weight: var(--op-type-weight-label);
        gap: 0.42rem;
        padding: 0.56rem 0.72rem;
        transition: background-color 0.2s ease, border-color 0.2s ease;
        white-space: nowrap;
    }

    .op-highlight-export:hover {
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        border-color: rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.36);
        color: var(--op-dashboard-primary-text, #0d6efd);
    }

    .op-highlight-detail-layout {
        align-items: start;
        display: grid;
        gap: 1rem;
        grid-template-columns: minmax(250px, 0.7fr) minmax(0, 2fr);
        margin-top: 1rem;
    }

    .op-highlight-stats {
        display: flex;
        flex-direction: column;
        gap: 0.72rem;
        position: sticky;
        top: 1rem;
    }

    .op-highlight-stat-card {
        padding: 0.86rem;
    }

    .op-highlight-stat-label {
        color: var(--op-text-muted);
        display: block;
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-label);
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    .op-highlight-stat-value {
        color: var(--op-text-strong);
        display: block;
        font-size: var(--op-type-size-display);
        font-weight: var(--op-type-weight-label);
        line-height: 1;
        margin-top: 0.62rem;
    }

    .op-highlight-stat-value small {
        color: var(--op-text-muted);
        font-size: var(--op-type-size-meta);
    }

    .op-highlight-stat-copy {
        color: var(--op-text-muted);
        font-size: var(--op-type-size-meta);
        font-weight: var(--op-type-weight-body);
        line-height: var(--op-line-body);
        margin: 0.52rem 0 0;
    }

    .op-highlight-distribution {
        display: flex;
        flex-wrap: wrap;
        gap: 0.42rem;
        margin-top: 0.68rem;
    }

    .op-highlight-score-chip {
        background: var(--op-feature-control-bg);
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.12);
        border-radius: var(--op-radius-pill);
        color: var(--op-text-body);
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-label);
        padding: 0.28rem 0.52rem;
    }

    .op-highlight-responses {
        overflow: hidden;
    }

    .op-highlight-response-list {
        display: grid;
        gap: 0.78rem;
        padding: 1rem;
    }

    @media (max-width: 991.98px) {
        .op-highlight-detail-layout {
            grid-template-columns: 1fr;
        }

        .op-highlight-stats {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            position: static;
        }
    }

    @media (max-width: 575.98px) {
        .op-highlight-detail-page {
            padding-top: 1rem;
        }

        .op-highlight-detail-hero-header {
            align-items: flex-start;
            flex-direction: column;
        }

        .op-highlight-export {
            justify-content: center;
            width: 100%;
        }

        .op-highlight-stats {
            grid-template-columns: 1fr;
        }
    }

/* Migrated from AtlasPMS.Web/Opinario/Features/Insights/Components/Form/FormInsightsDetailsContentSkeleton.razor */
.opsk-highlight-detail-page {
        padding: 1.5rem 0 3rem;
    }

    .opsk-highlight-detail-card {
        background: #ffffff;
        border: 1px solid rgba(47, 43, 61, 0.10);
        border-radius: var(--op-radius-control);
        box-shadow: 0 4px 14px rgba(47, 43, 61, 0.08);
        padding: 1rem;
    }

    .opsk-highlight-detail-layout {
        align-items: start;
        display: grid;
        gap: 1rem;
        grid-template-columns: minmax(230px, 0.7fr) minmax(0, 2fr);
        margin-top: 1rem;
    }

    .opsk-highlight-detail-stats {
        display: flex;
        flex-direction: column;
        gap: 0.72rem;
    }

    @media (max-width: 991.98px) {
        .opsk-highlight-detail-layout {
            grid-template-columns: 1fr;
        }

        .opsk-highlight-detail-stats {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 575.98px) {
        .opsk-highlight-detail-stats {
            grid-template-columns: 1fr;
        }
    }

/* Migrated from AtlasPMS.Web/Opinario/Features/Insights/Components/Home/HomeInsights.razor */
.op-main-content:has(.op-home-dashboard) {
        background:
            radial-gradient(circle at 12% 0%, rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.10), transparent 28rem),
            linear-gradient(180deg, #f4f8ff 0%, #f7f9fd 48%, #f6f8fb 100%);
    }

    .op-home-dashboard {
        width: min(1180px, calc(100% - 3rem));
        margin: 0 auto;
        padding: 2rem 0 2.5rem;
    }

    @media (max-width: 575.98px) {
        .op-home-dashboard {
            width: min(100% - 1.25rem, 1180px);
            padding-top: 1.25rem;
        }
    }

/* Migrated from AtlasPMS.Web/Opinario/Features/Insights/Components/Home/HomeInsightsContent.razor */
.op-weekly-grid {
        align-items: stretch;
        display: grid;
        gap: 1rem;
        grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.8fr);
        margin-top: 1rem;
    }

    .op-dashboard-card {
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(47, 43, 61, 0.10);
        border-radius: var(--op-radius-control);
        box-shadow: 0 4px 14px rgba(47, 43, 61, 0.08);
    }

    .op-weekly-summary {
        display: flex;
        flex-direction: column;
        gap: 1.1rem;
        min-height: 100%;
        padding: 1.15rem;
    }

    .op-weekly-header,
.op-dashboard-card-header {
        align-items: center;
        display: flex;
        gap: 0.75rem;
        justify-content: space-between;
    }

    .op-dashboard-kicker {
        align-items: center;
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        font-size: var(--op-type-size-eyebrow);
        font-weight: var(--op-type-weight-label);
        gap: 0.42rem;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    .op-dashboard-icon {
        align-items: center;
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.15);
        border-radius: var(--op-radius-control);
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        height: var(--op-icon-box-sm);
        justify-content: center;
        width: var(--op-icon-box-sm);
    }

    .op-weekly-title {
        color: var(--op-text-strong);
        font-size: clamp(1.35rem, 1.2rem + 0.7vw, 2rem);
        font-weight: var(--op-type-weight-label);
        line-height: var(--op-line-heading);
        margin: 0;
        max-width: 820px;
    }

    .op-weekly-copy {
        color: var(--op-text-body);
        font-size: var(--op-type-size-body-lg);
        line-height: var(--op-line-body-loose);
        margin: 0;
        max-width: 860px;
    }

    .op-weekly-actions {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: space-between;
        margin-top: auto;
    }

    .op-weekly-metrics {
        display: grid;
        gap: 0.65rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        min-width: min(100%, 390px);
    }

    .op-weekly-metric {
        align-items: center;
        background: var(--op-feature-control-bg);
        border: 1px solid rgba(47, 43, 61, 0.08);
        border-radius: var(--op-radius-control);
        display: flex;
        gap: 0.65rem;
        padding: 0.66rem 0.72rem;
    }

    .op-weekly-metric-icon {
        align-items: center;
        border-radius: var(--op-radius-control);
        display: inline-flex;
        flex: 0 0 auto;
        height: var(--op-icon-box-md);
        justify-content: center;
        width: var(--op-icon-box-md);
    }

    .op-weekly-metric-icon i {
        align-items: center;
        display: inline-flex;
        font-size: var(--op-type-size-body-sm);
        height: 1em;
        justify-content: center;
        line-height: 1;
        width: 1em;
    }

    .op-weekly-metric--good .op-weekly-metric-icon {
        background: var(--op-health-good-soft, #e8f5e9);
        color: var(--op-health-good-text, #065f46);
    }

    .op-weekly-metric--opportunity .op-weekly-metric-icon {
        background: #fff6e6;
        color: #a15c00;
    }

    .op-weekly-metric--action .op-weekly-metric-icon {
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        color: var(--op-dashboard-primary-text, #0d6efd);
    }

    .op-weekly-metric-body {
        min-width: 0;
    }

    .op-weekly-metric strong {
        color: var(--op-text-strong);
        display: block;
        font-size: var(--op-type-size-title-md);
        line-height: 1;
    }

    .op-weekly-metric span {
        color: var(--op-text-muted);
        display: block;
        font-size: var(--op-type-size-eyebrow);
        font-weight: var(--op-type-weight-strong);
        margin-top: 0.32rem;
    }

    .op-weekly-metric .op-weekly-metric-icon {
        align-items: center;
        display: inline-flex;
        justify-content: center;
        margin-top: 0;
    }

    .op-dashboard-action {
        align-items: center;
        background: var(--op-dashboard-primary, #0d6efd);
        border: 1px solid var(--op-dashboard-primary, #0d6efd);
        border-radius: var(--op-radius-control);
        box-shadow: 0 8px 18px rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.20);
        color: #ffffff;
        display: inline-flex;
        font-size: var(--op-type-size-meta);
        font-weight: var(--op-type-weight-label);
        gap: 0.5rem;
        padding: 0.68rem 0.9rem;
        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }

    .op-dashboard-action:hover {
        background: var(--op-dashboard-primary-hover, #0b5ed7);
        border-color: var(--op-dashboard-primary-hover, #0b5ed7);
        box-shadow: 0 12px 24px rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.26);
        color: #ffffff;
        transform: translateY(-1px);
    }

    .op-voice-card {
        background:
            linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(255, 255, 255, 0.98));
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
        padding: 1rem;
    }

    .op-voice-list {
        display: flex;
        flex-direction: column;
        gap: 0.72rem;
        height: 100%;
    }

    .op-voice-item {
        background: #ffffff;
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.12);
        border-left: 3px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.48);
        border-radius: var(--op-radius-control);
        box-shadow: 0 4px 12px rgba(47, 43, 61, 0.05);
        color: var(--op-text-body);
        display: grid;
        gap: 0.62rem;
        grid-template-columns: auto minmax(0, 1fr);
        font-size: var(--op-type-size-caption);
        font-style: italic;
        font-weight: var(--op-type-weight-body);
        line-height: var(--op-line-body);
        padding: 0.72rem 0.78rem;
    }

    .op-voice-item i {
        color: rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.62);
        font-size: var(--op-type-size-caption);
        margin-top: 0.12rem;
    }

    .op-home-insight-grid {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: 1rem;
    }

    .op-insight-card {
        display: flex;
        flex-direction: column;
        min-height: 100%;
        padding: 1rem;
    }

    .op-insight-card-header {
        align-items: center;
        display: flex;
        gap: 0.7rem;
        margin-bottom: 0.85rem;
    }

    .op-insight-card-title {
        color: var(--op-text-strong);
        font-size: var(--op-type-size-body-sm);
        font-weight: var(--op-type-weight-label);
        margin: 0;
    }

    .op-insight-card-subtitle {
        color: var(--op-text-muted);
        display: block;
        font-size: var(--op-type-size-eyebrow);
        font-weight: var(--op-type-weight-strong);
        margin-top: 0.1rem;
    }

    .op-insight-icon {
        align-items: center;
        border-radius: var(--op-radius-control);
        display: inline-flex;
        flex: 0 0 auto;
        height: var(--op-icon-box-md);
        justify-content: center;
        width: var(--op-icon-box-md);
    }

    .op-insight-card--good .op-insight-icon {
        background: var(--op-health-good-soft, #e8f5e9);
        color: var(--op-health-good-text, #065f46);
    }

    .op-insight-card--warning .op-insight-icon {
        background: #fff6e6;
        color: #a15c00;
    }

    .op-insight-card--action .op-insight-icon {
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        color: var(--op-dashboard-primary-text, #0d6efd);
    }

    .op-insight-list {
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
        margin: 0;
        padding: 0;
    }

    .op-insight-list li {
        align-items: flex-start;
        background: var(--op-feature-control-bg);
        border: 1px solid rgba(47, 43, 61, 0.07);
        border-radius: var(--op-radius-control);
        color: var(--op-text-body);
        display: flex;
        font-size: var(--op-type-size-caption);
        font-weight: var(--op-type-weight-body);
        gap: 0.52rem;
        line-height: var(--op-line-body);
        list-style: none;
        padding: 0.62rem 0.68rem;
    }

    .op-insight-list i {
        flex: 0 0 auto;
        font-size: var(--op-type-size-eyebrow);
        margin-top: 0.2rem;
    }

    .op-insight-card--good .op-insight-list i { color: var(--op-health-good, #10b981); }
    .op-insight-card--warning .op-insight-list i { color: #d98700; }
    .op-insight-card--action .op-insight-list i { color: var(--op-dashboard-primary, #0d6efd); }

    @media (max-width: 991.98px) {
        .op-weekly-grid,
.op-home-insight-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 575.98px) {
        .op-weekly-summary,
.op-voice-card,
.op-insight-card {
            padding: 0.9rem;
        }

        .op-weekly-actions {
            align-items: stretch;
            flex-direction: column;
        }

        .op-weekly-metrics {
            grid-template-columns: 1fr;
        }

        .op-dashboard-action {
            justify-content: center;
            width: 100%;
        }
    }

/* Migrated from AtlasPMS.Web/Opinario/Features/Insights/Components/Home/HomeInsightsContentSkeleton.razor */
.opsk-weekly-grid,
.opsk-insight-grid {
        display: grid;
        gap: 1rem;
        margin-top: 1rem;
    }

    .opsk-weekly-grid {
        align-items: stretch;
        grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.8fr);
    }

    .opsk-insight-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .opsk-dashboard-card {
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(47, 43, 61, 0.10);
        border-radius: var(--op-radius-control);
        box-shadow: 0 4px 14px rgba(47, 43, 61, 0.08);
        padding: 1rem;
    }

    .opsk-weekly-summary {
        display: flex;
        flex-direction: column;
        gap: 1.1rem;
        min-height: 316px;
    }

    .opsk-voice-card {
        background:
            linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(255, 255, 255, 0.98));
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
        min-height: 316px;
    }

    .opsk-card-kicker,
.opsk-weekly-actions,
.opsk-insight-header {
        align-items: center;
        display: flex;
        gap: 0.75rem;
    }

    .opsk-copy-stack,
.opsk-voice-list,
.opsk-insight-list,
.opsk-quote-copy,
.opsk-insight-row-copy {
        display: flex;
        flex-direction: column;
    }

    .opsk-copy-stack {
        gap: 0.5rem;
    }

    .opsk-square-icon {
        border-radius: var(--op-radius-control);
        height: var(--op-icon-box-sm);
        width: var(--op-icon-box-sm);
    }

    .opsk-square-icon-sm {
        flex: 0 0 var(--op-icon-box-md);
        height: var(--op-icon-box-md);
        width: var(--op-icon-box-md);
    }

    .opsk-weekly-actions {
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: space-between;
        margin-top: auto;
    }

    .opsk-metric-grid {
        display: grid;
        gap: 0.65rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        min-width: min(100%, 390px);
    }

    .opsk-metric-card {
        align-items: center;
        background: var(--op-feature-control-bg);
        border: 1px solid rgba(47, 43, 61, 0.08);
        border-radius: var(--op-radius-control);
        display: flex;
        gap: 0.65rem;
        padding: 0.66rem 0.72rem;
    }

    .opsk-metric-copy {
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: 0.42rem;
        min-width: 0;
    }

    .opsk-metric-number {
        border-radius: 7px;
        height: 1rem;
        width: var(--op-icon-box-xs);
    }

    .opsk-action-button {
        border-radius: var(--op-radius-control);
        height: 2.65rem;
        width: 138px;
    }

    .opsk-voice-list {
        gap: 0.72rem;
        height: 100%;
    }

    .opsk-quote-card {
        background: #ffffff;
        border: 1px solid rgba(13, 110, 253, 0.12);
        border-left: 3px solid rgba(13, 110, 253, 0.34);
        border-radius: var(--op-radius-control);
        box-shadow: 0 4px 12px rgba(47, 43, 61, 0.05);
        display: grid;
        gap: 0.62rem;
        grid-template-columns: auto minmax(0, 1fr);
        padding: 0.72rem 0.78rem;
    }

    .opsk-quote-mark {
        border-radius: 6px;
        height: 13px;
        margin-top: 0.12rem;
        width: 13px;
    }

    .opsk-quote-copy {
        gap: 0.42rem;
        min-width: 0;
    }

    .opsk-insight-card {
        display: flex;
        flex-direction: column;
        min-height: 245px;
    }

    .opsk-insight-header {
        margin-bottom: 0.85rem;
    }

    .opsk-insight-heading {
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
        min-width: 0;
    }

    .opsk-insight-list {
        gap: 0.55rem;
    }

    .opsk-insight-row {
        align-items: flex-start;
        background: var(--op-feature-control-bg);
        border: 1px solid rgba(47, 43, 61, 0.07);
        border-radius: var(--op-radius-control);
        display: flex;
        gap: 0.52rem;
        padding: 0.62rem 0.68rem;
    }

    .opsk-dot {
        border-radius: 50%;
        flex: 0 0 9px;
        height: 9px;
        margin-top: 0.22rem;
        width: 9px;
    }

    .opsk-insight-row-copy {
        flex: 1;
        gap: 0.42rem;
        min-width: 0;
    }

    @media (max-width: 991.98px) {
        .opsk-weekly-grid,
.opsk-insight-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 575.98px) {
        .opsk-weekly-summary,
.opsk-voice-card,
.opsk-insight-card {
            padding: 0.9rem;
        }

        .opsk-weekly-actions {
            align-items: stretch;
            flex-direction: column;
        }

        .opsk-metric-grid {
            grid-template-columns: 1fr;
        }

        .opsk-action-button {
            width: 100%;
        }
    }

/* Migrated from AtlasPMS.Web/Opinario/Features/Insights/Components/Pages/FormInsightsPageContent.razor */
.op-form-insights-toolbar {
        align-items: center;
        display: flex;
        gap: 1rem;
        justify-content: space-between;
    }

    .op-form-insights-toolbar-copy {
        min-width: 0;
    }

    .op-form-insights-toolbar-kicker {
        align-items: center;
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-label);
        gap: 0.42rem;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    .op-form-insights-toolbar-title {
        color: var(--op-text-strong);
        display: block;
        font-size: var(--op-type-size-title-lg);
        font-weight: var(--op-type-weight-label);
        line-height: var(--op-line-compact);
        margin-top: 0.32rem;
    }

    .op-form-insights-selector-label {
        color: var(--op-text-muted);
        display: block;
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-label);
        letter-spacing: 0.02em;
        margin-bottom: 0.35rem;
        text-transform: uppercase;
    }

    @media (max-width: 767.98px) {
        .op-form-insights-toolbar {
            align-items: stretch;
            flex-direction: column;
        }
    }

/* Migrated from AtlasPMS.Web/Opinario/Features/Insights/Components/Shared/InsightsNotFound.razor */
.op-weekly-grid {
        align-items: stretch;
        display: grid;
        gap: 1rem;
        grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.8fr);
        margin-top: 1rem;
    }

    .op-dashboard-card {
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(47, 43, 61, 0.10);
        border-radius: var(--op-radius-control);
        box-shadow: 0 4px 14px rgba(47, 43, 61, 0.08);
    }

    .op-dashboard-kicker {
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: block;
        font-size: var(--op-type-size-eyebrow);
        font-weight: var(--op-type-weight-label);
        letter-spacing: 0.02em;
        margin-bottom: 0.4rem;
        text-transform: uppercase;
    }

    .op-dashboard-icon,
.op-weekly-empty-icon {
        align-items: center;
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.15);
        border-radius: var(--op-radius-control);
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        justify-content: center;
    }

    .op-dashboard-icon {
        flex: 0 0 auto;
        height: var(--op-icon-box-md);
        width: var(--op-icon-box-md);
    }

    .op-weekly-empty-card {
        align-items: center;
        display: grid;
        gap: 1rem;
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding: 1rem;
    }

    .op-weekly-empty-copy {
        min-width: 0;
    }

    .op-weekly-empty-icon {
        height: var(--op-icon-box-xl);
        width: var(--op-icon-box-xl);
    }

    .op-weekly-empty-copy h2 {
        color: var(--op-text-strong);
        font-size: var(--op-type-size-title-lg);
        font-weight: var(--op-type-weight-label);
        margin: 0 0 0.35rem;
    }

    .op-weekly-empty-copy p {
        color: var(--op-text-body);
        font-size: var(--op-type-size-body);
        line-height: var(--op-line-body-relaxed);
        margin: 0;
    }

    .op-weekly-empty-note {
        padding: 1rem;
    }

    .op-weekly-empty-note-panel {
        align-items: center;
        background: var(--op-feature-control-bg);
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.12);
        border-radius: var(--op-radius-control);
        color: var(--op-text-body);
        display: flex;
        gap: 0.85rem;
        height: 100%;
        padding: 0.9rem;
    }

    .op-weekly-empty-note-panel > div {
        min-width: 0;
    }

    .op-weekly-empty-note-panel strong {
        color: var(--op-text-strong);
        display: block;
        font-size: var(--op-type-size-body);
        font-weight: var(--op-type-weight-label);
        line-height: var(--op-line-body);
    }

    .op-weekly-empty-note-panel span:not(.op-dashboard-icon) {
        color: var(--op-text-muted);
        display: block;
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-strong);
        line-height: var(--op-line-body);
        margin-top: 0.35rem;
    }

    .op-dashboard-action {
        align-items: center;
        background: var(--op-dashboard-primary, #0d6efd);
        border: 1px solid var(--op-dashboard-primary, #0d6efd);
        border-radius: var(--op-radius-control);
        box-shadow: 0 8px 18px rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.20);
        color: #ffffff;
        display: inline-flex;
        font-size: var(--op-type-size-meta);
        font-weight: var(--op-type-weight-label);
        gap: 0.5rem;
        padding: 0.68rem 0.9rem;
        transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
        white-space: nowrap;
    }

    .op-dashboard-action:hover {
        background: var(--op-dashboard-primary-hover, #0b5ed7);
        border-color: var(--op-dashboard-primary-hover, #0b5ed7);
        box-shadow: 0 12px 24px rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.26);
        color: #ffffff;
        transform: translateY(-1px);
    }

    @media (max-width: 991.98px) {
        .op-weekly-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 767.98px) {
        .op-weekly-empty-card {
            align-items: center;
            grid-template-columns: auto minmax(0, 1fr);
        }

        .op-dashboard-action {
            grid-column: 1 / -1;
            justify-content: center;
            width: 100%;
        }

        .op-weekly-empty-note-panel {
            align-items: center;
        }
    }

/* Migrated from AtlasPMS.Web/Opinario/Features/Invitations/Components/InvitationGrid.razor */
.op-invites-dashboard {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .op-invites-kpis {
        display: grid;
        gap: .85rem;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .op-invites-kpi,
.op-invites-panel {
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(47, 43, 61, 0.10);
        border-radius: var(--op-radius-control);
        box-shadow: 0 4px 14px rgba(47, 43, 61, 0.08);
    }

    .op-invites-kpi {
        display: flex;
        flex-direction: column;
        min-height: 156px;
        padding: .94rem;
        transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }

    .op-invites-kpi:hover {
        border-color: rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.28);
        box-shadow: 0 8px 18px rgba(47, 43, 61, 0.09);
        transform: translateY(-1px);
    }

    .op-invites-kpi-header {
        align-items: center;
        display: flex;
        gap: .5rem;
        margin-bottom: .85rem;
    }

    .op-invites-kpi-icon {
        align-items: center;
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        border-radius: var(--op-radius-control);
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        flex: 0 0 auto;
        height: var(--op-icon-box-sm);
        justify-content: center;
        width: var(--op-icon-box-sm);
    }

    .op-invites-kpi--unlimited .op-invites-kpi-icon {
        background: var(--op-health-info-soft, #eff6ff);
        color: var(--op-health-info-text, #1e3a8a);
    }

    .op-invites-kpi--answered .op-invites-kpi-icon {
        background: var(--op-health-good-soft, #e8f5e9);
        color: var(--op-health-good-text, #065f46);
    }

    .op-invites-kpi--pending .op-invites-kpi-icon {
        background: var(--op-health-warning-soft, #fff7ed);
        color: var(--op-health-warning-text, #92400e);
    }

    .op-invites-kpi-note {
        color: var(--op-text-muted);
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-label);
    }

    .op-invites-kpi-value {
        color: var(--op-text-strong);
        font-size: var(--op-type-size-metric);
        font-weight: var(--op-type-weight-label);
        line-height: 1;
    }

    .op-invites-kpi-label {
        color: var(--op-text-muted);
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-body);
        line-height: var(--op-line-body);
        margin-bottom: .78rem;
        margin-top: .42rem;
    }

    .op-invites-kpi-trend {
        align-items: center;
        border-top: 1px solid rgba(47, 43, 61, 0.08);
        color: var(--op-text-muted);
        display: flex;
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-label);
        gap: .42rem;
        margin-top: auto;
        padding-top: .78rem;
    }

    .op-invites-kpi--answered .op-invites-kpi-trend {
        color: var(--op-health-good-text, #065f46);
    }

    .op-invites-kpi--pending .op-invites-kpi-trend {
        color: var(--op-health-warning-text, #92400e);
    }

    .op-invites-panel-header {
        align-items: center;
        border-bottom: 1px solid rgba(47, 43, 61, 0.08);
        display: flex;
        gap: .9rem;
        justify-content: space-between;
        padding: 1rem;
    }

    .op-invites-count {
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.15);
        border-radius: var(--op-radius-pill);
        color: var(--op-dashboard-primary-text, #0d6efd);
        flex: 0 0 auto;
        font-size: var(--op-type-size-eyebrow);
        font-weight: var(--op-type-weight-label);
        padding: .3rem .58rem;
    }

    .op-invites-filter-grid {
        display: grid;
        gap: .68rem;
        grid-template-columns: minmax(230px, 1.4fr) repeat(3, minmax(145px, 1fr));
        padding: 1rem;
    }

    .op-invites-field {
        min-width: 0;
    }

    .op-invites-control i {
        color: #94a3b8;
        font-size: var(--op-type-size-label);
    }

    .op-invites-filter-footer {
        align-items: center;
        border-top: 1px solid rgba(47, 43, 61, 0.08);
        display: flex;
        justify-content: flex-end;
        padding: .68rem 1rem;
    }

    .op-invites-clear,
.op-invite-action-button,
.op-invites-page-button {
        align-items: center;
        background: #fff;
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.22);
        border-radius: var(--op-radius-control);
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-label);
        gap: .4rem;
        justify-content: center;
        min-height: var(--op-control-height-sm);
        padding: .5rem .64rem;
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }

    .op-invites-clear:hover,
.op-invite-action-button:hover,
.op-invites-page-button:hover:not(:disabled) {
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        border-color: rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.38);
        color: var(--op-dashboard-primary-text, #0d6efd);
        transform: translateY(-1px);
    }

    .op-invites-clear:disabled,
.op-invites-page-button:disabled {
        cursor: not-allowed;
        opacity: .48;
    }

    .op-invites-list {
        display: grid;
        gap: .62rem;
        padding: 1rem;
    }

    .op-invite-card {
        background: #fff;
        border: 1px solid rgba(47, 43, 61, 0.09);
        border-radius: var(--op-radius-control);
        display: grid;
        gap: .85rem;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: .85rem;
        transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }

    .op-invite-card:hover {
        border-color: rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.26);
        box-shadow: 0 7px 16px rgba(47, 43, 61, 0.08);
        transform: translateY(-1px);
    }

    .op-invite-card-main,
.op-invite-code-line,
.op-invite-card-meta,
.op-invite-card-actions {
        align-items: center;
        display: flex;
    }

    .op-invite-card-main {
        gap: .72rem;
        min-width: 0;
    }

    .op-invite-leading {
        align-items: center;
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.15);
        border-radius: var(--op-radius-control);
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        flex: 0 0 auto;
        height: var(--op-icon-box-lg);
        justify-content: center;
        width: var(--op-icon-box-lg);
    }

    .op-invite-card-content {
        min-width: 0;
    }

    .op-invite-code-line {
        flex-wrap: wrap;
        gap: .42rem;
    }

    .op-invite-code {
        color: var(--op-text-strong);
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        font-size: var(--op-type-size-title-sm);
        font-weight: var(--op-type-weight-label);
        overflow-wrap: anywhere;
    }

    .op-invite-summary {
        color: var(--op-text-muted);
        font-size: var(--op-type-size-body);
        line-height: var(--op-line-body);
        margin-top: .22rem;
    }

    .op-invite-card-meta {
        flex-wrap: wrap;
        gap: .46rem .76rem;
        grid-column: 1 / -1;
    }

    .op-invite-card-meta span {
        align-items: center;
        color: var(--op-text-muted);
        display: inline-flex;
        font-size: var(--op-type-size-meta);
        font-weight: var(--op-type-weight-body-strong);
        gap: .32rem;
        white-space: nowrap;
    }

    .op-invite-card-meta i {
        color: #94a3b8;
    }

    .op-invite-card-actions {
        flex-wrap: wrap;
        gap: .42rem;
        justify-content: flex-end;
    }

    .op-invite-action-button--danger {
        color: #dc2626;
    }

    .op-invite-action-button--danger:hover {
        background: #fff7f7;
        border-color: #fecaca;
        color: #b91c1c;
    }

    .op-invite-chip {
        border-radius: var(--op-radius-pill);
        display: inline-flex;
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-label);
        padding: .22rem .48rem;
    }

    .op-invite-chip--answered {
        background: #ecfdf3;
        color: #15803d;
    }

    .op-invite-chip--pending {
        background: #fff7ed;
        color: #c2410c;
    }

    .op-invite-chip--unlimited {
        background: #eff6ff;
        color: #0969da;
    }

    .op-invites-message {
        align-items: center;
        background: var(--op-feature-control-bg);
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.10);
        border-radius: var(--op-radius-control);
        color: var(--op-text-muted);
        display: flex;
        flex-direction: column;
        gap: .54rem;
        justify-content: center;
        min-height: 230px;
        padding: 1.5rem;
        text-align: center;
    }

    .op-invites-message-icon {
        align-items: center;
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.15);
        border-radius: var(--op-radius-control);
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        height: var(--op-icon-box-xl);
        justify-content: center;
        width: var(--op-icon-box-xl);
    }

    .op-invites-message strong {
        color: var(--op-text-strong);
        font-size: var(--op-type-size-title);
    }

    .op-invites-message span {
        font-size: var(--op-type-size-body);
    }

    .op-invites-pager {
        align-items: center;
        border-top: 1px solid rgba(47, 43, 61, 0.08);
        display: flex;
        gap: .62rem;
        justify-content: space-between;
        padding: .72rem 1rem;
    }

    .op-invites-page-status {
        color: #64748b;
        font-size: var(--op-type-size-body-sm);
        font-weight: var(--op-type-weight-body-strong);
    }

    .op-invites-page-actions {
        display: flex;
        gap: .38rem;
    }

    .op-invite-qr {
        text-align: center;
    }

    .op-invite-qr-image {
        background: #fff;
        border: 1px solid #e4e8f0;
        border-radius: var(--op-radius-control);
        max-width: 250px;
        padding: .68rem;
        width: 100%;
    }

    .op-invite-qr-copy {
        color: #64748b;
        font-size: var(--op-type-size-body);
        margin: .78rem auto 0;
        max-width: 330px;
    }

    @media (max-width: 991.98px) {
        .op-invites-kpis,
.op-invites-filter-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 767.98px) {
        .op-invite-card {
            grid-template-columns: minmax(0, 1fr);
        }

        .op-invite-card-actions {
            justify-content: flex-start;
        }
    }

    @media (max-width: 575.98px) {
        .op-invites-filter-grid {
            grid-template-columns: minmax(0, 1fr);
        }

        .op-invites-panel-header,
.op-invites-pager {
            align-items: flex-start;
            flex-direction: column;
        }

        .op-invite-action-button {
            flex: 1 1 calc(50% - .3rem);
        }

        .op-invites-page-actions {
            width: 100%;
        }

        .op-invites-page-button {
            flex: 1 1 0;
        }
    }

/* Migrated from AtlasPMS.Web/Opinario/Features/Invitations/Components/InvitationPanelReady.razor */
.op-invites-ready {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .op-invites-ready-bar {
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(47, 43, 61, 0.10);
        border-radius: var(--op-radius-control);
        box-shadow: 0 4px 14px rgba(47, 43, 61, 0.08);
    }

    .op-invites-ready-bar {
        align-items: center;
        display: flex;
        gap: 1rem;
        justify-content: space-between;
        padding: 1.1rem;
    }

    .op-invites-ready-heading {
        align-items: center;
        display: flex;
        gap: 0.78rem;
        min-width: 0;
    }

    .op-invites-ready-icon {
        align-items: center;
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.15);
        border-radius: var(--op-radius-control);
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        flex: 0 0 auto;
        justify-content: center;
    }

    .op-invites-ready-icon {
        height: var(--op-icon-box-lg);
        width: var(--op-icon-box-lg);
    }

    .op-invites-ready-kicker {
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: block;
        font-size: var(--op-type-size-eyebrow);
        font-weight: var(--op-type-weight-label);
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .op-invites-ready-title {
        color: var(--op-text-strong);
        font-size: clamp(1.35rem, 1.2rem + 0.5vw, 1.72rem);
        font-weight: var(--op-type-weight-label);
        line-height: var(--op-line-heading);
        margin: 0.24rem 0 0;
    }

    .op-invites-ready-copy {
        color: var(--op-text-muted);
        font-size: var(--op-type-size-body);
        font-weight: var(--op-type-weight-body);
        line-height: var(--op-line-body);
        margin: 0.34rem 0 0;
    }

    .op-invites-add-button {
        align-items: center;
        background: var(--op-dashboard-primary, #0d6efd);
        border: 1px solid var(--op-dashboard-primary, #0d6efd);
        border-radius: var(--op-radius-control);
        box-shadow: 0 8px 18px rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.20);
        color: #fff;
        display: inline-flex;
        flex: 0 0 auto;
        font-size: var(--op-type-size-caption);
        font-weight: var(--op-type-weight-label);
        gap: 0.45rem;
        min-height: var(--op-control-height-lg);
        padding: 0.62rem 0.78rem;
        transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    }

    .op-invites-add-button:hover {
        background: var(--op-dashboard-primary-hover, #0b5ed7);
        border-color: var(--op-dashboard-primary-hover, #0b5ed7);
        color: #ffffff;
        transform: translateY(-1px);
    }

    @media (max-width: 575.98px) {
        .op-invites-ready-bar {
            align-items: stretch;
            flex-direction: column;
        }

        .op-invites-add-button {
            justify-content: center;
        }
    }

/* Migrated from AtlasPMS.Web/Opinario/Features/Invitations/Components/Modals/InvitationAddModal.razor */
.op-invite-modal-intro {
        align-items: flex-start;
        background: #eff6ff;
        border: 1px solid #dbeafe;
        border-radius: var(--op-radius-control);
        color: #475569;
        display: flex;
        font-size: var(--op-type-size-body);
        gap: .62rem;
        line-height: var(--op-line-body-relaxed);
        margin-bottom: .9rem;
        padding: .76rem;
    }

    .op-invite-modal-intro i {
        color: #0969da;
        margin-top: .18rem;
    }

    .op-invite-modal-option {
        background: #fff;
        border: 1px solid #e4e8f0;
        border-radius: var(--op-radius-control);
        margin-bottom: .68rem;
        padding: .76rem;
    }

    .op-invite-modal-option .form-check {
        margin: 0;
    }

    .op-invite-modal-option .form-check-label {
        color: #1e293b;
        font-size: var(--op-type-size-body-lg);
        font-weight: var(--op-type-weight-label);
    }

    .op-invite-modal-hint {
        color: #64748b;
        font-size: var(--op-type-size-body-sm);
        line-height: var(--op-line-body);
        margin: .28rem 0 0 1.5rem;
    }

    .op-invite-modal-field {
        border-top: 1px solid #edf0f5;
        margin-top: .72rem;
        padding-top: .72rem;
    }

/* Migrated from AtlasPMS.Web/Opinario/Features/Invitations/Components/Modals/InvitationInfoModal.razor */
.op-invite-details-shell {
        display: grid;
        gap: .78rem;
        margin: 0;
        width: 100%;
    }

    .op-invite-details-code {
        background: #111827;
        border-radius: var(--op-radius-control);
        color: #fff;
        margin: 0;
        padding: .9rem;
    }

    .op-invite-details-code-label {
        color: #93c5fd;
        display: block;
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-heading);
        letter-spacing: .05em;
        margin-bottom: .26rem;
        text-transform: uppercase;
    }

    .op-invite-details-code-value {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        font-size: var(--op-type-size-title-md);
        font-weight: var(--op-type-weight-label);
        overflow-wrap: anywhere;
    }

    .op-invite-details-grid {
        display: grid;
        gap: .65rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .op-invite-details-item {
        background: var(--op-feature-control-bg);
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.10);
        border-radius: var(--op-radius-control);
        min-width: 0;
        padding: .72rem .78rem;
    }

    .op-invite-details-item--wide {
        grid-column: 1 / -1;
    }

    .op-invite-details-label {
        color: #64748b;
        display: block;
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-heading);
        letter-spacing: .045em;
        margin-bottom: .24rem;
        text-transform: uppercase;
    }

    .op-invite-details-value {
        color: var(--op-text-strong, #1e293b);
        display: block;
        font-size: var(--op-type-size-control);
        font-weight: var(--op-type-weight-label);
        line-height: var(--op-line-body);
        overflow-wrap: anywhere;
    }

    @media (max-width: 575.98px) {
        .op-invite-details-grid {
            grid-template-columns: minmax(0, 1fr);
        }

        .op-invite-details-item--wide {
            grid-column: auto;
        }
    }

/* Migrated from AtlasPMS.Web/Opinario/Features/Invitations/Components/Pages/InvitationPanelContent.razor */
.op-main-content:has(.op-invitation-content) {
        background: var(--op-dashboard-bg, #f5f8ff);
    }

    .op-invitation-content {
        max-width: 1320px;
    }

/* Migrated from AtlasPMS.Web/Opinario/Features/Metrics/Components/MetricsDashboard.razor */
.op-main-content:has(.op-metrics-dashboard) {
        background: var(--op-dashboard-bg, #f5f8ff);
    }

    .op-metrics-dashboard {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem 0 3rem;
    }

    .op-metrics-card {
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(47, 43, 61, 0.10);
        border-radius: var(--op-radius-control);
        box-shadow: 0 4px 14px rgba(47, 43, 61, 0.08);
    }

    .op-metrics-hero {
        align-items: center;
        display: flex;
        gap: 1rem;
        justify-content: space-between;
        padding: 1.1rem;
    }

    .op-metrics-heading {
        align-items: center;
        display: flex;
        gap: 0.78rem;
        min-width: 0;
    }

    .op-metrics-icon {
        align-items: center;
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.15);
        border-radius: var(--op-radius-control);
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        flex: 0 0 auto;
        height: var(--op-icon-box-lg);
        justify-content: center;
        width: var(--op-icon-box-lg);
    }

    .op-metrics-kicker {
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: block;
        font-size: var(--op-type-size-eyebrow);
        font-weight: var(--op-type-weight-label);
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    .op-metrics-title {
        color: var(--op-text-strong);
        font-size: clamp(1.35rem, 1.2rem + 0.5vw, 1.72rem);
        font-weight: var(--op-type-weight-label);
        line-height: var(--op-line-heading);
        margin: 0.24rem 0 0;
    }

    .op-metrics-copy {
        color: var(--op-text-muted);
        font-size: var(--op-type-size-body);
        font-weight: var(--op-type-weight-body);
        margin: 0.34rem 0 0;
    }

    .op-metrics-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: flex-end;
    }

    .op-metrics-button {
        align-items: center;
        background: #ffffff;
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.22);
        border-radius: var(--op-radius-control);
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        font-size: var(--op-type-size-caption);
        font-weight: var(--op-type-weight-label);
        gap: 0.45rem;
        padding: 0.62rem 0.78rem;
        transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    }

    .op-metrics-button:hover:not(:disabled) {
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        border-color: rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.38);
        color: var(--op-dashboard-primary-text, #0d6efd);
        transform: translateY(-1px);
    }

    .op-metrics-button:disabled {
        color: var(--op-text-muted);
        cursor: not-allowed;
        opacity: 0.58;
    }

    .op-metrics-button--primary {
        background: var(--op-dashboard-primary, #0d6efd);
        border-color: var(--op-dashboard-primary, #0d6efd);
        box-shadow: 0 8px 18px rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.20);
        color: #ffffff;
    }

    .op-metrics-button--primary:hover:not(:disabled) {
        background: var(--op-dashboard-primary-hover, #0b5ed7);
        border-color: var(--op-dashboard-primary-hover, #0b5ed7);
        color: #ffffff;
    }

    .op-metrics-kpi-grid {
        display: grid;
        gap: 0.85rem;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .op-metrics-kpi {
        background: #ffffff;
        border: 1px solid rgba(47, 43, 61, 0.09);
        border-radius: var(--op-radius-control);
        box-shadow: 0 3px 10px rgba(47, 43, 61, 0.05);
        cursor: pointer;
        display: flex;
        flex-direction: column;
        min-height: 176px;
        padding: 0.94rem;
        text-align: left;
        transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }

    .op-metrics-kpi:hover {
        border-color: rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.28);
        box-shadow: 0 8px 18px rgba(47, 43, 61, 0.09);
        transform: translateY(-1px);
    }

    .op-metrics-kpi-top,
.op-metrics-kpi-trend {
        align-items: center;
        display: flex;
        gap: 0.5rem;
    }

    .op-metrics-kpi-top {
        color: var(--op-text-muted);
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-label);
    }

    .op-metrics-kpi-symbol {
        align-items: center;
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        border-radius: var(--op-radius-control);
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        height: var(--op-icon-box-sm);
        justify-content: center;
        width: var(--op-icon-box-sm);
    }

    .op-metrics-kpi--good .op-metrics-kpi-symbol {
        background: var(--op-health-good-soft, #e8f5e9);
        color: var(--op-health-good-text, #065f46);
    }

    .op-metrics-kpi--bad .op-metrics-kpi-symbol {
        background: var(--op-health-bad-soft, #ffebee);
        color: var(--op-health-bad-text, #991b1b);
    }

    .op-metrics-kpi-value {
        color: var(--op-text-strong);
        display: block;
        font-size: var(--op-type-size-metric);
        font-weight: var(--op-type-weight-label);
        line-height: 1;
        margin-top: 0.9rem;
    }

    .op-metrics-kpi-support {
        color: var(--op-text-muted);
        display: block;
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-body);
        line-height: var(--op-line-body);
        margin-top: 0.42rem;
    }

    .op-metrics-kpi-trend {
        border-top: 1px solid rgba(47, 43, 61, 0.08);
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-label);
        margin-top: auto;
        padding-top: 0.68rem;
    }

    .op-metrics-kpi-trend--good {
        color: var(--op-health-good-text, #065f46);
        text-shadow: 0 0 10px rgba(16, 185, 129, 0.32), 0 0 18px rgba(16, 185, 129, 0.18);
    }

    .op-metrics-kpi-trend--bad {
        color: var(--op-health-bad-text, #991b1b);
        text-shadow: 0 0 10px rgba(239, 68, 68, 0.32), 0 0 18px rgba(239, 68, 68, 0.18);
    }

    .op-metrics-kpi-trend--neutral { color: var(--op-text-muted); }

    .op-metrics-content-grid {
        align-items: stretch;
        display: grid;
        gap: 1rem;
        grid-template-columns: minmax(0, 1.38fr) minmax(310px, 0.82fr);
    }

    .op-metrics-panel {
        padding: 1rem;
    }

    .op-metrics-panel-header {
        align-items: center;
        display: flex;
        gap: 0.7rem;
        justify-content: space-between;
        margin-bottom: 0.9rem;
    }

    .op-metrics-panel > .op-feature-panel-header {
        margin: -1rem -1rem 0.9rem;
    }

    .op-metrics-badge {
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        border-radius: var(--op-radius-pill);
        color: var(--op-dashboard-primary-text, #0d6efd);
        font-size: var(--op-type-size-eyebrow);
        font-weight: var(--op-type-weight-label);
        padding: 0.28rem 0.54rem;
        white-space: nowrap;
    }

    .op-metrics-empty {
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 340px;
        padding: 3rem 1.5rem;
        text-align: center;
    }

    .op-metrics-empty-main {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: 0.9rem;
        max-width: 680px;
    }

    .op-metrics-empty-icon {
        align-items: center;
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.15);
        border-radius: 12px;
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        font-size: var(--op-type-size-title-lg);
        height: var(--op-icon-box-empty);
        justify-content: center;
        width: var(--op-icon-box-empty);
    }

    .op-metrics-empty h2 {
        color: var(--op-text-strong);
        font-size: var(--op-type-size-title-lg);
        font-weight: var(--op-type-weight-label);
        margin: 0.22rem 0 0;
    }

    .op-metrics-empty p {
        color: var(--op-text-body);
        font-size: var(--op-type-size-body);
        line-height: var(--op-line-body-relaxed);
        margin: 0.34rem 0 0;
    }

    .op-metrics-panel-empty {
        align-items: center;
        background: var(--op-feature-control-bg);
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.10);
        border-radius: var(--op-radius-control);
        color: var(--op-text-muted);
        display: flex;
        font-size: var(--op-type-size-body-sm);
        font-weight: var(--op-type-weight-strong);
        gap: 0.55rem;
        line-height: var(--op-line-body);
        padding: 0.85rem;
    }

    .op-sector-list {
        background: var(--op-feature-control-bg);
        border: 1px solid rgba(47, 43, 61, 0.08);
        border-radius: var(--op-radius-control);
        padding: 0.9rem;
    }

    .op-sector-row:last-child {
        margin-bottom: 0;
    }

    .op-grid-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 12px;
        margin-top: 1.25rem;
    }

    @media (max-width: 576px) {
        .op-grid-container {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .op-grid-item {
        background: var(--op-feature-control-bg);
        border: 1px solid rgba(47, 43, 61, 0.08);
        border-radius: var(--op-radius-control);
        padding: 0.72rem;
        text-align: center;
    }

    .op-grid-label {
        display: block;
        font-size: var(--op-type-size-micro);
        font-weight: var(--op-type-weight-strong);
        color: var(--op-text-muted);
        text-transform: uppercase;
        margin-bottom: 2px;
    }

    .op-grid-value {
        font-size: var(--op-type-size-title);
        font-weight: var(--op-type-weight-body);
        color: var(--op-text-strong);
    }

    .op-sector-bottom {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .op-sector-value {
        font-size: var(--op-type-size-title-md);
        font-weight: var(--op-type-weight-body);
        color: var(--op-text-strong);
        white-space: nowrap;
    }

    .op-grid-trend {
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-body);
        margin-top: 2px;
    }

    .op-grid-trend.up {
        color: var(--op-health-good, #10b981);
        text-shadow: 0 0 10px rgba(16, 185, 129, 0.32), 0 0 18px rgba(16, 185, 129, 0.18);
    }

    .op-grid-trend.down {
        color: var(--op-health-bad, #ef4444);
        text-shadow: 0 0 10px rgba(239, 68, 68, 0.32), 0 0 18px rgba(239, 68, 68, 0.18);
    }

    .op-metric-modal-overview {
        align-items: center;
        background: var(--op-feature-control-bg);
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.12);
        border-radius: var(--op-radius-control);
        display: flex;
        gap: 1rem;
        justify-content: space-between;
        padding: 0.94rem;
    }

    .op-metric-modal-overview--good {
        background: rgba(232, 245, 233, 0.48);
        border-color: rgba(16, 185, 129, 0.20);
    }

    .op-metric-modal-overview--bad {
        background: rgba(255, 235, 238, 0.54);
        border-color: rgba(239, 68, 68, 0.20);
    }

    .op-metric-modal-label,
.op-metric-modal-section-title {
        color: var(--op-text-muted);
        display: block;
        font-size: var(--op-type-size-eyebrow);
        font-weight: var(--op-type-weight-label);
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .op-metric-modal-value {
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: block;
        font-size: var(--op-type-size-metric-lg);
        font-weight: var(--op-type-weight-label);
        line-height: 1;
        margin-top: 0.5rem;
    }

    .op-metric-modal-overview--good .op-metric-modal-value {
        color: var(--op-health-good-text, #065f46);
    }

    .op-metric-modal-overview--bad .op-metric-modal-value {
        color: var(--op-health-bad-text, #991b1b);
    }

    .op-metric-modal-volume {
        color: var(--op-text-muted);
        font-size: var(--op-type-size-body-sm);
        font-weight: var(--op-type-weight-strong);
        line-height: var(--op-line-body);
        max-width: 230px;
        text-align: right;
    }

    .op-metric-modal-section {
        margin-top: 1rem;
    }

    .op-metric-modal-section-title {
        margin-bottom: 0.68rem;
    }

    .op-metric-modal-list {
        display: flex;
        flex-direction: column;
        gap: 0.58rem;
    }

    .op-metric-modal-item {
        align-items: center;
        background: #ffffff;
        border: 1px solid rgba(47, 43, 61, 0.09);
        border-radius: var(--op-radius-control);
        display: flex;
        gap: 0.8rem;
        justify-content: space-between;
        padding: 0.76rem;
    }

    .op-metric-modal-item-copy {
        min-width: 0;
    }

    .op-metric-modal-role {
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: block;
        font-size: var(--op-type-size-eyebrow);
        font-weight: var(--op-type-weight-label);
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

    .op-metric-modal-question {
        font-size: var(--op-type-size-body);
        color: var(--op-text-body);
        display: block;
        font-weight: var(--op-type-weight-strong);
        line-height: var(--op-line-body);
        margin-top: 0.24rem;
    }

    .op-metric-modal-score {
        border-radius: var(--op-radius-pill);
        display: inline-flex;
        flex: 0 0 auto;
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-label);
        padding: 0.3rem 0.56rem;
        white-space: nowrap;
    }

    .op-metric-modal-score--good {
        background: var(--op-health-good-soft, #e8f5e9);
        color: var(--op-health-good-text, #065f46);
    }

    .op-metric-modal-score--bad {
        background: var(--op-health-bad-soft, #ffebee);
        color: var(--op-health-bad-text, #991b1b);
    }

    .op-metric-modal-empty {
        background: var(--op-feature-control-bg);
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.10);
        border-radius: var(--op-radius-control);
        color: var(--op-text-muted);
        font-size: var(--op-type-size-body-sm);
        font-weight: var(--op-type-weight-strong);
        line-height: var(--op-line-body);
        padding: 0.82rem;
    }

    .op-feedback-item {
        background: #ffffff;
        border: 1px solid rgba(47, 43, 61, 0.08);
        border-left-width: 3px;
        border-radius: var(--op-radius-control);
        color: var(--op-text-body);
        box-shadow: 0 1px 2px rgba(47, 43, 61, 0.04);
        font-size: var(--op-type-size-body-sm);
        padding: 0.76rem;
    }

    .op-feedback-item p {
        color: var(--op-text-strong);
    }

    .op-feedback-item.positive {
        background: linear-gradient(135deg, #ffffff 0%, var(--op-health-good-soft, #e8f5e9) 160%);
    }

    .op-feedback-item.negative {
        background: linear-gradient(135deg, #ffffff 0%, var(--op-health-bad-soft, #ffebee) 160%);
    }

    .op-feedback-item.neutral {
        background: linear-gradient(135deg, #ffffff 0%, var(--op-health-info-soft, #eff6ff) 160%);
    }

    .nps-hero {
        background: linear-gradient(135deg, var(--op-dashboard-primary-soft, #e7f1ff) 0%, #ffffff 78%);
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.18);
        border-radius: var(--op-radius-control);
        padding: 0.94rem;
    }

    .nps-score {
        color: var(--op-dashboard-primary-text, #0d6efd);
        font-size: var(--op-type-size-metric-xl);
        font-weight: var(--op-type-weight-label);
        line-height: 1;
    }

    .nps-compose-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .nps-compose-card {
        border: 1px solid var(--op-border-soft);
        border-radius: var(--op-radius-control);
        padding: 0.82rem;
        background: #ffffff;
    }

    .nps-compose-card strong {
        display: block;
        font-size: var(--op-type-size-display-sm);
        line-height: var(--op-line-tight);
    }

    .nps-compose-card span {
        color: var(--op-text-muted);
        display: block;
        font-size: var(--op-type-size-eyebrow);
        font-weight: var(--op-type-weight-label);
        text-transform: uppercase;
    }

    .nps-compose-card--promoters {
        background: linear-gradient(135deg, #ffffff 0%, var(--op-health-good-soft, #e8f5e9) 140%);
        color: var(--op-health-good-text, #065f46);
    }

    .nps-compose-card--neutrals {
        background: linear-gradient(135deg, #ffffff 0%, var(--op-health-warning-soft, #fff7ed) 140%);
        color: var(--op-health-warning-text, #92400e);
    }

    .nps-compose-card--detractors {
        background: linear-gradient(135deg, #ffffff 0%, var(--op-health-bad-soft, #ffebee) 140%);
        color: var(--op-health-bad-text, #991b1b);
    }

    .nps-stack {
        display: flex;
        height: 0.65rem;
        overflow: hidden;
        border-radius: var(--op-radius-pill);
        background: var(--op-surface-muted);
        box-shadow: inset 0 0 0 1px var(--op-border-soft);
    }

    .nps-stack-segment {
        min-width: 0;
    }

    .nps-stack-promoters { background: var(--op-health-good, #10b981); }
    .nps-stack-neutrals { background: var(--op-health-warning, #f59e0b); }
    .nps-stack-detractors { background: var(--op-health-bad, #ef4444); }

    @media (max-width: 575.98px) {
        .nps-compose-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 991.98px) {
        .op-metrics-hero {
            align-items: flex-start;
            flex-direction: column;
        }

        .op-metrics-actions {
            justify-content: flex-start;
        }

        .op-metrics-kpi-grid,
.op-metrics-content-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .op-metrics-content-grid {
            grid-template-columns: 1fr;
        }

    }

    @media (max-width: 575.98px) {
        .op-metrics-dashboard {
            padding-top: 1rem;
        }

        .op-metrics-kpi-grid {
            grid-template-columns: 1fr;
        }

        .op-metrics-actions,
.op-metrics-button {
            justify-content: center;
            width: 100%;
        }

        .op-metric-modal-overview,
.op-metric-modal-item {
            align-items: flex-start;
            flex-direction: column;
        }

        .op-metric-modal-volume {
            max-width: none;
            text-align: left;
        }
    }

/* Migrated from AtlasPMS.Web/Opinario/Features/Metrics/Components/MetricsDashboardSkeleton.razor */
.opsk-metrics-dashboard {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem 0 3rem;
    }

    .opsk-metrics-card {
        background: #ffffff;
        border: 1px solid rgba(47, 43, 61, 0.10);
        border-radius: var(--op-radius-control);
        box-shadow: 0 4px 14px rgba(47, 43, 61, 0.08);
    }

    .opsk-metrics-hero {
        align-items: center;
        display: flex;
        gap: 1rem;
        justify-content: space-between;
        padding: 1.1rem;
    }

    .opsk-metrics-kpis {
        display: grid;
        gap: 0.85rem;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .opsk-metrics-kpi {
        min-height: 176px;
        padding: 0.94rem;
    }

    .opsk-metrics-content {
        display: grid;
        gap: 1rem;
        grid-template-columns: minmax(0, 1.38fr) minmax(310px, 0.82fr);
    }

    .opsk-metrics-panel {
        min-height: 420px;
        padding: 1rem;
    }

    @media (max-width: 991.98px) {
        .opsk-metrics-hero {
            align-items: flex-start;
            flex-direction: column;
        }

        .opsk-metrics-kpis {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .opsk-metrics-content {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 575.98px) {
        .opsk-metrics-kpis {
            grid-template-columns: 1fr;
        }
    }

/* Migrated from AtlasPMS.Web/Opinario/Features/Metrics/Components/MetricsHistoryContent.razor */
.op-main-content:has(.op-history-page) {
        background: var(--op-dashboard-bg, #f5f8ff);
    }

    .history-container {
        background: transparent;
        padding: 1.5rem 0 3rem;
    }

    .op-history-page {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .op-history-card {
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(47, 43, 61, 0.10);
        border-radius: var(--op-radius-control);
        box-shadow: 0 4px 14px rgba(47, 43, 61, 0.08);
    }

    .op-history-hero {
        align-items: center;
        display: flex;
        gap: 1rem;
        justify-content: space-between;
        padding: 1.1rem;
    }

    .op-history-heading,
.op-history-panel-heading {
        align-items: center;
        display: flex;
        gap: 0.78rem;
        min-width: 0;
    }

    .op-history-icon {
        align-items: center;
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.15);
        border-radius: var(--op-radius-control);
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        flex: 0 0 auto;
        height: var(--op-icon-box-lg);
        justify-content: center;
        width: var(--op-icon-box-lg);
    }

    .op-history-kicker {
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: block;
        font-size: var(--op-type-size-eyebrow);
        font-weight: var(--op-type-weight-label);
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    .op-history-title {
        color: var(--op-text-strong);
        font-size: clamp(1.35rem, 1.2rem + 0.5vw, 1.72rem);
        font-weight: var(--op-type-weight-label);
        line-height: var(--op-line-heading);
        margin: 0.24rem 0 0;
    }

    .op-history-copy {
        color: var(--op-text-muted);
        font-size: var(--op-type-size-body);
        font-weight: var(--op-type-weight-body);
        margin: 0.34rem 0 0;
    }

    .op-history-button {
        align-items: center;
        background: #ffffff;
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.22);
        border-radius: var(--op-radius-control);
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        font-size: var(--op-type-size-caption);
        font-weight: var(--op-type-weight-label);
        gap: 0.45rem;
        padding: 0.62rem 0.78rem;
        transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    }

    .op-history-button:hover {
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        border-color: rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.38);
        color: var(--op-dashboard-primary-text, #0d6efd);
        transform: translateY(-1px);
    }

    .op-history-panel {
        padding: 1rem;
    }

    .op-history-panel-header {
        align-items: center;
        display: flex;
        gap: 0.75rem;
        justify-content: space-between;
        margin-bottom: 0.9rem;
    }

    .op-history-panel-title {
        color: var(--op-text-strong);
        font-size: var(--op-type-size-title);
        font-weight: var(--op-type-weight-label);
        margin: 0;
    }

    .op-history-panel-subtitle {
        color: var(--op-text-muted);
        display: block;
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-strong);
        margin-top: 0.12rem;
    }

    .op-history-badge {
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        border-radius: var(--op-radius-pill);
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        font-size: var(--op-type-size-eyebrow);
        font-weight: var(--op-type-weight-label);
        padding: 0.28rem 0.54rem;
        white-space: nowrap;
    }

    .current-month-card {
        background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.14);
        border-radius: var(--op-radius-control);
        display: grid;
        gap: 1.1rem;
        grid-template-columns: minmax(180px, 0.28fr) minmax(0, 1fr);
        padding: 1rem;
    }

    .current-month-summary {
        border-right: 1px solid rgba(47, 43, 61, 0.09);
        padding-right: 1rem;
    }

    .current-month-label {
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: block;
        font-size: var(--op-type-size-eyebrow);
        font-weight: var(--op-type-weight-label);
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .current-month-name {
        color: var(--op-text-strong);
        font-size: var(--op-type-size-title-lg);
        font-weight: var(--op-type-weight-label);
        margin: 0.42rem 0 0;
    }

    .current-month-copy {
        color: var(--op-text-muted);
        display: block;
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-strong);
        margin-top: 0.24rem;
    }

    .timeline-list {
        display: flex;
        flex-direction: column;
        gap: 0.68rem;
    }

    .timeline-item {
        align-items: center;
        background: #ffffff;
        border: 1px solid rgba(47, 43, 61, 0.09);
        border-radius: var(--op-radius-control);
        display: grid;
        gap: 1rem;
        grid-template-columns: 160px minmax(0, 1fr) auto;
        padding: 0.86rem;
        transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }

    .timeline-item:hover {
        border-color: rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.24);
        box-shadow: 0 6px 14px rgba(47, 43, 61, 0.07);
        transform: translateY(-1px);
    }

    .month-label {
        color: var(--op-text-strong);
        font-size: var(--op-type-size-control);
        font-weight: var(--op-type-weight-label);
    }

    .month-sublabel {
        color: var(--op-text-muted);
        font-size: var(--op-type-size-eyebrow);
        font-weight: var(--op-type-weight-medium);
        margin-top: 0.16rem;
    }

    .kpi-bar-grid {
        display: grid;
        gap: 0.88rem;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .kpi-bar-item {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
    }

    .kpi-bar-label {
        color: var(--op-text-muted);
        font-size: var(--op-type-size-micro);
        font-weight: var(--op-type-weight-label);
        text-transform: uppercase;
    }

    .kpi-bar-value {
        color: var(--op-text-strong);
        font-size: var(--op-type-size-caption);
        font-weight: var(--op-type-weight-label);
    }

    .kpi-progress-bg {
        background: rgba(47, 43, 61, 0.12);
        border-radius: var(--op-radius-pill);
        box-shadow: inset 0 0 0 1px rgba(47, 43, 61, 0.04);
        height: 6px;
        overflow: hidden;
    }

    .kpi-progress-fill {
        border-radius: var(--op-radius-pill);
        height: 100%;
        transition: width 1s ease;
    }

    .bg-nps { background: #7E4EE5; }
    .bg-response { background: var(--op-health-info, #0ea5e9); }
    .bg-satisfaction { background: var(--op-health-good, #10b981); }
    .bg-complaint { background: var(--op-health-bad, #ef4444); }

    .op-history-empty {
        align-items: center;
        background: var(--op-feature-control-bg);
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.10);
        border-radius: var(--op-radius-control);
        color: var(--op-text-muted);
        display: flex;
        font-size: var(--op-type-size-body-sm);
        font-weight: var(--op-type-weight-strong);
        gap: 0.55rem;
        line-height: var(--op-line-body);
        padding: 0.85rem;
    }

    .op-history-modal-overview {
        align-items: center;
        background: linear-gradient(135deg, var(--op-dashboard-primary-soft, #e7f1ff) 0%, #ffffff 88%);
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.16);
        border-radius: var(--op-radius-control);
        display: flex;
        gap: 1rem;
        justify-content: space-between;
        padding: 0.94rem;
    }

    .op-history-modal-label,
.op-history-modal-section-title {
        color: var(--op-text-muted);
        display: block;
        font-size: var(--op-type-size-eyebrow);
        font-weight: var(--op-type-weight-label);
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .op-history-modal-month {
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: block;
        font-size: var(--op-type-size-display-sm);
        font-weight: var(--op-type-weight-label);
        line-height: var(--op-line-tight);
        margin-top: 0.42rem;
    }

    .op-history-modal-volume {
        color: var(--op-text-muted);
        font-size: var(--op-type-size-meta);
        font-weight: var(--op-type-weight-strong);
        line-height: var(--op-line-body);
        max-width: 220px;
        text-align: right;
    }

    .op-history-modal-section {
        margin-top: 1rem;
    }

    .op-history-modal-section-title {
        margin-bottom: 0.68rem;
    }

    .op-history-sector-grid {
        display: grid;
        gap: 0.58rem;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .op-history-sector {
        background: #ffffff;
        border: 1px solid rgba(47, 43, 61, 0.09);
        border-radius: var(--op-radius-control);
        padding: 0.76rem;
    }

    .op-history-sector-top {
        align-items: center;
        display: flex;
        gap: 0.68rem;
        justify-content: space-between;
    }

    .op-history-sector-name {
        color: var(--op-text-body);
        font-size: var(--op-type-size-caption);
        font-weight: var(--op-type-weight-label);
        line-height: var(--op-line-body);
    }

    .op-history-sector-value {
        color: var(--op-dashboard-primary-text, #0d6efd);
        flex: 0 0 auto;
        font-size: var(--op-type-size-meta);
        font-weight: var(--op-type-weight-label);
    }

    .op-history-sector-bar {
        background: rgba(47, 43, 61, 0.10);
        border-radius: var(--op-radius-pill);
        height: 5px;
        margin-top: 0.68rem;
        overflow: hidden;
    }

    .op-history-sector-fill {
        background: var(--op-health-info, #0ea5e9);
        border-radius: var(--op-radius-pill);
        height: 100%;
    }

    .op-history-sector--good .op-history-sector-value { color: var(--op-health-good-text, #065f46); }
    .op-history-sector--good .op-history-sector-fill { background: var(--op-health-good, #10b981); }
    .op-history-sector--bad .op-history-sector-value { color: var(--op-health-bad-text, #991b1b); }
    .op-history-sector--bad .op-history-sector-fill { background: var(--op-health-bad, #ef4444); }

    @media (max-width: 991.98px) {
        .op-history-hero {
            align-items: flex-start;
            flex-direction: column;
        }

        .timeline-item {
            grid-template-columns: 1fr;
        }

        .kpi-bar-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .op-history-sector-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 575.98px) {
        .history-container {
            padding-top: 1rem;
        }

        .current-month-card {
            grid-template-columns: 1fr;
        }

        .current-month-summary {
            border-bottom: 1px solid rgba(47, 43, 61, 0.09);
            border-right: 0;
            padding-bottom: 0.82rem;
            padding-right: 0;
        }

        .op-history-button {
            justify-content: center;
            width: 100%;
        }

        .op-history-modal-overview {
            align-items: flex-start;
            flex-direction: column;
        }

        .op-history-modal-volume {
            max-width: none;
            text-align: left;
        }

        .op-history-sector-grid {
            grid-template-columns: 1fr;
        }
    }

/* Migrated from AtlasPMS.Web/Opinario/Features/Responses/Components/Explorer/ResponseExplorer.razor */
.op-explorer-card {
        background: #ffffff;
        border: 1px solid rgba(47, 43, 61, 0.09);
        border-radius: var(--op-radius-control);
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
        min-height: 250px;
        padding: 0.9rem;
        transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }

    .op-explorer-card:hover {
        border-color: rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.26);
        box-shadow: 0 7px 16px rgba(47, 43, 61, 0.08);
        transform: translateY(-1px);
    }

    .op-explorer-header {
        align-items: flex-start;
        border-bottom: 1px solid rgba(47, 43, 61, 0.08);
        column-gap: 0.78rem;
        display: grid;
        grid-template-columns: var(--op-icon-box-lg) minmax(0, 1fr) auto;
        padding-bottom: 0.74rem;
        row-gap: 0.14rem;
    }

    .op-explorer-avatar {
        align-items: center;
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        border-radius: var(--op-radius-control);
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        flex: 0 0 auto;
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-label);
        height: var(--op-icon-box-lg);
        justify-content: center;
        width: var(--op-icon-box-lg);
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .op-explorer-identity {
        display: grid;
        gap: 0.28rem;
        flex: 1;
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }

    .op-explorer-name {
        align-items: center;
        color: var(--op-text-strong);
        display: flex;
        flex-wrap: wrap;
        font-size: var(--op-type-size-title);
        font-weight: var(--op-type-weight-label);
        gap: 0.34rem;
        line-height: var(--op-line-compact);
        margin: 0;
    }

    .op-explorer-meta {
        align-items: center;
        color: var(--op-text-muted);
        display: flex;
        flex-wrap: wrap;
        font-size: var(--op-type-size-caption);
        font-weight: var(--op-type-weight-strong);
        gap: 0.3rem 0.58rem;
        grid-column: 2;
        grid-row: 2;
        line-height: var(--op-line-body);
    }

    .op-explorer-code {
        align-items: center;
        background: #f2f6fc;
        border: 1px solid rgba(47, 43, 61, 0.08);
        border-radius: 6px;
        color: var(--op-text-body);
        display: inline-flex;
        font-family: monospace;
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-label);
        padding: 0.18rem 0.38rem;
        white-space: nowrap;
    }

    .op-explorer-room {
        background: #f2f6fc;
        border-radius: var(--op-radius-pill);
        color: var(--op-text-body);
        display: inline-flex;
        flex: 0 0 auto;
        font-size: var(--op-type-size-eyebrow);
        font-weight: var(--op-type-weight-label);
        grid-column: 3;
        grid-row: 1;
        padding: 0.3rem 0.58rem;
        white-space: nowrap;
    }

    .op-explorer-date {
        align-items: center;
        display: inline-flex;
        white-space: nowrap;
    }

    .op-explorer-comments {
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: 0.78rem;
        margin-top: 0;
        padding-top: 0.78rem;
    }

    .op-explorer-topic {
        display: grid;
        gap: 0;
        padding: 0;
    }

    .op-explorer-topic + .op-explorer-topic {
        border-top: 1px solid rgba(47, 43, 61, 0.08);
        padding-top: 0.78rem;
    }

    .op-explorer-topic-header {
        align-items: center;
        display: flex;
        gap: 0.72rem;
        justify-content: space-between;
    }

    .op-explorer-topic-title {
        color: var(--op-dashboard-primary-text, #0d6efd);
        font-size: var(--op-type-size-eyebrow);
        font-weight: var(--op-type-weight-label);
        letter-spacing: 0.04em;
        margin: 0;
        text-transform: uppercase;
    }

    .op-explorer-score {
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        border-radius: var(--op-radius-pill);
        color: var(--op-dashboard-primary-text, #0d6efd);
        flex: 0 0 auto;
        font-size: var(--op-type-size-eyebrow);
        font-weight: var(--op-type-weight-label);
        padding: 0.3rem 0.58rem;
        white-space: nowrap;
    }

    .op-explorer-question {
        color: var(--op-text-muted);
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-strong);
        line-height: var(--op-line-body);
        margin: 0.56rem 0 0;
    }

    .op-explorer-comment {
        background: var(--op-feature-control-bg);
        border: 1px solid rgba(13, 110, 253, 0.14);
        border-radius: var(--op-radius-control);
        color: var(--op-text-strong);
        font-size: var(--op-type-size-body-sm);
        font-weight: var(--op-type-weight-body);
        line-height: var(--op-line-body-relaxed);
        margin-top: 0.58rem;
        padding: 0.7rem;
    }

    .op-explorer-audit {
        background: #ffffff;
        border: 1px solid rgba(47, 43, 61, 0.1);
        border-radius: var(--op-radius-control);
        color: inherit;
        cursor: pointer;
        display: block;
        margin-top: 0.9rem;
        padding: 0.9rem;
        text-align: left;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        width: 100%;
    }

    .op-explorer-audit:hover {
        border-color: rgba(13, 110, 253, 0.34);
        box-shadow: 0 4px 12px rgba(13, 110, 253, 0.08);
    }

    .op-explorer-audit-header {
        align-items: center;
        border-bottom: 1px solid rgba(47, 43, 61, 0.08);
        display: flex;
        gap: 0.78rem;
        justify-content: space-between;
        margin-bottom: 0.68rem;
        padding-bottom: 0.68rem;
    }

    .op-explorer-audit-title {
        color: var(--op-text-strong);
        display: block;
        font-size: var(--op-type-size-title);
        font-weight: var(--op-type-weight-label);
        line-height: var(--op-line-body);
    }

    .op-explorer-audit-copy {
        color: var(--op-text-muted);
        display: block;
        font-size: var(--op-type-size-body-sm);
        font-weight: var(--op-type-weight-body);
        line-height: var(--op-line-body);
        margin-top: 0.18rem;
    }

    .op-explorer-audit-action,
.op-explorer-reply {
        align-items: center;
        background: #ffffff;
        border: 1px solid rgba(13, 110, 253, 0.34);
        border-radius: var(--op-radius-control);
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        flex: 0 0 auto;
        font-size: var(--op-type-size-meta);
        font-weight: var(--op-type-weight-label);
        gap: 0.42rem;
        justify-content: center;
        line-height: var(--op-line-title);
        padding: 0.52rem 0.68rem;
        text-decoration: none;
        white-space: nowrap;
    }

    .op-explorer-audit-preview {
        display: grid;
        gap: 0.42rem;
        max-height: 95px;
        overflow: hidden;
        position: relative;
    }

    .op-explorer-audit-preview::after {
        background: linear-gradient(to bottom, transparent, #ffffff);
        bottom: 0;
        content: "";
        height: var(--op-preview-fade-height);
        left: 0;
        pointer-events: none;
        position: absolute;
        width: 100%;
    }

    .op-explorer-audit-item {
        align-items: center;
        background: var(--op-feature-control-bg);
        border: 1px solid rgba(13, 110, 253, 0.12);
        border-radius: var(--op-radius-control);
        display: flex;
        font-size: var(--op-type-size-body-sm);
        gap: 0.72rem;
        justify-content: space-between;
        padding: 0.56rem 0.62rem;
    }

    .op-explorer-audit-item strong {
        color: var(--op-text-strong);
        font-weight: var(--op-type-weight-strong);
    }

    .op-explorer-audit-item span {
        color: var(--op-dashboard-primary-text, #0d6efd);
        flex: 0 0 auto;
        font-weight: var(--op-type-weight-label);
    }

    .op-explorer-footer {
        border-top: 1px solid rgba(47, 43, 61, 0.08);
        display: flex;
        justify-content: flex-end;
        margin-top: 0.82rem;
        padding-top: 0.72rem;
    }

    .op-explorer-reply {
        cursor: pointer;
    }

    .op-explorer-reply:disabled {
        border-color: rgba(47, 43, 61, 0.12);
        color: var(--op-text-muted);
        cursor: not-allowed;
        opacity: 0.72;
    }

    @media (max-width: 575.98px) {
        .op-explorer-header {
            column-gap: 0.58rem;
            row-gap: 0.42rem;
        }

        .op-explorer-avatar {
            grid-row: 1;
        }

        .op-explorer-name {
            align-items: flex-start;
            flex-direction: column;
            gap: 0.18rem;
        }

        .op-explorer-name .vr-star-rating {
            margin-left: 0;
        }

        .op-explorer-meta {
            align-items: center;
            flex-direction: row;
            grid-column: 1 / -1;
            grid-row: 2;
            margin-top: 0.1rem;
        }

        .op-explorer-room {
            align-self: flex-start;
        }

        .op-explorer-audit-header {
            align-items: flex-start;
            flex-direction: column;
        }
    }

/* Migrated from AtlasPMS.Web/Opinario/Features/Responses/Components/Explorer/ResponseStars.razor */
.vr-star-rating {
        color: #fbbf24;
        font-size: var(--op-type-size-label);
        margin-left: 8px;
        white-space: nowrap;
    }

/* Migrated from AtlasPMS.Web/Opinario/Features/Responses/Components/Explorer/ResponseTopicDetails.razor */
.op-response-details-toolbar {
        align-items: center;
        display: flex;
        gap: 0.75rem;
        justify-content: space-between;
        margin-bottom: 0.9rem;
    }

    .op-response-details-heading {
        color: var(--op-text-muted);
        display: block;
        font-size: var(--op-type-size-eyebrow);
        font-weight: var(--op-type-weight-label);
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .op-response-details-export {
        align-items: center;
        background: #ffffff;
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.22);
        border-radius: var(--op-radius-control);
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-label);
        gap: 0.42rem;
        padding: 0.5rem 0.64rem;
    }

    .op-response-details-export:hover {
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        border-color: rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.38);
        color: var(--op-dashboard-primary-text, #0d6efd);
    }

    .op-response-details-list {
        display: flex;
        flex-direction: column;
        gap: 0.72rem;
    }

    .op-response-details-topic {
        background: #ffffff;
        border: 1px solid rgba(47, 43, 61, 0.09);
        border-radius: var(--op-radius-control);
        padding: 0.78rem;
    }

    .op-response-details-topic-header {
        align-items: center;
        display: flex;
        gap: 0.68rem;
        justify-content: space-between;
    }

    .op-response-details-topic-title {
        color: var(--op-dashboard-primary-text, #0d6efd);
        font-size: var(--op-type-size-eyebrow);
        font-weight: var(--op-type-weight-label);
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .op-response-details-score {
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        border-radius: var(--op-radius-pill);
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        flex: 0 0 auto;
        font-size: var(--op-type-size-eyebrow);
        font-weight: var(--op-type-weight-label);
        padding: 0.28rem 0.54rem;
        white-space: nowrap;
    }

    .op-response-details-question {
        margin-top: 0.72rem;
    }

    .op-response-details-question:first-of-type {
        margin-top: 0.64rem;
    }

    .op-response-details-question-label {
        color: var(--op-text-muted);
        display: block;
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-strong);
        line-height: var(--op-line-body);
    }

    .op-response-details-answer {
        background: var(--op-feature-control-bg);
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.10);
        border-radius: var(--op-radius-control);
        color: var(--op-text-strong);
        display: block;
        font-size: var(--op-type-size-body-sm);
        font-weight: var(--op-type-weight-body);
        line-height: var(--op-line-body-relaxed);
        margin-top: 0.38rem;
        padding: 0.64rem;
    }

    .op-response-details-prefix {
        color: var(--op-text-muted);
        font-weight: var(--op-type-weight-label);
        margin-right: 0.2rem;
    }

    .op-response-details-empty {
        background: var(--op-feature-control-bg);
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.10);
        border-radius: var(--op-radius-control);
        color: var(--op-text-muted);
        font-size: var(--op-type-size-body-sm);
        font-weight: var(--op-type-weight-strong);
        line-height: var(--op-line-body);
        padding: 0.82rem;
    }

/* Migrated from AtlasPMS.Web/Opinario/Features/Responses/Components/Form/FormResponsesContent.razor */
.op-main-content:has(.op-responses-page) {
        background: var(--op-dashboard-bg, #f5f8ff);
    }

    .op-responses-page {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem 0 3rem;
    }

    .op-responses-card {
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(47, 43, 61, 0.10);
        border-radius: var(--op-radius-control);
        box-shadow: 0 4px 14px rgba(47, 43, 61, 0.08);
    }

    .op-responses-hero,
.op-response-card-header,
.op-response-card-footer,
.op-responses-pager {
        align-items: center;
        display: flex;
        gap: 0.75rem;
        justify-content: space-between;
    }

    .op-responses-hero {
        padding: 1.1rem;
    }

    .op-responses-heading {
        align-items: center;
        display: flex;
        gap: 0.78rem;
        min-width: 0;
    }

    .op-responses-icon {
        align-items: center;
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.15);
        border-radius: var(--op-radius-control);
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        flex: 0 0 auto;
        height: var(--op-icon-box-lg);
        justify-content: center;
        width: var(--op-icon-box-lg);
    }

    .op-responses-kicker,
.op-response-topic-label {
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: block;
        font-size: var(--op-type-size-eyebrow);
        font-weight: var(--op-type-weight-label);
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .op-responses-title {
        color: var(--op-text-strong);
        font-size: clamp(1.35rem, 1.2rem + 0.5vw, 1.72rem);
        font-weight: var(--op-type-weight-label);
        line-height: var(--op-line-heading);
        margin: 0.24rem 0 0;
    }

    .op-responses-copy {
        color: var(--op-text-muted);
        font-size: var(--op-type-size-body);
        font-weight: var(--op-type-weight-body);
        margin: 0.34rem 0 0;
    }

    .op-responses-volume,
.op-response-room,
.op-response-score {
        border-radius: var(--op-radius-pill);
        display: inline-flex;
        flex: 0 0 auto;
        font-size: var(--op-type-size-eyebrow);
        font-weight: var(--op-type-weight-label);
        padding: 0.3rem 0.58rem;
        white-space: nowrap;
    }

    .op-responses-volume {
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        color: var(--op-dashboard-primary-text, #0d6efd);
    }

    .op-responses-panel {
        container-name: responses-panel;
        container-type: inline-size;
        overflow: hidden;
    }

    .op-responses-list {
        display: grid;
        gap: 0.78rem;
        grid-template-columns: minmax(0, 1fr);
        padding: 1rem;
    }

    .op-response-card {
        background: #ffffff;
        border: 1px solid rgba(47, 43, 61, 0.09);
        border-radius: var(--op-radius-control);
        display: flex;
        flex-direction: column;
        min-height: 250px;
        padding: 0.9rem;
        transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }

    .op-response-card:hover {
        border-color: rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.26);
        box-shadow: 0 7px 16px rgba(47, 43, 61, 0.08);
        transform: translateY(-1px);
    }

    .op-response-card-header {
        align-items: flex-start;
        border-bottom: 1px solid rgba(47, 43, 61, 0.08);
        display: grid;
        column-gap: 0.78rem;
        grid-template-columns: var(--op-icon-box-lg) minmax(0, 1fr) auto;
        padding-bottom: 0.74rem;
        row-gap: 0.14rem;
    }

    .op-response-guest {
        display: contents;
    }

    .op-response-avatar {
        align-items: center;
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        border-radius: var(--op-radius-control);
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        flex: 0 0 auto;
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-label);
        height: var(--op-icon-box-lg);
        justify-content: center;
        width: var(--op-icon-box-lg);
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .op-response-guest-copy {
        display: grid;
        gap: 0.28rem;
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }

    .op-response-name {
        align-items: center;
        color: var(--op-text-strong);
        display: flex;
        flex-wrap: wrap;
        font-size: var(--op-type-size-title);
        font-weight: var(--op-type-weight-label);
        gap: 0.34rem;
        line-height: var(--op-line-compact);
    }

    .op-response-meta {
        align-items: center;
        color: var(--op-text-muted);
        display: flex;
        flex-wrap: wrap;
        font-size: var(--op-type-size-caption);
        font-weight: var(--op-type-weight-strong);
        gap: 0.3rem 0.58rem;
        grid-column: 2;
        grid-row: 2;
        line-height: var(--op-line-body);
    }

    .op-response-invite {
        align-items: center;
        background: #f2f6fc;
        border: 1px solid rgba(47, 43, 61, 0.08);
        border-radius: 6px;
        color: var(--op-text-body);
        display: inline-flex;
        font-family: monospace;
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-label);
        padding: 0.18rem 0.38rem;
        white-space: nowrap;
    }

    .op-response-date {
        align-items: center;
        display: inline-flex;
        white-space: nowrap;
    }

    .op-response-room {
        background: #f2f6fc;
        color: var(--op-text-body);
        grid-column: 3;
        grid-row: 1;
    }

    .op-response-body {
        display: flex;
        flex: 1;
        flex-direction: column;
        padding-top: 0.78rem;
    }

    .op-response-topic-top {
        align-items: center;
        display: flex;
        gap: 0.6rem;
        justify-content: space-between;
    }

    .op-response-score {
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        color: var(--op-dashboard-primary-text, #0d6efd);
    }

    .op-response-question {
        color: var(--op-text-muted);
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-strong);
        line-height: var(--op-line-body);
        margin: 0.56rem 0 0;
    }

    .op-response-comment {
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        background: var(--op-feature-control-bg);
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.10);
        border-radius: var(--op-radius-control);
        color: var(--op-text-strong);
        display: -webkit-box;
        font-size: var(--op-type-size-body-sm);
        font-weight: var(--op-type-weight-body);
        line-height: var(--op-line-body-relaxed);
        margin-top: 0.58rem;
        overflow: hidden;
        padding: 0.7rem;
    }

    .op-response-comment--empty {
        color: var(--op-text-muted);
    }

    .op-response-card-footer {
        border-top: 1px solid rgba(47, 43, 61, 0.08);
        justify-content: flex-end;
        margin-top: 0.82rem;
        padding-top: 0.72rem;
    }

    .op-response-details,
.op-responses-page-button {
        align-items: center;
        background: #ffffff;
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.22);
        border-radius: var(--op-radius-control);
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-label);
        gap: 0.4rem;
        justify-content: center;
        padding: 0.5rem 0.64rem;
        transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    }

    .op-response-details:hover,
.op-responses-page-button:hover:not(:disabled) {
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        border-color: rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.38);
        color: var(--op-dashboard-primary-text, #0d6efd);
        transform: translateY(-1px);
    }

    .op-responses-loading,
.op-responses-error {
        align-items: center;
        background: var(--op-feature-control-bg);
        border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), 0.10);
        border-radius: var(--op-radius-control);
        color: var(--op-text-muted);
        display: flex;
        flex-direction: column;
        font-size: var(--op-type-size-body-sm);
        font-weight: var(--op-type-weight-strong);
        gap: 0.62rem;
        justify-content: center;
        line-height: var(--op-line-body);
        min-height: 230px;
        margin: 1rem;
        padding: 1.5rem;
        text-align: center;
    }

    .op-responses-loading i,
.op-responses-error i {
        color: var(--op-dashboard-primary-text, #0d6efd);
        font-size: var(--op-type-size-title-lg);
    }

    .op-responses-error i {
        color: var(--op-health-bad, #ef4444);
    }

    .op-responses-pager {
        border-top: 1px solid rgba(47, 43, 61, 0.08);
        margin: 0 1rem;
        padding: 0.85rem 0 1rem;
    }

    .op-responses-pager-copy {
        color: var(--op-text-muted);
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-strong);
    }

    .op-responses-pager-actions {
        display: flex;
        gap: 0.36rem;
    }

    .op-responses-page-button {
        height: var(--op-icon-box-md);
        min-width: var(--op-icon-box-md);
        padding: 0.42rem;
    }

    .op-responses-page-button:disabled {
        color: var(--op-text-muted);
        cursor: not-allowed;
        opacity: 0.52;
    }

    @container responses-panel (min-width: 1120px) {
        .op-responses-list {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 575.98px) {
        .op-responses-page {
            padding-top: 1rem;
        }

        .op-response-card-header {
            grid-template-columns: var(--op-icon-box-lg) minmax(0, 1fr) auto;
            column-gap: 0.58rem;
            row-gap: 0.42rem;
        }

        .op-response-avatar {
            grid-row: 1;
        }

        .op-response-name {
            align-items: flex-start;
            flex-direction: column;
            gap: 0.18rem;
        }

        .op-response-name .vr-star-rating {
            margin-left: 0;
        }

        .op-response-meta {
            align-items: center;
            flex-direction: row;
            grid-column: 1 / -1;
            grid-row: 2;
            margin-top: 0.1rem;
        }

        .op-response-room {
            align-self: flex-start;
        }

        .op-responses-hero,
.op-responses-pager {
            align-items: flex-start;
            flex-direction: column;
        }

        .op-responses-pager-actions {
            width: 100%;
        }

        .op-responses-page-button {
            flex: 1;
        }
    }

/* Migrated from AtlasPMS.Web/Opinario/Features/Responses/Components/Form/FormResponsesUnselected.razor */
.op-main-content:has(.op-responses-unselected-page) {
        background: var(--op-dashboard-bg, #f5f8ff);
    }

    .op-responses-unselected-page {
        padding: 1.5rem 0 3rem;
    }

@media (max-width: 767.98px) {
    .op-responses-unselected-page {
        padding-top: 1rem;
    }
}

/* Migrated from AtlasPMS.Web/Opinario/Features/Responses/Components/Pages/ResponseExplorerPageContent.razor */
.op-main-content:has(.op-feedback-detail-page) {
        background: var(--op-dashboard-bg, #f6f7fb);
    }

    .op-feedback-detail-page {
        padding: 1.5rem;
    }

    .op-feedback-detail-shell {
        margin: 0 auto;
        max-width: 1120px;
    }

    .op-feedback-detail-back {
        align-items: center;
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: inline-flex;
        font-size: var(--op-type-size-body-sm);
        font-weight: var(--op-type-weight-label);
        gap: 0.42rem;
        margin-bottom: 0.82rem;
        text-decoration: none;
    }

    .op-feedback-detail-hero,
.op-feedback-detail-panel {
        background: #ffffff;
        border: 1px solid rgba(47, 43, 61, 0.1);
        border-radius: var(--op-radius-control);
        box-shadow: 0 3px 10px rgba(47, 43, 61, 0.05);
    }

    .op-feedback-detail-hero {
        align-items: center;
        display: flex;
        gap: 0.9rem;
        justify-content: space-between;
        padding: 1.08rem;
    }

    .op-feedback-detail-heading {
        align-items: flex-start;
        display: flex;
        gap: 0.78rem;
    }

    .op-feedback-detail-icon {
        align-items: center;
        background: var(--op-dashboard-primary-soft, #e7f1ff);
        border: 1px solid rgba(13, 110, 253, 0.14);
        border-radius: var(--op-radius-control);
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: flex;
        flex: 0 0 auto;
        height: var(--op-icon-box-lg);
        justify-content: center;
        width: var(--op-icon-box-lg);
    }

    .op-feedback-detail-kicker {
        color: var(--op-dashboard-primary-text, #0d6efd);
        display: block;
        font-size: var(--op-type-size-label);
        font-weight: var(--op-type-weight-label);
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .op-feedback-detail-title {
        color: var(--op-text-strong);
        font-size: var(--op-type-size-display-sm);
        font-weight: var(--op-type-weight-label);
        line-height: var(--op-line-compact);
        margin: 0.12rem 0 0;
    }

    .op-feedback-detail-copy {
        color: var(--op-text-muted);
        font-size: var(--op-type-size-body-sm);
        font-weight: var(--op-type-weight-body);
        line-height: var(--op-line-body-relaxed);
        margin: 0.3rem 0 0;
    }

    .op-feedback-detail-export {
        align-items: center;
        background: #ffffff;
        border: 1px solid rgba(13, 110, 253, 0.34);
        border-radius: var(--op-radius-control);
        color: var(--op-dashboard-primary-text, #0d6efd);
        cursor: pointer;
        display: inline-flex;
        flex: 0 0 auto;
        font-size: var(--op-type-size-meta);
        font-weight: var(--op-type-weight-label);
        gap: 0.42rem;
        justify-content: center;
        padding: 0.58rem 0.72rem;
        white-space: nowrap;
    }

    .op-feedback-detail-panel {
        margin-top: 0.9rem;
        overflow: hidden;
    }

    .op-feedback-detail-panel-body {
        padding: 1rem;
    }

    @media (max-width: 575.98px) {
        .op-feedback-detail-page {
            padding: 1rem;
        }

        .op-feedback-detail-hero {
            align-items: flex-start;
            flex-direction: column;
        }

        .op-feedback-detail-title {
            font-size: var(--op-type-size-title-lg);
        }
    }

/* Migrated from AtlasPMS.Web/Opinario/Features/Tasks/Components/TasksContentSkeleton.razor */
.op-tasks-skeleton-page {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding-bottom: 2rem;
    }

    .op-tasks-skeleton-panel,
.op-tasks-skeleton-kpi {
        background: var(--op-feature-card-bg);
        border: 1px solid var(--op-feature-card-border);
        border-radius: var(--op-radius-control);
        box-shadow: var(--op-feature-shadow);
    }

    .op-tasks-skeleton-hero {
        align-items: center;
        display: flex;
        gap: 1rem;
        justify-content: space-between;
        min-height: 128px;
        padding: 1.25rem;
    }

    .op-tasks-skeleton-heading,
.op-tasks-skeleton-panel-heading,
.op-tasks-skeleton-card-main {
        align-items: center;
        display: flex;
        gap: .68rem;
        min-width: 0;
    }

    .op-tasks-skeleton-kpis {
        display: grid;
        gap: .85rem;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .op-tasks-skeleton-kpi {
        display: flex;
        min-height: 156px;
        padding: .94rem;
    }

    .op-tasks-skeleton-panel-header {
        align-items: center;
        border-bottom: 1px solid var(--op-feature-divider);
        display: flex;
        gap: .9rem;
        justify-content: space-between;
        padding: 1rem;
    }

    .op-tasks-skeleton-filter-grid {
        display: grid;
        gap: .68rem;
        grid-template-columns: repeat(3, minmax(170px, 1fr));
        padding: 1rem;
    }

    .op-tasks-skeleton-list {
        display: grid;
        gap: .62rem;
        padding: 1rem;
    }

    .op-tasks-skeleton-card {
        background: #fff;
        border: 1px solid rgba(47, 43, 61, .09);
        border-radius: var(--op-radius-control);
        display: grid;
        gap: .85rem;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: .85rem;
    }

    .op-tasks-skeleton-actions,
.op-tasks-skeleton-meta {
        display: flex;
        flex-wrap: wrap;
        gap: .42rem;
    }

    .op-tasks-skeleton-actions {
        justify-content: flex-end;
    }

    .op-tasks-skeleton-meta {
        gap: .46rem .76rem;
        grid-column: 1 / -1;
    }

    @media (max-width: 991.98px) {
        .op-tasks-skeleton-kpis,
.op-tasks-skeleton-filter-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 767.98px) {
        .op-tasks-skeleton-hero,
.op-tasks-skeleton-card,
.op-tasks-skeleton-panel-header {
            align-items: stretch;
            display: flex;
            flex-direction: column;
        }

        .op-tasks-skeleton-kpis,
.op-tasks-skeleton-filter-grid {
            grid-template-columns: 1fr;
        }

        .op-tasks-skeleton-actions {
            justify-content: stretch;
        }

        .op-tasks-skeleton-actions .opsk-block {
            flex: 1 1 9rem;
        }
    }

/* Opinario support typography pass.
   Keep display text and long narrative summaries untouched; soften helper copy
   while preserving KPI hierarchy and semantic trend colors. */
.op-feature-panel-subtitle,
.op-feature-empty-copy,
.op-tasks .op-tasks-copy,
.op-tasks .op-task-summary,
.op-tasks .op-tasks-ai-picker-head div > span,
.op-tasks .op-task-detail-title p,
.op-tasks .op-task-history-heading span,
.op-audit-hero p,
.op-audit-status-panel p,
.op-metrics-copy,
.op-metrics-empty p,
.op-history-copy,
.op-history-panel-subtitle,
.op-history-empty span,
.op-form-editor-hero p,
.op-form-editor-panel-heading p,
.form-automation-card__subtitle,
.form-automation-option__hint,
.op-form-editor-empty > span:not(.op-form-editor-empty-icon),
.op-form-insights-scope,
.op-form-insights-panel-subtitle,
.op-form-actions-copy,
.op-insight-card-subtitle,
.op-weekly-empty-note-panel span:not(.op-dashboard-icon),
.op-feed-subtitle,
.op-feed-empty p,
.op-feed-detail-copy,
.op-feedback-detail-copy,
.op-responses-copy,
.op-responses-pager-copy,
.op-response-details-question-label,
.op-explorer-audit-copy,
.op-invites-ready-copy,
.op-invite-summary,
.op-invite-qr-copy,
.op-invite-modal-hint {
    color: var(--op-text-muted, #64748b);
    font-weight: 400;
    line-height: var(--op-line-body-relaxed);
}

.op-tasks .op-tasks-kpi-trend,
.op-tasks .op-task-card-meta span,
.op-tasks .op-task-detail-facts span,
.op-tasks .op-tasks-timeline-card-head time,
.op-metric-modal-volume,
.op-metric-modal-empty,
.op-grid-label,
.op-grid-trend,
.op-highlight-stat-label,
.op-highlight-stat-copy,
.op-invites-kpi-trend,
.op-invite-card-meta span,
.op-invite-details-code-label,
.op-invite-details-label,
.op-history-modal-volume,
.op-explorer-meta,
.op-response-meta,
.op-response-details-empty,
.op-response-comment--empty {
    color: var(--op-text-muted, #64748b);
    font-weight: 500;
}

.op-metrics-kpi-top,
.op-tasks .op-tasks-kpi-note,
.op-invites-kpi-note {
    color: var(--op-text-strong, #172033);
    font-family: var(--op-font-family-sans);
    font-size: var(--op-type-size-label);
    font-weight: var(--op-type-weight-body-strong);
    letter-spacing: 0;
    line-height: var(--op-line-compact);
    text-transform: none;
}

.op-metrics-kpi,
.op-tasks .op-tasks-kpi,
.op-invites-kpi {
    font-family: var(--op-font-family-sans);
}

.op-tasks .op-tasks-kpi-value,
.op-tasks .op-task-title {
    color: var(--op-text-strong, #172033);
    font-family: var(--op-font-family-sans);
}

.op-tasks .op-tasks-kpi-label,
.op-metrics-kpi-support,
.op-invites-kpi-label {
    color: var(--op-text-muted, #64748b);
    font-weight: 400;
}

.op-tasks .op-feature-kpi-grid,
.op-invites-dashboard .op-feature-kpi-grid,
.op-metrics-dashboard .op-feature-kpi-grid {
    display: grid;
    gap: .85rem;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}

.op-tasks .op-feature-kpi,
.op-invites-dashboard .op-feature-kpi,
.op-metrics-dashboard .op-feature-kpi {
    background: var(--op-feature-card-bg);
    border: 1px solid var(--op-feature-card-border);
    border-radius: var(--op-radius-control);
    box-shadow: var(--op-feature-shadow);
    display: flex;
    flex-direction: column;
    font-family: var(--op-font-family-sans);
    min-height: 156px;
    padding: .94rem;
    text-align: left;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.op-tasks .op-feature-kpi:hover,
.op-invites-dashboard .op-feature-kpi:hover,
.op-metrics-dashboard .op-feature-kpi:hover {
    border-color: rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .28);
    box-shadow: var(--op-feature-hover-shadow);
    transform: translateY(-1px);
}

.op-tasks .op-feature-kpi-header,
.op-invites-dashboard .op-feature-kpi-header,
.op-metrics-dashboard .op-feature-kpi-header {
    align-items: center;
    display: flex;
    gap: .5rem;
    margin-bottom: .85rem;
}

.op-tasks .op-feature-kpi-icon,
.op-invites-dashboard .op-feature-kpi-icon,
.op-metrics-dashboard .op-feature-kpi-icon {
    align-items: center;
    background: var(--op-dashboard-primary-soft, #e7f1ff);
    border: 1px solid rgba(var(--op-dashboard-primary-rgb, 13, 110, 253), .15);
    border-radius: var(--op-radius-control);
    color: var(--op-dashboard-primary-text, #0d6efd);
    display: inline-flex;
    flex: 0 0 auto;
    height: var(--op-icon-box-sm);
    justify-content: center;
    width: var(--op-icon-box-sm);
}

.op-tasks .op-tasks-kpi--open .op-feature-kpi-icon,
.op-invites-dashboard .op-invites-kpi--unlimited .op-feature-kpi-icon {
    background: var(--op-health-info-soft, #eff6ff);
    color: var(--op-health-info-text, #1e3a8a);
}

.op-tasks .op-tasks-kpi--progress .op-feature-kpi-icon,
.op-invites-dashboard .op-invites-kpi--pending .op-feature-kpi-icon {
    background: var(--op-health-warning-soft, #fff7ed);
    color: var(--op-health-warning-text, #92400e);
}

.op-tasks .op-tasks-kpi--closed .op-feature-kpi-icon,
.op-invites-dashboard .op-invites-kpi--answered .op-feature-kpi-icon,
.op-metrics-dashboard .op-metrics-kpi--good .op-feature-kpi-icon {
    background: var(--op-health-good-soft, #e8f5e9);
    color: var(--op-health-good-text, #065f46);
}

.op-metrics-dashboard .op-metrics-kpi--bad .op-feature-kpi-icon {
    background: var(--op-health-bad-soft, #ffebee);
    color: var(--op-health-bad-text, #991b1b);
}

.op-tasks .op-feature-kpi-title,
.op-invites-dashboard .op-feature-kpi-title,
.op-metrics-dashboard .op-feature-kpi-title {
    color: var(--op-text-strong, #172033);
    display: block;
    flex: 1 1 auto;
    font-family: var(--op-font-family-sans);
    font-size: var(--op-type-size-label);
    font-weight: var(--op-type-weight-body-strong);
    letter-spacing: 0;
    line-height: var(--op-line-compact);
    min-width: 0;
    overflow-wrap: anywhere;
    text-transform: none;
}

.op-tasks .op-feature-kpi-value,
.op-invites-dashboard .op-feature-kpi-value,
.op-metrics-dashboard .op-feature-kpi-value {
    color: var(--op-text-strong, #172033);
    display: block;
    font-family: var(--op-font-family-sans);
    font-size: var(--op-type-size-metric);
    font-weight: var(--op-type-weight-label);
    line-height: 1;
}

.op-tasks .op-feature-kpi-label,
.op-invites-dashboard .op-feature-kpi-label,
.op-metrics-dashboard .op-feature-kpi-label {
    color: var(--op-text-muted, #64748b);
    display: block;
    font-size: var(--op-type-size-label);
    font-weight: 400;
    line-height: var(--op-line-body);
    margin-bottom: .78rem;
    margin-top: .42rem;
}

.op-tasks .op-feature-kpi-trend,
.op-invites-dashboard .op-feature-kpi-trend,
.op-metrics-dashboard .op-feature-kpi-trend {
    align-items: center;
    border-top: 1px solid var(--op-feature-divider);
    color: var(--op-text-muted, #64748b);
    display: flex;
    font-size: var(--op-type-size-label);
    font-weight: 500;
    gap: .42rem;
    margin-top: auto;
    padding-top: .78rem;
}

.op-feature-kpi-trend--good {
    color: var(--op-health-good-text, #065f46) !important;
}

.op-feature-kpi-trend--bad {
    color: var(--op-health-bad-text, #991b1b) !important;
}

.op-feature-kpi-trend--warning {
    color: var(--op-health-warning-text, #92400e) !important;
}

.op-feature-kpi-trend--neutral {
    color: var(--op-text-muted, #64748b) !important;
}

@media (max-width: 575.98px) {
    .op-tasks .op-feature-kpi-grid,
.op-invites-dashboard .op-feature-kpi-grid,
.op-metrics-dashboard .op-feature-kpi-grid {
        gap: .62rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .op-tasks .op-feature-kpi,
.op-invites-dashboard .op-feature-kpi,
.op-metrics-dashboard .op-feature-kpi {
        min-height: 142px;
        padding: .78rem;
    }

    .op-tasks .op-feature-kpi-header,
.op-invites-dashboard .op-feature-kpi-header,
.op-metrics-dashboard .op-feature-kpi-header {
        align-items: center;
        gap: .42rem;
        margin-bottom: .72rem;
    }

    .op-tasks .op-feature-kpi-value,
.op-invites-dashboard .op-feature-kpi-value,
.op-metrics-dashboard .op-feature-kpi-value {
        font-size: 1.55rem;
    }

    .op-tasks .op-feature-kpi-title,
.op-invites-dashboard .op-feature-kpi-title,
.op-metrics-dashboard .op-feature-kpi-title,
.op-tasks .op-feature-kpi-label,
.op-invites-dashboard .op-feature-kpi-label,
.op-metrics-dashboard .op-feature-kpi-label,
.op-tasks .op-feature-kpi-trend,
.op-invites-dashboard .op-feature-kpi-trend,
.op-metrics-dashboard .op-feature-kpi-trend {
        font-size: var(--op-type-size-micro);
        overflow-wrap: anywhere;
    }
}

@media (max-width: 360px) {
    .op-tasks .op-feature-kpi-grid,
.op-invites-dashboard .op-feature-kpi-grid,
.op-metrics-dashboard .op-feature-kpi-grid {
        grid-template-columns: 1fr;
    }
}

.op-metrics-kpi-trend {
    font-weight: 500;
}

.op-metrics-kpi-trend--good {
    color: var(--op-health-good-text, #065f46);
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.32), 0 0 18px rgba(16, 185, 129, 0.18);
}

.op-metrics-kpi-trend--bad {
    color: var(--op-health-bad-text, #991b1b);
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.32), 0 0 18px rgba(239, 68, 68, 0.18);
}

.op-metrics-kpi-trend--neutral { color: var(--op-text-muted, #64748b); }

.op-tasks .op-tasks-title,
.op-audit-hero h1,
.op-form-editor-hero h1,
.op-feed-detail-title,
.op-feedback-detail-title,
.op-responses-title,
.op-form-insights-title,
.op-highlight-detail-title,
.op-weekly-title,
.op-form-insights-toolbar-title,
.op-history-title,
.op-metrics-title,
.op-feature-empty-title,
.op-metrics-empty h2 {
    color: var(--op-heading-strong, #0f172a);
}

.op-tasks .op-tasks-title {
    font-family: var(--op-font-family-sans);
    font-size: var(--op-type-size-page);
    font-weight: var(--op-type-weight-heading);
    line-height: var(--op-line-tight);
}

.op-form-editor-page,
.op-form-editor-workspace {
    color: var(--op-text-body, #334155);
    font-weight: 400;
}

.op-form-editor-kicker,
.op-form-editor-selector label,
.op-form-editor-field > span {
    color: #334155;
    font-size: var(--op-type-size-label);
    font-weight: var(--op-type-weight-body-strong);
    letter-spacing: 0;
    line-height: var(--op-line-compact);
    text-transform: none;
}

.op-form-editor-kicker {
    color: var(--op-dashboard-primary-text, #0d6efd);
    font-weight: var(--op-type-weight-strong);
}

.op-form-editor-hero h1 {
    font-size: var(--op-type-size-page);
    font-weight: var(--op-type-weight-heading);
    line-height: var(--op-line-tight);
}

.op-form-editor-panel-heading h2,
.form-automation-card__title {
    color: var(--op-text-strong, #172033);
    font-size: var(--op-type-size-title);
    font-weight: var(--op-type-weight-strong);
    line-height: var(--op-line-heading);
}

.op-form-editor-hero p,
.op-form-editor-panel-heading p,
.form-automation-card__subtitle,
.op-form-editor-workspace .form-text,
.form-automation-option__hint,
.op-form-editor-empty > span:not(.op-form-editor-empty-icon),
.op-form-editor-workspace .text-muted:not(i):not(.form-section-card__chevron):not(.form-item-card__chevron),
.op-form-editor-workspace .small {
    color: var(--op-text-muted, #64748b) !important;
    font-size: var(--op-type-size-body-sm);
    font-weight: 400;
    line-height: var(--op-line-body-relaxed);
}

.form-automation-option__label {
    color: var(--op-text-strong, #172033);
    font-size: var(--op-type-size-body);
    font-weight: var(--op-type-weight-body-strong);
    line-height: var(--op-line-compact);
}

.form-item-card__type {
    font-size: var(--op-type-size-label);
    font-weight: var(--op-type-weight-body-strong);
    line-height: var(--op-line-compact);
}

.op-form-editor-action,
.op-form-editor-primary-action,
.form-section-card__action,
.form-section-card__add-button,
.form-item-card__delete,
.form-item-card__body .btn,
.op-form-editor-workspace .btn {
    font-size: var(--op-type-size-label);
    font-weight: var(--op-type-weight-body-strong);
    line-height: var(--op-line-compact);
}

.op-form-editor-primary-action--wide {
    gap: .52rem;
    font-size: var(--op-type-size-body-lg);
    font-weight: var(--op-type-weight-strong);
    min-height: 48px;
    padding: .78rem 1.1rem;
}

.op-form-editor-primary-action--wide i {
    font-size: .98em;
}

.op-task-detail-modal .op-task-detail-title p,
.op-task-detail-modal .op-task-detail-message,
.op-task-history-modal .op-task-detail-message,
.op-task-history-modal .op-tasks-timeline-card p,
.op-tasks-modal-state > span:not(.op-tasks-modal-state-icon) {
    color: var(--op-text-muted, #64748b);
    font-weight: 400;
    line-height: var(--op-line-body-relaxed);
}

.op-task-detail-modal .op-task-detail-title p {
    font-size: var(--op-type-size-body);
    margin-top: .34rem;
}

.op-task-detail-modal .op-task-detail-message,
.op-task-history-modal .op-task-detail-message {
    font-size: var(--op-type-size-body-sm);
}

.op-task-detail-modal .op-task-detail-facts span,
.op-task-history-modal .op-tasks-timeline-headline span {
    color: var(--op-text-muted, #64748b);
    font-size: var(--op-type-size-label);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.op-task-detail-modal .op-task-detail-facts strong {
    font-weight: var(--op-type-weight-body-strong);
}

.op-task-history-modal .op-task-history-heading strong,
.op-task-history-modal .op-tasks-timeline-headline strong,
.op-task-history-modal .op-tasks-timeline-card-head strong,
.op-tasks-modal-state strong {
    font-weight: var(--op-type-weight-strong);
}

.op-task-history-modal .op-tasks-timeline-card-head time {
    color: var(--op-text-muted, #64748b);
    font-size: var(--op-type-size-label);
    font-weight: 500;
}

.op-task-history-modal .op-tasks-timeline-card p {
    color: var(--op-text-body, #334155);
    font-size: var(--op-type-size-body);
}

.op-form-editor-workspace .validation-message,
.op-form-editor-workspace .validation-summary-errors,
.op-form-editor-workspace .text-danger,
.form-item-card__body .validation-message {
    font-size: var(--op-type-size-label);
    font-weight: 500;
    line-height: var(--op-line-body);
}

.op-form-editor-workspace .op-modal-option,
.op-form-editor-workspace .op-modal-option span {
    color: var(--op-text-body, #334155);
    font-size: var(--op-type-size-body-sm);
    font-weight: 500;
    line-height: var(--op-line-compact);
}