/* ============================================================================
   RPG CRIMINAL RECORD — Strafakte
   LA MIDNIGHT BRUTALIST THEME
   Author: Rogue RPG BB

   Digitale Strafakte für kriminelle Charaktere.
   Klassen-Prefix: .lam-cr__  (BEM)

   Reihenfolge der Sections folgt der Listenansicht von oben nach unten.
   Timeline / Forms / Profil-Tab folgen in späteren Schritten.
   ============================================================================ */


/* ============================================
   HERO mit Ghost-Wort
   Konsistent mit Places / Crime / Joblist
   ============================================ */

.lam-cr__header {
    position: relative;
    padding: var(--space-2xl) 0;
    margin-bottom: var(--space-xl);
    border-bottom: 1px solid var(--text-dark);
    overflow: hidden;
}

/* Ghost-Wort rechts — wird per data-ghost auf das Header-Element gesetzt */
.lam-cr__header::before {
    content: attr(data-ghost);
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    font-family: var(--font-display);
    font-size: clamp(8rem, 18vw, 14rem);
    line-height: 0.8;
    color: transparent;
    -webkit-text-stroke: 1px var(--ghost-stroke);
    pointer-events: none;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.lam-cr__title-wrap {
    position: relative;
    z-index: 1;
    max-width: 760px;
}

.lam-cr__label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--accent);
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: var(--space-md);
}

.lam-cr__title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 8vw, 5.5rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-md);
    color: var(--text);
}

.lam-cr__title .accent {
    color: var(--accent);
}

.lam-cr__intro {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-style: italic;
    font-weight: 300;
    line-height: 1.75;
    color: var(--text);
    max-width: 640px;
    margin-top: var(--space-md);
    padding: var(--space-xs) 0 var(--space-xs) var(--space-lg);
    border-left: 2px solid var(--accent);
}


/* ============================================
   STATS-BAR — 4-Spalten unter dem Hero
   ============================================ */

.lam-cr__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: var(--space-xl);
}

.lam-cr__stat {
    padding: var(--space-md) var(--space-lg);
    border-right: 1px solid var(--border-light);
}

.lam-cr__stat:last-child {
    border-right: none;
}

.lam-cr__stat-label {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-xs);
}

.lam-cr__stat-value {
    font-family: var(--font-display);
    font-size: 1.8rem;
    line-height: 1;
    color: var(--text);
}

.lam-cr__stat-value--hot {
    color: var(--accent);
}


/* ============================================
   BODY-LAYOUT — Sidebar + Main
   ============================================ */

.lam-cr__body {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--space-xl);
    margin-bottom: var(--space-2xl);
}

@media (max-width: 900px) {
    .lam-cr__body {
        grid-template-columns: 1fr;
    }
}


/* ============================================
   SIDEBAR — Navigation & Filter
   ============================================ */

.lam-cr__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.lam-cr__sidebar-btn {
    display: block;
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: var(--accent);
    color: var(--bg);
    border: none;
    font-family: var(--font-display);
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition);
}

.lam-cr__sidebar-btn:hover {
    background: var(--accent-hover);
}

.lam-cr__sidebar-label {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: var(--space-sm);
}

.lam-cr__nav-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-display);
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: var(--transition);
}

.lam-cr__nav-item:hover {
    color: var(--text);
    background: var(--bg-card);
}

.lam-cr__nav-item--active {
    color: var(--text);
    border-left-color: var(--accent);
    background: var(--bg-card);
}

.lam-cr__nav-count {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    padding: 2px 6px;
    border: 1px solid var(--border-light);
    color: var(--text-muted);
}

.lam-cr__nav-count--hot {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-dim);
}

.lam-cr__filter-input {
    width: 100%;
    padding: var(--space-sm);
    background: var(--bg-input);
    border: 1px solid var(--border-light);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.lam-cr__filter-input:focus {
    outline: none;
    border-color: var(--accent);
}


/* ============================================
   MAIN — Inhaltsspalte
   ============================================ */

.lam-cr__main {
    min-width: 0;
}

.lam-cr__access-banner {
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
    border: 1px solid var(--border-light);
    background: var(--bg-card);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--success);
}

.lam-cr__list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}


/* ============================================
   CARDS — Einzelne Akten in der Liste
   ============================================ */

