/* =============================================================================
   SupportDesk - nur was die Anrufliste zusätzlich zu .cm-list braucht. Werte aus tokens.css.
   ============================================================================= */

/* offene (verpasste, nicht zurückgerufene) Anrufe: hell orange, Strich links */
/* Farben gelten in jeder Zeile, auch der abgesetzten (gleiche Spezifität, diese Datei kommt später) */
body .cm-list__table.ui-datatable tbody tr.cm-row-open > td,
body .cm-list__table.ui-datatable tbody tr.cm-row-open:nth-child(even) > td {
    background: var(--cm-call-open-bg);
}

body .cm-list__table.ui-datatable tbody tr.cm-row-open:hover > td {
    background: var(--cm-call-open-hover);
}

body .cm-list__table.ui-datatable tbody tr.cm-row-open > td:first-child {
    box-shadow: inset 3px 0 0 var(--cm-call-open-mark);
}

/* läuft gerade: hellblau - so sieht man, wer telefoniert */
body .cm-list__table.ui-datatable tbody tr.cm-row-running > td,
body .cm-list__table.ui-datatable tbody tr.cm-row-running:nth-child(even) > td {
    background: var(--cm-call-running-bg);
}

body .cm-list__table.ui-datatable tbody tr.cm-row-running:hover > td {
    background: var(--cm-call-running-hover);
}

body .cm-list__table.ui-datatable tbody tr.cm-row-running > td:first-child {
    box-shadow: inset 3px 0 0 var(--cm-call-running-mark);
}

.cm-segments__item--active .cm-segments__count--alert,
.cm-segments__count--alert {
    background: var(--cm-warn-bg);
    color: var(--cm-warn);
}

/* Richtung als Symbol vor der Zeit */
.cm-call-dir {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    margin-right: var(--cm-space-2);
    border-radius: 50%;
    font-size: .75rem;
}

.cm-call-dir--incoming {
    background: var(--cm-brand-tint);
    color: var(--cm-brand);
}

.cm-call-dir--outgoing {
    background: var(--cm-neutral-bg);
    color: var(--text-color-secondary);
}

body .cm-list__table.ui-datatable .cm-col-time,
body .cm-list__table.ui-datatable .cm-col-number,
body .cm-list__table.ui-datatable .cm-col-duration {
    white-space: nowrap;
}

.cm-call-key {
    margin-left: var(--cm-space-2);
    font-size: var(--cm-font-size-xs);
}

/* „live“ mit pulsierendem Punkt */
.cm-live {
    display: inline-flex;
    align-items: center;
    gap: var(--cm-space-2);
    color: var(--text-color-secondary);
    font-size: var(--cm-font-size-xs);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.cm-live i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cm-live);
    animation: cm-live-pulse 2s ease-in-out infinite;
}

@keyframes cm-live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}

/* Zeitraum als Knopfgruppe in der Filterzeile */
body .cm-period.ui-selectonebutton .ui-button {
    height: var(--cm-input-height-lg);
    font-size: var(--cm-font-size-base);
}

/* Adressen auf der Stammdaten-Seite */
.cm-code {
    display: block;
    padding: var(--cm-space-2) var(--cm-space-3);
    border-radius: var(--cm-radius-sm);
    background: var(--surface-b);
    font-size: var(--cm-font-size-sm);
    overflow-wrap: anywhere;
}

/* Nummer als Link: Markenfarbe, Unterstrich erst beim Überfahren */
a.cm-tel {
    color: var(--cm-brand-hover);
    text-decoration: none;
}

a.cm-tel:hover {
    text-decoration: underline;
}

/* „wieder öffnen“ nur angedeutet, sichtbar beim Überfahren der Zeile */
body .cm-call-reopen.ui-button {
    opacity: .35;
}

body tr:hover .cm-call-reopen.ui-button {
    opacity: 1;
}

body .cm-period.ui-selectonebutton .ui-button.ui-state-active {
    background: var(--cm-brand);
    border-color: var(--cm-brand);
    color: var(--cm-topbar-fg);
}

