/*
 * File: utilities.css
 * Project: ABC Miet-WC Touren-Planer PWA
 *
 * Generische Hilfsklassen ohne Komponentenbezug:
 *   – Icon-Helper (Größen, Filter-Kolorierung)
 *   – Text-Utilities (kürzen, fett, klein, groß)
 *   – Farb-Utilities (.red, .green, .blue)
 *   – Status-Klassen für Footer (online/offline)
 *   – Listenelement-Zustände (closed, progress, ghost, editmode)
 *   – Marker-Bilder + Drag-Handle
 */

/* ============================================================
   ICON HELPERS
   Icons werden über CSS-Filter koloriert – ein einzelnes weißes
   PNG/SVG genügt pro Symbol.
   ============================================================ */
img.iconset {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-top;
    filter: brightness(0) invert(1);
}
img.black { filter: brightness(0) invert(0); }
img.red   { filter: brightness(0) saturate(100%) invert(18%) sepia(67%) saturate(5629%) hue-rotate(355deg) brightness(93%) contrast(97%); }
img.green { filter: brightness(0) saturate(100%) invert(12%) sepia(83%) saturate(5177%) hue-rotate(157deg) brightness(92%) contrast(101%); }

/* Pfeil-Icons in der right-delivery-Spalte folgen dem aktiven Theme:
   im Light-Mode schwarz (auf hellem surface-2), im Dark-Mode weiß
   (auf dunklem surface-2). Andere .iconset.black-Vorkommen – z. B.
   schwarze Icons auf gelben Buttons – bleiben in beiden Themes schwarz.
   Theme-Steuerung erfolgt ausschließlich über data-theme (Button-Toggle). */
:root[data-theme='dark'] #content .right-delivery img.iconset.black { filter: brightness(0) invert(1); }

img.onerem,
img.onetworem,
img.onefiverem { width: 1rem; height: 1.2rem; }
img.threerem   { width: 3rem; height: 3rem;   }

button img.iconset { width: 2rem; height: 2rem; vertical-align: bottom; }

a.detailrecord img.setclosed {
    filter: brightness(0) saturate(100%) invert(65%) sepia(40%) saturate(7156%) hue-rotate(87deg) brightness(99%) contrast(93%);
}
a.detailrecord img.setprogress {
    filter: brightness(0) saturate(100%) invert(63%) sepia(84%) saturate(1152%) hue-rotate(19deg) brightness(100%) contrast(89%);
}

.icon-checkbox { color: #0bbf00; font-size: 1.2rem; }

/* ============================================================
   TEXT UTILITIES
   .short    – einzeilig + Ellipsis (Adressen, Kabinenbezeichnungen)
   .nodata   – zentrierte Leer-Meldung (verwendet von ListRenderer)
   .error    – roter Fehlerbanner mit einheitlichem Padding
   ============================================================ */
.nodata {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--space-5);
    font-size: var(--text-lg);
}
.short {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1rem;
}
.strong   { font-weight: bold; }
.large    { font-size: 1.6rem !important; }
.small    { font-size: var(--text-sm) !important; }
.no-wrap  { white-space: nowrap; }
.font-arial { font-family: var(--font-system) !important; }

.red    { color: var(--color-danger) !important; }
.green  { color: var(--color-primary) !important; }
.blue   { color: var(--color-info) !important; }

div.warning { background-color: var(--color-danger) !important; }

.error {
    padding: .6rem var(--space-3);
    font-size: var(--text-lg);
    background-color: var(--color-danger);
    color: var(--color-text-inv);
    text-align: center;
    width: calc(100% - 1.5rem) !important;
    line-height: 1.3rem;
    border-radius: var(--radius-sm);
}

/* ============================================================
   STATUS: ONLINE / OFFLINE (Footer-Element)
   .offline blinkt rot als visueller Hinweis auf fehlende Serververbindung.
   ============================================================ */
.online {
    background-color: var(--color-primary);
}
.offline {
    background-color: var(--color-danger);
    animation: blink 1s infinite;
    width: 100%;
}