.lam-cr__records {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--border-light);
    border: 1px solid var(--border-light);
}

.lam-cr__card {
    background: var(--bg-card);
    padding: var(--space-md);
    border-left: 3px solid transparent;
    transition: var(--transition);
}

.lam-cr__card--orange { border-left-color: var(--accent); }
.lam-cr__card--warn   { border-left-color: var(--warning); }
.lam-cr__card--info   { border-left-color: var(--info); }
.lam-cr__card--ok     { border-left-color: var(--success); }

.lam-cr__card:hover {
    background: var(--bg-input);
}

.lam-cr__card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-sm);
    gap: var(--space-md);
}

.lam-cr__who {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.lam-cr__avatar {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-light);
    background: var(--bg-input);
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--text);
    flex-shrink: 0;
}

.lam-cr__char-name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text);
    line-height: 1;
}

.lam-cr__char-meta {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 2px;
    letter-spacing: 0.04em;
}

.lam-cr__data-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm) var(--space-md);
    padding: var(--space-sm) 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: var(--space-sm);
}

.lam-cr__field-label {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.lam-cr__field-value {
    font-size: 0.8rem;
    color: var(--text);
    font-weight: 500;
}

.lam-cr__field-value--mono {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--accent);
}

.lam-cr__card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lam-cr__case-id {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-dim);
}

.lam-cr__actions {
    display: flex;
    gap: var(--space-xs);
}

.lam-cr__btn {
    padding: 3px 8px;
    border: 1px solid var(--border-light);
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition);
}

.lam-cr__btn:hover {
    color: var(--text);
    border-color: var(--text-muted);
}

.lam-cr__btn--approve {
    border-color: var(--success);
    color: var(--success);
}
.lam-cr__btn--deny {
    border-color: var(--accent);
    color: var(--accent);
}

/* Deaktivierter Button (für Pagination am Anfang/Ende) */
.lam-cr__btn--disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}


/* ============================================
   PAGINATION — Footer der Listen-Ansicht
   ============================================ */

.lam-cr__pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    margin-top: 1px;
    border-top: 1px solid var(--border-light);
    flex-wrap: wrap;
}

.lam-cr__pagination-info {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.lam-cr__pagination-controls {
    display: flex;
    gap: var(--space-xs);
}


/* ============================================
   FILTER-FORM (Sidebar) und Filter-Hinweis
   ============================================ */

.lam-cr__filter-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: var(--space-md);
}

/* Submit-Button der Filter-Form — kompakter als der primäre Sidebar-Button */
.lam-cr__filter-submit {
    padding: var(--space-xs) var(--space-sm);
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    text-align: center;
    transition: var(--transition);
}

.lam-cr__filter-submit:hover {
    color: var(--text);
    border-color: var(--text-muted);
}

/* "gefiltert"-Hinweis in der Listen-Info-Zeile */
.lam-cr__filter-active {
    color: var(--accent);
    font-style: italic;
}


/* ============================================
   BULK-AKTIONEN — Listen-Auswahl für Mods
   ============================================ */

/* Checkbox links in jeder Card vor dem Avatar */
.lam-cr__bulk-checkbox {
    flex-shrink: 0;
    margin-right: var(--space-xs);
    cursor: pointer;
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
}

/* Bar mit Master-Toggle + Submit-Buttons unterhalb der Liste */
.lam-cr__bulk-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    margin-top: 1px;
    border: 1px solid var(--border-light);
    background: var(--bg-card);
    flex-wrap: wrap;
}

/* Master-"Alle auswählen"-Label links */
.lam-cr__bulk-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
}

.lam-cr__bulk-toggle input[type="checkbox"] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Action-Buttons rechts in der Bulk-Bar */
.lam-cr__bulk-actions {
    display: flex;
    gap: var(--space-xs);
}

/* Das Bulk-Form selbst — kein extra Styling, nur damit es kein extra margin gibt */
.lam-cr__bulk-form {
    margin: 0;
    padding: 0;
}


/* ============================================
   BADGES — Status, Kategorie, Haftbefehl
   ============================================ */

.lam-cr__badges {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
    align-items: flex-start;
}

.lam-cr__badge {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 6px;
    border: 1px solid;
    white-space: nowrap;
}