/* Kontakt in der Anrufliste: Kürzel kräftig, Person dahinter normal */
.cm-call-person {
    color: var(--text-color-secondary);
}

/* von Hand geändert: wer und wann, klein und grau */
.cm-call-manual {
    display: inline-flex;
    align-items: center;
    gap: var(--cm-space-1);
    color: var(--text-color-secondary);
    font-size: var(--cm-font-size-xs);
    white-space: nowrap;
}

body .cm-list__table.ui-datatable .cm-col-operator {
    white-space: nowrap;
}

/* kompakt: Richtungssymbol kleiner */
.cm-list__table--compact .cm-call-dir {
    width: 1.3rem;
    height: 1.3rem;
    font-size: .65rem;
}

/* "Person anlegen" bei unbekannter Nummer: dezent, beim Überfahren der Zeile deutlich */
.cm-call-addperson {
    margin-left: var(--cm-space-2);
    color: var(--cm-brand-hover);
    font-size: var(--cm-font-size-xs);
    text-decoration: none;
    opacity: .55;
}

tr:hover .cm-call-addperson {
    opacity: 1;
}

body .cm-colchooser-dialog .ui-autocomplete,
body .cm-colchooser-dialog .ui-autocomplete-input {
    width: 100%;
}

.cm-call-addperson {
    white-space: nowrap;
}

/* =============================================================================
   Tickets (support/ticket.xhtml, tickets.xhtml, ticket_report.xhtml)
   ============================================================================= */

.cm-ticket {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cm-space-4);
    align-items: flex-start;
}

.cm-ticket__main {
    flex: 999 1 34rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cm-space-3);
}

.cm-ticket__side {
    flex: 1 1 20rem;
    max-width: 24rem;
    display: flex;
    flex-direction: column;
    gap: var(--cm-space-3);
}

.cm-ticket__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cm-space-1) var(--cm-space-2);
    color: var(--text-color-secondary);
    font-size: var(--cm-font-size-sm);
}

.cm-ticket__number {
    color: var(--cm-brand);
}

.cm-ticket__title {
    margin: var(--cm-space-1) 0 0;
    font-size: 1.3rem;
    font-weight: 600;
    cursor: text;
}

body .cm-ticket__title-input {
    width: 100%;
    font-size: 1.15rem;
}

.cm-ticket__yt-empty {
    border-style: dashed;
    cursor: pointer;
}

.cm-ticket__ps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--cm-space-3);
}

.cm-ticket__label {
    margin-top: var(--cm-space-2);
    font-size: var(--cm-font-size-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-color-secondary);
}

.cm-ticket__ps .cm-ticket__label {
    margin-top: 0;
}

.cm-ticket__text {
    margin: var(--cm-space-1) 0 0;
    line-height: 1.45;
    white-space: pre-line;
    cursor: text;
}

.cm-ticket__solution--set {
    background: var(--cm-ok-bg);
    border-color: var(--cm-ok-border);
}

.cm-w-full,
body .cm-w-full.ui-inputfield {
    width: 100%;
}

/* history */
.cm-ticket__history {
    padding-top: var(--cm-space-1);
    padding-bottom: var(--cm-space-1);
}

.cm-entry {
    padding: var(--cm-space-3) 0;
    border-top: 1px solid var(--surface-border);
}

.cm-entry:first-child {
    border-top: 0;
}

.cm-entry--system {
    padding: var(--cm-space-1) 0;
}

.cm-entry__system {
    color: var(--text-color-secondary);
    font-size: var(--cm-font-size-sm);
}

.cm-entry--note {
    background: var(--cm-warn-bg);
    margin: 0 calc(-1 * var(--cm-space-5));
    padding-left: var(--cm-space-5);
    padding-right: var(--cm-space-5);
}

.cm-entry__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cm-space-2);
}

.cm-entry__type {
    padding: 0 var(--cm-space-2);
    border-radius: 999px;
    background: var(--cm-brand-tint);
    color: var(--cm-brand);
    font-size: var(--cm-font-size-xs);
    font-weight: 600;
}

