/*!
 * Kündigungshilfe – Unterschrift (Pad, Foto-Upload, Unterschriftsseiten)
 * Verwendet ausschließlich die Tokens aus app.css.
 */

/* ---------- Unterschriftenfeld (KHSignaturePad) ---------- */

.kh-sigpad {
    position: relative;
    width: 100%;
    height: 220px;
    background: var(--kh-surface);
    border: 2px dashed var(--kh-border-strong);
    border-radius: var(--kh-radius);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    transition: border-color .15s, box-shadow .15s;
}
.kh-sigpad.is-drawing { border-color: var(--kh-primary); box-shadow: var(--kh-focus); }
.kh-sigpad:not(.is-empty) { border-style: solid; }

.kh-sigpad-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    cursor: crosshair;
    touch-action: none;
}

.kh-sigpad-guide {
    position: absolute;
    left: 6%;
    right: 6%;
    bottom: 26%;
    pointer-events: none;
    color: var(--kh-muted);
}
.kh-sigpad-line {
    display: block;
    border-top: 2px solid var(--kh-border-strong);
}
.kh-sigpad-x {
    position: absolute;
    left: 0;
    top: -1.7rem;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--kh-border-strong);
}
.kh-sigpad-hint {
    display: block;
    text-align: center;
    margin-top: 8px;
    font-size: .88rem;
    transition: opacity .2s;
}
.kh-sigpad:not(.is-empty) .kh-sigpad-hint { opacity: 0; }

/* Unterschrift auf dunklen Themes: Fläche bleibt hell wie Papier */
.kh-sigpad, .kh-sigupload-preview-wrap, .kh-sign-result { color-scheme: light; }

/* ---------- Foto-Upload (KHSignatureUpload) ---------- */

.kh-sigupload { display: grid; gap: 16px; }

.kh-sigupload-pick { display: grid; gap: 14px; }
.kh-sigupload-drop {
    display: grid;
    justify-items: center;
    gap: 6px;
    text-align: center;
    padding: 28px 18px;
    border: 2px dashed var(--kh-border-strong);
    border-radius: var(--kh-radius);
    background: var(--kh-surface-2);
    color: var(--kh-muted);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.kh-sigupload-drop:hover, .kh-sigupload-pick.is-dragover .kh-sigupload-drop {
    border-color: var(--kh-primary);
    background: var(--kh-primary-soft);
}
.kh-sigupload-drop svg { width: 40px; height: 40px; color: var(--kh-primary); }
.kh-sigupload-drop strong { color: var(--kh-text); font-size: 1.02rem; }
.kh-sigupload-drop span { font-size: .9rem; max-width: 420px; }
.kh-sigupload-pick .btn-row .btn { flex: 1 1 180px; }

.kh-sigupload-edit { display: grid; gap: 14px; }
.kh-sigupload-toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
.kh-sigupload-toolbar .btn { min-height: 42px; }
.kh-sigupload-help { margin: 0; font-size: .86rem; color: var(--kh-muted); }

.kh-sigupload-stage {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    border-radius: var(--kh-radius-sm);
    overflow: hidden;
    background: var(--kh-surface-3);
    touch-action: auto;
}
.kh-sigupload-stage.is-cropping { touch-action: none; cursor: crosshair; }
.kh-sigupload-canvas {
    display: block;
    max-width: 100%;
    max-height: 45vh;
    height: auto;
}
.kh-sigupload-crop {
    position: absolute;
    border: 2px solid var(--kh-primary);
    box-shadow: 0 0 0 9999px rgba(10, 22, 34, .45);
    border-radius: 4px;
    pointer-events: none;
}

.kh-sigupload-result { display: grid; gap: 8px; }
.kh-sigupload-result .label { margin: 0; }
.kh-sigupload-preview-wrap {
    background: #fff;
    border: 1px solid var(--kh-border);
    border-radius: var(--kh-radius-sm);
    padding: 12px;
    display: flex;
    justify-content: center;
    min-height: 90px;
}
.kh-sigupload-preview { display: block; max-width: 100%; max-height: 160px; height: auto; }

.kh-sigupload-slider {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    font-size: .85rem;
    color: var(--kh-muted);
}
.kh-sigupload-range {
    width: 100%;
    height: 32px;
    accent-color: var(--kh-primary);
    cursor: pointer;
}

/* ---------- Eigenständige Seiten (reader / Upload) ---------- */

body.kh-sign-page { background: var(--kh-bg); }

.kh-sign-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px var(--kh-gutter);
    background: var(--kh-header-bg);
    border-bottom: 1px solid var(--kh-border);
    font-weight: 750;
    letter-spacing: -.02em;
}
.kh-sign-brand svg { width: 48px; height: 30px; display: block; flex: none; }

