/* PM time tracking (time-tracking.js): timer bar, top-bar indicator + popover, capacity actuals. */
.tt-bar { background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: var(--radius, 12px); box-shadow: var(--shadow-sm); padding: 10px 14px; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.tt-bar.hidden { display: none; }
.tt-bar-head { display: flex; align-items: baseline; gap: 10px; font-size: .82rem; color: var(--text-2, #5c6b7e); }
.tt-bar-title { font-weight: 700; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; }
.tt-bar-status strong { color: var(--text); }
.tt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tt-chip { --tt-c: var(--accent, #1e4d6b); display: inline-flex; align-items: center; gap: 6px; max-width: 240px; font: 600 .8rem var(--font); color: var(--text); background: var(--bg, #f8fafc); border: 1px solid var(--border, #e2e8f0); border-radius: 999px; padding: 4px 12px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.tt-chip:hover:not(:disabled) { border-color: var(--tt-c); }
.tt-chip:disabled { opacity: .6; cursor: progress; }
.tt-chip.tt-general { border-style: dashed; }
.tt-chip.tt-on { background: var(--tt-c); border-color: var(--tt-c); color: #fff; border-style: solid; }
.tt-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-elapsed { font-variant-numeric: tabular-nums; font-weight: 700; }
.tt-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: tt-pulse 1.6s infinite; flex: none; }
.tt-chip.tt-on .tt-dot { background: #fff; }
@keyframes tt-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); } 70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.tt-error { margin: 0; font-size: .78rem; color: var(--danger, #dc2626); }

.tt-ind { position: relative; display: flex; align-items: center; margin-right: 8px; }
.tt-ind.hidden { display: none; }
.tt-ind-btn { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; font: 600 .78rem var(--font); color: var(--text); background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.tt-ind-btn:hover { border-color: var(--accent, #1e4d6b); }
.tt-ind-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; width: 300px; background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 45, 61, .18); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.tt-pop.hidden { display: none; }
.tt-pop-head { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2, #5c6b7e); }
.tt-pop .tt-stop { align-self: flex-start; }

/* capacity: planned + booked bars side by side */
.tt-bars { display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: min(76px, 86%); height: 100%; }
.tt-bars > .mt-bar { width: 50%; }
.tt-actual-bar { position: relative; }
.tt-actual-bar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .38) 0 3px, transparent 3px 7px); pointer-events: none; }
.mt-actual-total { font-weight: 600; color: var(--text-2, #5c6b7e); }
.tt-key { display: inline-block; width: 12px; height: 10px; border-radius: 2px; background: var(--text-3, #94a3b8); }
.tt-key-act { background: repeating-linear-gradient(135deg, var(--text-3, #94a3b8) 0 3px, #e2e8f0 3px 6px); }
.tt-actuals { margin-top: 10px; overflow-x: auto; }
.tt-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.tt-table th, .tt-table td { padding: 5px 8px; border-bottom: 1px solid var(--border, #e2e8f0); text-align: right; white-space: nowrap; }
.tt-table thead th { font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-2, #5c6b7e); }
.tt-table tbody th { text-align: left; font-weight: 600; max-width: 260px; }
.tt-table .tt-name { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.tt-table thead th:first-child { text-align: left; }
.tt-table .tt-a { font-weight: 700; } .tt-table .tt-p { color: var(--text-3, #94a3b8); margin-left: 3px; }
.tt-table .tt-total { background: var(--bg, #f8fafc); }
.tt-tip { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border, #e2e8f0); }