/* Kundenportal. Baut auf admin.css auf - dieselben Tokens, Knoepfe,
   Karten und Tabellen, damit Portal und Backend wie eine Anwendung wirken.
   Hier steht nur, was es im Backend nicht gibt: Portalwechsel, Board,
   Detailseite. */

:root {
    /* Spalten des Boards: eine Stufe dunkler als der Seitengrund, damit
       sich die weissen Karten abheben. */
    --column: #ecece8;
}

/* `button { display: inline-flex }` aus admin.css ist staerker als das
   hidden-Attribut - der aktuelle Status stand sonst mit im Menue. */
[hidden] { display: none !important; }

/* --- Portalwechsel oben links ------------------------------------------- */

.topbar .logo img, .portalswitch img { height: 34px; width: auto; display: block; }
.portalswitch { position: relative; flex: none; }
.portalswitch summary {
    list-style: none; display: flex; align-items: center; gap: .5rem; cursor: pointer;
    padding: .3rem .5rem .3rem .35rem; margin-left: -.35rem; border-radius: 8px; border: 1px solid transparent;
    -webkit-tap-highlight-color: transparent;
}
.portalswitch summary::-webkit-details-marker { display: none; }
.portalswitch summary:hover, .portalswitch[open] summary { background: var(--subtle); border-color: var(--line); }
.portalswitch .chevron { color: var(--muted); transition: transform .15s; }
.portalswitch[open] .chevron { transform: rotate(180deg); }
.portalswitch-panel {
    position: absolute; left: -.35rem; top: calc(100% + .4rem); z-index: 40; min-width: 15rem;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(2, 2, 2, .08), 0 2px 6px rgba(2, 2, 2, .05); padding: .4rem;
}
.portalswitch-head {
    display: block; padding: .45rem .75rem .35rem; color: var(--muted);
    font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}
.portalswitch-panel a { display: block; padding: .6rem .75rem; border-radius: 6px; }
.portalswitch-panel a:hover { background: var(--bg); }
.portalswitch-panel a.active { background: var(--bg); box-shadow: inset 3px 0 0 var(--ink); }
.portalswitch-panel img { height: 30px; }

/* --- Board -------------------------------------------------------------- */

main.board-main { max-width: 1440px; }
.sitefooter-inner.board-footer { max-width: 1440px; }