.lam-cr__badge--orange  { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
.lam-cr__badge--warn    { background: var(--warning-bg); color: var(--warning); border-color: var(--warning); }
.lam-cr__badge--ok      { background: var(--success-bg); color: var(--success); border-color: var(--success); }
.lam-cr__badge--info    { background: var(--info-bg); color: var(--info); border-color: var(--info); }
.lam-cr__badge--dim     { background: var(--bg-card); color: var(--text-muted); border-color: var(--border-light); }


/* ============================================
   NOTICE — Hinweis-Text in leeren Cards
   ============================================ */

.lam-cr__notice {
    margin: 0;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.6;
}

.lam-cr__notice--strong {
    color: var(--text);
}


/* ============================================
   DOSSIER — Header mit Foto, Name, Datacells, Status-Panel
   ============================================ */

.lam-cr__dossier-header {
    padding: var(--space-xl) 0;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 0;
}

/* 3-Spalten-Layout: Foto | Name+Cells | Status-Panel */
.lam-cr__dossier-header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-xl);
    align-items: start;
}

@media (max-width: 900px) {
    .lam-cr__dossier-header-inner {
        grid-template-columns: 1fr;
    }
}

/* Foto-Box: 100x130, dunkler Hintergrund, ggf. mit WANTED-Stempel */
.lam-cr__dossier-photo {
    width: 110px;
    height: 140px;
    background: var(--bg-input);
    border: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

/* Initialen wenn kein Foto vorhanden */
.lam-cr__dossier-photo-init {
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--accent);
    line-height: 1;
}

.lam-cr__dossier-photo-lbl {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    color: var(--text-muted);
    margin-top: var(--space-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Echtes Foto füllt die ganze Box aus — bekommt den Mugshot-Look:
   entsättigt, leicht kontraststärker, dezent abgedunkelt */
.lam-cr__dossier-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
    filter: grayscale(1) contrast(1.15) brightness(0.92);
}

/* Modifier — wird gesetzt sobald wirklich ein Bild da ist.
   Trägt das körnige Noise-Overlay für den Film-Look. */
.lam-cr__dossier-photo--has-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Inline-SVG mit feTurbulence erzeugt analoges Film-Korn ohne extra Bild-Asset.
       %23 = URL-encoded "#" für die Filter-Referenz. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='200' filter='url(../../../%23n)' opacity='0.7'/></svg>");
    background-size: 160px 200px;
    opacity: 0.28;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 2;
}

/* WANTED-Stempel — schräg unten in der Foto-Box, liegt über Bild und Grain */
.lam-cr__wanted-stamp {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%) rotate(-8deg);
    z-index: 3;
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    color: var(--accent);
    border: 2px solid var(--accent);
    padding: 2px 8px;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.4);
}

.lam-cr__dossier-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--accent);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
}

.lam-cr__dossier-name {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    line-height: 0.95;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0 0 var(--space-md);
}

/* Datacells unter dem Namen — 4 Zellen, Border-Box */
.lam-cr__dossier-data-cells {
    display: grid;
    grid-template-columns: repeat(4, auto);
    border: 1px solid var(--border-light);
    width: fit-content;
}

.lam-cr__dossier-cell {
    padding: var(--space-sm) var(--space-md);
    border-right: 1px solid var(--border-light);
}

.lam-cr__dossier-cell:last-child {
    border-right: none;
}

.lam-cr__dossier-cell-lbl {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.lam-cr__dossier-cell-val {
    font-family: var(--font-display);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text);
}

.lam-cr__dossier-cell-val--hot {
    color: var(--accent);
}

/* Status-Panel rechts — Badge + Action-Buttons untereinander */
.lam-cr__dossier-status-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    align-items: stretch;
    min-width: 200px;
}

/* Großer Status-Badge "● Haftbefehl aktiv" */
.lam-cr__dossier-status-badge {
    font-family: var(--font-display);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--accent);
    background: var(--accent-dim);
    color: var(--accent);
    text-align: center;
}

.lam-cr__dossier-status-badge--ok {
    border-color: var(--success);
    background: var(--success-bg);
    color: var(--success);
}

/* Action-Button im Status-Panel — etwas größer als .lam-cr__btn */
.lam-cr__action-btn {
    display: block;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-light);
    background: transparent;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: var(--transition);
}

