/* ═══════════════════════════════════════════════════════════════════════
   OW Kundportal v2 — Support (P5): ticket list, new ticket, single ticket.
   Every rule is prefixed with body.customers. Tokens/components: ../portal.css
   The single-ticket page also loads modules/optagonen/assets/css/public-ticket-ux.css
   (.ow-pt-*); the rules below re-tint it with the portal tokens (higher specificity).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Ticket list ─────────────────────────────────────────────────────── */
body.customers .pt-support-grid { grid-template-columns: 2fr 1fr; align-items: start; }
body.customers .pt-support-aside .pt-kv { grid-template-columns: 1fr; gap: 12px; }
body.customers .pt-support-aside a.pt-kv-value { color: var(--pt-accent-text); }
body.customers .pt-support-aside a.pt-kv-value:hover { text-decoration: underline; }
body.customers .pt-contact-intro { margin: 0 0 14px; color: var(--pt-text-2); }

body.customers .table-tickets .pt-ticket-subject { color: var(--pt-text); }
body.customers .table-tickets .pt-ticket-subject:hover { color: var(--pt-accent-text); }
body.customers .table-tickets .pt-row-unread .pt-ticket-subject { font-weight: 600; }
body.customers .table-tickets td .pt-small { margin-top: 2px; }
body.customers .table-tickets .pt-td-arrow a {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: -9px -8px -9px 0;
    color: var(--pt-muted); border-radius: var(--pt-radius-xs);
}
body.customers .table-tickets > tbody > tr:hover .pt-td-arrow a { color: var(--pt-accent); }
body.customers .table-tickets th.pt-td-arrow { width: 44px; }
body.customers .table-tickets .pt-badge { vertical-align: middle; }

/* ── New ticket ──────────────────────────────────────────────────────── */
body.customers .pt-form-card { max-width: 760px; }
body.customers .pt-form-card .pt-kv-item { margin-bottom: 0; }
body.customers .pt-form-card .pt-kv-value { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1px solid var(--pt-border); border-radius: var(--pt-radius-sm); background: var(--pt-surface-2); }
body.customers .pt-details { border: 1px solid var(--pt-border); border-radius: var(--pt-radius-sm); background: var(--pt-surface-2); padding: 0 14px; margin-bottom: 16px; }
body.customers .pt-details > summary {
    display: flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; list-style: none;
    font-size: 13.5px; font-weight: 500; color: var(--pt-text-2);
}
body.customers .pt-details > summary::-webkit-details-marker { display: none; }
body.customers .pt-details > summary::before {
    content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg); transition: transform .15s; margin-left: 2px;
}
body.customers .pt-details[open] > summary::before { transform: rotate(45deg); }
body.customers .pt-details[open] > summary { border-bottom: 1px solid var(--pt-border); margin-bottom: 14px; }
body.customers .pt-details-body { padding-bottom: 2px; }
body.customers .pt-details-body .row { margin: 0 -8px; }
body.customers .pt-details-body .row > [class*="col-"] { padding: 0 8px; }
body.customers .pt-form-card .attachments .input-group { max-width: 480px; }
body.customers .pt-form-card .input-group-btn .btn { min-width: 44px; }
body.customers .pt-form-card .pt-card-foot { justify-content: flex-end; }

/* ── Single ticket (portal + public route share the .ow-pt markup) ───── */
body.customers .ow-pt { padding: 0; max-width: 880px; }
body.customers .ow-pt-header { padding: 0; margin-bottom: 20px; }
body.customers .pt-ticket .pt-page-head { align-items: flex-start; }
body.customers .pt-page-head-main { min-width: 0; flex: 1; }
body.customers .pt-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; }
body.customers .pt-back i { font-size: 11px; }
body.customers .pt-ticket .ow-pt-title { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; overflow-wrap: anywhere; }
body.customers .pt-ticket-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; color: var(--pt-muted); font-size: 13.5px; }
body.customers .pt-ticket-meta > * + *::before { content: "·"; margin-right: 10px; color: var(--pt-faint); }
body.customers .pt-ticket-meta .pt-ticket-status::before { display: none; }
body.customers .pt-ticket-meta a { color: var(--pt-accent-text); font-weight: 500; }
body.customers .pt-ticket-meta a:hover { text-decoration: underline; }
body.customers .pt-ticket-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.customers .pt-ticket-status-inline { display: inline-flex; align-items: center; gap: 4px; }
body.customers .ow-pt-status-edit { width: 28px; height: 28px; margin: 0; border-radius: var(--pt-radius-xs); color: var(--pt-text-2); }
body.customers .ow-pt-status-edit:hover { background: var(--pt-surface-3); color: var(--pt-text); }
body.customers .ow-pt-status-form .input-group { max-width: 320px; }

