.detail-page {
    --detail-blue: #2f6df6;
    --detail-blue-soft: #eaf2ff;
    --detail-green: #16a34a;
    --detail-green-soft: #ecfdf5;
    --detail-amber: #f59e0b;
    --detail-amber-soft: #fffbeb;
    --detail-red: #ef4444;
    --detail-red-soft: #fee2e2;
    --detail-text: #172033;
    --detail-muted: #8a99ad;
    --detail-border: #dbe4ee;
    --detail-soft: #f8fafc;
    color: var(--detail-text);
    display: grid;
    gap: 1.25rem;
}

.detail-page__header,
.detail-page__actions,
.detail-summary,
.detail-person,
.detail-action-row,
.detail-card__header,
.detail-comment__meta,
.detail-timeline__row {
    align-items: center;
    display: flex;
}

.detail-page__header {
    gap: 1rem;
    justify-content: space-between;
}

.detail-page__title h1 {
    font-size: 1.65rem;
    font-weight: 950;
    line-height: 1.1;
    margin: 0;
}

.detail-page__actions,
.detail-action-row {
    flex-wrap: wrap;
    gap: .65rem;
}

.detail-layout {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 2.1fr) minmax(320px, .95fr);
}

.detail-card {
    background: #fff;
    border: 1px solid var(--detail-border);
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(16, 24, 40, .045);
    overflow: hidden;
}

.detail-card__header {
    border-bottom: 1px solid #edf2f7;
    gap: .55rem;
    justify-content: space-between;
    padding: 1rem 1.25rem;
}

.detail-card__header h2 {
    font-size: 1rem;
    font-weight: 900;
    margin: 0;
}

.detail-card__body {
    padding: 1.25rem;
}

.detail-summary {
    align-items: stretch;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
}

.detail-summary__main {
    display: grid;
    gap: 1.35rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 1.5rem;
}

.detail-summary__aside {
    border-left: 1px solid #edf2f7;
    display: grid;
    gap: 1rem;
    padding: 1.5rem;
}

.detail-person {
    gap: .75rem;
}

.detail-person__name {
    display: block;
    font-weight: 900;
    line-height: 1.1;
}

.detail-person__meta,
.detail-field__label {
    color: var(--detail-muted);
    font-size: .85rem;
    font-weight: 750;
}

.detail-field__value {
    color: var(--detail-text);
    display: block;
    font-weight: 900;
    margin-top: .2rem;
}

.detail-balance-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-balance {
    background: var(--detail-soft);
    border: 1px solid #edf2f7;
    border-radius: 12px;
    padding: 1.15rem;
}

.detail-balance--success {
    background: var(--detail-green-soft);
    border-color: #bbf7d0;
}

.detail-balance span {
    color: var(--detail-muted);
    display: block;
    font-size: .82rem;
    font-weight: 900;
}

.detail-balance strong {
    display: block;
    font-size: 1.8rem;
    font-weight: 950;
    line-height: 1;
    margin-top: .55rem;
}

.detail-balance small {
    color: var(--detail-muted);
    display: block;
    font-weight: 750;
    margin-top: .45rem;
}

.detail-balance--success span,
.detail-balance--success small,
.detail-balance--success strong {
    color: var(--detail-green);
}

.detail-notice {
    align-items: center;
    background: var(--detail-amber-soft);
    border: 1px solid #fde7b5;
    border-radius: 12px;
    color: #b45309;
    display: flex;
    font-weight: 800;
    gap: .65rem;
    padding: .9rem 1rem;
}

.detail-action-row {
    border-top: 1px solid #edf2f7;
    justify-content: space-between;
    padding: 1rem 1.5rem;
}

.detail-button--danger {
    background: var(--detail-red);
    border-color: var(--detail-red);
    color: #fff;
}

