/*
 * File: components-list.css
 * Project: ABC Miet-WC Touren-Planer PWA
 *
 * Listenelemente der Hauptansicht:
 *   – .content-delivery (Standard-Listeneintrag, 6.5rem)
 *   – .content-deadline (Termin-Listeneintrag, 4rem)
 *
 * KONSOLIDIERUNG: Die Status-Farbstreifen (deliver, delivered, pickup,
 * free, shutdown, event, clean, exchange, extern, move, highlight)
 * waren in der Vorgängerversion zweimal definiert – einmal pro
 * Listenvariante. Hier werden sie zentral über das Attribut
 * [data-status="<status>"] angewendet, das ListRenderer.js zusätzlich
 * zur bestehenden Klasse setzt.
 *
 * Das Mapping <data-status> → CSS-Variablen erfolgt einmal weiter unten;
 * Komponenten lesen nur noch --status-bg / --status-fg und brauchen
 * pro neuem Status nur noch eine Token-Definition (in tokens.css).
 */

/* ============================================================
   GEMEINSAME BASIS – beide Listentypen
   ============================================================ */
#content div.content-delivery,
#content div.content-deadline {
    position: relative;
    border-bottom: .0625rem solid var(--color-border);
    background-color: var(--color-surface);
    color: var(--color-text);
    transition: background-color var(--transition);
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    overflow: hidden;
}
#content div.content-delivery:first-child,
#content div.content-deadline:first-child {
    border-top: .0625rem solid var(--color-border);
}
#content div.content-delivery a.detailrecord img { width: 2.4rem; height: 2.4rem; }
#content div.content-deadline a.detailrecord img { width: 2rem;   height: 2rem; }

/* Marker-Icons (absolut positioniert) – delivery: rechts oben, deadline: links */
#content div.content-delivery div.marker-abs,
#content div.content-deadline div.marker-abs {
    position: absolute;
    width: 1.4rem;
    height: 1.4rem;
    background-size: 1.4rem;
    background-repeat: no-repeat;
}

/* ============================================================
   LIST ITEM – DELIVERY (Standardliste, 6.5rem hoch)
   Layout: linker Status-Streifen (2.2rem) + draggable-Inhalt + rechte Pfeil-Spalte (2.2rem)
   ============================================================ */
#content div.content-delivery {
    height: var(--list-item-height);
}

#content div.content-delivery div.marker-pickup    { top: 5%; right: 5rem;   background-image: url(../../iconset/pickup.png);    background-size: 90%; }
#content div.content-delivery div.marker-dispenser { top: 5%; right: 3.8rem; background-image: url(../../iconset/dispenser.png); background-size: 90%; }
#content div.content-delivery div.marker-light     { top: 5%; right: 2.6rem; background-image: url(../../iconset/light.png);     background-size: 90%; }
#content div.content-delivery div.marker-heater    { top: 5%; right: 1.4rem; background-image: url(../../iconset/heater.png);    background-size: 90%; }
#content div.content-delivery div.marker-tank      { top: 5%; right: 0.2rem; background-image: url(../../iconset/tank.png);      background-size: 90%; }

#content div.content-delivery div.draggable {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: stretch;
}
#content div.content-delivery div.draggable div { position: relative; }

#content div.content-delivery div.left-delivery {
    flex: 0 0 var(--list-stripe-width);
    width: var(--list-stripe-width);
    height: 100%;
    background-color: var(--color-surface-sunken);
}
#content div.content-delivery div.left-delivery > div {
    /* WICHTIG: explizit content-box. Das globale border-box (base.css)
       würde die calc()-Geometrie der farbigen Status-Streifen brechen –
       border-top/bottom (1.5rem) und border-left/right (.25rem) müssen
       ZUSÄTZLICH zur calc()-Höhe/Breite gerechnet werden. */
    box-sizing: content-box;
    width: calc(100% - .5rem);
    height: calc(100% - 3.8rem) !important;
    padding: .8rem 0 0 !important;
    font-size: 2.8rem;
    font-weight: 300;
    text-align: center;
    color: var(--status-fg, var(--color-text));
    /* Borders bilden zusammen mit background-color den vollflächigen
       Statusstreifen. Ohne explizite border-color würden die border-Shorthands
       auf currentColor (= --status-fg) zurückfallen und einen weißen
       Rahmen über/unter dem Marker erzeugen. */
    border-top:    1.5rem solid;
    border-right:  .25rem solid;
    border-bottom: 1.5rem solid;
    border-left:   .25rem solid;
    border-color:  var(--status-bg, transparent);
}
#content div.content-delivery div.item-delivery {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1rem;
    padding: 0 .3rem;
    box-sizing: border-box;
}
#content div.content-delivery div.item-delivery > div {
    width: 100%;
    padding: .1rem 0;
    overflow: hidden;
}
#content div.content-delivery div.item-delivery > div:first-child {
    padding: var(--space-1);
    display: flex;
    flex-wrap: wrap;
    gap: .15rem;
    overflow: visible;
}
#content div.content-delivery div.right-delivery {
    flex: 0 0 var(--list-stripe-width);
    width: var(--list-stripe-width);
    height: 100%;
    background-color: var(--color-surface-2);
}
#content div.content-delivery div.right-delivery a {
    font-size: 2.2rem;
    padding-top: 2.2rem;
    text-align: center;
    display: block;
}

