/* ══════════════════════════════════════════════════════════════════════════════
   ShiftHR — Goals
   ──────────────────────────────────────────────────────────────────────────────
   Goals page mode toggle, scope tabs, goal cards, cascade chain, key result
   rows, goal form, and KR form.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Mode Toggle ───────────────────────────────────────────────────────────── */
.goals-mode-toggle {
    display: inline-flex; border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md); overflow: hidden; margin-bottom: 16px;
}
.goals-mode-btn {
    padding: 8px 20px; border: none; background: none;
    font-size: .85rem; font-weight: 600; color: var(--color-neutral-500);
    cursor: pointer; transition: background .15s, color .15s;
}
.goals-mode-btn:hover { background: var(--color-neutral-50); }
.goals-mode-btn.active {
    background: var(--color-brand); color: #fff;
}

/* ── Scope Tabs ────────────────────────────────────────────────────────────── */
.goals-scope-tabs {
    display: flex; gap: 0;
    border-bottom: 2px solid var(--color-neutral-200);
    margin-bottom: 24px;
}
.goals-scope-tab {
    padding: 8px 16px; background: none; border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    font-size: .85rem; font-weight: 500;
    color: var(--color-neutral-500); cursor: pointer;
    transition: color .15s, border-color .15s;
}
.goals-scope-tab:hover { color: var(--color-neutral-700); }
.goals-scope-tab.active {
    color: var(--color-brand); border-bottom-color: var(--color-brand);
}

/* ── Goal Cards ────────────────────────────────────────────────────────────── */
.goal-list {
    display: flex; flex-direction: column; gap: 16px;
}
.goal-card {
    background: var(--color-surface); border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg); padding: 20px 24px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .15s;
}
.goal-card:hover { box-shadow: var(--shadow-md); }
.goal-card-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 8px;
}
.goal-card-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.goal-card-actions { display: flex; gap: 6px; }
.goal-card-title {
    font-size: 1.05rem; font-weight: 700; margin: 0 0 4px;
    color: var(--color-neutral-900);
}
.goal-card-desc {
    font-size: .85rem; color: var(--color-neutral-500);
    margin: 0 0 8px; line-height: 1.5;
}
.goal-card-meta {
    display: flex; gap: 16px; align-items: center;
    font-size: .8rem; margin-bottom: 4px;
}
.goal-card-owner { font-weight: 600; color: var(--color-brand); }
.goal-card-date { font-size: .78rem; }
.goal-card-children {
    font-size: .78rem; margin-top: 8px;
    padding-top: 8px; border-top: 1px solid var(--color-neutral-100);
}

/* ── Cascade Chain (Breadcrumb) ────────────────────────────────────────────── */
.cascade-chain {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: .78rem; color: var(--color-neutral-500);
    margin-top: 8px; padding-top: 8px;
    border-top: 1px solid var(--color-neutral-100);
}
.cascade-chain-item { display: flex; align-items: center; gap: 4px; }
.cascade-chain-sep { color: var(--color-neutral-300); font-weight: 700; }

/* ── Key Result Rows ───────────────────────────────────────────────────────── */
.kr-list {
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--color-neutral-100);
}
.kr-list-header {
    font-size: .8rem; font-weight: 700; color: var(--color-neutral-700);
    margin: 0 0 8px;
}
.kr-row {
    display: flex; flex-direction: column; gap: 4px;
    padding: 8px 0; border-bottom: 1px solid var(--color-neutral-50);
}
.kr-row:last-child { border-bottom: none; }
.kr-title {
    display: flex; align-items: center; gap: 6px;
    font-size: .85rem; font-weight: 500;
}
.kr-progress { display: flex; align-items: center; gap: 8px; }
.kr-progress-display {
    display: flex; align-items: center; gap: 8px; flex: 1;
    cursor: pointer;
}
.kr-values { font-size: .75rem; white-space: nowrap; }
.kr-edit-row {
    display: flex; align-items: center; gap: 8px;
}
.kr-edit-input { width: 80px; }
.kr-unit { font-size: .78rem; color: var(--color-neutral-500); white-space: nowrap; }

/* ── Goal Form ─────────────────────────────────────────────────────────────── */
.goal-form { margin-bottom: 24px; }

.kr-form-section {
    margin-top: 16px; padding-top: 16px;
    border-top: 1px solid var(--color-neutral-100);
}
.kr-form-section h5 {
    font-size: .9rem; font-weight: 700; margin: 0 0 4px;
}
.kr-form-row {
    display: flex; gap: 8px; align-items: center; margin-top: 8px;
}
.kr-form-row .form-input { flex: 1; }
.kr-form-target { max-width: 100px; }
.kr-form-unit { max-width: 120px; }