.cm-entry--note .cm-entry__type {
    background: var(--cm-warn-border);
    color: var(--cm-warn);
}

.cm-entry--reply .cm-entry__type {
    background: var(--cm-ok-bg);
    color: var(--cm-ok);
}

.cm-entry__edited {
    font-style: italic;
    font-size: var(--cm-font-size-xs);
}

.cm-entry--deleted {
    opacity: .6;
}

.cm-entry__text {
    margin-top: var(--cm-space-1);
    line-height: 1.45;
}

.cm-rich p {
    margin: 0 0 var(--cm-space-1);
}

.cm-attachment__thumb--large {
    max-width: 20rem;
    max-height: 14rem;
}

/* composer */
.cm-ticket__composer {
    display: flex;
    flex-direction: column;
    gap: var(--cm-space-2);
}

.cm-ticket__draft--note .ql-container {
    background: var(--cm-warn-bg);
}

.cm-ticket__actions {
    padding-top: var(--cm-space-2);
    border-top: 1px solid var(--surface-border);
}

/* side fields: compact property list like Jira/YouTrack - label small and grey on the left,
   value on the right; help texts as tooltip on the label (crm:field tip) */
.cm-ticket__props {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: var(--cm-space-2) var(--cm-space-3);
    align-items: center;
}

.cm-ticket__props > label {
    color: var(--text-color-secondary);
    font-size: var(--cm-font-size-sm);
    font-weight: 500;
}

.cm-ticket__props > label.cm-has-tip {
    cursor: help;
    text-decoration: underline dotted var(--surface-border);
    text-underline-offset: 3px;
}

body .cm-ticket__props .ui-selectonemenu,
body .cm-ticket__props .ui-calendar,
body .cm-ticket__props .ui-inputfield {
    width: 100%;
}

/* lower selects with the text centred (the theme sets the label too low in narrow fields) */
body .cm-ticket__side .ui-selectonemenu {
    height: 2rem;
}

body .cm-ticket__side .ui-selectonemenu .ui-selectonemenu-label {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 var(--cm-space-2);
    font-size: var(--cm-font-size-sm);
    line-height: 1.2;
}

body .cm-ticket__side .ui-selectonemenu .ui-selectonemenu-trigger {
    width: 2rem;
}

body .cm-ticket__side .ui-inputfield {
    height: 2rem;
    padding: 0 var(--cm-space-2);
    font-size: var(--cm-font-size-sm);
}

/* follow-up quick choices: small quiet chips */
.cm-ticket__side .cm-due {
    gap: var(--cm-space-1);
}

.cm-ticket__side .cm-due + .cm-due {
    margin-top: var(--cm-space-1);
}

body .cm-ticket__side a.cm-chip-btn {
    display: inline-flex;
    align-items: center;
    height: 1.5rem;
    padding: 0 var(--cm-space-2);
    color: var(--text-color-secondary);
    font-size: var(--cm-font-size-xs);
    font-weight: 500;
    text-decoration: none;
}

body .cm-ticket__side a.cm-chip-btn:hover {
    color: var(--cm-brand);
}

.cm-ticket__total {
    grid-column: 1 / -1;
    padding-top: var(--cm-space-2);
    border-top: 1px solid var(--surface-border);
    color: var(--text-color-secondary);
    font-size: var(--cm-font-size-sm);
}

/* customer card: links quiet, label column like above */
.cm-ticket__customer .cm-ticket__props {
    margin-bottom: var(--cm-space-2);
}

.cm-ticket__customer .cm-ticket__domains {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: var(--cm-space-1) var(--cm-space-3);
}

.cm-ticket__customer .cm-ticket__domains dt {
    color: var(--text-color-secondary);
}

.cm-ticket__customer .cm-ticket__domains dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.cm-ticket__customer a:not(.cm-record__key) {
    color: var(--cm-brand);
    text-decoration: none;
}

.cm-ticket__customer a:not(.cm-record__key):hover {
    text-decoration: underline;
}

.cm-due--reached input {
    color: var(--cm-err);
    font-weight: 600;
}

