/* ============================================================
   weekplan — Design System (Vanilla CSS, no build step)
   Token names + concrete values mirror sibling project
   redmine-dashboard for visual cohesion across the cQ suite.
   See docs/superpowers/design/system.md for the conceptual
   overview of screens, components and how to extend.

   Fonts intentionally use the platform stack instead of remote
   Google Fonts: keeps the offline-mode (Task 17) actually offline
   and removes a third-party dependency from every page load.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
    /* Colors — RGB triplets (so we can compose with rgba() for transparency) */
    --color-primary:         0 152 184;
    --color-primary-focus:   0 122 150;
    --color-primary-content: 255 255 255;
    --color-secondary:       71 85 105;
    --color-base-100:        250 251 252;
    --color-base-200:        247 248 250;
    --color-base-300:        232 236 240;
    --color-base-content:    31 41 55;
    --color-success:         10 155 110;
    --color-warning:         217 119 6;
    --color-error:           220 38 38;

    /* Typography — platform stack (offline-friendly; no Google Fonts).
       Designed to feel close to redmine-dashboard's Manrope/DM Sans
       choice while keeping zero third-party network requests. */
    --font-heading: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                    "Helvetica Neue", Arial, sans-serif;
    --font-body:    ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                    "Helvetica Neue", Arial, sans-serif;

    /* Spacing — 4 / 8 pt grid */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;

    /* Radii + elevation */
    --radius:    0.375rem;
    --radius-lg: 0.5rem;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    color: rgb(var(--color-base-content));
    background: rgb(var(--color-base-200));
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 600;
    margin: 0 0 var(--space-4);
    color: rgb(var(--color-base-content));
}
h1 { font-size: 1.5rem; }
h2 { font-size: 1.125rem; }
h3 { font-size: 1rem; }

a {
    color: rgb(var(--color-primary));
    text-decoration: none;
}
a:hover { text-decoration: underline; }

code {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    background: rgb(var(--color-base-300));
    padding: 0.1rem 0.3rem;
    border-radius: var(--radius);
}

/* ---------- Form primitives ---------- */
button {
    background: rgb(var(--color-primary));
    color: rgb(var(--color-primary-content));
    border: none;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 120ms ease-out, transform 80ms ease-out;
}
button:hover  { background: rgb(var(--color-primary-focus)); }
button:active { transform: scale(0.98); }
button:disabled { opacity: 0.5; cursor: not-allowed; }

input[type="password"],
input[type="text"],
input[type="number"] {
    font-family: inherit;
    font-size: inherit;
    color: rgb(var(--color-base-content));
    background: rgb(var(--color-base-100));
    border: 1px solid rgb(var(--color-base-300));
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-3);
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}
input:focus {
    outline: none;
    border-color: rgb(var(--color-primary));
    box-shadow: 0 0 0 3px rgba(var(--color-primary), 0.15);
}

/* ---------- Login screen ---------- */
/* Scoped to plain <main> (login.html). The plan page also uses <main class="plan-stack">,
   which must NOT inherit the centered/max-400px box treatment. */
body > main:not(.plan-stack) {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: var(--space-6);
}
body > main:not(.plan-stack) > * { width: 100%; max-width: 400px; }

body > main:not(.plan-stack) h1 {
    text-align: center;
    margin-bottom: var(--space-2);
}
body > main:not(.plan-stack) > p { text-align: center; color: rgba(var(--color-base-content), 0.7); margin-top: 0; margin-bottom: var(--space-6); }
body > main:not(.plan-stack) form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    background: rgb(var(--color-base-100));
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
body > main:not(.plan-stack) form label {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-weight: 500;
    font-size: 0.875rem;
}
body > main:not(.plan-stack) form input[type="password"] { width: 100%; }
body > main:not(.plan-stack) form button { width: 100%; padding: var(--space-3) var(--space-4); }