.lam-cr__action-btn:hover {
    color: var(--text);
    border-color: var(--text-muted);
}

/* Gefährliche Aktion (z.B. Akte komplett löschen) — Akzent-Border */
.lam-cr__action-btn--danger {
    border-color: var(--accent);
    color: var(--accent);
    background: transparent;
    cursor: pointer;
    width: 100%;
}

.lam-cr__action-btn--danger:hover {
    background: var(--accent);
    color: var(--bg);
}

/* Wrapper-Form damit Submit-Buttons im Status-Panel als Block landen
   und nicht durch Browser-Defaults Margin/Padding bekommen */
.lam-cr__action-form {
    margin: 0;
    padding: 0;
}


/* ============================================
   KPI-BAR — 5 Kennzahlen unter dem Dossier-Header
   ============================================ */

.lam-cr__kpi {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: var(--space-xl);
}

@media (max-width: 900px) {
    .lam-cr__kpi {
        grid-template-columns: repeat(2, 1fr);
    }
}

.lam-cr__kpi-cell {
    padding: var(--space-md) var(--space-lg);
    border-right: 1px solid var(--border-light);
}

.lam-cr__kpi-cell:last-child {
    border-right: none;
}

.lam-cr__kpi-lbl {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-xs);
}

.lam-cr__kpi-val {
    font-family: var(--font-display);
    font-size: 1.6rem;
    line-height: 1;
    color: var(--text);
}

.lam-cr__kpi-val--hot {
    color: var(--accent);
}

/* Für textuelle Werte (z.B. "Nov 2024") statt Zahlen */
.lam-cr__kpi-val--small {
    font-size: 1rem;
    margin-top: var(--space-xs);
}


/* ============================================
   DOSSIER-BODY — 2-Spalten (Timeline | Info)
   ============================================ */

.lam-cr__dossier-body {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--space-xl);
    margin-bottom: var(--space-2xl);
}

@media (max-width: 900px) {
    .lam-cr__dossier-body {
        grid-template-columns: 1fr;
    }
}

.lam-cr__timeline-col,
.lam-cr__info-col {
    min-width: 0;
}

/* Spalten-Überschrift */
.lam-cr__col-heading {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-lg);
    border-bottom: 1px solid var(--border-light);
}


/* ============================================
   TIMELINE — Chronologische Einträge
   ============================================ */

.lam-cr__timeline {
    position: relative;
}

/* Vertikale Linie hinter den Dots */
.lam-cr__timeline::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 6px;
    bottom: 0;
    width: 1px;
    background: var(--border-light);
}

/* Ein Timeline-Eintrag: Dot links, Karte rechts */
.lam-cr__tl-item {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.lam-cr__tl-item:last-child {
    margin-bottom: 0;
}

/* Der Dot mit farbigem Border + farbigem Punkt innen */
.lam-cr__tl-dot {
    width: 19px;
    height: 19px;
    border: 1px solid var(--text-muted);
    background: var(--bg);
    position: relative;
    z-index: 1;
    margin-top: 4px;
    flex-shrink: 0;
}

/* Innerer Punkt — gleiche Farbe wie Border */
.lam-cr__tl-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    background: var(--text-muted);
}

.lam-cr__tl-dot--orange { border-color: var(--accent); }
.lam-cr__tl-dot--orange::after { background: var(--accent); }
.lam-cr__tl-dot--warn   { border-color: var(--warning); }
.lam-cr__tl-dot--warn::after { background: var(--warning); }
.lam-cr__tl-dot--info   { border-color: var(--info); }
.lam-cr__tl-dot--info::after { background: var(--info); }
.lam-cr__tl-dot--ok     { border-color: var(--success); }
.lam-cr__tl-dot--ok::after { background: var(--success); }

/* Timeline-Karte — wie die Listen-Card, aber kompakter */
.lam-cr__tl-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-left: 3px solid transparent;
    padding: var(--space-md);
}

.lam-cr__tl-card--orange { border-left-color: var(--accent); }
.lam-cr__tl-card--warn   { border-left-color: var(--warning); }
.lam-cr__tl-card--info   { border-left-color: var(--info); }
.lam-cr__tl-card--ok     { border-left-color: var(--success); }