.cm-ticket__customer-name {
    margin: var(--cm-space-1) 0 var(--cm-space-2);
    font-weight: 600;
}

.cm-ticket__domains {
    margin: var(--cm-space-2) 0;
    font-size: var(--cm-font-size-sm);
}

.cm-ticket__all {
    display: block;
    margin: var(--cm-space-2) 0;
    font-weight: 600;
}

/* start page */
.cm-home-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cm-space-5);
}

.cm-home-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--cm-space-2);
    padding: 2px 0;
}

/* evaluation */
.cm-report .cm-card {
    min-width: 18rem;
}

.cm-bar {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr) 4.5rem;
    gap: var(--cm-space-2);
    align-items: center;
    margin: var(--cm-space-1) 0;
}

.cm-bar__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cm-bar__track {
    height: 10px;
    border-radius: 5px;
    background: var(--surface-ground);
    overflow: hidden;
}

.cm-bar__fill {
    display: block;
    height: 100%;
    border-radius: 5px;
    background: var(--cm-module-support);
}

.cm-bar__value {
    text-align: right;
    color: var(--text-color-secondary);
}

/* NFON action URLs (Stammdaten › Benutzer) */
.cm-nfon-url {
    margin-bottom: var(--cm-space-3);
}

.cm-nfon-url__label {
    display: block;
    margin-bottom: 2px;
    font-weight: 600;
}

.cm-nfon-url__row {
    display: flex;
    gap: var(--cm-space-2);
    align-items: flex-start;
}

.cm-nfon-url__text {
    flex: 1;
    min-width: 0;
    padding: var(--cm-space-1) var(--cm-space-2);
    border: 1px solid var(--surface-border);
    border-radius: var(--cm-radius-sm);
    background: var(--surface-ground);
    font-family: Consolas, monospace;
    font-size: var(--cm-font-size-xs);
    resize: none;
    word-break: break-all;
}

/* angenommen, aber in keinem Ticket (CallTickets): orange Kante - sollte es kaum geben */
body .cm-list__table.ui-datatable tbody tr.cm-row-noticket > td:first-child {
    box-shadow: inset 3px 0 0 var(--cm-warn);
}

.cm-col-ticket {
    white-space: nowrap;
}

.cm-call-noticket {
    margin-left: var(--cm-space-2);
    color: var(--text-color-secondary);
    font-size: var(--cm-font-size-xs);
    text-decoration: none;
    opacity: .55;
}

tr:hover .cm-call-noticket {
    opacity: 1;
}

/* --- SupportDesk › E-Mails: Liste links, Mail rechts --- */
.cm-mail {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); /* Mail lesen ist wichtiger als die Liste (Wunsch 03.11.2026) */
    gap: var(--cm-space-4);
    align-items: start;
}

@media (max-width: 1100px) {
    .cm-mail {
        grid-template-columns: 1fr;
    }
}