.error {
    color: rgb(var(--color-error));
    background: rgba(var(--color-error), 0.08);
    border: 1px solid rgba(var(--color-error), 0.2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    margin-top: var(--space-4);
    text-align: center;
}

/* ---------- App shell: sticky header ---------- */
body > header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-6);
    background: rgb(var(--color-base-100));
    border-bottom: 1px solid rgb(var(--color-base-300));
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: var(--shadow-sm);
}
body > header h1 { margin: 0; font-size: 1.25rem; }
body > header nav { display: flex; gap: var(--space-2); }
body > header nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem; height: 2rem;
    border-radius: var(--radius);
    background: rgb(var(--color-base-200));
    color: rgb(var(--color-base-content));
    font-size: 1rem;
}
body > header nav a:hover { background: rgb(var(--color-base-300)); text-decoration: none; }
body > header form { margin-left: auto; }
body > header form button {
    background: transparent;
    color: rgb(var(--color-base-content));
    border: 1px solid rgb(var(--color-base-300));
}
body > header form button:hover { background: rgb(var(--color-base-200)); }

/* ---------- Matrix table ---------- */
/* Wrapper keeps horizontal scroll local to the table when many issue columns. */
.matrix-scroll {
    overflow-x: auto;
    padding: var(--space-4) var(--space-6);
    background: rgb(var(--color-base-200));
}

table#matrix {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 100%;
    background: rgb(var(--color-base-100));
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    font-size: 0.875rem;
}
table#matrix th,
table#matrix td {
    border-right: 1px solid rgb(var(--color-base-300));
    border-bottom: 1px solid rgb(var(--color-base-300));
    padding: var(--space-2) var(--space-3);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}
table#matrix tr:last-child > * { border-bottom: none; }
table#matrix th:last-child,
table#matrix td:last-child { border-right: none; }

table#matrix thead th {
    background: rgb(var(--color-base-200));
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.8125rem;
    color: rgba(var(--color-base-content), 0.8);
    position: sticky;
    top: 0;
    z-index: 2;
}
table#matrix thead th small {
    display: block;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.75rem;
    color: rgba(var(--color-base-content), 0.6);
}
table#matrix tbody th {
    background: rgb(var(--color-base-100));
    font-family: var(--font-heading);
    font-weight: 600;
    position: sticky;
    left: 0;
    z-index: 1;
}

table#matrix td input[type="number"] {
    width: 4.5rem;
    padding: var(--space-1) var(--space-2);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
table#matrix td small {
    display: block;
    color: rgba(var(--color-base-content), 0.6);
    font-size: 0.7rem;
    margin-top: 2px;
}
table#matrix td.warn {
    background: rgba(var(--color-warning), 0.12);
}
table#matrix td.warn span[title] {
    color: rgb(var(--color-warning));
    margin-left: var(--space-1);
}

/* ---------- Capacity utilization band ---------- */
/* Color-codes the per-row Σ Plan / Kapazität cell by utilization %.
   Values rendered server-side onto `data-util` (one of: lt50, mid, ok, over). */
td.cap-band {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
td.cap-band[data-util="lt50"]   { background: rgba(var(--color-warning), 0.10); color: rgb(var(--color-warning)); }
td.cap-band[data-util="mid"]    { background: rgba(var(--color-error),   0.08); color: rgb(var(--color-error));   }
td.cap-band[data-util="ok"]     { background: rgba(var(--color-success), 0.12); color: rgb(var(--color-success)); }
td.cap-band[data-util="over"]   { background: rgba(var(--color-error),   0.15); color: rgb(var(--color-error));  font-weight: 600; }

td.cap-band small {
    display: inline;
    margin-left: var(--space-1);
    color: rgba(var(--color-base-content), 0.6);
    font-size: 0.7rem;
}

/* ---------- Orphans section ---------- */
section.orphans {
    padding: var(--space-4) var(--space-6);
    background: rgb(var(--color-base-100));
    border-top: 1px solid rgb(var(--color-base-300));
}
section.orphans.empty { display: none; }
section.orphans ul { list-style: none; padding: 0; margin: 0; }
section.orphans li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid rgb(var(--color-base-300));
}
section.orphans li:last-child { border-bottom: none; }
section.orphans button {
    background: transparent;
    color: rgb(var(--color-error));
    border: 1px solid rgba(var(--color-error), 0.3);
    padding: var(--space-1) var(--space-3);
    font-size: 0.8125rem;
}
section.orphans button:hover {
    background: rgba(var(--color-error), 0.08);
}

