/* Own layer on top of the web-style schema of the sender interface.
 *
 * Hier steht nur, was das Schema nicht abdeckt: die Ablagefläche für Dateien,
 * die Dokumentliste und die Zeitleiste des Protokolls. Keine neuen Farben,
 * keine eigenen Variablen - alles über die Token aus tokens.css.
 */

/* Ablagefläche für Dateien */
.upload-zone {
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    padding: var(--space-5);
    text-align: center;
    color: var(--text-soft);
    cursor: pointer;
    margin: var(--space-3) 0;
}

.upload-zone:hover,
.upload-zone:focus-visible,
.upload-zone.dragover {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--text);
}

/* Dokumentliste */
.doc-list {
    list-style: none;
    margin: 0 0 var(--space-3);
    padding: 0;
}

.doc-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border);
}

.doc-name {
    flex: 1 1 12rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.doc-flag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--text-soft);
    white-space: nowrap;
}

/* Link zum Unterschreiben: Feld und Kopierknopf in einer Zeile */
.link-row {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin-bottom: var(--space-3);
}

.link-row .m-input {
    flex: 1 1 auto;
    min-width: 0;
}

/* Signers of a chain, in signing order; the number is the position. */
.signer-list {
    margin: 0 0 var(--space-3);
    padding-left: var(--space-5);
}

.signer-item {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border);
}

.signer-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.signer-name {
    flex: 1 1 12rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.signer-item .link-row {
    margin: var(--space-2) 0 0;
}

.signer-form {
    display: grid;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
}

.signer-form .m-btn {
    justify-self: start;
    margin-top: var(--space-2);
}

/* Aktionen im Drawer */
.m-drawer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-4) 0;
}

/* Protokoll als Zeitleiste */
.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--border);
}

.timeline li {
    padding: var(--space-2) 0 var(--space-2) var(--space-3);
}

.timeline .m-meta {
    display: block;
}

/* Modal für den neuen Vorgang */
dialog {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    padding: var(--space-5);
    max-width: 32rem;
    width: calc(100% - var(--space-6));
}

dialog::backdrop {
    background: rgb(0 0 0 / 45%);
}

.m-dialog-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

/* Angezeigte Daten müssen markierbar bleiben - Links, Pfade, Zeitstempel
   will man kopieren können. */
.selectable {
    user-select: text;
}

/* Menu language and sender firm in the header, same look as the language
   menu on the recipient page. */
.header-choice {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--text-soft);
}

.header-choice select {
    width: auto;
}

/* Sender profile (api/profiles.json): the firm's logo before the app name. */
.profile-logo {
    display: block;
    height: 2rem;
    width: auto;
}

.m-header-title.with-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}