body.customers .ow-pt-section-title { margin: 24px 0 12px; font-size: 16px; font-weight: 600; color: var(--pt-text); }
body.customers .ow-pt-count { min-width: 22px; height: 22px; border-radius: 11px; border-color: transparent; background: var(--pt-surface-3); color: var(--pt-muted); font-size: 12px; }

body.customers .ow-pt-msg { padding: 16px 20px; margin-bottom: 12px; }
body.customers .ow-pt-msg-staff { border-left: 3px solid var(--pt-accent); background: var(--pt-surface); }
body.customers .ow-pt-avatar { width: 36px; height: 36px; font-size: 13px; color: var(--pt-text-2); background: var(--pt-surface-3); border-color: var(--pt-border); }
body.customers .ow-pt-msg-staff .ow-pt-avatar { color: #fff; background: var(--pt-accent); border-color: var(--pt-accent); }
body.customers .ow-pt-msg-author { font-size: 14px; }
body.customers .ow-pt-badge { background: var(--pt-accent-soft); color: var(--pt-accent-text); border-radius: var(--pt-radius-xs); letter-spacing: .02em; }
body.customers .ow-pt-msg-time { font-size: 12.5px; color: var(--pt-muted); }
body.customers .ow-pt-msg-body { font-size: 14.5px; line-height: 1.6; color: var(--pt-text); }
body.customers .ow-pt-msg-body a { color: var(--pt-accent-text); text-decoration: underline; }
body.customers .ow-pt-msg-body a:hover, body.customers .ow-pt-msg-body a:focus { color: var(--pt-accent-hover); }

body.customers .ow-pt-attachments { border-top-color: var(--pt-border); }
body.customers .ow-pt .ow-pt-attachment { background: var(--pt-surface-2); border-color: var(--pt-border); border-radius: var(--pt-radius-sm); color: var(--pt-text-2); font-size: 13px; }
body.customers .ow-pt .ow-pt-attachment:hover, body.customers .ow-pt .ow-pt-attachment:focus { border-color: var(--pt-accent); color: var(--pt-accent-text); }
body.customers .ow-pt-thumb { border-radius: var(--pt-radius-sm); border-color: var(--pt-border); }

body.customers .ow-pt-composer { padding: 18px 20px; margin-top: 8px; }
body.customers .ow-pt-composer .control-label { font-size: 13px; font-weight: 500; color: var(--pt-text-2); }
body.customers .ow-pt-composer textarea.form-control { min-height: 130px; }
body.customers .ow-pt-req, body.customers .ow-pt-error { color: var(--pt-danger); }
body.customers .ow-pt-hint { color: var(--pt-muted); font-size: 12.5px; }
body.customers .ow-pt-composer-actions { margin-top: 14px; }

/* Public CSS uses a blue focus ring — keep the portal's accent ring */
body.customers .ow-pt a:focus-visible, body.customers .ow-pt button:focus-visible, body.customers .ow-pt select:focus-visible,
body.customers .ow-pt textarea:focus-visible, body.customers .ow-pt input:focus-visible { outline: 2px solid var(--pt-accent); outline-offset: 2px; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
    body.customers .pt-support-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    body.customers .pt-ticket .ow-pt-title { font-size: 21px; }
    body.customers .pt-ticket .pt-page-actions { width: 100%; }
    body.customers .pt-ticket .pt-page-actions .pt-btn { width: 100%; }
    body.customers .ow-pt-msg { padding: 14px 16px; }
    body.customers .ow-pt-composer { padding: 16px; }
}