/* Traffic Pattern: period and site selectors, report tables with share bars, visits log. */

.tp-filter { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.tp-range { white-space: nowrap; }

.tp-report .ahp-card-header .btn-link { font-size: .8rem; }
.tp-table { font-size: .85rem; }
.tp-table thead th { font-weight: 600; color: var(--ahp-muted); border-bottom-width: 1px; background: transparent; }
.tp-table td, .tp-table th { padding: .35rem .75rem; vertical-align: middle; }
.tp-label { position: relative; max-width: 320px; }
.tp-label-text { position: relative; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-share {
    position: absolute; left: 0; top: 15%; bottom: 15%;
    background: color-mix(in srgb, var(--ahp-app) 14%, transparent);
    border-radius: 0 3px 3px 0;
}

.tp-kpi { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .75rem; }

.tp-live { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.tp-live-value { font-size: 1.8rem; font-weight: 700; line-height: 1; color: var(--ahp-app); }
.tp-live-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: #37b24d; margin-right: .35rem; animation: tp-pulse 1.6s infinite; }
@keyframes tp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

.tp-visit { border-bottom: 1px solid var(--ahp-border); padding: .7rem 1rem; }
.tp-visit:last-child { border-bottom: 0; }
.tp-visit-head { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; font-size: .85rem; }
.tp-visit-head .tp-when { font-weight: 600; min-width: 150px; }
.tp-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .5rem; border-radius: 999px; background: var(--bs-tertiary-bg); font-size: .78rem; white-space: nowrap; }
.tp-actions { list-style: none; margin: .5rem 0 0; padding: 0 0 0 .4rem; border-left: 2px solid var(--ahp-border); font-size: .82rem; }
.tp-actions li { padding: .15rem 0 .15rem .6rem; display: flex; gap: .5rem; }
.tp-actions li .bi { color: var(--ahp-app); }
.tp-actions .tp-goal .bi { color: #f59f00; }
.tp-url { overflow-wrap: anywhere; }

.tp-code { font-size: .78rem; background: var(--bs-tertiary-bg); }