/* ===== Onesown – Artikel: gemeinsame Variablen & Utilities ===== */
/* Dieses File wird vor allen artikel-*.css eingebunden und enthält:
   - CSS-Variablen für Status- und Tag-Farben
   - Gemeinsame Hilfsklassen (badge-mit-icon, tag-filter-link, …)
   - Status-Badge-, Button- und Card-Border-Klassen                   */


/* ── CSS-Variablen ── */
:root {
    /* Statusfarben – identisch mit linkem Card-Border */
    --oo-status-online:         #16a34a;
    --oo-status-online-bg:      rgba(22,  163,  74, 0.12);
    --oo-status-entwurf:        #d97706;
    --oo-status-entwurf-bg:     rgba(217, 119,   6, 0.12);
    --oo-status-offline:        #dc2626;
    --oo-status-offline-bg:     rgba(220,  38,  38, 0.12);
    --oo-status-privat:         #7c3aed;
    --oo-status-privat-bg:      rgba(124,  58, 237, 0.12);
    --oo-status-ungelesen:      #0284c7;
    --oo-status-ungelesen-bg:   rgba(  2, 132, 199, 0.12);

    /* Tag-Farben */
    --oo-tag-haupt:             #d32f2f;
    --oo-tag-haupt-dark:        #b71c1c;
    --oo-tag-neben:             #1976d2;
    --oo-tag-neben-dark:        #0d47a1;
    --oo-tag-kategorie:         #1976d2;
}


/* ── Geteilte Hilfsklassen ── */

.artikel-karte-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.artikel-klickbereich {
    cursor: pointer;
}

.artikel-titel-link {
    text-decoration: none;
    color: inherit;
    display: inline-block;
    cursor: pointer;
}

.artikel-titel-mit-id {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.5rem;
}

.artikel-id-badge {
    margin-top: -0.22rem;
    font-size: 0.65rem;
    color: #9ca3af;
    background: var(--rz-base-200);
    border-radius: 0.25rem;
    padding: 0.0rem 0.15rem;
}

.artikel-zusammenfassung {
    margin-top: 0.45rem;
}

.artikel-zusammenfassung-link {
    cursor: pointer;
}

.artikel-bearbeiten-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* Badge mit Icon (inline-flex) */
.badge-mit-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

/* Kleine Icons */
.icon-klein {
    font-size: 0.9rem;
}

/* Klickbare Tag-/Filter-Links */
.tag-filter-link {
    text-decoration: none;
    display: inline-flex;
}

.tag-filter-link .rz-badge {
    cursor: pointer;
}

.user-filter-link {
    text-decoration: none;
    display: inline-flex;
}

.user-filter-link .rz-badge {
    cursor: pointer;
}

/* Tag-Badges (Haupt-/Neben-/Kategorie) */
.tag-badge-haupt {
    background-color: var(--oo-tag-haupt)      !important;
    color:            #fff                      !important;
    border:           1px solid var(--oo-tag-haupt-dark) !important;
}

.tag-badge-neben {
    background-color: var(--oo-tag-neben)      !important;
    color:            #fff                      !important;
    border:           1px solid var(--oo-tag-neben-dark) !important;
}

.tag-badge-kategorie {
    background-color: transparent              !important;
    color:            var(--oo-tag-kategorie)  !important;
    border:           1px solid var(--oo-tag-kategorie) !important;
}


/* ── Artikel-Karte: Status-Border (linker Rand) ── */

.artikel-karte--online {
    border-left: 3px solid var(--oo-status-online)    !important;
}

.artikel-karte--entwurf {
    border-left: 3px solid var(--oo-status-entwurf)   !important;
}

.artikel-karte--offline {
    border-left: 3px solid var(--oo-status-offline)   !important;
}

.artikel-karte--privat {
    border-left: 3px solid var(--oo-status-privat)    !important;
}

.artikel-karte--ungelesen {
    border-left: 3px solid var(--oo-status-ungelesen) !important;
}


/* ── Status-Farben: Badges (Flat) ── */

.badge-status-online {
    background-color: var(--oo-status-online-bg)    !important;
    color:            var(--oo-status-online)        !important;
}

.badge-status-entwurf {
    background-color: var(--oo-status-entwurf-bg)   !important;
    color:            var(--oo-status-entwurf)       !important;
}

.badge-status-offline {
    background-color: var(--oo-status-offline-bg)   !important;
    color:            var(--oo-status-offline)       !important;
}

.badge-status-privat {
    background-color: var(--oo-status-privat-bg)    !important;
    color:            var(--oo-status-privat)        !important;
}

.badge-status-ungelesen {
    background-color: var(--oo-status-ungelesen-bg) !important;
    color:            var(--oo-status-ungelesen)     !important;
}

.badge-status-mcp {
    background-color: transparent               !important;
    color:            var(--oo-status-offline)   !important;
    border-color:     var(--oo-status-offline)   !important;
}


/* ── Status-Farben: Buttons (Flat, aktiver Zustand) ── */

.btn-status-online {
    background-color: var(--oo-status-online-bg)    !important;
    color:            var(--oo-status-online)        !important;
}

.btn-status-entwurf {
    background-color: var(--oo-status-entwurf-bg)   !important;
    color:            var(--oo-status-entwurf)       !important;
}

.btn-status-offline {
    background-color: var(--oo-status-offline-bg)   !important;
    color:            var(--oo-status-offline)       !important;
}

.btn-status-privat {
    background-color: var(--oo-status-privat-bg)    !important;
    color:            var(--oo-status-privat)        !important;
}

.btn-status-ungelesen {
    background-color: var(--oo-status-ungelesen-bg) !important;
    color:            var(--oo-status-ungelesen)     !important;
}

/* MCP gesperrt-Button nutzt dieselbe Farbe wie badge-status-mcp (rot/offline) */
.btn-status-mcp {
    background-color: var(--oo-status-offline-bg)   !important;
    color:            var(--oo-status-offline)       !important;
}