/* Shared salary/report output shell for Module 2 and Module 3. */
.salary-output-page { display: grid; gap: var(--ui-space-4); }
.salary-output-page.ui-shell { width: min(1120px, calc(100% - 28px)); }
.salary-slip-page.ui-shell { width: min(1160px, calc(100% - 28px)); }
.salary-slip-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 14px;
    margin-bottom: var(--ui-space-4);
}
.salary-slip-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-md);
    background: var(--ui-surface);
}
.salary-slip-picker > span {
    color: var(--ui-text-muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.salary-slip-picker a {
    padding: 8px 12px;
    border: 1px solid var(--ui-border-strong, #bfd0ee);
    border-radius: 999px;
    background: #fff;
    color: var(--ui-primary-strong);
    font-weight: 850;
    text-decoration: none;
}
.salary-slip-picker a:hover,
.salary-slip-picker a:focus-visible { border-color: var(--ui-primary); outline: none; }
.salary-slip-picker a.is-active { background: var(--ui-primary); border-color: var(--ui-primary); color: #fff; }
.salary-slip-nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.salary-slip-nav .disabled { opacity: .45; pointer-events: none; }
.salary-dark-card {
    color: #eef5ff;
    background:
        radial-gradient(circle at top left, rgba(65, 126, 255, .18), transparent 34%),
        linear-gradient(180deg, #15181d 0%, #0b1019 100%);
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 28px;
    box-shadow: 0 22px 60px rgba(2, 6, 23, .28);
    overflow: hidden;
}
.salary-dark-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 26px 18px;
    border-bottom: 1px solid rgba(148, 163, 184, .22);
}
.salary-dark-card__header span,
.salary-dark-card__header p { color: #9fb0c9; }
.salary-dark-card__header span { display: block; font-size: 12px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.salary-dark-card__header h1 { margin: 6px 0; color: #fff; font-size: clamp(30px, 5vw, 48px); line-height: 1.02; letter-spacing: -.04em; }
.salary-dark-card__header p { margin: 0; line-height: 1.5; }
.salary-dark-card__header > strong {
    flex: 0 0 auto;
    padding: 8px 12px;
    border-radius: 999px;
    color: #d7ffe2;
    background: rgba(34, 197, 94, .14);
    border: 1px solid rgba(34, 197, 94, .36);
    font-size: 12px;
    letter-spacing: .04em;
}
.salary-dark-card__header > strong.is-draft {
    color: #ffedb5;
    background: rgba(245, 158, 11, .14);
    border-color: rgba(245, 158, 11, .38);
}
.salary-dark-card__footer {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 26px 22px;
    color: #93a4bc;
    font-size: 12px;
}
.salary-template-output {
    margin: 0;
    padding: 20px 22px 24px;
    color: #f8fafc;
    background: #05070c;
    font: 15px/1.52 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-variant-numeric: tabular-nums;
    white-space: pre-wrap;
    overflow-x: auto;
}

body.ui-output-capture-mode { background: #05070c; }
body.ui-output-capture-mode .topbar,
body.ui-output-capture-mode .ui-workspace-header,
body.ui-output-capture-mode .no-capture,
body.ui-output-capture-mode .no-print { display: none !important; }
body.ui-output-capture-mode main.page { padding: 18px 0; }
body.ui-output-capture-mode .salary-output-page.ui-shell { width: min(980px, calc(100% - 24px)); }
body.ui-output-capture-mode .salary-dark-card { box-shadow: none; }

@media (max-width: 760px) {
    .salary-output-page.ui-shell,
    .salary-slip-page.ui-shell { width: min(100% - 16px, 1160px); }
    .salary-slip-toolbar { grid-template-columns: 1fr; }
    .salary-slip-nav { justify-content: stretch; }
    .salary-slip-nav .button { flex: 1 1 145px; }
    .salary-dark-card { border-radius: 22px; }
    .salary-dark-card__header { flex-direction: column; padding: 20px; }
    .salary-dark-card__footer { flex-direction: column; padding-inline: 20px; }
}

@media print {
    .salary-output-page .ui-page-header,
    .salary-output-page .ui-workspace-header,
    .salary-output-page .no-print,
    .salary-output-page .no-capture,
    .salary-output-page .ui-status-banner.no-print,
    body > .topbar { display: none !important; }
    body,
    main.page,
    .salary-output-page { background: #fff !important; padding: 0 !important; }
    .salary-output-page.ui-shell { width: 100% !important; max-width: none !important; }
    .salary-dark-card { box-shadow: none; border-radius: 0; break-inside: avoid; }
    .salary-slip-card { max-width: 900px; margin: 0 auto; }
}

/* HF97.11B.1 — shared capture viewport controls for Module 2 + Module 3. */
.salary-slip-capture-control{
    display:flex;
    align-items:flex-end;
    gap:8px;
    padding:6px 8px;
    border:1px solid var(--ui-border);
    border-radius:12px;
    background:var(--ui-surface);
}
.salary-slip-capture-control>label,
.salary-slip-capture-custom label{display:grid;gap:3px;color:var(--ui-text-muted);font-size:11px;font-weight:850}
.salary-slip-capture-control select,
.salary-slip-capture-custom input{
    min-height:34px;
    padding:6px 8px;
    border:1px solid var(--ui-border-strong,#bfd0ee);
    border-radius:8px;
    background:#fff;
    color:var(--ui-text);
    font:inherit;
}
.salary-slip-capture-custom{display:flex;gap:6px}
.salary-slip-capture-custom[hidden]{display:none!important}
.salary-slip-capture-custom input{width:82px}
body.ui-output-capture-mode .salary-output-page.ui-shell{
    width:min(var(--ui-output-capture-width,980px),calc(100% - 24px));
    max-width:var(--ui-output-capture-width,980px);
}
body.ui-output-capture-mode .salary-slip-render-host{
    width:100%;
    max-width:none;
}
@media (max-width:760px){
    .salary-slip-capture-control{width:100%;align-items:stretch;flex-direction:column}
    .salary-slip-capture-control>label{width:100%}
    .salary-slip-capture-control select{width:100%}
    .salary-slip-capture-custom{width:100%}
    .salary-slip-capture-custom label{flex:1 1 0}
    .salary-slip-capture-custom input{width:100%}
}