.cm-mail__open {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.cm-mail__from {
    display: flex;
    gap: var(--cm-space-2);
    align-items: center;
    font-size: var(--cm-font-size-sm);
}

.cm-mail__subject {
    font-weight: 600;
}

body .cm-list__table.ui-datatable tbody tr.cm-row-selected > td {
    background: var(--surface-hover);
}

.cm-mail__view {
    position: sticky;
    top: calc(var(--cm-topbar-height) + var(--cm-space-3));
    max-height: calc(100vh - var(--cm-topbar-height) - 2 * var(--cm-space-4));
    overflow: auto;
}

.cm-mail__body {
    margin-top: var(--cm-space-3);
    padding-top: var(--cm-space-3);
    border-top: 1px solid var(--surface-border);
    overflow-wrap: anywhere;
}

.cm-mail__body img {
    max-width: 100%;
    height: auto;
}

/* Ticket: Empfänger über dem Text bei „Antwort an Kunde“ */
.cm-ticket__replyto {
    display: flex;
    align-items: center;
    gap: var(--cm-space-2);
    margin-bottom: var(--cm-space-2);
}

/* schmale Liste: Zeit und Zuständig kompakt, Aktionen nebeneinander */
.cm-mail__list .cm-mail__when {
    width: 6.5rem;
    white-space: nowrap;
    font-size: var(--cm-font-size-sm);
}

.cm-mail__list .cm-mail__who {
    width: 7rem;
    font-size: var(--cm-font-size-sm);
}

.cm-mail__list .cm-col-actions {
    width: 11.5rem;
    white-space: nowrap;
}

.cm-mail__subject {
    overflow-wrap: anywhere;
}

/* Outlook-Farbkategorie: Kästchen wie in Outlook (Farben in tokens.css) */
.cm-ocat {
    display: inline-block;
    width: .8rem;
    height: .8rem;
    margin-right: var(--cm-space-1);
    border-radius: 2px;
    vertical-align: -1px;
    background: var(--surface-border);
}

.cm-ocat-chip {
    display: inline-flex;
    align-items: center;
    margin-right: var(--cm-space-3);
    white-space: nowrap;
}
.cm-ocat--preset0 { background: var(--cm-outlook-preset0); }
.cm-ocat--preset1 { background: var(--cm-outlook-preset1); }
.cm-ocat--preset2 { background: var(--cm-outlook-preset2); }
.cm-ocat--preset3 { background: var(--cm-outlook-preset3); }
.cm-ocat--preset4 { background: var(--cm-outlook-preset4); }
.cm-ocat--preset5 { background: var(--cm-outlook-preset5); }
.cm-ocat--preset6 { background: var(--cm-outlook-preset6); }
.cm-ocat--preset7 { background: var(--cm-outlook-preset7); }
.cm-ocat--preset8 { background: var(--cm-outlook-preset8); }
.cm-ocat--preset9 { background: var(--cm-outlook-preset9); }
.cm-ocat--preset10 { background: var(--cm-outlook-preset10); }
.cm-ocat--preset11 { background: var(--cm-outlook-preset11); }
.cm-ocat--preset12 { background: var(--cm-outlook-preset12); }
.cm-ocat--preset13 { background: var(--cm-outlook-preset13); }
.cm-ocat--preset14 { background: var(--cm-outlook-preset14); }
.cm-ocat--preset15 { background: var(--cm-outlook-preset15); }
.cm-ocat--preset16 { background: var(--cm-outlook-preset16); }
.cm-ocat--preset17 { background: var(--cm-outlook-preset17); }
.cm-ocat--preset18 { background: var(--cm-outlook-preset18); }
.cm-ocat--preset19 { background: var(--cm-outlook-preset19); }
.cm-ocat--preset20 { background: var(--cm-outlook-preset20); }
.cm-ocat--preset21 { background: var(--cm-outlook-preset21); }
.cm-ocat--preset22 { background: var(--cm-outlook-preset22); }
.cm-ocat--preset23 { background: var(--cm-outlook-preset23); }
.cm-ocat--preset24 { background: var(--cm-outlook-preset24); }

/* PrimeFaces sets the width of select menus from their content (inline style) - in the narrow
   side bar they have to fit the column instead */
body .cm-ticket__side .ui-selectonemenu {
    width: 100% !important;
    min-width: 0 !important;
}

body .cm-ticket__side .ui-calendar {
    display: flex;
    width: 100%;
}

body .cm-ticket__side .ui-calendar input {
    flex: 1;
    min-width: 0;
}

/* long addresses on one line, full address as tooltip */
.cm-ticket__customer .cm-ticket__domains dd a {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* long values ("AM – Verwaltungsprogramm") end with … before the arrow */
body .cm-ticket__side .ui-selectonemenu .ui-selectonemenu-label {
    display: block;
    height: 2rem;
    line-height: 2rem;
    padding-right: 2.25rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* follow-up date: input and calendar button inside the column */
.cm-ticket__side .cm-due > .ui-calendar {
    flex: 1 1 auto;
    min-width: 0;
}

body .cm-ticket__side .ui-calendar input.ui-inputfield {
    width: auto !important;
    min-width: 0;
}

body .cm-ticket__side .ui-calendar .ui-datepicker-trigger {
    flex: 0 0 2rem;
    height: 2rem;
}