/* Eigene Klassen statt Tailwind-Utilities: Die Panels der App bauen ihr CSS
   ohne die Views dieses Pakets, Utilities wären dort nicht vorhanden. */

.pu-root { display: flex; align-items: center; }

/* Der Button erbt seine Farbe über --pu-trigger-fg, damit er auch auf dunklen
   Topbars lesbar bleibt: die App setzt z. B. `.fi-topbar .pu-trigger { --pu-trigger-fg: #fff }`. */
.pu-trigger { --pu-trigger-fg: var(--gray-700); color: var(--pu-trigger-fg) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pu-trigger-fg) 40%, transparent) !important; }
.pu-trigger:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pu-trigger-fg) 70%, transparent) !important; background-color: color-mix(in srgb, var(--pu-trigger-fg) 10%, transparent) !important; }
.pu-trigger .fi-icon { color: var(--pu-trigger-fg); }
.dark .pu-trigger { --pu-trigger-fg: var(--gray-200); }

.pu-count {
    display: inline-grid;
    place-items: center;
    min-width: 1.125rem;
    height: 1.125rem;
    margin-inline-start: 0.375rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--danger-600, #dc2626);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.pu-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.pu-filters { display: flex; flex-wrap: wrap; gap: 0.375rem; }

.pu-filter {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--gray-300, #d1d5db);
    border-radius: 999px;
    font-size: 0.75rem;
    line-height: 1.25rem;
    color: var(--gray-700, #374151);
    background: transparent;
    cursor: pointer;
}
.pu-filter-active { background: var(--gray-900, #111827); border-color: var(--gray-900, #111827); color: #fff; }

.pu-mark-read { font-size: 0.75rem; color: var(--gray-500, #6b7280); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Hinweis-Dialog */
.pu-highlight .fi-modal-content { display: flex; flex-direction: column; gap: 0.75rem; }
.pu-highlight-kicker { display: flex; justify-content: space-between; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-500, #6b7280); }
.pu-highlight-title { font-size: 1.0625rem; font-weight: 600; color: var(--gray-950, #030712); }
.dark .pu-highlight-title { color: #fff; }

/* Nur die Einträge scrollen: Überschrift, Schließen-Button und Filter bleiben stehen.
   Filaments Fenster ist bereits eine Flex-Spalte mit fester Höhe. */
.pu-feed .fi-modal-window { overflow: hidden !important; }
.pu-feed .fi-modal-header { flex-shrink: 0; }
.pu-feed .fi-modal-content { flex: 1 1 auto; min-height: 0; overflow: hidden; padding-bottom: 0; }
.pu-toolbar { flex-shrink: 0; padding-bottom: 0.75rem; border-bottom: 1px solid var(--gray-200, #e5e7eb); }
.dark .pu-toolbar { border-color: rgb(255 255 255 / 0.1); }

/* Der Scrollbereich reicht bis an den Fensterrand (Scroll-Leiste aussen) und lässt
   links Platz für den Punkt, der über den Eintrag hinausragt. */
.pu-list {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin-inline: -0.75rem -1.5rem;
    padding-inline: 0.75rem 1.5rem;
    padding-bottom: 1.5rem;
    scrollbar-width: thin;
}

.pu-month {
    padding: 1rem 0 0.375rem;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-500, #6b7280);
}

.pu-entry {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.75rem 0 0.875rem 1rem;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
}
/* Der Punkt ist eine Schaltfläche. Ruhe: kleiner roter Punkt. Hover: wächst zum
   Kreis mit Haken und zeigt, was der Klick tut. Klick: gefüllter grüner Haken,
   der kurz aufspringt und dann verschwindet. */
.pu-dot {
    position: absolute;
    inset-inline-start: -0.5rem;
    top: 0.7rem;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    cursor: pointer;
}
.pu-dot::before {
    content: "";
    grid-area: 1 / 1;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    border: 1.5px solid var(--danger-600, #dc2626);
    background: var(--danger-600, #dc2626);
    transition: width 0.16s ease, height 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}
.pu-dot svg {
    grid-area: 1 / 1;
    width: 0.75rem;
    height: 0.75rem;
    fill: none;
    stroke: var(--success-600, #16a34a);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 12;
    stroke-dashoffset: 12;
    transition: stroke-dashoffset 0.2s ease 0.05s, stroke 0.16s ease;
}
.pu-dot:hover::before, .pu-dot:focus-visible::before {
    width: 1.125rem;
    height: 1.125rem;
    background: var(--success-50, #f0fdf4);
    border-color: var(--success-600, #16a34a);
}
.pu-dot:hover svg, .pu-dot:focus-visible svg { stroke-dashoffset: 0; }
.pu-dot:focus-visible { outline: 2px solid var(--success-600, #16a34a); outline-offset: 1px; }

.pu-dot-done { pointer-events: none; animation: pu-dot-done 0.7s ease forwards; }
.pu-dot-done::before {
    width: 1.125rem;
    height: 1.125rem;
    background: var(--success-600, #16a34a);
    border-color: var(--success-600, #16a34a);
}
.pu-dot-done svg { stroke: #fff; stroke-dashoffset: 0; }
@keyframes pu-dot-done {
    0% { transform: scale(1); opacity: 1; }
    25% { transform: scale(1.25); opacity: 1; }
    45%, 70% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.6); opacity: 0; }
}
.dark .pu-dot:hover::before, .dark .pu-dot:focus-visible::before { background: transparent; }

@media (prefers-reduced-motion: reduce) {
    .pu-dot::before, .pu-dot svg { transition: none; }
    .pu-dot-done { animation-duration: 0.01s; }
}

.pu-more {
    align-self: center;
    margin-top: 1rem;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--gray-300, #d1d5db);
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-700, #374151);
    cursor: pointer;
}
.dark .pu-more { border-color: var(--gray-600, #4b5563); color: var(--gray-200, #e5e7eb); }

.pu-meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--gray-500, #6b7280); }
.pu-title { font-size: 0.9375rem; font-weight: 600; color: var(--gray-950, #030712); }

.pu-body { font-size: 0.8125rem; line-height: 1.5; color: var(--gray-700, #374151); }
.pu-body p + p, .pu-body p + ul, .pu-body p + ol, .pu-body ul + p, .pu-body ol + p { margin-top: 0.5rem; }
.pu-body ul { list-style: disc; padding-inline-start: 1.125rem; }
.pu-body ol { list-style: decimal; padding-inline-start: 1.125rem; }
.pu-body strong { font-weight: 600; color: var(--gray-950, #030712); }
.pu-body img { display: block; max-width: 100%; margin-top: 0.5rem; border: 1px solid var(--gray-200, #e5e7eb); border-radius: 0.5rem; }
.pu-body a { text-decoration: underline; text-underline-offset: 3px; }

.pu-links { display: flex; gap: 0.875rem; font-size: 0.75rem; font-weight: 500; }
.pu-links a, .pu-links button { color: var(--gray-950, #030712); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.pu-empty { padding: 1.5rem 0; font-size: 0.8125rem; color: var(--gray-500, #6b7280); }

.dark .pu-filter { border-color: var(--gray-600, #4b5563); color: var(--gray-200, #e5e7eb); }
.dark .pu-filter-active { background: #fff; border-color: #fff; color: var(--gray-900, #111827); }
.dark .pu-entry { border-color: rgb(255 255 255 / 0.1); }
.dark .pu-title, .dark .pu-body strong, .dark .pu-links a, .dark .pu-links button { color: #fff; }
.dark .pu-body { color: var(--gray-300, #d1d5db); }
.dark .pu-body img { border-color: rgb(255 255 255 / 0.1); }

/* Das Slide-over hängt im DOM unter der Topbar. Färbt die App dort alle
   Icon-Buttons hell (dunkle Topbar), wäre der Schließen-Button unsichtbar. */
.pu-modal .fi-modal-header .fi-modal-close-btn { color: var(--gray-500, #6b7280) !important; }
.pu-modal .fi-modal-header .fi-modal-close-btn:hover { color: var(--gray-700, #374151) !important; }
.dark .pu-modal .fi-modal-header .fi-modal-close-btn { color: var(--gray-400, #9ca3af) !important; }