/* ═══════════════════════════════════════════════════════
   Program Builder — polished table-style form
   ═══════════════════════════════════════════════════════ */

/* Row accent colour palette (cycles every 5 rows) */
:root {
  --pb-c1: #6d28d9; /* violet   */
  --pb-c2: #0891b2; /* cyan     */
  --pb-c3: #059669; /* emerald  */
  --pb-c4: #d97706; /* amber    */
  --pb-c5: #db2777; /* pink     */
}

/* Outer card */
.pb-card {
    border: 1.5px solid #e0dcf5;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 16px rgba(66,50,194,.06);
}

/* Header bar */
.pb-header-row {
    display: grid;
    grid-template-columns: 28px 36px 110px 1fr 1fr 36px;
    align-items: center;
    gap: 0;
    background: linear-gradient(90deg, #f5f3ff 0%, #f0edff 100%);
    border-bottom: 1.5px solid #e0dcf5;
    padding: 9px 10px 9px 8px;
}
.pb-col-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #8b86b8;
    padding: 0 6px;
    white-space: nowrap;
}
.pb-col-label:first-child,
.pb-col-label:nth-child(2),
.pb-col-label:last-child { visibility: hidden; }

/* List */
.pb-list { display: flex; flex-direction: column; }

/* Each row */
.pb-row {
    display: grid;
    grid-template-columns: 28px 36px 110px 1fr 1fr 36px;
    align-items: center;
    gap: 0;
    padding: 6px 10px 6px 0;
    border-bottom: 1px solid #f0eeff;
    background: #fff;
    transition: background .14s;
    cursor: default;
    border-left: 4px solid transparent;
}
.pb-row:last-child { border-bottom: none; }
.pb-row:hover { background: #faf8ff !important; }
.pb-row.pb-dragging { opacity: .4; box-shadow: 0 6px 24px rgba(66,50,194,.18); }
.pb-row.pb-over { outline: 2px solid #4232c2; outline-offset: -2px; background: #eeeaff !important; }

/* ── Cycling left-border colours ── */
.pb-list .pb-row:nth-child(5n+1) { border-left-color: var(--pb-c1); background: #faf8ff; }
.pb-list .pb-row:nth-child(5n+2) { border-left-color: var(--pb-c2); background: #f0fafc; }
.pb-list .pb-row:nth-child(5n+3) { border-left-color: var(--pb-c3); background: #f0fdf8; }
.pb-list .pb-row:nth-child(5n+4) { border-left-color: var(--pb-c4); background: #fffbf0; }
.pb-list .pb-row:nth-child(5n+5) { border-left-color: var(--pb-c5); background: #fff0f8; }

/* ── Matching row-number badge colours ── */
.pb-list .pb-row:nth-child(5n+1) .pb-num { color: var(--pb-c1); background: #ede9fd; }
.pb-list .pb-row:nth-child(5n+2) .pb-num { color: var(--pb-c2); background: #e0f5fa; }
.pb-list .pb-row:nth-child(5n+3) .pb-num { color: var(--pb-c3); background: #d1fae9; }
.pb-list .pb-row:nth-child(5n+4) .pb-num { color: var(--pb-c4); background: #fef3c7; }
.pb-list .pb-row:nth-child(5n+5) .pb-num { color: var(--pb-c5); background: #fce7f3; }

/* ── Matching time-input colour per row ── */
.pb-list .pb-row:nth-child(5n+1) .pb-time { color: var(--pb-c1); }
.pb-list .pb-row:nth-child(5n+2) .pb-time { color: var(--pb-c2); }
.pb-list .pb-row:nth-child(5n+3) .pb-time { color: var(--pb-c3); }
.pb-list .pb-row:nth-child(5n+4) .pb-time { color: var(--pb-c4); }
.pb-list .pb-row:nth-child(5n+5) .pb-time { color: var(--pb-c5); }

/* Row number badge */
.pb-num {
    font-size: .68rem;
    font-weight: 800;
    text-align: center;
    width: 22px;
    height: 22px;
    line-height: 22px;
    border-radius: 50%;
    margin: 0 auto;
    user-select: none;
    flex-shrink: 0;
    transition: background .14s, color .14s;
}

/* Drag handle */
.pb-drag-handle {
    cursor: grab;
    color: #ccc8e8;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    border-radius: 6px;
    transition: color .14s, background .14s;
}
.pb-drag-handle:hover { color: #4232c2; background: #ede9fc; }
.pb-drag-handle:active { cursor: grabbing; }

/* Inputs — borderless inside the table */
.pb-time,
.pb-activity,
.pb-person {
    border: none;
    border-right: 1px solid #eceaf8;
    background: transparent;
    padding: 9px 10px;
    font-size: .875rem;
    font-family: inherit;
    color: #1a1635;
    width: 100%;
    outline: none;
    transition: background .14s;
}
.pb-person { border-right: none; }
.pb-time {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: .82rem;
    /* native time picker sizing */
    min-width: 0;
    padding-right: 4px;
}
/* style the native time picker to fit */
.pb-time::-webkit-calendar-picker-indicator {
    opacity: .4;
    cursor: pointer;
    padding: 0;
    margin-left: 2px;
    filter: invert(20%) sepia(50%) saturate(500%) hue-rotate(220deg);
}
.pb-time:focus,
.pb-activity:focus,
.pb-person:focus {
    background: rgba(66,50,194,.05);
    outline: none;
}
.pb-time::placeholder,
.pb-activity::placeholder,
.pb-person::placeholder {
    color: #ccc8e4;
    font-size: .82rem;
}

/* Remove button */
.pb-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: #d8d4ec;
    padding: 5px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: color .14s, background .14s, opacity .14s;
}
.pb-row:hover .pb-remove { opacity: 1; }
.pb-remove:hover { color: #dc3545; background: #fff0f0; }

/* Empty state */
.pb-empty {
    text-align: center;
    padding: 36px 20px;
    color: #b0accf;
    display: none;
    border-bottom: 1px solid #f0eeff;
    background: #fdfcff;
}
.pb-empty svg {
    display: block;
    margin: 0 auto 10px;
    opacity: .28;
    color: #6c63b8;
    stroke: #6c63b8;
}
.pb-empty p {
    margin: 0;
    font-size: .88rem;
    color: #a8a4c8;
    font-weight: 500;
}

/* Add button */
.pb-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    padding: 11px 20px;
    border: 1.5px dashed #c4bef0;
    border-radius: 12px;
    background: linear-gradient(135deg, #faf9ff 0%, #f3f0ff 100%);
    color: #4232c2;
    font-weight: 600;
    font-size: .875rem;
    font-family: inherit;
    cursor: pointer;
    transition: all .2s;
}
.pb-add-btn:hover {
    border-color: #4232c2;
    background: linear-gradient(135deg, #edeaff 0%, #e4dfff 100%);
    box-shadow: 0 3px 14px rgba(66,50,194,.13);
    transform: translateY(-1px);
}
.pb-add-btn:active { transform: translateY(0); box-shadow: none; }
.pb-add-btn svg { flex-shrink: 0; }

/* Responsive */
@media (max-width: 600px) {
    .pb-header-row,
    .pb-row { grid-template-columns: 28px 30px 90px 1fr 36px; }
    .pb-person { display: none; }
    .pb-col-label:nth-child(5) { display: none; }
}


/* ═══════════════════════════════════════════════════════
   Program Timeline — tribute page display
   ═══════════════════════════════════════════════════════ */

.tp-program-timeline { display: flex; flex-direction: column; gap: 0; }
.tp-program-item {
    display: flex; gap: 0; position: relative; padding-bottom: 22px;
}
.tp-program-item:last-child { padding-bottom: 0; }
.tp-program-item::after {
    content: ''; position: absolute;
    left: 59px; top: 20px; bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, rgba(66,50,194,.18), transparent);
}
.tp-program-item:last-child::after { display: none; }
.tp-time-col {
    width: 56px; flex-shrink: 0; padding-top: 4px; text-align: right;
    font-size: .75rem; font-weight: 700; color: #4232c2;
    letter-spacing: .02em; padding-right: 10px;
}
.tp-dot {
    flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%;
    margin-top: 5px; border: 2.5px solid #4232c2; background: #fff;
    position: relative; z-index: 1;
}
.tp-dot.status-completed { background: #4232c2; }
.tp-dot.status-current {
    background: #efb059; border-color: #efb059;
    box-shadow: 0 0 0 4px rgba(239,176,89,.25);
    animation: tp-pulse 1.8s infinite;
}
@keyframes tp-pulse {
    0%,100% { box-shadow: 0 0 0 4px rgba(239,176,89,.22); }
    50%      { box-shadow: 0 0 0 8px rgba(239,176,89,.08); }
}
.tp-content { flex: 1; padding-left: 14px; padding-top: 2px; }
.tp-activity { font-size: .95rem; font-weight: 600; color: #1a1635; }
.tp-person { font-size: .8rem; color: #7c72a8; margin-top: 2px; }
.tp-status-badge {
    display: inline-block; font-size: .65rem; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 100px; margin-left: 8px; vertical-align: middle;
}
.tp-status-badge.current   { background: #fef0d0; color: #b8760a; }
.tp-status-badge.completed { background: #e5f7ec; color: #138042; }

/* ═══════════════════════════════════════════════════════
   Programme Widget — live embedded display in themes
   ═══════════════════════════════════════════════════════ */

.prg-widget { position: relative; }

.prg-scroll {
    max-height: 380px;
    overflow-y: auto;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    padding: 4px 0 8px;
}
.prg-scroll::-webkit-scrollbar { width: 4px; }
.prg-scroll::-webkit-scrollbar-track { background: transparent; }
.prg-scroll::-webkit-scrollbar-thumb { background: rgba(100,80,200,.22); border-radius: 2px; }

/* Section card */
.prg-section {
    background: #faf9ff;
    border: 1px solid #e8e5f8;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 10px;
}
.prg-sec-hd {
    font-size: .63rem; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: #6d28d9;
    padding: 8px 14px;
    background: linear-gradient(90deg, #f5f3ff, #ede9fe);
    border-bottom: 1px solid #ddd6fe;
    display: flex; align-items: center; gap: 7px;
}
.prg-sec-hd::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: #7c3aed; flex-shrink: 0;
}

/* Unsectioned group */
.prg-nosec { margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px; }

/* Item row */
.prg-row {
    display: grid; grid-template-columns: 36px 1fr;
    gap: 8px; align-items: start; padding: 8px 12px;
}
.prg-section .prg-row { border-bottom: 1px solid #f0edff; padding: 8px 14px; }
.prg-section .prg-row:last-child { border-bottom: none; }
.prg-nosec .prg-row {
    background: #fff; border: 1px solid #e8e5f8; border-radius: 10px;
}

/* Dot column */
.prg-col-dot { display: flex; flex-direction: column; align-items: center; }
.prg-dot {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 700; flex-shrink: 0;
}
.prg-row--pending   .prg-dot { background: #f3f4f6; color: #9ca3af; border: 2px solid #e5e7eb; }
.prg-row--current   .prg-dot { background: #4f46e5; color: #fff; box-shadow: 0 0 0 4px rgba(79,70,229,.18); animation: prg-pulse 1.5s infinite; }
.prg-row--completed .prg-dot { background: #f0fdf4; color: #16a34a; border: 2px solid #bbf7d0; }
@keyframes prg-pulse { 0%,100%{box-shadow:0 0 0 4px rgba(79,70,229,.18)} 50%{box-shadow:0 0 0 8px rgba(79,70,229,.06)} }

.prg-line { width: 2px; background: #e5e7eb; flex: 1; min-height: 10px; margin-top: 2px; }
.prg-row--completed .prg-line { background: #bbf7d0; }

/* Content column */
.prg-col-body { padding-top: 3px; padding-bottom: 4px; min-width: 0; }
.prg-row--current .prg-col-body {
    background: #ede9fe; border-radius: 10px;
    padding: 8px 12px; margin-top: -1px;
}
.prg-act  { font-size: .88rem; font-weight: 600; color: #1a1830; line-height: 1.3; }
.prg-row--completed .prg-act { color: #9ca3af; }
.prg-row--current   .prg-act { color: #1e1b4b; }
.prg-person { font-size: .77rem; color: #6b7280; margin-top: 2px; }
.prg-row--current .prg-person { color: #4f46e5; }
.prg-time   { font-size: .69rem; color: #9ca3af; margin-top: 2px; }
.prg-row--current .prg-time   { color: #6366f1; }
.prg-now {
    display: inline-block; font-size: .58rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em;
    background: #fef0d0; color: #b8760a;
    padding: 2px 7px; border-radius: 100px; margin-left: 6px; vertical-align: middle;
}

.prg-plain { font-size: .87rem; line-height: 1.8; color: #374151; padding: 4px 2px; }
.prg-empty { font-size: .83rem; color: #9ca3af; font-style: italic; padding: 10px 4px; text-align: center; }