/* ---------- Banner (top, sticky) ---------- */
.banner {
    position: sticky;
    top: 0;
    z-index: 30;
    padding: var(--space-3) var(--space-6);
    background: rgb(var(--color-base-200));
    border-bottom: 1px solid rgb(var(--color-base-300));
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.banner p { margin: 0; flex: 1; }
.banner-error {
    background: rgba(var(--color-error), 0.1);
    color: rgb(var(--color-error));
    border-bottom-color: rgba(var(--color-error), 0.2);
}
.banner-error a {
    color: rgb(var(--color-error));
    font-weight: 600;
    text-decoration: underline;
}

/* ---------- Offline snapshot stamp ---------- */
.offline-stamp {
    padding: var(--space-2) var(--space-6);
    background: rgba(var(--color-warning), 0.1);
    color: rgb(var(--color-warning));
    font-style: italic;
    margin: 0;
}

/* ---------- Toast (bottom-right) ---------- */
.toast {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: rgb(var(--color-base-content));
    color: rgb(var(--color-base-100));
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    z-index: 1000;
    max-width: 24rem;
    animation: toast-in 200ms ease-out;
}
@keyframes toast-in {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Plan stack: per-employee cards ---------- */
main.plan-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-6);
    background: rgb(var(--color-base-200));
}

details.employee-card {
    background: rgb(var(--color-base-100));
    border: 1px solid rgb(var(--color-base-300));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4) var(--space-6);
}

/* Summary becomes the always-visible header; click toggles open/closed.
   Default disclosure marker is suppressed; we paint our own chevron. */
details.employee-card > summary.card-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    list-style: none;            /* Firefox */
    user-select: none;
}
details.employee-card > summary.card-header::-webkit-details-marker {
    display: none;               /* WebKit/Safari */
}
details.employee-card > summary.card-header::after {
    content: "▸";
    margin-left: auto;
    color: rgba(var(--color-base-content), 0.5);
    display: inline-block;
    transition: transform 150ms ease-out;
}
details.employee-card[open] > summary.card-header::after {
    transform: rotate(90deg);
}
/* Spacing between summary and the now-revealed table — only applies when open. */
details.employee-card[open] > summary.card-header { margin-bottom: var(--space-3); }

details.employee-card > summary.card-header h2 { margin: 0; flex: 0 0 auto; }
details.employee-card > summary.card-header .cap-band {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}
details.employee-card > summary.card-header .cap-band[data-util="lt50"] { background: rgba(var(--color-warning), 0.10); color: rgb(var(--color-warning)); }
details.employee-card > summary.card-header .cap-band[data-util="mid"]  { background: rgba(var(--color-error),   0.08); color: rgb(var(--color-error));   }
details.employee-card > summary.card-header .cap-band[data-util="ok"]   { background: rgba(var(--color-success), 0.12); color: rgb(var(--color-success)); }
details.employee-card > summary.card-header .cap-band[data-util="over"] { background: rgba(var(--color-error),   0.15); color: rgb(var(--color-error));  font-weight: 600; }
details.employee-card > summary.card-header > small {
    color: rgba(var(--color-base-content), 0.6);
    font-size: 0.75rem;
}

/* ---------- Ticket table inside an employee card ---------- */
table.ticket-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}
table.ticket-table th,
table.ticket-table td {
    border-bottom: 1px solid rgb(var(--color-base-300));
    padding: var(--space-2) var(--space-3);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}