/* ============================================================
   FAVORITEN-BUTTONS innerhalb der Standardliste
   ============================================================ */
#content div.content-delivery button.flist {
    font-size: 1.5rem;
    padding: .35rem .5rem;
    margin-right: .3rem;
    text-align: center;
    line-height: 1rem;
    background-color: var(--color-surface-sunken);
    border: .0625rem solid var(--color-border-strong);
    color: var(--color-text);
    display: inline-block;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: transform var(--transition), filter var(--transition);
    min-width: 2rem;
}
#content div.content-delivery button.flist:active { transform: scale(.9); }
#content div.content-delivery button.prio {
    font-weight: bold;
    border: .0625rem solid var(--color-danger);
    color: var(--color-text);
}

/* Favoriten – aktive Farben (semantische Tokens) */
#content div.content-delivery button.f-1-active  { border: none;                            background-color: var(--fav-1-bg);  color: var(--fav-1-fg); }
#content div.content-delivery button.f-2-active  { border: .0625rem solid #000;             background-color: var(--fav-2-bg);  color: var(--fav-2-fg); }
#content div.content-delivery button.f-3-active  { border: .0625rem solid #000;             background-color: var(--fav-3-bg);  color: var(--fav-3-fg); }
#content div.content-delivery button.f-4-active  { border: .0625rem solid #000;             background-color: var(--fav-4-bg);  color: var(--fav-4-fg); }
#content div.content-delivery button.f-5-active  { border: .0625rem solid #000;             background-color: var(--fav-5-bg);  color: var(--fav-5-fg); }
#content div.content-delivery button.f-99-active { border: .0625rem solid var(--color-danger); background-color: var(--fav-99-bg); color: var(--fav-99-fg); }

/* ============================================================
   LIST ITEM – DEADLINE (Termin-Liste, 4rem hoch)
   ============================================================ */
#content div.deadline-block {
    border: .2rem solid var(--color-danger);
    border-radius: var(--radius-sm);
    margin: var(--space-1);
    box-shadow: var(--shadow-sm);
}
#content div.content-deadline {
    height: var(--list-item-height-deadline);
}

#content div.content-deadline div.marker-pickup    { top: 5%; left: 17rem;   background-image: url(../../iconset/pickup.png);    background-size: 90%; }
#content div.content-deadline div.marker-dispenser { top: 5%; left: 18.2rem; background-image: url(../../iconset/dispenser.png); background-size: 90%; }
#content div.content-deadline div.marker-light     { top: 5%; left: 19.4rem; background-image: url(../../iconset/light.png);     background-size: 90%; }
#content div.content-deadline div.marker-heater    { top: 5%; left: 20.6rem; background-image: url(../../iconset/heater.png);    background-size: 90%; }
#content div.content-deadline div.marker-tank      { top: 5%; left: 22rem;   background-image: url(../../iconset/tank.png);      background-size: 90%; }

#content div.content-deadline div { position: relative; }
#content div.content-deadline div.left-delivery {
    flex: 0 0 2rem;
    width: 2rem;
    height: 100%;
    background-color: var(--color-surface-sunken);
}
#content div.content-deadline div.left-delivery > div {
    /* Siehe Begründung im content-delivery-Pendant oben. */
    box-sizing: content-box;
    width: 100%;
    height: calc(100% - .8rem) !important;
    padding-top: .8rem;
    font-size: 2.8rem;
    font-weight: 300;
    text-align: center;
    color: var(--status-fg, var(--color-text));
}
#content div.content-deadline div.item-delivery {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1rem;
    padding: 0 var(--space-1);
    box-sizing: border-box;
}
#content div.content-deadline div.item-delivery > div { width: 100%; padding: .05rem 0; }
#content div.content-deadline div.item-delivery div.deadline {
    padding: .15rem 0 !important;
    font-family: var(--font-system);
    letter-spacing: .01em;
}
#content div.content-deadline div.right-delivery {
    flex: 0 0 2.21rem;
    width: 2.21rem;
    height: 100%;
    background-color: var(--color-surface-2);
}
#content div.content-deadline div.right-delivery a {
    font-size: 2.2rem;
    padding-top: .9rem;
    text-align: center;
    display: block;
}

