/* ============================================================
   Hole Chain (WHIZZGOLF pace-of-play) modal
   Palette per WhizzGolf console guideline (2026-08-04).
   Reuses the shared .hcp-modal / .hcp-modal-overlay shell.
   ============================================================ */

.hc-modal-content {
    background: var(--bg-primary);
    color: var(--text-primary);
    max-width: 460px;
    width: 92%;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
    padding: 0;
}

/* Header + footer use the app's standard modal chrome (.modal-header /
   .action-buttons); no custom styles needed here. */

/* Body (scrolls; flex:1 keeps the bottom CLOSE button pinned) */
.hc-modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 10px 22px;
    background: var(--bg-primary);
    -webkit-overflow-scrolling: touch;
}
.hc-loading,
.hc-empty { text-align: center; color: var(--text-secondary); padding: 30px 0; }

/* Column header */
.hc-columns-header {
    display: grid;
    grid-template-columns: 1fr 64px 1fr;
    align-items: center;
    padding: 6px 4px 10px;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    text-transform: uppercase;
}
.hc-columns-header .hc-play { text-align: right; padding-right: 10px; }
.hc-columns-header .hc-node { text-align: center; }
.hc-columns-header .hc-end  { text-align: left;  padding-left: 10px; }

/* Rows */
.hc-chain { display: flex; flex-direction: column; }
.hc-row {
    display: grid;
    grid-template-columns: 1fr 64px 1fr;
    align-items: center;
    min-height: 66px;
}
.hc-row .hc-play {
    text-align: right; padding-right: 10px;
    display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
}
.hc-row .hc-end { text-align: left; padding-left: 10px; }

/* Node column: circle + split (up/down) connectors */
.hc-node {
    position: relative; height: 100%;
    display: flex; align-items: center; justify-content: center;
}
.hc-conn-up, .hc-conn-down {
    position: absolute; left: 50%; transform: translateX(-50%); width: 3px;
}
.hc-conn-up   { top: 0;    height: 50%; }
.hc-conn-down { bottom: 0; height: 50%; }
.hc-conn-green { background: #4CAF50; }
.hc-conn-grey  { background: var(--border-color); }

/* Circles */
.hc-circle {
    position: relative; z-index: 2;
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 20px; color: #fff;
}
.hc-played  { background: #4CAF50; }
.hc-future  { background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-secondary); }
.hc-current {
    background: #4CAF50;
    box-shadow: 0 0 0 3px var(--bg-primary), 0 0 0 6px #1CEF8C, 0 0 14px 2px rgba(28,239,140,0.7);
}

/* Tee row / dot */
.hc-tee-row { min-height: 46px; }
.hc-tee-dot {
    position: relative; z-index: 2;
    width: 14px; height: 14px; border-radius: 50%; background: #4CAF50;
}
.hc-tee-label { color: var(--text-secondary); font-style: italic; margin-right: 4px; }

/* Times */
.hc-time { font-size: 21px; font-weight: 700; }
.hc-actual { color: var(--text-primary); }
.hc-predicted { color: rgba(120,170,210,0.85); font-weight: 600; }

/* Deviation badge: + = behind (slower), - = ahead (faster) */
.hc-dev { font-size: 15px; font-weight: 700; }
.hc-behind { color: #ff6b6b; }
.hc-ahead  { color: #4CAF50; }

/* Starting-hole marker (points down onto the starting circle) */
.hc-start-marker {
    position: absolute; z-index: 3;
    top: 1px; left: 50%; transform: translateX(-50%);
    color: #f1c40f; font-size: 15px; line-height: 1;
}

/* Ultradrive badge on the circle */
.hc-ultra {
    position: absolute; z-index: 3;
    top: -5px; right: -7px;
    background: #f1c40f; color: #0d0d0d;
    font-size: 11px; font-weight: 800; line-height: 1;
    padding: 2px 3px; border-radius: 4px; letter-spacing: 0.3px;
}