.board-head { display: flex; align-items: center; gap: .75rem 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.board-head h1 { margin: 0 auto 0 0; }
.board-filter { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: 0; }
.board-filter select, .board-filter input[type=search] { width: auto; height: 2.5rem; }
.board-filter input[type=search] { width: 12rem; }
.board-filter .button, .board-filter button { padding-top: .5rem; padding-bottom: .5rem; }

.count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem;
    padding: 0 .4rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
    font-size: .75rem; font-weight: 600; color: var(--muted); letter-spacing: 0; text-transform: none;
}
.count.strong { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Spalten nebeneinander; wird es zu eng, scrollt das Board seitlich statt
   die Karten zu quetschen. */
.board {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(14rem, 1fr);
    gap: 1rem; overflow-x: auto; padding-bottom: .5rem; align-items: start;
}
.board-col {
    background: var(--column); border-radius: var(--radius); padding: .85rem .7rem .7rem;
    min-height: 16rem; outline: 2px dashed transparent; outline-offset: -2px; transition: outline-color .1s;
}
.board-col.drop-target { outline-color: var(--ink); }
.board-col-head {
    display: flex; align-items: center; gap: .5rem; margin: 0 .2rem .75rem;
    font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
}
/* minmax(0, …): Sonst waechst die Karte auf die Breite ihrer laengsten
   Zeile, statt die Leadquelle mit "…" zu kuerzen. */
.board-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
.board-empty { margin: .25rem .2rem; color: var(--muted); font-size: .85rem; }
.board-list:has(.lead-card) + .board-empty { display: none; }
.board-more { display: inline-block; margin: .75rem .2rem 0; font-size: .85rem; color: var(--muted); }
.board-more:hover { color: var(--ink); }

.lead-card {
    position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
    padding: .7rem .8rem .6rem; box-shadow: 0 1px 2px rgba(2, 2, 2, .04);
}
.js .lead-card[draggable="true"] { cursor: grab; }
.lead-card:hover { border-color: var(--line-strong); }
.lead-card.dragging { opacity: .45; }
.lead-card.saving { opacity: .7; }
.lead-card-name {
    display: block; font-weight: 600; text-decoration: none; line-height: 1.3; overflow-wrap: anywhere;
}
.lead-card-name:hover { text-decoration: underline; }
.lead-card-sub { color: var(--muted); font-size: .85rem; margin-top: .1rem; overflow-wrap: anywhere; }
.lead-card-meta {
    display: flex; justify-content: space-between; align-items: center; gap: .5rem;
    margin-top: .5rem; font-size: .8rem; color: var(--muted);
}
.lead-card-meta .source { min-width: 0; }
.lead-card-quelle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-card-meta time { white-space: nowrap; flex: none; }

/* "Status aendern": auf dem Handy immer sichtbar, am Desktop erst beim
   Darueberfahren oder per Tastatur - gezogen wird dort mit der Maus. */
.status-menu { margin-top: .45rem; }
.status-menu summary {
    list-style: none; display: inline-flex; align-items: center; cursor: pointer; user-select: none;
    font-size: .8rem; font-weight: 500; color: var(--muted); padding: .15rem 0;
}
.status-menu summary::-webkit-details-marker { display: none; }
.status-menu summary::after { content: '▾'; margin-left: .3rem; font-size: .7rem; }
.status-menu summary:hover { color: var(--ink); }
.status-menu-panel { display: grid; gap: .35rem; margin: .45rem 0 .15rem; }
.status-menu-panel button { width: 100%; justify-content: flex-start; padding: .45rem .7rem; font-size: .88rem; font-weight: 500; }
@media (hover: hover) and (pointer: fine) {
    .lead-card .status-menu:not([open]) { opacity: 0; transition: opacity .1s; }
    .lead-card:hover .status-menu, .lead-card:focus-within .status-menu { opacity: 1; }
}

.board-tabs { display: none; }

.board-toast {
    position: fixed; left: 0; right: 0; bottom: 1.25rem; z-index: 50;
    width: max-content; max-width: calc(100vw - 2rem); margin: 0 auto; padding: .7rem 1.1rem; border-radius: var(--radius);
    background: var(--ink); color: #fff; font-weight: 500; box-shadow: 0 8px 24px rgba(2, 2, 2, .2);
}
.board-toast:empty { display: none; }
.board-toast.error { background: var(--danger); }

@media (max-width: 760px) {
    /* Ueberschrift und Export in einer Zeile, Filter darunter. */
    .board-filter { order: 3; width: 100%; }
    .board-filter select { flex: 1 1 100%; }
    .board-filter input[type=search] { flex: 1 1 8rem; width: auto; }

    /* Eine Spalte auf einmal, umgeschaltet ueber die Reiter. */
    .js .board-tabs {
        display: flex; gap: .4rem; overflow-x: auto; margin: 0 -1rem .9rem; padding: 0 1rem .2rem;
        scrollbar-width: none;
    }
    .js .board-tabs::-webkit-scrollbar { display: none; }
    .board-tabs button {
        flex: none; border-radius: 999px; padding: .45rem .8rem; font-size: .9rem; font-weight: 600; gap: .45rem;
    }
    .board-tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
    .board-tabs button[aria-selected="true"] .count { background: rgba(255, 255, 255, .18); border-color: transparent; color: #fff; }

    .board { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr; overflow: visible; }
    .js .board-col:not(.aktiv) { display: none; }
    .js .board-col { background: none; padding: 0; min-height: 0; }
    .js .board-col-head { display: none; }
    .lead-card { padding: .85rem .95rem .75rem; }
    .lead-card-name { font-size: 1.05rem; }
    .status-menu summary { font-size: .9rem; padding: .35rem .7rem; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--ink); }
}

/* --- Detailseite -------------------------------------------------------- */

.lead-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.lead-head h1 { margin: 0 0 .2rem; }
.lead-head p { margin: 0; }
.lead-head .badge { margin-top: .45rem; }

.status-bar { display: flex; align-items: center; gap: .75rem 1.25rem; flex-wrap: wrap; padding: .9rem 1.2rem; }
.status-bar-label { font-weight: 600; }
.status-bar-buttons { display: flex; gap: .5rem; flex-wrap: wrap; }
.status-bar-buttons button { padding: .5rem .9rem; }

.contact-actions { margin-bottom: 1.1rem; }
span.button[aria-disabled="true"] { color: var(--muted); border-color: var(--line); background: var(--subtle); cursor: not-allowed; font-weight: 500; }

dl.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .6rem; margin: 0; }
dl.facts > div { background: var(--subtle); border: 1px solid var(--line); border-radius: 8px; padding: .6rem .8rem; min-width: 0; }
dl.facts dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
dl.facts dd { margin: .1rem 0 0; font-weight: 500; overflow-wrap: anywhere; }

textarea.note { min-height: 7rem; }
.note-actions { margin-top: .75rem; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 .9rem 1.25rem; }
.timeline li::before {
    content: ''; position: absolute; left: 0; top: .5rem; width: .5rem; height: .5rem;
    border-radius: 50%; background: var(--line-strong);
}
.timeline li:first-child::before { background: var(--ink); }
.timeline li:not(:last-child)::after {
    content: ''; position: absolute; left: .22rem; top: 1.1rem; bottom: .1rem; width: 1px; background: var(--line);
}
.timeline strong, .timeline .small { display: block; }

.danger-zone h2 { margin-bottom: .5rem; }

@media (max-width: 760px) {
    .lead-head { flex-direction: column; gap: .4rem; }
    .lead-head .badge { margin-top: 0; }
    .status-bar { padding: .9rem 1rem; }
    .status-bar-buttons { width: 100%; }
    .status-bar-buttons button { flex: 1 1 calc(50% - .5rem); }
    .contact-actions .button { flex: 1; }
}

/* --- Einstellungen ------------------------------------------------------ */

/* Name und Adresse nebeneinander, auf dem Handy untereinander; der Knopf
   darunter. */
.inline-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
@media (max-width: 760px) { .inline-fields { grid-template-columns: minmax(0, 1fr); } }
.inline-fields > button { grid-column: 1 / -1; justify-self: start; }

/* Zugaenge: Umbenennen klappt in der Zeile auf, Entfernen daneben. */
td.action form { margin: 0; }
.row-actions { display: flex; gap: .5rem 1.25rem; align-items: flex-start; justify-content: flex-end; flex-wrap: wrap; }
.rename summary { list-style: none; cursor: pointer; color: var(--muted); font-weight: 500; }
.rename summary::-webkit-details-marker { display: none; }
.rename summary:hover, .rename[open] summary { color: var(--ink); }
.rename form { display: flex; gap: .5rem; margin-top: .5rem; }
.rename input { min-width: 12rem; }
.as-cards .row-actions { justify-content: flex-start; }

/* Hinweis im Kopf, solange der eigene Name fehlt. */
.name-missing { display: flex; justify-content: space-between; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; }