.stat-card .info,.event-date,.activity-time,.note-time{
 font-size:var(--small-font-size);
 color:var(--secondary);
}
#timelineModal{
 position:fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background:rgba(0,0,0,0.5);
 backdrop-filter:blur(6px);
 -webkit-backdrop-filter:blur(6px);
 z-index:2004;
 display:none;
 justify-content:center;
 align-items:flex-start;
 overflow-y:auto;
 padding:20px;
 scrollbar-width:none;
 -ms-overflow-style:none;
}
#timelineModal::-webkit-scrollbar{display:none;}
.timeline-wrap{
 width:100%;
 overflow-x:auto;
}
.timeline-grid{
 display:inline-block;
 min-width:100%;
 border:1px solid rgba(226,232,240,0.5);
 border-radius:12px;
 background:rgba(255,255,255,0.45);
 backdrop-filter:blur(12px) saturate(1.4);
 -webkit-backdrop-filter:blur(12px) saturate(1.4);
 box-shadow:0 4px 24px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
 overflow:hidden;
}
.tcol-timeline{text-align:center;min-width:80px;}
.tcol-timeline.mark-sent{background:#e6f0ff;color:#2f5fd1;font-weight:600;}
.tcol-timeline.mark-due{background:#fff0f0;color:#c0392b;font-weight:600;}
.tcol-timeline.mark-sent-due{background:#fff6e5;color:#aa6b00;font-weight:700;}
.activity-timeline{
 background:white;
 border:1px solid #e9ecef;
 border-radius:8px;
 overflow:hidden;
 flex:1;
 display:flex;
 flex-direction:column;
}
.activity-list{
 flex:1;
 overflow-y:auto;
 padding:8px 0;
}
.activity-item-modern{
 padding:12px 16px;
 border-bottom:1px solid #f8f9fa;
 display:flex;
 gap:12px;
 align-items:flex-start;
}
.activity-icon-modern{
 width:32px;
 height:32px;
 border-radius:50%;
 flex-shrink:0;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:var(--small-font-size);
 color:white;
}
.activity-icon-modern.creation{
 background:linear-gradient(135deg,#10b981,#059669);
}
.activity-icon-modern.note{
 background:linear-gradient(135deg,#f59e0b,#d97706);
}
.activity-icon-modern.compliance{
 background:linear-gradient(135deg,#8b5cf6,#7c3aed);
}
.activity-icon-modern.verification{
 background:linear-gradient(135deg,#06d6a0,#05b388);
}
.activity-icon-modern.payment{
 background:linear-gradient(135deg,#3b82f6,#1d4ed8);
}
.activity-content-modern{
 flex:1;
 min-width:0;
}
.activity-text{
 font-size:var(--base-font-size);
 color:var(--dark);
 line-height:1.4;
 margin-bottom:4px;
}
.activity-detail{
 color:var(--secondary);
 font-weight:normal;
}
.activity-author{
 color:var(--secondary);
 font-style:italic;
}
.no-activity{
 padding:40px 16px;
 text-align:center;
 color:var(--secondary);
 font-style:italic;
 font-size:var(--base-font-size);
}
.activity-item:hover,.note-item:hover{
 background:rgba(248,250,252,0.8);
}
.activity-item:not(:last-child){
 border-bottom:1px solid rgba(226,232,240,0.4);
}
.activity-time{
 font-size:0.75rem;
 color:#64748b;
 font-weight:500;
}
.activity-author{
 font-size:0.75rem;
 color:#64748b;
 font-style:italic;
}



/* ── Month Navigator (timelineMonthNav.js) ─────────────────── */
.mnav-host {
    display: grid;
    grid-template-columns: 36px 1fr 36px;
    align-items: center;
    gap: 6px;
    width: min(340px, 100%);
    user-select: none;
}
.mnav-btn {
    width: 36px; height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(148,163,184,0.5);
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #334155;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, opacity 0.15s;
    flex-shrink: 0;
}
.mnav-btn:hover:not(:disabled) { background: rgba(255,255,255,0.80); }
.mnav-btn:disabled { opacity: 0.35; cursor: default; }
.mnav-label-wrap {
    position: relative;
    overflow: hidden;
    height: 42px;
    border-radius: 10px;
    background: rgba(255,255,255,0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(148,163,184,0.4);
}
.mnav-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: 0.03em;
    white-space: nowrap;
    pointer-events: none;
}

/* ── Label slide animations (month name) ── */
@keyframes mnav-in-right  { from { transform: translateX(110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes mnav-out-left  { from { transform: translateX(0); opacity: 1; }    to { transform: translateX(-110%); opacity: 0; } }
@keyframes mnav-in-left   { from { transform: translateX(-110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes mnav-out-right { from { transform: translateX(0); opacity: 1; }    to { transform: translateX(110%); opacity: 0; } }
.mnav-label.mnav-in-right  { animation: mnav-in-right  0.40s cubic-bezier(0.22,1,0.36,1) both; }
.mnav-label.mnav-out-left  { animation: mnav-out-left  0.26s cubic-bezier(0.55,0,0.45,1) both; }
.mnav-label.mnav-in-left   { animation: mnav-in-left   0.40s cubic-bezier(0.22,1,0.36,1) both; }
.mnav-label.mnav-out-right { animation: mnav-out-right 0.26s cubic-bezier(0.55,0,0.45,1) both; }

/* ── Content panel slide animations (profile body) ── */
@keyframes mnav-content-out-left  { from { transform: translateX(0);   opacity: 1; } to { transform: translateX(-5%); opacity: 0; } }
@keyframes mnav-content-out-right { from { transform: translateX(0);   opacity: 1; } to { transform: translateX(5%);  opacity: 0; } }
@keyframes mnav-content-in-right  { from { transform: translateX(5%);  opacity: 0; } to { transform: translateX(0);   opacity: 1; } }
@keyframes mnav-content-in-left   { from { transform: translateX(-5%); opacity: 0; } to { transform: translateX(0);   opacity: 1; } }
.mnav-content-out-left  { animation: mnav-content-out-left  0.20s ease-in                    both; }
.mnav-content-out-right { animation: mnav-content-out-right 0.20s ease-in                    both; }
.mnav-content-in-right  { animation: mnav-content-in-right  0.40s cubic-bezier(0.22,1,0.36,1) both; }
.mnav-content-in-left   { animation: mnav-content-in-left   0.40s cubic-bezier(0.22,1,0.36,1) both; }

/* ── Maximised (card-expanded) nav overrides ────────────────── */
#placementDetailsCard.card-expanded .mnav-host {
    width: 100%;
    max-width: 480px;
    grid-template-columns: 52px 1fr 52px;
    gap: 12px;
}
#placementDetailsCard.card-expanded .mnav-btn {
    width: 52px;
    height: 52px;
    font-size: 28px;
    border-radius: 12px;
}
#placementDetailsCard.card-expanded .mnav-label-wrap {
    height: 56px;
    border-radius: 12px;
}
#placementDetailsCard.card-expanded .mnav-label {
    font-size: 22px;
    letter-spacing: 0.04em;
}