.kh-sign-main {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 18px var(--kh-gutter) 32px;
}
.kh-sign-step { display: grid; gap: 16px; animation: kh-fade-in .2s ease-out; }
.kh-sign-title {
    display: flex;
    align-items: center;
    gap: .45em;
    font-size: clamp(1.3rem, 4vw, 1.7rem);
    margin: 0;
}
.kh-sign-title svg { color: var(--kh-primary); width: 1.2em; height: 1.2em; flex: none; }

.kh-sign-letter summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    min-height: 48px;
}
.kh-sign-letter summary::-webkit-details-marker { display: none; }
.kh-sign-letter summary svg { width: 20px; height: 20px; color: var(--kh-primary); flex: none; }
.kh-sign-letter summary .kh-sign-chevron { margin-left: auto; color: var(--kh-muted); transition: transform .2s; }
.kh-sign-letter[open] summary .kh-sign-chevron { transform: rotate(180deg); }

.kh-sign-letter-body {
    padding: 4px 22px 20px;
    font-family: var(--kh-font-letter);
    font-size: .92rem;
    line-height: 1.5;
    border-top: 1px solid var(--kh-border);
    max-height: 45vh;
    overflow: auto;
}
.kh-sign-letter-body p { margin: 12px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.kh-sign-sender { font-size: .75rem; color: var(--kh-muted); text-decoration: underline; }
.kh-sign-date { text-align: right; }
.kh-sign-subject { font-weight: 700; }

.kh-sign-orientation-hint {
    display: none;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 14px;
    border-radius: var(--kh-radius-sm);
    background: var(--kh-info-soft);
    color: var(--kh-primary-strong);
    font-size: .88rem;
}
.kh-sign-orientation-hint svg { width: 18px; height: 18px; flex: none; transform: rotate(90deg); }
@media (orientation: portrait) and (max-width: 700px) {
    .kh-sign-orientation-hint { display: flex; }
}

.kh-sign-pad-wrap { display: grid; gap: 6px; }
.kh-sign-pad { height: clamp(180px, 42vh, 340px); }
@media (orientation: landscape) and (max-height: 520px) {
    .kh-sign-main { padding-top: 10px; }
    .kh-sign-title { font-size: 1.1rem; }
    .kh-sign-pad { height: calc(100dvh - 250px); min-height: 140px; }
}
.kh-sign-name { font-size: .92rem; color: var(--kh-muted); padding-left: 6%; }

.kh-sign-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.kh-sign-actions .btn { min-height: 50px; }
.kh-sign-actions [data-act="save"] { grid-column: 1 / -1; }
@media (min-width: 640px) {
    .kh-sign-actions { grid-template-columns: auto auto 1fr; }
    .kh-sign-actions [data-act="save"] { grid-column: auto; justify-self: end; }
}

.kh-sign-success { text-align: center; justify-items: center; padding-top: 24px; }
.kh-sign-success h1 { margin: 0; }
.kh-sign-success p { color: var(--kh-muted); max-width: 520px; }
.kh-sign-success-icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--kh-success-soft);
    color: var(--kh-success);
}
.kh-sign-success-icon svg { width: 40px; height: 40px; stroke-width: 2.5; }
.kh-sign-result {
    max-width: min(420px, 100%);
    max-height: 140px;
    background: #fff;
    border: 1px solid var(--kh-border);
    border-radius: var(--kh-radius-sm);
    padding: 10px;
}
.kh-sign-result:not([src]) { display: none; }