/**
 * Developed by Mohammad Rameez Imdad (Rameez Scripts)
 * WhatsApp: https://wa.me/923224083545 (For Custom Projects)
 * YouTube: https://www.youtube.com/@rameezimdad (Subscribe for more!)
 *
 * Chevron pipeline skin — full-width, equal-split, color-coded stages (CRM style).
 * Shared app-wide in its own file on purpose: loads after styles.css and re-skins
 * every .pipeline without touching page JS. N stages = 100%/N width each.
 */

.pipeline {
    display: flex; flex-wrap: nowrap; gap: 0; width: 100%; margin-bottom: 16px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.pipeline::-webkit-scrollbar { display: none; }

.pipeline-stage {
    flex: 1 1 0; min-width: 0; margin-left: 0;
    position: relative; border: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 11px 14px 11px 24px; color: #fff;
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
    transition: filter .2s;
}
/* flat outer edges, arrow depth 14px */
.pipeline-stage:first-child {
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
    padding-left: 14px; border-radius: 10px 0 0 10px;
}
.pipeline-stage:last-child {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%);
    padding-right: 14px; border-radius: 0 10px 10px 0;
}
.pipeline-stage:only-child { clip-path: none; border-radius: 10px; }

.pipeline-stage:hover { filter: brightness(1.12); }
.pipeline-stage.is-active { filter: brightness(1.22); box-shadow: inset 0 0 0 200px rgba(255, 255, 255, .18); font-weight: 800; }

.pipeline-stage i { flex-shrink: 0; }
.ps-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-count { flex-shrink: 0; background: rgba(255, 255, 255, .25); border-radius: 10px; padding: 1px 8px; font-size: 11px; font-weight: 700; }

/* anchor stages (profile shell, card tabs) — kill the old gray hover text */
a.pipeline-stage, a.pipeline-stage:hover { color: #fff; }

/* stage colors — fixed 8-color cycle, same 135° gradient language as the bg-* set */
.pipeline-stage:nth-child(8n+1) { background: linear-gradient(135deg, var(--navy-primary, #001f3f), var(--navy-light, #003366)); }
.pipeline-stage:nth-child(8n+2) { background: linear-gradient(135deg, var(--navy-accent, #0074D9), #3393e0); }
.pipeline-stage:nth-child(8n+3) { background: linear-gradient(135deg, #117a8b, #17a2b8); }
.pipeline-stage:nth-child(8n+4) { background: linear-gradient(135deg, #2e8b46, var(--success, #34a853)); }
.pipeline-stage:nth-child(8n+5) { background: linear-gradient(135deg, #e0a800, var(--warning, #fbbc04)); }
.pipeline-stage:nth-child(8n+6) { background: linear-gradient(135deg, #5b2d8e, #6f42c1); }
.pipeline-stage:nth-child(8n+7) { background: linear-gradient(135deg, #ad2f5f, #d81b60); }
.pipeline-stage:nth-child(8n+8) { background: linear-gradient(135deg, #46586c, #5f7385); }

/* amber slot reads dark, everywhere including anchor hover */
.pipeline-stage:nth-child(8n+5), a.pipeline-stage:nth-child(8n+5):hover { color: #1f2d3d; }
.pipeline-stage:nth-child(8n+5) .ps-count { background: rgba(0, 0, 0, .14); }

@media (max-width: 992px) {
    .pipeline-stage { padding: 9px 12px 9px 20px; font-size: 10px; }
    .ps-count { font-size: 10px; padding: 1px 6px; }
}
/* phones: equal split is unusable at 5+ stages — fixed width + swipe (docs pattern) */
@media (max-width: 768px) {
    .pipeline-stage { flex: 0 0 auto; min-width: 104px; }
}