/* ---------- Hedefler ---------- */
.gl-card { display: grid; gap: 10px; align-content: start; }
.gl-main { display: grid; gap: 8px; cursor: pointer; }
.gl-panel .gl-main { cursor: default; }
.gl-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gl-head b { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.gl-ic { font-size: 18px; }
.gl-nums b { font-size: 22px; }
.gl-bar { position: relative; overflow: visible; margin-top: 0; }
.gl-bar > i { border-radius: 99px; }
/* Where the plan line says the goal should be today. */
.gl-bar > s { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--text); opacity: .55; border-radius: 1px; }
.gl-behind .gl-bar > i, .gl-missed .gl-bar > i { background: var(--lose); }
.gl-done .gl-bar > i { background: var(--win); }
.tag.gl-done, .tag.gl-ahead { color: var(--win); border-color: color-mix(in srgb, var(--win) 45%, var(--line)); }
.tag.gl-behind, .tag.gl-missed { color: var(--lose); border-color: color-mix(in srgb, var(--lose) 45%, var(--line)); }
.tag.gl-on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.gl-count { display: flex; gap: 6px; align-items: center; }
.gl-count input { width: 90px; padding-left: 10px; }

.gl-panel { display: grid; gap: 14px; }
.gl-panel .frow, .gl-form .frow { display: flex; gap: 8px; flex-wrap: wrap; }
.gl-form select { padding-left: 10px; font: inherit; color: var(--text); }
.gl-form #gl-dates label { flex: 1; min-width: 140px; }
.gl-chart { width: 100%; height: 140px; display: block; overflow: visible; }
.gl-chart line, .gl-chart polyline { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.gl-line { stroke: var(--accent); }
.gl-plan { stroke: var(--muted); stroke-dasharray: 5 5; stroke-width: 1.5 !important; }
.gl-legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.gl-legend .gl-span { margin-left: auto; }
.gl-sw { display: inline-block; width: 14px; height: 3px; margin-right: 6px; vertical-align: middle; background: var(--accent); border-radius: 2px; }
.gl-sw.plan { background: repeating-linear-gradient(90deg, var(--muted) 0 4px, transparent 4px 7px); }
.gl-log { display: flex; gap: 10px; align-items: center; }
.gl-log span { flex: 1; }