.lam-cr__tl-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-sm);
    gap: var(--space-md);
}

/* Rechte Seite des Card-Headers — Badges oben, Edit-Actions darunter */
.lam-cr__tl-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-xs);
    flex-shrink: 0;
}

/* Edit/Delete-Buttons-Gruppe in der Card-Kopfzeile */
.lam-cr__entry-actions {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

.lam-cr__tl-delikt {
    font-family: var(--font-display);
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text);
    line-height: 1;
}

.lam-cr__tl-date {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 4px;
    letter-spacing: 0.04em;
}

/* 3-Spalten-Mini Datenzeile (Kategorie | Beamter | Urteil) */
.lam-cr__tl-mini {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xs) var(--space-md);
    padding: var(--space-sm) 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    margin-bottom: var(--space-sm);
}

/* Optionaler Beschreibungs-Block — etwas eingerückt */
.lam-cr__tl-description {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.6;
    margin-bottom: var(--space-sm);
    padding-left: var(--space-md);
    border-left: 2px solid var(--border-light);
}

.lam-cr__tl-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* Inline-Form für die Approve/Reject-Buttons in der Timeline.
   Verhindert dass ein <form> einen Block-Umbruch erzeugt. */
.lam-cr__inline-form {
    display: inline;
    margin: 0;
    padding: 0;
}

/* Mod-Buttons-Gruppe (Freigeben + Ablehnen nebeneinander) */
.lam-cr__tl-mod-actions {
    display: flex;
    gap: var(--space-xs);
    margin-left: auto;
}


/* ============================================
   INFO-PANEL (rechte Spalte im Dossier)
   ============================================ */

.lam-cr__info-heading {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-light);
}

/* Eine Schlüssel-Wert-Zeile im Profil */
.lam-cr__profile-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--border);
    gap: var(--space-md);
}

.lam-cr__profile-row:last-child {
    border-bottom: none;
}

.lam-cr__profile-key {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    flex-shrink: 0;
}

.lam-cr__profile-val {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text);
    text-align: right;
    word-break: break-word;
}

.lam-cr__profile-val--accent {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--accent);
}


/* ============================================
   FORMS — Eingabeformulare (Akte anlegen etc.)
   ============================================ */

/* Zentrierter Wrapper für eigenständige Form-Seiten (Akte anlegen, Eintrag einreichen).
   Hält das Formular schön mittig und auf angenehmer Lesebreite. */
.lam-cr__form-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding-top: var(--space-md);
}

.lam-cr__form {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: var(--space-xl);
    width: 100%;
}

/* Eine Formular-Reihe: Label + Input + Hint untereinander */
.lam-cr__form-row {
    margin-bottom: var(--space-lg);
}

.lam-cr__form-row:last-of-type {
    margin-bottom: var(--space-xl);
}

.lam-cr__form-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: var(--space-sm);
}

/* Pflichtfeld-Stern in Akzentfarbe */
.lam-cr__form-required {
    color: var(--accent);
    margin-left: 4px;
}

.lam-cr__form-input {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-input);
    border: 1px solid var(--border-light);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: var(--transition);
}

.lam-cr__form-input:focus {
    outline: none;
    border-color: var(--accent);
}

/* Textarea — größere Höhe, vertikal in der Größe änderbar */
.lam-cr__form-textarea {
    min-height: 140px;
    resize: vertical;
    line-height: 1.6;
}

/* Select — Standard-Pfeil deaktivieren, Cursor zeigen, ASCII-Pfeil über Padding */
select.lam-cr__form-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding-right: 36px;
}

/* Kleiner Hilfetext unter dem Input — erklärt was rein soll */
.lam-cr__form-hint {
    margin-top: var(--space-xs);
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.5;
}

/* Submit + Cancel-Buttons nebeneinander */
.lam-cr__form-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-light);
}

/* Visueller Trenner zwischen zwei alternativen Formular-Bereichen
   (z.B. "Datei hochladen" — oder — "URL eingeben") */
.lam-cr__form-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var(--space-md) 0;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    position: relative;
}

/* Linien links und rechts vom Text */
.lam-cr__form-divider::before,
.lam-cr__form-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-light);
    margin: 0 var(--space-md);
}

