@import url('./pages.css');

.approval-status { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-large); box-shadow: 0 18px 50px rgba(20,35,33,.07); }
.status-summary { display: flex; align-items: center; gap: 20px; padding: 32px; background: var(--canvas); }
.status-icon { width: 54px; height: 54px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: var(--paper); background: var(--success); border-radius: 50%; font-size: 1.3rem; }
.status-summary > div { flex: 1; }
.status-label { color: var(--ink-soft); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; }
.status-summary h2 { margin: 4px 0 9px; font-size: 1.55rem; font-weight: 700; }
.status-summary p { max-width: 680px; font-size: .84rem; }
.status-summary > strong { padding: 8px 12px; color: #9c5a20; background: #fff0df; border-radius: 20px; font-size: .72rem; font-weight: 800; }
.approval-timeline { display: flex; padding: 38px 30px; }
.approval-timeline article { flex: 1; position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 0 15px; }
.approval-timeline article:not(:last-child)::after { content: ''; position: absolute; left: 48px; right: -15px; top: 18px; height: 1px; background: var(--line); }
.approval-timeline article > span { width: 38px; height: 38px; flex: 0 0 auto; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); border-radius: 50%; font-weight: 700; }
.approval-timeline .is-complete > span { color: var(--primary); border-color: var(--accent); background: var(--accent); }
.approval-timeline .is-active > span { color: var(--paper); border-color: var(--primary); background: var(--primary); box-shadow: 0 0 0 5px rgba(18,60,56,.08); }
.approval-timeline h3 { margin: 8px 0 8px; font-size: .9rem; font-weight: 700; }
.approval-timeline p { font-size: .72rem; }
.approval-info { display: flex; gap: 60px; margin-top: 34px; padding: 40px; color: var(--paper); background: var(--primary); border-radius: var(--radius-large); }
.approval-info > div { flex: 1; }
.approval-info h2 { margin-bottom: 20px; font-size: 1.8rem; line-height: 1.15; font-weight: 700; }
.approval-info p { color: rgba(255,255,255,.62); }
.approval-info ul { width: 42%; display: flex; flex-direction: column; gap: 14px; }
.approval-info li { display: flex; align-items: flex-start; gap: 9px; color: rgba(255,255,255,.74); font-size: .82rem; }
.approval-info li .icon { color: var(--accent); }
.approval-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
@media (max-width: 850px) {
    .approval-timeline { flex-direction: column; gap: 24px; }
    .approval-timeline article::after { display: none; }
    .approval-info { flex-direction: column; gap: 30px; }
    .approval-info ul { width: 100%; }
}
@media (max-width: 600px) {
    .status-summary { align-items: flex-start; flex-wrap: wrap; }
    .status-summary > strong { margin-left: 74px; }
    .approval-actions .button { width: 100%; }
}