/* ============================================================
   Einsatzmanager – Frontend Styles
   Relies on CSS custom properties provided by the Feuerwehr
   Modern theme. Fallback values ensure the plugin works even
   if the theme is switched.
   ============================================================ */

.em-wrap {
    font-family: var(--font-body, 'DM Sans', sans-serif);
    color: var(--clr-text, #f0f2f7);
}

/* ── Empty state ─────────────────────────────────────────── */

.em-empty {
    color: var(--clr-muted, #8a909f);
    font-style: italic;
    padding: 1rem 0;
}

/* ── Year section ────────────────────────────────────────── */

.em-year {
    margin-bottom: 1.25rem;
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    border: 1px solid var(--clr-border, rgba(255,255,255,.07));
}

/* ── Year toggle button ──────────────────────────────────── */

.em-year-toggle {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .875rem 1.25rem;
    background: var(--clr-surface-2, #1c2030);
    border: none;
    border-left: 3px solid var(--clr-red, #e8280b);
    color: var(--clr-text, #f0f2f7);
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    text-align: left;
    transition: background .25s cubic-bezier(.4,0,.2,1);
}

.em-year-toggle:hover {
    background: color-mix(in srgb, var(--clr-surface-2, #1c2030) 80%, var(--clr-red, #e8280b) 20%);
}

.em-year-label {
    flex: 0 0 auto;
}

.em-year-count {
    flex: 1 1 auto;
    font-size: .85rem;
    font-weight: 400;
    color: var(--clr-muted, #8a909f);
    text-transform: none;
    letter-spacing: 0;
}

.em-chevron {
    flex: 0 0 auto;
    font-size: .75rem;
    color: var(--clr-muted, #8a909f);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
}

.em-year[data-open="1"] .em-chevron {
    transform: rotate(180deg);
}

/* ── Accordion table wrap ────────────────────────────────── */

.em-table-wrap {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s cubic-bezier(.4,0,.2,1);
}

.em-year[data-open="1"] .em-table-wrap {
    max-height: 9999px; /* large enough for any number of rows */
    transition: max-height .5s cubic-bezier(.4,0,.2,1);
}

/* ── Table ───────────────────────────────────────────────── */

.em-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--clr-surface, #13161e);
    font-size: .9375rem;
}

.em-table thead tr {
    background: var(--clr-surface-2, #1c2030);
}

.em-table thead th {
    padding: .625rem 1rem;
    text-align: left;
    font-family: var(--font-display, 'Barlow Condensed', sans-serif);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--clr-muted, #8a909f);
    border-bottom: 1px solid var(--clr-border, rgba(255,255,255,.07));
}

.em-table td {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--clr-border, rgba(255,255,255,.07));
    vertical-align: top;
    color: var(--clr-text, #f0f2f7);
}

.em-table tbody tr:last-child td {
    border-bottom: none;
}

/* ── Data row ────────────────────────────────────────────── */

.em-row--has-detail {
    cursor: pointer;
    transition: background .2s;
}

.em-row--has-detail:hover,
.em-row--has-detail:focus-visible {
    background: var(--clr-surface-2, #1c2030);
    outline: none;
}

.em-row--has-detail:focus-visible {
    outline: 2px solid var(--clr-red, #e8280b);
    outline-offset: -2px;
}

.em-row--active {
    background: var(--clr-surface-2, #1c2030);
}

.em-td-nr {
    width: 3rem;
    color: var(--clr-muted, #8a909f);
    font-variant-numeric: tabular-nums;
}

.em-td-datum {
    white-space: nowrap;
    width: 12rem;
}

/* ── Stichwort badge ─────────────────────────────────────── */

.em-stichwort {
    display: inline-block;
    padding: .2em .55em;
    background: var(--clr-red-glow, rgba(232,40,11,.18));
    color: var(--clr-red, #e8280b);
    border: 1px solid var(--clr-red, #e8280b);
    border-radius: var(--radius-sm, 6px);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

/* ── Stichwort badge color variants ─────────────────────── */

.em-stichwort--red    { background: rgba(232,40,11,.18);   color: #e8280b; border-color: #e8280b; }
.em-stichwort--yellow { background: rgba(245,158,11,.18);  color: #d97706; border-color: #f59e0b; }
.em-stichwort--green  { background: rgba(22,163,74,.18);   color: #16a34a; border-color: #16a34a; }
.em-stichwort--blue   { background: rgba(37,99,235,.18);   color: #2563eb; border-color: #2563eb; }
.em-stichwort--purple { background: rgba(124,58,237,.18);  color: #7c3aed; border-color: #7c3aed; }
.em-stichwort--teal   { background: rgba(8,145,178,.18);   color: #0891b2; border-color: #0891b2; }
.em-stichwort--orange { background: rgba(234,88,12,.18);   color: #ea580c; border-color: #ea580c; }
.em-stichwort--gray   { background: rgba(107,114,128,.18); color: #6b7280; border-color: #6b7280; }

/* ── Detail row ──────────────────────────────────────────── */

.em-detail-row td {
    padding: 0;
    border-bottom: 1px solid var(--clr-border, rgba(255,255,255,.07));
}

.em-detail-inner {
    padding: 1.25rem 1.5rem;
    background: var(--clr-surface-2, #1c2030);
    border-left: 3px solid var(--clr-red, #e8280b);
    color: var(--clr-text, #f0f2f7);
    font-size: .9375rem;
    line-height: 1.65;
}

.em-detail-inner p:last-child {
    margin-bottom: 0;
}

/* ── Status icons column ─────────────────────────────────── */

.em-col-icons {
    width: 5rem;
    text-align: right;
    white-space: nowrap;
}

.em-td-icons {
    text-align: right;
    white-space: nowrap;
}

.em-icon {
    display: inline-block;
    margin-left: .4rem;
    font-size: .875rem;
}

.em-icon--yes {
    color: var(--clr-red, #e8280b);
}

.em-icon--no {
    color: var(--clr-muted, #8a909f);
    opacity: .4;
}

/* ── Image in detail row ─────────────────────────────────── */

.em-detail-image {
    margin-bottom: 1rem;
}

.em-detail-img {
    max-width: 100%;
    border-radius: var(--radius-md, 12px);
    display: block;
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 600px) {
    .em-col-ort {
        display: none;
    }

    .em-td-datum {
        width: auto;
    }

    .em-table td,
    .em-table th {
        padding: .625rem .75rem;
    }

    .em-year-toggle {
        padding: .75rem 1rem;
    }
}