/* ============================================================
   LIST ITEM STATES
   Werden per JavaScript auf Listeneinträge gesetzt:
   .closed   – Auftrag abgeschlossen (grüner Rahmen + heller Hintergrund)
   .progress – Auftrag in Bearbeitung (gelb)
   .ghost    – SortableJS-Platzhalter beim Drag-and-drop
   .editmode – Aktiver Umsortier-Modus (blinkender Rahmen)
   ============================================================ */
.closed { background-color: transparent; }
.closed div.item-delivery {
    background-color: var(--state-closed-bg);
    border: .125rem solid var(--state-closed-bd) !important;
    box-sizing: border-box;
}
.closed > a > ion-icon {
    color: var(--state-closed-icon);
    font-size: 3rem;
    font-weight: bold;
}
.progress {
    background-color: var(--state-progress-bg) !important;
}
.progress > a > ion-icon {
    color: var(--state-progress-icon);
    font-size: 3rem;
    font-weight: bold;
}
.ghost {
    opacity: .45;
    background: var(--state-ghost-bg);
}
.editmode {
    animation: blinkborder 1s infinite;
}

/* ============================================================
   MARKER IMAGES
   .sequence           – Drag-Handle im Editmode
   .marker-new         – Kennzeichnung neuer Kabinen-Datensätze
   .marker-image-white – Helle Drag-Handles für dunkle Statushintergründe
   .marker-image-black – Dunkle Drag-Handles für helle Statushintergründe
   ============================================================ */
.sequence {
    background-image: none !important;
    touch-action: none;
    cursor: grab;
}
.sequence:active {
    cursor: grabbing;
}
.marker-new {
    background-image: url("../../iconset/cabin_new.png");
    background-position: .1rem 0;
    background-size: 1rem;
    background-repeat: no-repeat;
}
.marker-image-white {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='3' y='3.5' width='14' height='2.5' rx='1.25' fill='%23fff' opacity='.88'/%3E%3Crect x='3' y='8.75' width='14' height='2.5' rx='1.25' fill='%23fff' opacity='.88'/%3E%3Crect x='3' y='14' width='14' height='2.5' rx='1.25' fill='%23fff' opacity='.88'/%3E%3C/svg%3E");
}
.marker-image-black {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='3' y='3.5' width='14' height='2.5' rx='1.25' fill='%23222' opacity='.6'/%3E%3Crect x='3' y='8.75' width='14' height='2.5' rx='1.25' fill='%23222' opacity='.6'/%3E%3Crect x='3' y='14' width='14' height='2.5' rx='1.25' fill='%23222' opacity='.6'/%3E%3C/svg%3E");
}

/* Drag-Handle ::before-Layer: legt das SVG-Symbol exakt über den
   oberen farbigen Statusbalken (border-top: 1.5rem) der left-delivery > div. */
#content div.content-delivery div.left-delivery > div.sequence.marker-image-white::before,
#content div.content-delivery div.left-delivery > div.sequence.marker-image-black::before {
    content: '';
    position: absolute;
    top: -1rem;
    left: 0;
    width: 100%;
    height: 1.5rem;
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 1;
}
#content div.content-delivery div.left-delivery > div.sequence.marker-image-white::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='3' y='3.5' width='14' height='2.5' rx='1.25' fill='%23fff' opacity='.88'/%3E%3Crect x='3' y='8.75' width='14' height='2.5' rx='1.25' fill='%23fff' opacity='.88'/%3E%3Crect x='3' y='14' width='14' height='2.5' rx='1.25' fill='%23fff' opacity='.88'/%3E%3C/svg%3E");
}
#content div.content-delivery div.left-delivery > div.sequence.marker-image-black::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='3' y='3.5' width='14' height='2.5' rx='1.25' fill='%23222' opacity='.6'/%3E%3Crect x='3' y='8.75' width='14' height='2.5' rx='1.25' fill='%23222' opacity='.6'/%3E%3Crect x='3' y='14' width='14' height='2.5' rx='1.25' fill='%23222' opacity='.6'/%3E%3C/svg%3E");
}