/* ===== 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 ── */
/* Hinweis: --oo-fs-* Schriftgrößen-Variablen sind in app.css definiert */
: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 {
        vertical-align: super;
    font-size: var(--oo-fs-klein);
    color: #9ca3af;
    background: var(--rz-base-200);
    border-radius: 0.25rem;
    padding: 0.0rem 0.15rem;
}

.artikel-id-badge.klickbar {
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.artikel-id-badge.klickbar:hover {
    color: var(--rz-text-color);
    background: var(--rz-base-300);
}

/* Mobile: Titel + ID-Badge inline fließend, damit ID nach dem letzten Wort steht */
@media (max-width: 575px) {
    .artikel-titel-mit-id {
        display: inline !important;
    }

    .artikel-titel-mit-id .artikel-titel-link,
    .artikel-titel-mit-id .artikel-titel-link .rz-text,
    .artikel-titel-mit-id .artikel-titel-link h3 {
        display: inline !important;
    }

    .artikel-titel-mit-id .artikel-id-badge {
        vertical-align: super;
    }
}

.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: var(--oo-fs-sekundaer);
}

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

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

/* Aktiver Filter – Ring um den Badge */
.filter-aktiv .rz-badge {
    box-shadow: 0 0 5px 0px currentColor;
}

/* Trennpunkt zwischen Badge-Gruppen
.badge-trennpunkt {
    color: #9ca3af;
    font-size: 1rem;
    line-height: 1.5rem;
    padding: 0 0.1rem;
    align-self: center;
    user-select: none;
}

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

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

/* Tag-Badges (Haupt-/Neben-/Kategorie) */
/* .tag-badge-haupt und .tag-badge-neben wurden durch hash-basierte Inline-Styles ersetzt */

.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;
}



/* ── 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) ── */
.status-filter-btn {
    padding: .25rem 0.5rem;
    line-height: 1.25rem;
    min-height: 1.25rem;
}
/* Permanenter linker Border – immer sichtbar (aktiv & inaktiv) */
.btn-border-online {
    border-left: 3px solid var(--oo-status-online) !important;
}
.btn-border-entwurf   { border-left: 3px solid var(--oo-status-entwurf)   !important; }
.btn-border-offline   { border-left: 3px solid var(--oo-status-offline)   !important; }

/* Aktiver Zustand – Hintergrund + Textfarbe */
.btn-status-online {
    background-color: var(--oo-status-online-bg)    !important;
    color:            var(--oo-status-online)        !important;
    border-left:      3px solid var(--oo-status-online)   !important;
}

.btn-status-entwurf {
    background-color: var(--oo-status-entwurf-bg)   !important;
    color:            var(--oo-status-entwurf)       !important;
    border-left:      3px solid var(--oo-status-entwurf)  !important;
}

.btn-status-offline {
    background-color: var(--oo-status-offline-bg)   !important;
    color:            var(--oo-status-offline)       !important;
    border-left:      3px solid 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;
}


/* ── Responsives Panel-Overlay (Details-Metadaten, Edit-Metadaten) ── */
/* Toggle-Button nur auf Mobile sichtbar */
.panel-overlay-toggle {
    display: none !important;
}

@media (max-width: 767px) {
    .panel-overlay-toggle {
        display: inline-flex !important;
    }

    /* Rechte Spalte auf Mobile standardmäßig ausgeblendet */
    .panel-overlay-spalte {
        display: none !important;
    }

    /* Rechte Spalte als Fixed-Overlay einblenden */
    .panel-overlay-spalte--sichtbar {
        display: block !important;
        position: fixed !important;
        inset: 0;
        z-index: 500;
        overflow-y: auto;
        background: white;
        padding: 1rem;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
    }
}


/* ── Pin-Feature ── */

.btn-pin-toggle {
    min-width: auto !important;
    padding: 0.25rem 0.5rem !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    transition: all 0.15s ease;
}

.btn-pin-aktiv {
    background: rgba(55, 65, 81, 0.13) !important;
    color: #1f2937 !important;
}

/* Pin-Buttons in Artikelkarten */
.pin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.15rem;
    border-radius: 4px;
    transition: background 0.15s ease;
    line-height: 1;
    opacity: 0;
}

/* Pin sichtbar bei Hover auf Karte oder wenn aktiv */
.artikel-karte:hover .pin-btn,
.pin-btn--persoenlich,
.pin-btn--global {
    opacity: 1;
}

/* Dreheffekt: aktive Pins um 45° gedreht */
.pin-btn--persoenlich .rzi,
.pin-btn--global .rzi {
    display: inline-block;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.pin-btn--inaktiv .rzi {
    display: inline-block;
    transform: rotate(0deg);
    transition: transform 0.2s ease;
}

.artikel-karte:hover .pin-btn--inaktiv:hover .rzi {
    transform: rotate(45deg);
}

/* Farben */
.pin-btn--inaktiv {
    color: #9ca3af;
}

.pin-btn--inaktiv:hover {
    color: #374151;
    background: rgba(55, 65, 81, 0.08);
}

.pin-btn--persoenlich {
    color: #6b7280;
}

.pin-btn--persoenlich:hover {
    background: rgba(107, 114, 128, 0.12);
}

.pin-btn--global {
    color: #ea580c;
}

.pin-btn--global:hover {
    background: rgba(234, 88, 12, 0.10);
}

/* Mobile: Pin-Buttons immer sichtbar (kein Hover verfügbar) */
@media (hover: none), (max-width: 767px) {
    .pin-btn {
        opacity: 1;
    }

    .pin-btn--inaktiv .rzi {
        transform: rotate(0deg);
    }
}