.detail-button--danger:hover {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

.detail-action-group {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.detail-action-panel {
    background: #fff;
    border-top: 1px solid #edf2f7;
    display: none;
    padding: 1rem 1.5rem 1.25rem;
}

.detail-action-panel.is-active {
    display: block;
}

.detail-main-stack {
    display: grid;
    gap: 1.25rem;
}

.detail-side-stack {
    display: grid;
    gap: 1.25rem;
    align-content: start;
}

.detail-table-total td {
    background: var(--detail-blue-soft);
    color: var(--detail-blue);
    font-weight: 900;
}

.detail-thread {
    display: grid;
    gap: 1rem;
}

.detail-comment {
    display: grid;
    gap: .45rem;
    grid-template-columns: auto 1fr;
}

.detail-comment__meta {
    gap: .5rem;
    margin-bottom: .35rem;
}

.detail-comment__author {
    font-weight: 900;
}

.detail-comment__bubble {
    background: var(--detail-soft);
    border: 1px solid #edf2f7;
    border-radius: 10px;
    color: #475569;
    padding: .85rem 1rem;
}

.detail-comment__bubble--warning {
    background: var(--detail-amber-soft);
    border-color: #fde7b5;
}

.detail-comment__bubble--muted {
    color: var(--detail-muted);
    font-style: italic;
}

.detail-comment-form {
    display: grid;
    gap: .75rem;
}

.detail-comment-form textarea {
    min-height: 74px;
    resize: vertical;
}

.detail-timeline {
    display: grid;
}

.detail-timeline__row {
    border-bottom: 1px solid #edf2f7;
    display: grid;
    gap: 1rem;
    grid-template-columns: 150px minmax(120px, .5fr) minmax(110px, .45fr) minmax(0, 1fr);
    padding: .9rem 1.25rem;
}

.detail-timeline__row:last-child {
    border-bottom: 0;
}

.detail-timeline__head {
    background: var(--detail-soft);
    color: #74839a;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.detail-validation-list {
    display: grid;
    gap: .75rem;
}

.detail-validation-item {
    align-items: center;
    background: var(--detail-soft);
    border: 1px solid #edf2f7;
    border-radius: 10px;
    display: flex;
    gap: .7rem;
    padding: .85rem;
}

.detail-validation-item i {
    color: var(--detail-blue);
}

.detail-layout--validation {
    grid-template-columns: minmax(0, 2fr) minmax(300px, .95fr);
}

.detail-calendar-scroll {
    overflow-x: auto;
}

.detail-calendar-table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 760px;
    width: 100%;
}

.detail-calendar-table th,
.detail-calendar-table td {
    border-bottom: 1px solid #edf2f7;
    padding: .65rem .5rem;
    text-align: center;
}

.detail-calendar-table th:first-child,
.detail-calendar-table td:first-child {
    min-width: 190px;
    text-align: left;
}

.detail-calendar-table th {
    color: #66758c;
    font-size: .82rem;
    font-weight: 900;
}

.detail-calendar-table th.is-selected {
    background: var(--detail-blue-soft);
    color: var(--detail-blue);
}

.detail-calendar-table tbody tr:last-child td {
    border-bottom: 0;
}

.detail-calendar-person {
    align-items: center;
    color: #475569;
    display: inline-flex;
    gap: .55rem;
    min-width: 0;
}

.detail-calendar-person.is-current {
    color: var(--detail-blue);
}

.detail-calendar-person strong {
    font-weight: 900;
    white-space: nowrap;
}

.detail-page .data-avatar--sm {
    font-size: .72rem;
    height: 28px;
    min-width: 28px;
    width: 28px;
}

.detail-calendar-cell {
    align-items: center;
    background: #f1f5f9;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #c0cad8;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 950;
    height: 28px;
    justify-content: center;
    min-width: 88px;
    padding: 0 .55rem;
}

.detail-calendar-cell--current {
    background: #dbeafe;
    border-color: #bfdbfe;
    color: var(--detail-blue);
}

.detail-calendar-cell--conflict {
    background: #fef3c7;
    border-color: #fde68a;
    color: #92400e;
}

.detail-calendar-cell--approved {
    background: #dcfce7;
    border-color: #bbf7d0;
    color: var(--detail-green);
}

.detail-legend {
    align-items: center;
    color: #718198;
    display: flex;
    flex-wrap: wrap;
    font-size: .84rem;
    font-weight: 800;
    gap: 1rem;
    margin-top: .9rem;
}

.detail-legend span {
    align-items: center;
    display: inline-flex;
    gap: .4rem;
}

.detail-legend__dot {
    border-radius: 5px;
    display: inline-block;
    height: 13px;
    width: 13px;
}

.detail-legend__dot--current {
    background: #dbeafe;
    border: 1px solid #bfdbfe;
}

.detail-legend__dot--conflict {
    background: #fef3c7;
    border: 1px solid #fde68a;
}

.detail-legend__dot--approved {
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

.detail-risk-alert {
    background: var(--detail-amber-soft);
    border: 1px solid #fde68a;
    border-radius: 12px;
    color: #b45309;
    display: grid;
    gap: .55rem;
    padding: 1rem;
}

.detail-risk-alert strong,
.detail-risk-ok strong,
.detail-risk-item strong {
    color: var(--detail-text);
    font-weight: 950;
}

.detail-risk-alert p {
    margin: 0;
}

.detail-risk-ok {
    align-items: flex-start;
    background: var(--detail-green-soft);
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    display: grid;
    gap: .25rem;
    padding: 1rem;
}

.detail-risk-ok i {
    color: var(--detail-green);
    font-size: 1.35rem;
}

.detail-risk-ok span {
    color: #64748b;
    font-weight: 750;
}

.detail-link-button {
    background: transparent;
    border: 0;
    color: var(--detail-blue);
    font-weight: 900;
    padding: 0;
    text-align: left;
}

.detail-risk-list {
    display: grid;
    gap: .5rem;
    margin-top: .25rem;
}

.detail-risk-item {
    background: rgba(255, 255, 255, .65);
    border: 1px solid #fde68a;
    border-radius: 10px;
    display: grid;
    gap: .15rem;
    padding: .65rem .75rem;
}

.detail-risk-item span {
    color: #92400e;
    font-size: .86rem;
    font-weight: 750;
}

@media (max-width: 1180px) {
    .detail-layout,
    .detail-summary {
        grid-template-columns: 1fr;
    }

    .detail-summary__aside {
        border-left: 0;
        border-top: 1px solid #edf2f7;
    }
}

@media (max-width: 720px) {
    .detail-page__header,
    .detail-action-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .detail-summary__main,
    .detail-balance-grid {
        grid-template-columns: 1fr;
    }

    .detail-timeline__row {
        grid-template-columns: 1fr;
    }
}