table.ticket-table thead th {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.8125rem;
    color: rgba(var(--color-base-content), 0.7);
    background: rgb(var(--color-base-200));
}
table.ticket-table tbody tr:last-child > td { border-bottom: none; }
table.ticket-table td.ticket-id   { font-variant-numeric: tabular-nums; color: rgba(var(--color-base-content), 0.7); }
table.ticket-table td.project     { color: rgba(var(--color-base-content), 0.7); }
table.ticket-table td.subject {
    white-space: normal;
    width: 100%;                 /* greedy: claim every spare px so other cols stay shrink-to-fit */
    overflow-wrap: anywhere;     /* break long unbreakable subjects (no spaces) */
}
table.ticket-table td.plan input[type="number"] {
    width: 5.5rem;
    padding: var(--space-1) var(--space-2);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
table.ticket-table td.status      { color: rgba(var(--color-base-content), 0.7); }
table.ticket-table td.status .status-chip {
    display: inline-block;
    padding: 0 var(--space-2);
    border-radius: var(--radius);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    background: rgb(var(--color-base-200));
    color: rgba(var(--color-base-content), 0.75);
    border: 1px solid rgb(var(--color-base-300));
}
table.ticket-table td.status .status-chip.closed {
    background: rgba(var(--color-base-content), 0.06);
    color: rgba(var(--color-base-content), 0.5);
    text-decoration: line-through;
}
table.ticket-table td.estimated,
table.ticket-table td.spent       { font-variant-numeric: tabular-nums; text-align: right; color: rgba(var(--color-base-content), 0.6); }
table.ticket-table td.spent.budget-near { color: rgb(var(--color-warning)); font-weight: 600; }
table.ticket-table td.spent.budget-over { color: rgb(var(--color-error)); font-weight: 700; }
table.ticket-table td.plan.overbook input[type="number"] {
    border-color: rgb(var(--color-error));
    box-shadow: 0 0 0 2px rgba(var(--color-error), 0.15);
}
table.ticket-table td.plan .overbook-flag { display: none; }
table.ticket-table td.plan.overbook .overbook-flag {
    display: inline-block;
    margin-left: var(--space-2);
    width: 1.1rem;
    height: 1.1rem;
    line-height: 1.1rem;
    text-align: center;
    border-radius: 50%;
    background: rgb(var(--color-error));
    color: rgb(var(--color-primary-content));
    font-size: 0.7rem;
    font-weight: 700;
    cursor: help;
}
table.ticket-table td.ist         { font-variant-numeric: tabular-nums; color: rgba(var(--color-base-content), 0.6); }
table.ticket-table tr.warn        { background: rgba(var(--color-warning), 0.08); }
table.ticket-table tr.warn td.plan span[title] { color: rgb(var(--color-warning)); margin-left: var(--space-1); }

/* ---------- Add-ticket button + combobox ---------- */
details.employee-card > button.add-ticket {
    margin-top: var(--space-3);
    background: transparent;
    color: rgb(var(--color-primary));
    border: 1px dashed rgba(var(--color-primary), 0.4);
}
details.employee-card > button.add-ticket:hover { background: rgba(var(--color-primary), 0.06); }

details.employee-card > .combobox {
    margin-top: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
details.employee-card > .combobox[hidden] { display: none; }
details.employee-card > .combobox input[type="search"] {
    font-family: inherit;
    font-size: inherit;
    color: rgb(var(--color-base-content));
    background: rgb(var(--color-base-100));
    border: 1px solid rgb(var(--color-base-300));
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-3);
}

ul.search-results {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid rgb(var(--color-base-300));
    border-radius: var(--radius);
    background: rgb(var(--color-base-100));
    max-height: 16rem;
    overflow-y: auto;
}
ul.search-results:empty { display: none; }
ul.search-results li { border-bottom: 1px solid rgb(var(--color-base-300)); }
ul.search-results li:last-child { border-bottom: none; }
ul.search-results button {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    color: rgb(var(--color-base-content));
    border: none;
    padding: var(--space-2) var(--space-3);
    font-family: inherit;
    font-size: 0.875rem;
}
ul.search-results button:hover { background: rgb(var(--color-base-200)); }

tr.row-highlight { animation: row-flash 800ms ease-out; }
@keyframes row-flash {
    0%   { background: rgba(var(--color-primary), 0.20); }
    100% { background: transparent; }
}

/* ---------- Source-Tags neben Subject (warum erscheint dieses Ticket?) ---------- */
table.ticket-table td.subject .src-tag {
    display: inline-block;
    margin-left: var(--space-2);
    padding: 0 var(--space-2);
    border-radius: var(--radius);
    font-size: 0.7rem;
    font-weight: 500;
    vertical-align: 1px;
    white-space: nowrap;
    background: rgb(var(--color-base-200));
    color: rgba(var(--color-base-content), 0.6);
}
table.ticket-table td.subject .src-tag.src-assigned {
    background: rgba(var(--color-primary), 0.10);
    color: rgb(var(--color-primary));
}
table.ticket-table td.subject .src-tag.src-prev {
    background: rgba(var(--color-base-content), 0.06);
    color: rgba(var(--color-base-content), 0.7);
}

/* ---------- Beplante Ticket-Zeile (planned-indicators) ---------- */
table.ticket-table tr.planned {
    background: rgba(var(--color-success), 0.12);
}
table.ticket-table tr.planned > td:first-child {
    box-shadow: inset 3px 0 0 rgb(var(--color-success));
}
table.ticket-table tr.planned td.subject { font-weight: 500; }
table.ticket-table tr.planned td.plan input[type="number"] {
    font-weight: 700;
    color: rgb(var(--color-success));
    border-color: rgba(var(--color-success), 0.4);
}

/* Counter-Pille in der Card-Summary */
details.employee-card > summary.card-header .plan-count {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius);
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    color: rgba(var(--color-base-content), 0.7);
    background: rgb(var(--color-base-200));
}
details.employee-card > summary.card-header .plan-count:empty {
    display: none;
}