/* Fehler-Banner über dem Formular */
.lam-cr__form-error {
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
    border: 1px solid var(--error);
    background: var(--error-bg);
    color: var(--error);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.5;
}

.lam-cr__form-error-title {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: var(--space-xs);
    opacity: 0.85;
}

/* Warn-Variante des Form-Error-Banners — für Mod-Hinweise (nicht für Fehler) */
.lam-cr__form-error--warn {
    border-color: var(--warning);
    background: var(--warning-bg);
    color: var(--warning);
}

/* File-Input — Browser-Standard ist hässlich, wir geben ihm Brutalist-Look.
   Der Button-Teil (::file-selector-button) wird zum Akzent-Button. */
.lam-cr__form-file {
    width: 100%;
    padding: var(--space-sm);
    background: var(--bg-input);
    border: 1px solid var(--border-light);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    cursor: pointer;
}

.lam-cr__form-file:focus {
    outline: none;
    border-color: var(--accent);
}

/* Der "Datei auswählen"-Button im File-Input */
.lam-cr__form-file::file-selector-button {
    background: var(--accent);
    color: var(--bg);
    border: none;
    padding: var(--space-xs) var(--space-md);
    margin-right: var(--space-md);
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
}

.lam-cr__form-file::file-selector-button:hover {
    background: var(--accent-hover);
}

/* Vorschau des aktuell hochgeladenen Fotos über dem Upload-Form */
.lam-cr__foto-vorschau {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.lam-cr__foto-vorschau-img {
    width: 90px;
    height: 115px;
    object-fit: cover;
    border: 1px solid var(--border-light);
    flex-shrink: 0;
}


/* ============================================
   NOTIZEN — Interne Polizei-Notizen pro Eintrag
   Werden im unteren Bereich der Timeline-Card angezeigt
   ============================================ */

/* Container für alle Notizen eines Eintrags */
.lam-cr__notes {
    margin: var(--space-sm) 0;
    padding: var(--space-sm) 0 0;
    border-top: 1px dashed var(--border-light);
}

/* Überschrift "// Interne Notizen" */
.lam-cr__notes-heading {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--warning);
    margin-bottom: var(--space-sm);
}

/* Eine einzelne Notiz — abgesetzt vom Card-Hintergrund */
.lam-cr__note {
    background: var(--bg-input);
    border-left: 2px solid var(--warning);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-xs);
}

.lam-cr__note:last-of-type {
    margin-bottom: var(--space-sm);
}

/* Meta-Zeile mit Autor und Datum — flex damit Actions rechts landen */
.lam-cr__note-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--warning);
    letter-spacing: 0.04em;
    margin-bottom: var(--space-xs);
}

/* Action-Buttons rechts in der Meta-Zeile (Bearbeiten/Löschen) */
.lam-cr__note-actions {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

/* Einzelne Action — Text-Link-Optik, dezent */
.lam-cr__note-action {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    transition: var(--transition);
}

.lam-cr__note-action:hover {
    color: var(--text);
}

/* Löschen-Variante in Akzent-Farbe */
.lam-cr__note-action--danger {
    color: var(--accent);
}

.lam-cr__note-action--danger:hover {
    color: var(--accent-hover);
}

/* Eigentlicher Notiz-Text */
.lam-cr__note-text {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.5;
}

/* Formular für neue Notizen — kompakter als die Hauptformulare */
.lam-cr__note-form {
    margin-top: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.lam-cr__note-textarea {
    min-height: 60px;
    font-size: 0.85rem;
}

/* Edit-Form Variante — schmaler Rahmen, damit es als "in Bearbeitung" erkennbar ist */
.lam-cr__note-form--edit {
    background: var(--bg-input);
    border: 1px solid var(--warning);
    padding: var(--space-sm);
}

/* Submit + Cancel-Buttons in einer Reihe */
.lam-cr__note-form-actions {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
}


/* ============================================
   PROFIL-LINK — Variable {$rpgcr_strafakte_link}
   Wird im member_profile-Template manuell platziert
   ============================================ */

.lam-cr__profile-link {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    background: var(--accent-dim);
    border: 1px solid var(--accent);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: var(--transition);
}

.lam-cr__profile-link:hover {
    background: var(--accent);
    color: var(--bg);
}