/* ============================================================
   STATUS-FARBSTREIFEN (KONSOLIDIERT)
   Funktioniert für BEIDE Listentypen via gemeinsamem Selektor
   und [data-status]-Attribut. ListRenderer.js setzt dieses
   Attribut zusätzlich zur Klassenbezeichnung.
   ============================================================ */
#content .left-delivery > div[data-status] {
    background-color: var(--status-bg, transparent);
    color:            var(--status-fg, inherit);
    border-color:     var(--status-bg, currentColor);
}

/* Mapping Status → Tokens (einmalig) */
#content .left-delivery > div[data-status='deliver']   { --status-bg: var(--status-deliver-bg);   --status-fg: var(--status-deliver-fg); }
#content .left-delivery > div[data-status='delivered'] { --status-bg: var(--status-delivered-bg); --status-fg: var(--status-delivered-fg); }
#content .left-delivery > div[data-status='pickup']    { --status-bg: var(--status-pickup-bg);    --status-fg: var(--status-pickup-fg); }
#content .left-delivery > div[data-status='free']      { --status-bg: var(--status-free-bg);      --status-fg: var(--status-free-fg); }
#content .left-delivery > div[data-status='shutdown']  { --status-bg: var(--status-shutdown-bg);  --status-fg: var(--status-shutdown-fg); }
#content .left-delivery > div[data-status='event']     { --status-bg: var(--status-event-bg);     --status-fg: var(--status-event-fg); }
#content .left-delivery > div[data-status='clean']     { --status-bg: var(--status-clean-bg);     --status-fg: var(--status-clean-fg); }
#content .left-delivery > div[data-status='exchange']  { --status-bg: var(--status-exchange-bg);  --status-fg: var(--status-exchange-fg); }
#content .left-delivery > div[data-status='extern']    { --status-bg: var(--status-extern-bg);    --status-fg: var(--status-extern-fg); }
#content .left-delivery > div[data-status='move']      { --status-bg: var(--status-move-bg);      --status-fg: var(--status-move-fg); }

/* Highlight: Sonderzustand (blinkender schwarzer Rahmen) */
#content .left-delivery > div.highlight {
    animation: blinkborder-list 1s infinite;
    border-color: #000;
}

/* ============================================================
   BACKWARD COMPAT
   Falls ListRenderer.js (noch) keine data-status setzt, fallen
   diese alten Klassen-Selektoren auf dieselben Tokens zurück.
   Können entfernt werden, sobald data-status flächendeckend gesetzt ist.
   ============================================================ */
#content .left-delivery > div.deliver:not([data-status])   { background-color: var(--status-deliver-bg);   color: var(--status-deliver-fg);   border-color: var(--status-deliver-bg); }
#content .left-delivery > div.delivered:not([data-status]) { background-color: var(--status-delivered-bg); color: var(--status-delivered-fg); border-color: var(--status-delivered-bg); }
#content .left-delivery > div.pickup:not([data-status])    { background-color: var(--status-pickup-bg);    color: var(--status-pickup-fg);    border-color: var(--status-pickup-bg); }
#content .left-delivery > div.free:not([data-status])      { background-color: var(--status-free-bg);      color: var(--status-free-fg);      border-color: var(--status-free-bg); }
#content .left-delivery > div.shutdown:not([data-status])  { background-color: var(--status-shutdown-bg);  color: var(--status-shutdown-fg);  border-color: var(--status-shutdown-bg); }
#content .left-delivery > div.event:not([data-status])     { background-color: var(--status-event-bg);     color: var(--status-event-fg);     border-color: var(--status-event-bg); }
#content .left-delivery > div.clean:not([data-status])     { background-color: var(--status-clean-bg);     color: var(--status-clean-fg);     border-color: var(--status-clean-bg); }
#content .left-delivery > div.exchange:not([data-status])  { background-color: var(--status-exchange-bg);  color: var(--status-exchange-fg);  border-color: var(--status-exchange-bg); }
#content .left-delivery > div.extern:not([data-status])    { background-color: var(--status-extern-bg);    color: var(--status-extern-fg);    border-color: var(--status-extern-bg); }
#content .left-delivery > div.move:not([data-status])      { background-color: var(--status-move-bg);      color: var(--status-move-fg);      border-color: var(--status-move-bg); }

/* ============================================================
   STATIC FALLBACK FÜR REDUCED MOTION
   Highlight bleibt erkennbar (statischer roter Rahmen).
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    #content .left-delivery > div.highlight {
        animation: none;
        border-color: var(--color-danger);
    }
}