/* Ticket-only metadata grouping. Opportunity screens retain their existing cards. */
.ot-detail-rail {
    min-width: 0;
}

.ot-detail-group {
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.6rem;
    background: var(--bs-body-bg, #fff);
    min-width: 0;
}

.ot-detail-group-title {
    margin: 0 0 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: #495366;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.ot-detail-peer-title {
    margin: 0;
    color: #343a40;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
}

.ot-detail-group .card.ot-card {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    margin: 0 !important;
    min-width: 0;
}

.ot-detail-group > .card + .card {
    border-top: 1px solid #edf0f3;
}

.ot-detail-group .card-body {
    padding: 0.65rem 0;
    min-width: 0;
}

.ot-detail-group #assignee-section .d-grid {
    gap: 0.65rem !important;
}

.ot-detail-group .ot-party-label,
.ot-detail-group #status-section .card-body > .d-flex > .small,
.ot-detail-group #version-section .card-body > .d-flex > .small,
.ot-detail-group #priority-section .card-body > .d-flex > .small,
.ot-detail-group #resolution-section .card-body > .d-flex > .small {
    min-width: 5.25rem;
}

.ot-detail-group .ot-inline-edit,
.ot-detail-group .ot-inline-display,
.ot-detail-group .ot-party-row > div,
.ot-detail-group .ot-chip,
.ot-detail-group .ot-tag,
.ot-detail-group .ot-code-item-title {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
}

.ot-detail-group input:not([type='checkbox'], [type='hidden']),
.ot-detail-group select {
    min-width: 0;
    max-width: 100%;
}

.ot-detail-group details {
    margin-top: 0.6rem;
    min-width: 0;
}

.ot-detail-group summary {
    width: fit-content;
    max-width: 100%;
    cursor: pointer;
    color: #344a72;
    font-size: 0.875rem;
    overflow-wrap: anywhere;
    padding: 0.25rem 0;
}

.ot-detail-group summary:hover {
    color: #172d50;
    text-decoration: underline;
}

.ot-detail-group summary:focus-visible,
.ot-detail-group a:focus-visible,
.ot-detail-group button:focus-visible {
    outline: 2px solid #4263a1;
    outline-offset: 3px;
}

.ot-detail-time-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 1.5rem;
    margin: 0.65rem 0 0;
    font-size: 0.875rem;
}

.ot-detail-time-summary dt {
    color: #697386;
    font-weight: 400;
    font-size: 0.8rem;
}

.ot-detail-time-summary dd {
    margin: 0;
    font-weight: 600;
}

.ot-detail-group #time-estimates-section h2 {
    font-size: 0.85rem;
}

.ot-detail-group #time-estimates-section .col-lg-3,
.ot-detail-group #time-estimates-section .col-lg-4,
.ot-detail-group #time-estimates-section .col-lg-5 {
    flex: 0 0 100%;
    width: 100%;
}

.ot-detail-group #time-estimates-section .row {
    margin-inline: 0;
}

.ot-detail-group .ot-code-compact-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0;
    border: 0;
    border-bottom: 1px solid #edf0f3;
    border-radius: 0;
    background: transparent;
}

.ot-detail-group .ot-code-item-title {
    display: grid;
    gap: 0.1rem;
    line-height: 1.4;
    flex: 1;
}

.ot-detail-group .ot-code-reference {
    font-size: 0.78rem;
    font-weight: 600;
}

.ot-detail-group .ot-code-summary {
    font-size: 0.875rem;
    font-weight: 400;
}

.ot-detail-group .ot-code-state {
    flex: 0 0 auto;
}

.ot-work-item-detail--ticket .ot-linked-ticket-list {
    padding-left: 1.35rem;
    list-style: disc;
}

.ot-work-item-detail--ticket .ot-linked-ticket-list > li {
    padding-left: 0.1rem;
    margin-bottom: 0.45rem;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.ot-work-item-detail--ticket .ot-linked-ticket-key {
    font-weight: 600;
}

.ot-work-item-detail--ticket .ot-linked-ticket-status {
    padding: 0.2rem 0.35rem;
    font-size: 0.75rem;
    vertical-align: middle;
}

.ot-code-state-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.7rem;
}

.ot-work-item-timestamps {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 1rem;
    margin-top: 0.25rem;
    color: #5c6677;
    font-size: 0.8125rem;
    line-height: 1.55;
}

.ot-work-item-timestamp {
    min-width: 0;
    white-space: nowrap;
    overflow-wrap: anywhere;
}

.ot-work-item-timestamp > span {
    font-weight: 600;
}

/* Size containment names the ticket pane; intrinsic flex minimums also handle
   CSS zoom consistently in engines whose container-query zoom units differ. */
.ot-work-item-detail--ticket {
    container-name: work-item-detail;
    container-type: inline-size;
    min-width: 0;
}

.ot-work-item-detail--ticket .ot-detail-main > .card.ot-card.mb-3,
.ot-work-item-detail--ticket .ot-detail-rail > .ot-detail-group {
    margin-bottom: 0.75rem !important;
}

/* Porto gives adjacent cards a 2.2rem top margin, which hides the 12px rhythm. */
.ot-work-item-detail--ticket .ot-detail-main > .card.ot-card + .card.ot-card {
    margin-top: 0;
}

.ot-work-item-detail--ticket .ot-work-item-head-tools > .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    height: 1.35rem;
    min-height: 1.35rem;
    padding: 0 0.35rem;
    font-size: 0.75rem;
    line-height: 1;
}

.ot-work-item-detail--ticket .ot-detail-columns > .ot-detail-main {
    flex-grow: 1;
    min-width: min(100%, 540px);
}

.ot-work-item-detail--ticket .ot-detail-columns > .ot-detail-rail {
    flex-grow: 1;
    min-width: min(100%, 280px);
}

.ot-work-item-detail--ticket .ot-work-item-head-top,
.ot-work-item-detail--ticket .ot-work-item-head-tools,
.ot-work-item-detail--ticket .ot-work-item-head-tools .breadcrumbs,
.ot-work-item-detail--ticket .ot-work-item-head-form .ot-work-item-head-title-main {
    flex-wrap: wrap;
}

.ot-work-item-detail--ticket .ot-work-item-head-subtitle {
    min-width: min(100%, 12rem);
}

.ot-work-item-detail--ticket .ot-work-item-head-tools {
    max-width: 100%;
    flex-shrink: 1;
}

.ot-work-item-detail--ticket .ot-work-item-head-title-edit-shell {
    flex-basis: min(24rem, 100%);
}

.ot-work-item-detail--ticket .ot-quick-jump {
    min-width: 0;
    max-width: 100%;
}

.ot-work-item-detail--ticket #attachments-section .col-md-6 {
    min-width: min(100%, 12rem);
    flex-grow: 1;
}

.ot-work-item-detail--ticket #attachments-section .col-md-3 {
    min-width: min(100%, 6rem);
    flex-grow: 1;
}

.ot-work-item-detail--ticket .ot-detail-main .form-control,
.ot-work-item-detail--ticket .ot-detail-main .form-select {
    min-width: 0;
    max-width: 100%;
}

.ot-work-item-detail--ticket #links-section form.d-flex,
.ot-work-item-detail--ticket .ot-party-row {
    flex-wrap: wrap;
}

.ot-work-item-detail--ticket #links-section input[name='target_key'] {
    flex: 1 1 12rem;
    min-width: min(100%, 12rem);
}