/* ---------- Top-Loading-Bar (HTMX-Aktivität) ----------
   2px-Balken am Unterrand des sticky Headers. Sichtbar wenn body.htmx-active
   gesetzt ist (JS zählt offene Requests via htmx:beforeRequest/afterRequest). */
#loading-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms ease-out;
}
#loading-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 40%;
    background: rgb(var(--color-primary));
    animation: loading-bar-slide 1.1s linear infinite;
}
body.htmx-active #loading-bar {
    opacity: 1;
}
@keyframes loading-bar-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}
@media (prefers-reduced-motion: reduce) {
    #loading-bar::before {
        animation: none;
        width: 100%;
        background: rgba(var(--color-primary), 0.35);
    }
}

/* === Ticket-Detail Side-Panel === */

#ticket-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 90;
  cursor: pointer;
}

.ticket-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(48rem, 50vw);
  background: rgb(var(--color-base-100, 255 255 255));
  color: rgb(var(--color-base-content, 17 17 17));
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
  z-index: 100;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 180ms ease-out;
  overflow: hidden;
}

.ticket-panel[data-open] {
  transform: translateX(0);
}

.ticket-panel .tp-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgb(var(--color-base-300, 229 231 235));
  background: rgb(var(--color-base-100, 255 255 255));
  flex-wrap: wrap;
}

.ticket-panel .tp-id {
  font-weight: 600;
  font-family: ui-monospace, monospace;
}

.ticket-panel .tp-project {
  color: rgb(var(--color-base-content, 17 17 17));
  opacity: 0.7;
}

.ticket-panel .tp-redmine-link {
  margin-left: auto;
  font-size: 0.85em;
}

.ticket-panel .tp-close {
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
  color: rgb(var(--color-base-content, 17 17 17));
}

.ticket-panel .tp-subject {
  padding: 1rem 1rem 0;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.ticket-panel .tp-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
  padding: 0.5rem 1rem 1rem;
  font-size: 0.9em;
  margin: 0;
}
.ticket-panel .tp-meta div { display: contents; }
.ticket-panel .tp-meta dt { opacity: 0.65; }
.ticket-panel .tp-meta dd { margin: 0; }

.ticket-panel .tp-description,
.ticket-panel .tp-journals {
  padding: 0.5rem 1rem;
  overflow-y: auto;
}

.ticket-panel .tp-journals h3 {
  font-size: 0.95rem;
  margin: 0.5rem 0;
  opacity: 0.7;
}

.ticket-panel .tp-journal {
  border-top: 1px solid rgb(var(--color-base-300, 229 231 235));
  padding: 0.75rem 0;
}

.ticket-panel .tp-journal > header {
  display: flex;
  gap: 0.75rem;
  font-size: 0.85em;
  opacity: 0.75;
  margin-bottom: 0.25rem;
}

/* Prose-Defaults für sanitisiertes Redmine-HTML */
.ticket-panel .tp-description img,
.ticket-panel .tp-note img { max-width: 100%; height: auto; }
.ticket-panel .tp-description pre,
.ticket-panel .tp-note pre {
  background: rgb(var(--color-base-200, 243 244 246));
  padding: 0.5rem;
  border-radius: 4px;
  overflow-x: auto;
}
.ticket-panel .tp-description code,
.ticket-panel .tp-note code {
  font-family: ui-monospace, monospace;
}
.ticket-panel .tp-description table,
.ticket-panel .tp-note table {
  border-collapse: collapse;
}
.ticket-panel .tp-description td,
.ticket-panel .tp-description th,
.ticket-panel .tp-note td,
.ticket-panel .tp-note th {
  border: 1px solid rgb(var(--color-base-300, 229 231 235));
  padding: 0.25rem 0.5rem;
}