:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-state,
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-intro,
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-card,
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-detail {
    background: #fff;
    border: 1px solid #d5e0ee;
    border-radius: 12px;
    padding: 16px;
}

:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-state { color: #4d6484; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-error { border-color: #e7b4b4; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-intro h2,
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-card h2,
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-detail h2,
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-low h2,
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-preview-bar h2 {
    margin: 0 0 8px;
    color: #1c2430;
    font-size: 20px;
}
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-intro p { margin: 0; color: #3e4856; line-height: 1.6; }
#satisfactionSurveyPage.essat-employee-view .page-header { display: none; }
#satisfactionSurveyPage .page-header p:empty { display: none; }
#satisfactionSurveyPage:not(.essat-employee-view) .page-header { margin-bottom: 12px; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-layout,
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-stack { display: grid; gap: 16px; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-toolbar,
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-actions,
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-filter-grid,
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-metrics { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-filter-grid,
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-form-grid,
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; align-items: end; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-metric,
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-area,
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-statement,
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-write,
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-cycle {
    border: 1px solid #e6e8ec;
    border-radius: 10px;
    background: #fff;
    padding: 12px;
}
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-metric span,
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-area span { display: block; color: #667085; font-size: 12px; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-metric strong,
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-area strong { display: block; margin-top: 4px; color: #1c2430; font-size: 22px; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-metric small,
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-area small { color: #60758f; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-statement { background: #fff; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-statement.essat-missing { border-color: #b42318; background: #fff7f7; }
#nexahrApp #satisfactionSurveyPage .essat-statement,
.essat-preview-dialog .essat-statement {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin: 0;
    min-width: 0;
    padding: 16px;
}
#nexahrApp #satisfactionSurveyPage .essat-statement legend,
.essat-preview-dialog .essat-statement legend {
    display: block;
    float: left;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    font-weight: 600;
    color: #1c2430;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
}
#nexahrApp #satisfactionSurveyPage .essat-statement .essat-scale,
.essat-preview-dialog .essat-statement .essat-scale { clear: both; width: 100%; margin: 0; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 0;
    padding: 8px;
    border: 1px solid #d5e0ee;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-option:has(input:checked) { border-color: #1769c2; background: #e8f1fb; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-option input { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-option input:focus-visible,
:is(#satisfactionSurveyPage, .essat-preview-dialog) textarea:focus-visible,
:is(#satisfactionSurveyPage, .essat-preview-dialog) select:focus-visible,
:is(#satisfactionSurveyPage, .essat-preview-dialog) input:focus-visible { outline: 2px solid #1769c2; outline-offset: 2px; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-option span { min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-area-block h3,
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-written h2 { margin: 8px 0; color: #1c2430; font-size: 16px; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) textarea { width: 100%; min-height: 88px; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) table { width: 100%; border-collapse: collapse; min-width: 640px; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) th,
:is(#satisfactionSurveyPage, .essat-preview-dialog) td { text-align: left; padding: 8px; border-bottom: 1px solid #e1e8f2; vertical-align: top; white-space: nowrap; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-low ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-low li { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-note { color: #667085; margin: 0; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) { max-width: 100%; overflow-x: hidden; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-form-grid > label,
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-field,
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-filter-grid > label,
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-write > label {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
    margin: 0;
    color: #3e4856;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-form-grid input,
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-form-grid select {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-annual-form { gap: 16px; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-annual-form > h2 { margin: 0 0 2px; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-annual-form .essat-form-grid,
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-quarter-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: end;
}
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-quarter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    justify-self: start;
    width: auto;
    max-width: 100%;
    margin: 0;
}
#nexahrApp #satisfactionSurveyPage .essat-heading-form,
.essat-preview-dialog .essat-heading-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    margin: 0;
    min-width: 0;
}
#nexahrApp #satisfactionSurveyPage .essat-heading-form > .essat-field,
.essat-preview-dialog .essat-heading-form > .essat-field { flex: 1 1 220px; }
#nexahrApp #satisfactionSurveyPage .essat-quarter,
.essat-preview-dialog .essat-quarter {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
}
#nexahrApp #satisfactionSurveyPage .essat-quarter-summary,
.essat-preview-dialog .essat-quarter-summary {
    display: grid;
    gap: 4px;
    min-width: 0;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-form-actions .btn,
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-actions .btn,
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-builder > .btn,
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-stack > .btn {
    width: auto;
    max-width: 100%;
    justify-self: start;
}
.essat-preview-dialog {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(28, 36, 48, .45);
    overflow: hidden;
}
.essat-preview-sheet {
    display: flex;
    flex-direction: column;
    width: min(1100px, 100%);
    max-height: 100%;
    margin: 0;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(16, 24, 40, .22);
}
.essat-preview-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    background: #fff;
    border-bottom: 1px solid #e6e8ec;
}
.essat-preview-bar .btn { flex: 0 0 auto; }
.essat-preview-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 16px;
    overscroll-behavior: contain;
}
.essat-preview-dialog :focus-visible { outline: 2px solid #1f5fa8; outline-offset: 2px; }
html.essat-preview-open,
html.essat-preview-open body { overflow: hidden; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-questionnaire-panel { margin-top: 8px; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-banner { margin: 0; padding: 12px 14px; border-radius: 8px; background: #e7f6ee; color: #146c43; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-cycle { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-cycle.active { border-color: #1769c2; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-questions { display: grid; gap: 8px; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-questions p { margin: 0; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-builder { display: grid; gap: 16px; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-builder-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-builder-row input { flex: 1 1 180px; min-width: 0; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-area-block { display: grid; gap: 16px; min-width: 0; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-area-block h3,
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-written h2 { margin: 0; }
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-written { display: grid; gap: 16px; }
#nexahrApp #satisfactionSurveyPage :is(.essat-field, .essat-form-grid > label, .essat-filter-grid > label) :is(input:not([type=radio]):not([type=checkbox]):not([type=hidden]), select),
.essat-preview-dialog :is(.essat-field, .essat-form-grid > label, .essat-filter-grid > label) :is(input:not([type=radio]):not([type=checkbox]):not([type=hidden]), select),
#nexahrApp #satisfactionSurveyPage .essat-builder-row input,
.essat-preview-dialog .essat-builder-row input,
#nexahrApp #satisfactionSurveyPage .btn,
.essat-preview-dialog .btn {
    box-sizing: border-box;
    height: 42px;
    min-height: 42px;
}
#nexahrApp #satisfactionSurveyPage .btn,
.essat-preview-dialog .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 8px 14px;
    flex: 0 0 auto;
}
:is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-changes { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

@media (max-width: 900px) {
    :is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-annual-form .essat-form-grid,
    :is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-quarter-grid { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
    :is(#satisfactionSurveyPage, .essat-preview-dialog) .essat-scale { grid-template-columns: 1fr; }
    #nexahrApp #satisfactionSurveyPage .essat-heading-form,
    .essat-preview-dialog .essat-heading-form { align-items: stretch; }
    #nexahrApp #satisfactionSurveyPage .essat-heading-form > .essat-field,
    .essat-preview-dialog .essat-heading-form > .essat-field { flex-basis: 100%; }
    :is(#satisfactionSurveyPage, .essat-preview-dialog) .page-header { align-items: stretch; }
}